Added most of the functionality for the add song modal.

app/client/scripts/events.js

@@ -1,4 +1,12 @@
 var feedbackData;
+function gup( name, url ) {
+    if (!url) url = location.href;
+    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
+    var regexS = "[\\?&]"+name+"=([^&#]*)";
+    var regex = new RegExp( regexS );
+    var results = regex.exec( url );
+    return results == null ? null : results[1];
+}
 
 function getSpotifyInfo(title, cb, artist) {
     var q = "";
@@ -929,9 +937,10 @@ Template.news.events({
 });
 
 Template.room.events({
-    "click #youtube-playlist-button": function () {
+    "click #import-playlist-button": function () {
         if (!Session.get("importingPlaylist")) {
-            var playlist_link = $("#youtube-playlist-input").val();
+            Session.set("songResults", []);
+            var playlist_link = $("#playlist-url").val();
             var playlist_id = gup("list", playlist_link);
             var ytImportQueue = [];
             var totalVideos = 0;
@@ -941,16 +950,12 @@ Template.room.events({
             var ranOnce = false;
 
             Session.set("importingPlaylist", true);
-            $("#youtube-playlist-button").attr("disabled", "");
-            $("#youtube-playlist-button").addClass("disabled");
-            $("#youtube-playlist-input").attr("disabled", "");
-            $("#youtube-playlist-input").addClass("disabled");
-            $("#playlist-import-queue").empty();
-            $("#playlist-import-queue").hide();
-            $("#add-youtube-playlist").addClass("hidden-2");
-            $("#import-progress").attr("aria-valuenow", 0);
+            $("#import-playlist-button").attr("disabled", "");
+            $("#import-playlist-button").addClass("disabled");
+            $("#playlist-url").attr("disabled", "");
+            $("#playlist-url").addClass("disabled");
+
             $("#import-progress").css({width: "0%"});
-            $("#import-progress").text("0%");
 
             function makeAPICall(playlist_id, nextPageToken) {
                 if (nextPageToken !== undefined) {
@@ -984,24 +989,9 @@ Template.room.events({
                                     }, {songs: {$elemMatch: {id: item.snippet.resourceId.videoId}}}).count() !== 0) {
                                     videosInQueue++;
                                 } else {
-                                    $("#playlist-import-queue").append(
-                                        "<div class='youtube-import-queue-item'>" +
-                                        "<img src='" + item.snippet.thumbnails.medium.url + "' class='song-result-thumbnail'/>" +
-                                        "<div>" +
-                                        "<span class='song-result-title'>" + item.snippet.title + "</span>" +
-                                        "<span class='song-result-channel'>" + item.snippet.channelTitle + "</span>" +
-                                        "</div>" +
-                                        "<i class='fa fa-times remove-import-song'></i>" +
-                                        "</div>"
-                                    );
                                     var percentage = ytImportQueue.length / (totalVideos - videosInvalid) * 100;
-                                    $("#import-progress").attr("aria-valuenow", percentage.toFixed(2));
                                     $("#import-progress").css({width: percentage + "%"});
-                                    $("#import-progress").text(percentage.toFixed(1) + "%");
-                                    ytImportQueue.push({
-                                        title: item.snippet.title,
-                                        id: item.snippet.resourceId.videoId
-                                    });
+                                    ytImportQueue.push({title: item.snippet.title, artist: item.snippet.channelTitle, id: item.id.videoId, image: item.snippet.thumbnails.medium.url});
                                 }
                             } else {
                                 videosInvalid++;
@@ -1010,7 +1000,7 @@ Template.room.events({
                         if (nextToken !== undefined) {
                             makeAPICall(playlist_id, nextToken);
                         } else {
-                            $("#playlist-import-queue > div > i").click(function () {
+                            /*$("#playlist-import-queue > div > i").click(function () {
                                 var title = $(this).parent().find("div > .song-result-title").text();
                                 for (var i in ytImportQueue) {
                                     if (ytImportQueue[i].title === title) {
@@ -1019,18 +1009,15 @@ Template.room.events({
                                 }
                                 $(this).parent().remove();
                                 Session.set("YTImportQueue", ytImportQueue);
-                            });
+                            });*/
                             Session.set("importingPlaylist", false);
-                            $("#import-progress").attr("aria-valuenow", 100);
                             $("#import-progress").css({width: "100%"});
-                            $("#import-progress").text("100%");
-                            $("#youtube-playlist-button").removeAttr("disabled");
-                            $("#youtube-playlist-button").removeClass("disabled");
-                            $("#youtube-playlist-input").removeAttr("disabled");
-                            $("#youtube-playlist-input").removeClass("disabled");
-                            $("#playlist-import-queue").show();
-                            $("#add-youtube-playlist").removeClass("hidden-2");
+                            $("#import-playlist-button").removeAttr("disabled");
+                            $("#import-playlist-button").removeClass("disabled");
+                            $("#playlist-url").removeAttr("disabled");
+                            $("#playlist-url").removeClass("disabled");
                             Session.set("YTImportQueue", ytImportQueue);
+                            Session.set("songResults", ytImportQueue);
                         }
                     }
                 })
@@ -1039,21 +1026,19 @@ Template.room.events({
             makeAPICall(playlist_id);
         }
     },
-    "click #add-youtube-playlist": function () {
+    "click #confirm-import": function () {
         var YTImportQueue = Session.get("YTImportQueue");
-        $("#youtube-playlist-button").attr("disabled", "");
-        $("#youtube-playlist-button").addClass("disabled");
-        $("#youtube-playlist-input").attr("disabled", "");
-        $("#youtube-playlist-input").addClass("disabled");
-        $("#import-progress").attr("aria-valuenow", 0);
+        $("#import-playlist-button").attr("disabled", "");
+        $("#import-playlist-button").addClass("disabled");
+        $("#playlist-url").attr("disabled", "");
+        $("#playlist-url").addClass("disabled");
         $("#import-progress").css({width: "0%"});
-        $("#import-progress").text("0%");
         var failed = 0;
         var success = 0;
         var processed = 0;
         var total = YTImportQueue.length;
         YTImportQueue.forEach(function (song) {
-            var songData = {type: "YouTube", id: song.id, title: song.title, artist: "", img: ""};
+            var songData = {type: "YouTube", id: song.id, title: song.title, artist: "", img: "", genres: [Session.get("type")]};
             Meteor.call("addSongToQueue", songData, function (err, res) {
                 if (err) {
                     console.log(err);
@@ -1063,11 +1048,15 @@ Template.room.events({
                 }
                 processed++;
                 var percentage = processed / total * 100;
-                $("#import-progress").attr("aria-valuenow", percentage.toFixed(2));
                 $("#import-progress").css({width: percentage + "%"});
-                $("#import-progress").text(percentage.toFixed(1) + "%");
             });
         });
+        $("#import-playlist-button").removeAttr("disabled");
+        $("#import-playlist-button").removeClass("disabled");
+        $("#playlist-url").removeAttr("disabled", "");
+        $("#playlist-url").removeClass("disabled");
+        Session.set("songResults", []);
+        Session.set("YTImportQueue", [])
     },
     "click #chat-tab": function () {
         $("#chat-tab").removeClass("unread-messages");
@@ -1225,7 +1214,7 @@ Template.room.events({
     },
     "click #search-song": function () {
         var songs = [];
-        $("#song-results").empty();
+        Session.set("songResults", songs);
         $.ajax({
             type: "GET",
             url: "https://www.googleapis.com/youtube/v3/search?part=snippet&q=" + $("#song-input").val() + "&key=AIzaSyAgBdacEWrHCHVPPM4k-AFM7uXg-Q__YXY",
@@ -1234,18 +1223,10 @@ Template.room.events({
             success: function (data) {
                 for (var i in data.items) {
                     var item = data.items[i];
-                    $("#song-results").append(
-                        "<div>" +
-                        "<img src='" + item.snippet.thumbnails.medium.url + "' class='song-result-thumbnail'/>" +
-                        "<div>" +
-                        "<span class='song-result-title'>" + item.snippet.title + "</span>" +
-                        "<span class='song-result-channel'>" + item.snippet.channelTitle + "</span>" +
-                        "</div>" +
-                        "</div>"
-                    );
-                    songs.push({title: item.snippet.title, id: item.id.videoId});
+                    songs.push({title: item.snippet.title, artist: item.snippet.channelTitle, id: item.id.videoId, image: item.snippet.thumbnails.medium.url});
                 }
-                $("#song-results > div").click(function () {
+                Session.set("songResults", songs);
+                /*$("#song-results > div").click(function () {
                     $("#search-info").hide();
                     $("#add-info").show();
                     var title = $(this).find("div > .song-result-title").text();
@@ -1272,7 +1253,7 @@ Template.room.events({
                             });
                         }
                     }
-                })
+                })*/
             }
         })
     },
@@ -1330,14 +1311,8 @@ Template.room.events({
         });
     },
     "change #si_or_pl": function () {
-        if ($("#select_playlist").is(':selected')) {
-            $("#search-info").hide();
-            $("#playlist-import").show();
-        }
-        if ($("#select_single").is(':selected')) {
-            $("#search-info").show();
-            $("#playlist-import").hide();
-        }
+        Session.set("songResults", []);
+        Session.set("si_or_pl", $("#si_or_pl").val());
     },
     "click #close-modal-a": function () {
         $("#select_single").attr("selected", true);

app/client/scripts/helpers.js

@@ -241,8 +241,30 @@ Template.manageStation.helpers({
 });
 
 Template.room.helpers({
+    singleVideoResults: function () {
+        return Session.get("songResults");
+    },
+    singleVideoResultsActive: function() {
+        var songs = Session.get("songResults");
+        if (songs !== undefined && songs.length > 0) {
+            return true;
+        } else {
+            return false;
+        }
+    },
+    importPlaylistVideos: function () {
+        return Session.get("songResults");
+    },
+    playlistImportVideosActive: function() {
+        var songs = Session.get("songResults");
+        if (songs !== undefined && songs.length > 0) {
+            return true;
+        } else {
+            return false;
+        }
+    },
     singleVideo: function () {
-        return true;
+        return Session.get("si_or_pl") === "singleVideo";
     },
     chat: function () {
         Meteor.setTimeout(function () {

app/client/scripts/onCreated.js

@@ -135,6 +135,7 @@ Template.room.onCreated(function () {
     Session.set("reportAudio", false);
     Session.set("reportAlbumart", false);
     Session.set("reportOther", false);
+    Session.set("si_or_pl", "singleVideo");
     var parts = location.href.split('/');
     var id = parts.pop();
     var type = id.toLowerCase();

app/client/stylesheets/app.css

@@ -211,7 +211,6 @@ textarea{
   margin: 0;
   display: none;
   min-width: 300px; /* Changed this to accomodate content width */
-  height: 100vh;
 	margin-left: -1px; /* Add this to keep dropdown in line with edge of navbar */
   overflow: hidden; /* Changed this from overflow-y:auto; to overflow:hidden; */
   opacity: 0;

app/client/templates/room.html

@@ -6,20 +6,27 @@
                 <div class="nav-wrapper teal accent-4">
                     <ul class="left hide-on-med-and-down">
                         <li><a href="/"><i class="material-icons">home</i></a></li>
-                        <li><a href="#add_song_modal" id="add-song-button"><i class="material-icons">playlist_add</i></a></li>
+                        <li><a href="#add_song_modal" id="add-song-button"><i
+                                class="material-icons">playlist_add</i></a></li>
                         <li><a href="#bug_report_modal"><i class="material-icons">bug_report</i></a></li>
                         <li><a href="#vote_to_skip" id="skip_vote"><i class="material-icons">skip_next</i></a></li>
                     </ul>
                     <span class="brand-logo center">{{type}}</span>
                     <ul class="right hide-on-med-and-down">
                         <li><a href="#"><i class="material-icons">queue_music</i></a></li>
-                        <li><a href="#" data-activates="chat" class="dropdown-button"><i class="material-icons">chat</i></a></li>
+                        <li><a href="#" data-activates="chat" class="dropdown-button"><i class="material-icons">chat</i></a>
+                        </li>
                     </ul>
                     <div id='chat' class='dropdown-content right'>
-                      <ul id="chat-ul">
-                                {{#each chat}}
-                                    {{#emojione}}
-                                        <li class="chat-message"><small class="rank-{{this.rawrank}}">{{this.rank}}</small> <a style="text-decoration: none" href="/u/{{this.username}}" target="_blank"><b class="bold">{{this.username}}</b></a> <span title="{{time}}" style="float: right;">{{rtime time}}</span> <br/>
+                        <ul id="chat-ul">
+                            {{#each chat}}
+                                {{#emojione}}
+                                    <li class="chat-message">
+                                        <small class="rank-{{this.rawrank}}">{{this.rank}}</small>
+                                        <a style="text-decoration: none" href="/u/{{this.username}}" target="_blank"><b
+                                                class="bold">{{this.username}}</b></a> <span title="{{time}}"
+                                                                                             style="float: right;">{{rtime time}}</span>
+                                        <br/>
                                         {{#if this.isMentioned}}
                                             {{#if this.curUserMention}}
                                                 <span style="background-color: lightblue">{{this.message}}</span>
@@ -29,19 +36,23 @@
                                         {{else}}
                                             {{this.message}}
                                         {{/if}}
-                                        </li>
-                                    {{/emojione}}
-                                    <hr>
-                                {{/each}}
-                            </ul>
-                            <div id="chat-input-div">
-                                {{#if currentUser}}
-                                    <textarea id="chat-input" placeholder="Type a message..."></textarea>
-                                {{else}}
-                                    <input id="chat-input" placeholder="Please register and login to chat." disabled>
-                                {{/if}}
-                                <div id="submit"><button class="btn btn-primary btn-block">Submit<i id="submit-message" class="fa fa-paper-plane-o"></i></button></div>
+                                    </li>
+                                {{/emojione}}
+                                <hr>
+                            {{/each}}
+                        </ul>
+                        <div id="chat-input-div">
+                            {{#if currentUser}}
+                                <textarea id="chat-input" placeholder="Type a message..."></textarea>
+                            {{else}}
+                                <input id="chat-input" placeholder="Please register and login to chat." disabled>
+                            {{/if}}
+                            <div id="submit">
+                                <button class="btn btn-primary btn-block">Submit<i id="submit-message"
+                                                                                   class="fa fa-paper-plane-o"></i>
+                                </button>
                             </div>
+                        </div>
                     </div>
                 </div>
             </nav>
@@ -59,87 +70,137 @@
                         <div class="row">
                             <div class="col s12 m12 l8">
                                 <h3>{{{title}}} - {{{artist}}}</h3>
-                                <h4 id="time-display"><span id="time-elapsed"></span> / <span id="time-total"></span></h4>
+                                <h4 id="time-display"><span id="time-elapsed"></span> / <span id="time-total"></span>
+                                </h4>
                                 <div class="row">
-                                  <form action="#" class="left col s4 m4 l4">
-                                      <p class="range-field" style="margin-top: 0">
-                                          <input type="range" id="volume_slider" min="0" max="100" />
-                                      </p>
-                                  </form>
-                                  <div class="right col s4 m2 l2">
-                                    <ul>
-                                      <li class="left"><i id="thumbs_up" class="material-icons">thumb_up</i></li>
-                                      <li class="right"><i id="thumbs_down" class="material-icons">thumb_down</i></li>
-                                    </ul>
-                                  </div>
+                                    <form action="#" class="left col s4 m4 l4">
+                                        <p class="range-field" style="margin-top: 0">
+                                            <input type="range" id="volume_slider" min="0" max="100"/>
+                                        </p>
+                                    </form>
+                                    <div class="right col s4 m2 l2">
+                                        <ul>
+                                            <li class="left"><i id="thumbs_up" class="material-icons">thumb_up</i></li>
+                                            <li class="right"><i id="thumbs_down" class="material-icons">thumb_down</i>
+                                            </li>
+                                        </ul>
+                                    </div>
                                 </div>
                                 <div class="seeker-bar-container white" id="preview-progress">
                                     <div class="seeker-bar teal" style="width: 0%"></div>
                                 </div>
                             </div>
-                            <img alt="Not loading" class="responsive-img song-img col s12 m12 l4" onError="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'" id="song-img"/>
+                            <img alt="Not loading" class="responsive-img song-img col s12 m12 l4"
+                                 onError="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'"
+                                 id="song-img"/>
                         </div>
                     </div>
                 </div>
             </div>
             <div id="add_song_modal" class="modal">
-              <div class="center modal-content container">
-                <div class="row">
-                  <form class="black-text" id="search-info">
-                    <div class="row">
-                      <div class="input-field">
-                        <select>
-                          <option value="" disabled selected>Select import type</option>
-                          <option value="singleSong">Single Song</option>
-                          <option value="importPlaylist">Import Playlist</option>
-                        </select>
-                      </div>
-                    </div>
+                <div class="modal-content container">
                     <div class="row">
-                      <div class="input-field">
-                        <input id="song-input" type="text" class="validate">
-                        <label for="search_for_song">Search for song</label>
-                      </div>
-                    </div>
-                    <div class="row">
-                      <a class="waves-effect waves-light btn" id="search-song"><i class="material-icons left">search</i>Search</a>
-                    </div>
-                  </form>
-                  <div id="song-results"></div>
-                </div>
-                <div class="row">
-                  <form class="black-text hide" id="add-info">
-                    <div class="row">
-                      <div class="input-field">
-                        <input id="song-id" type="text" class="validate">
-                        <label for="song-id">Song ID</label>
-                      </div>
+                        <form class="black-text" id="search-info">
+                            <div class="row">
+                                <div class="input-field">
+                                    <select id="si_or_pl">
+                                        <option value="singleVideo" selected>Single Song</option>
+                                        <option value="importPlaylist">Import Playlist</option>
+                                        <label>Import Type</label>
+                                    </select>
+                                </div>
+                            </div>
+                            {{#if singleVideo}}
+                            <div class="row" id="single-video">
+                                <div class="input-field">
+                                    <input id="song-input" type="text" class="validate">
+                                    <label for="search_for_song">Search for song</label>
+                                </div>
+                                <a class="waves-effect waves-light btn" id="search-song"><i class="material-icons left">search</i>Search</a>
+                                {{#if singleVideoResultsActive}}
+                                <div id="single-video-results">
+                                    <ul class="collection teal-text">
+                                        {{#each result in singleVideoResults}}
+                                        <li class="collection-item avatar youtube-search-result-li">
+                                            <img src="{{result.image}}" onerror="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'" alt="" class="video-import-thumbnail">
+                                            <span class="title video-import-text">{{result.title}}</span>
+                                            <p class="video-import-text">{{result.artist}} <br>
+                                                <a href="https://youtube.com/watch?v={{result.id}}" target="_blank">View Video In YouTube</a>
+                                            </p>
+                                            <a href="#!" class="secondary-content" id="addSong" data-result="{{id}}"><i class="material-icons">add</i></a>
+                                        </li>
+                                        {{/each}}
+                                    </ul>
+                                </div>
+                                {{/if}}
+                            </div>
+                            {{else}}
+                            <div class="row" id="import-playlist">
+                                <div class="input-field">
+                                    <input id="playlist-url" type="text" class="validate">
+                                    <label for="search_for_song">Playlist URL</label>
+                                </div>
+                                <div class="progress">
+                                    <div class="determinate" id="import-progress" style="width: 0%"></div>
+                                </div>
+                                <a class="waves-effect waves-light btn" id="import-playlist-button">Import Playlist</a>
+                                {{#if playlistImportVideosActive}}
+                                    <a class="waves-effect waves-light btn" id="confirm-import">Confirm selection and add songs to queue</a>
+
+                                    <div id="import-playlist-results">
+                                        <ul class="collection teal-text">
+                                            {{#each result in importPlaylistVideos}}
+                                                <li class="collection-item avatar youtube-search-result-li">
+                                                    <img src="{{result.image}}" onerror="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'" alt="" class="video-import-thumbnail">
+                                                    <span class="title video-import-text">{{result.title}}</span>
+                                                    <p class="video-import-text">{{result.artist}} <br>
+                                                        <a href="https://youtube.com/watch?v={{result.id}}" target="_blank">View Video In YouTube</a>
+                                                    </p>
+                                                    <a href="#!" class="secondary-content" id="removeSong" data-result="{{id}}"><i class="material-icons">remove</i></a>
+                                                </li>
+                                            {{/each}}
+                                        </ul>
+                                    </div>
+                                {{/if}}
+                            </div>
+                            {{/if}}
+                        </form>
+                        <div id="song-results"></div>
                     </div>
                     <div class="row">
-                      <a class="waves-effect waves-light btn" id="add-song-button"><i class="material-icons left">playlist_add</i>Request Song</a>
+                        <form class="black-text hide" id="add-info">
+                            <div class="row">
+                                <div class="input-field">
+                                    <input id="song-id" type="text" class="validate">
+                                    <label for="song-id">Song ID</label>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <a class="waves-effect waves-light btn" id="add-song-button"><i
+                                        class="material-icons left">playlist_add</i>Request Song</a>
+                            </div>
+                        </form>
                     </div>
-                  </form>
                 </div>
-              </div>
 
-              <div class="divider"></div>
-              <div class="modal-footer">
-                <a href="#!" class="modal-action modal-close waves-effect btn">Close</a>
-              </div>
+                <div class="divider"></div>
+                <div class="modal-footer">
+                    <a href="#!" class="modal-action modal-close waves-effect btn">Close</a>
+                </div>
             </div>
         </main>
         <script>
-          $("#add-song-button").leanModal({
-            dismissible: true,
-            opacity: .5,
-            in_duration: 500,
-            out_duration: 200
-          });
-          $(".dropdown-button").dropdown({
-            belowOrigin: true,
-            alignment: 'right'
-          });
-          $('select').material_select();
+            $("#add-song-button").leanModal({
+                dismissible: true,
+                opacity: .5,
+                in_duration: 500,
+                out_duration: 200
+            });
+            $(".dropdown-button").dropdown({
+                belowOrigin: true,
+                alignment: 'right'
+            });
+            $('select').material_select();
         </script>
     {{/if}}
 </template>