Did a lot more work on adding songs/importing playlists. Added adding/removing of songs, added adding of single songs and editing their info.

app/client/scripts/events.js

@@ -937,10 +937,52 @@ Template.news.events({
 });
 
 Template.room.events({
-    "click #addSong": function(e) {
-        console.log("Clicked addSong!");
+    "click #return-button": function() {
+        Session.set("editingSong", false);
+    },
+    "click #removeSong": function(e) {
         var id = $(e.target).data("result");
+        var songs = Session.get("songResults");
+        var currentSong;
         console.log(id);
+        songs = songs.filter(function(song) {
+            return id !== song.id;
+        });
+        console.log(songs);
+        Session.set("songResults", []);
+        Session.set("songResults", songs);
+    },
+    "click #addSong": function(e) {
+        var id = $(e.target).data("result");
+        var songs = Session.get("songResults");
+        var currentSong;
+        songs.forEach(function(song) {
+            console.log(song.id === id);
+            if (song.id === id) {
+                currentSong = song;
+            }
+        });
+        Session.set("editingSong", true);
+        console.log(currentSong);
+        var title = currentSong.title;
+        var artist = currentSong.artist;
+        var img = currentSong.img;
+        getSpotifyInfo(title.replace(/\[.*\]/g, ""), function (data) {
+            if (data.tracks.items.length > 0) {
+                title = data.tracks.items[0].name;
+                var artists = [];
+                img = data.tracks.items[0].album.images[2].url;
+                data.tracks.items[0].artists.forEach(function (artist) {
+                    artists.push(artist.name);
+                });
+                artist = artists.join(", ");
+                $("#title").val(title).change();
+                $("#artist").val(artist).change();
+                $("#img").val(img).change();
+                $("#id").val(id).change();
+                $("#genres").val(null).change();
+            }
+        });
     },
     "click #import-playlist-button": function () {
         if (!Session.get("importingPlaylist")) {
@@ -996,7 +1038,7 @@ Template.room.events({
                                 } else {
                                     var percentage = ytImportQueue.length / (totalVideos - videosInvalid) * 100;
                                     $("#import-progress").css({width: percentage + "%"});
-                                    ytImportQueue.push({title: item.snippet.title, artist: item.snippet.channelTitle, id: item.id.videoId, image: item.snippet.thumbnails.medium.url});
+                                    ytImportQueue.push({title: item.snippet.title, artist: item.snippet.channelTitle, id: item.snippet.resourceId.videoId, image: item.snippet.thumbnails.medium.url});
                                 }
                             } else {
                                 videosInvalid++;
@@ -1024,6 +1066,14 @@ Template.room.events({
                             Session.set("YTImportQueue", ytImportQueue);
                             Session.set("songResults", ytImportQueue);
                         }
+                    },
+                    error: function() {
+                        Session.set("importingPlaylist", false);
+                        $("#import-progress").css({width: "0%"});
+                        $("#import-playlist-button").removeAttr("disabled");
+                        $("#import-playlist-button").removeClass("disabled");
+                        $("#playlist-url").removeAttr("disabled");
+                        $("#playlist-url").removeClass("disabled");
                     }
                 })
             }
@@ -1170,36 +1220,28 @@ Template.room.events({
         var title = $("#title").val();
         var artist = $("#artist").val();
         var img = $("#img").val();
-        var songData = {type: type, id: id, title: title, artist: artist, img: img};
-        if (Playlists.find({
-                type: genre,
-                "songs.id": songData.id
-            }, {songs: {$elemMatch: {id: songData.id}}}).count() !== 0) {
-            $("<div class='alert alert-danger alert-dismissible' role='alert' style='margin-bottom: 0'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'><i class='fa fa-times'></i></span></button><strong>Song not added.</strong> This song is already in the playlist.</div>").prependTo($(".landing")).delay(7000).fadeOut(1000, function () {
-                $(this).remove();
-            });
-        } else if (Queues.find({
-                type: genre,
-                "songs.id": songData.id
-            }, {songs: {$elemMatch: {id: songData.id}}}).count() !== 0) {
-            $("<div class='alert alert-danger alert-dismissible' role='alert' style='margin-bottom: 0'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'><i class='fa fa-times'></i></span></button><strong>Song not added.</strong> This song has already been requested.</div>").prependTo($(".landing")).delay(7000).fadeOut(1000, function () {
-                $(this).remove();
-            });
+        var genres = $("#genres").val() || [];
+        var songData = {type: type, id: id, title: title, artist: artist, img: img, genres: genres};
+        if (Songs.find({"id": songData.id}).count() > 0) {
+            var $toastContent = $('<span><strong>Song not added.</strong> This song has already been added.</span>');
+            Materialize.toast($toastContent, 8000);
+        } else if (Queues.find({"id": songData.id}).count() > 0) {
+            var $toastContent = $('<span><strong>Song not added.</strong> This song has already been requested.</span>');
+            Materialize.toast($toastContent, 8000);
         } else {
             Meteor.call("addSongToQueue", songData, function (err, res) {
                 console.log(err, res);
                 if (err) {
-                    $("<div class='alert alert-danger alert-dismissible' role='alert' style='margin-bottom: 0'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'><i class='fa fa-times'></i></span></button><strong>Song not added.</strong> Something went wrong.</div>").prependTo($(".landing")).delay(7000).fadeOut(1000, function () {
-                        $(this).remove();
-                    });
+                    var $toastContent = $('<span><strong>Song not added.</strong> ' + err.reason + '</span>');
+                    Materialize.toast($toastContent, 8000);
                 } else {
-                    $("<div class='alert alert-success alert-dismissible' role='alert' style='margin-bottom: 0'><button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'><i class='fa fa-times'></i></span></button><strong>Song added.</strong> Your song has been added to the queue.</div>").prependTo($(".landing")).delay(7000).fadeOut(1000, function () {
-                        $(this).remove();
-                    });
+                    var $toastContent = $('<span><strong>Song added.</strong> Your song has succesfully been added to the queue.</span>');
+                    Materialize.toast($toastContent, 8000);
+                    $('#add_song_modal').closeModal();
+                    Session.set("editingSong", false);
                 }
             });
         }
-        $("#close-modal-a").click();
     },
     "click #toggle-video": function (e) {
         e.preventDefault();
@@ -1286,12 +1328,12 @@ Template.room.events({
         Meteor.call("shufflePlaylist", type);
     },
     "change input": function (e) {
-        if (e.target && e.target.id) {
+        /*if (e.target && e.target.id) {
             var partsOfId = e.target.id.split("-");
             partsOfId[1] = partsOfId[1].charAt(0).toUpperCase() + partsOfId[1].slice(1);
             var camelCase = partsOfId.join("");
             Session.set(camelCase, e.target.checked);
-        }
+        }*/
     },
     "click #report-song-button": function () {
         var room = Session.get("type");

app/client/scripts/helpers.js

@@ -241,6 +241,9 @@ Template.manageStation.helpers({
 });
 
 Template.room.helpers({
+    editingSong: function() {
+        return Session.get("editingSong");
+    },
     singleVideoResults: function () {
         return Session.get("songResults");
     },

app/client/scripts/onCreated.js

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

app/client/templates/room.html

@@ -6,7 +6,7 @@
                 <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
+                        <li><a href="#add_song_modal" id="add-song-modal-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>
@@ -111,29 +111,68 @@
                                 </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="{{result.id}}"><i class="material-icons" data-result="{{result.id}}">add</i></a>
-                                        </li>
-                                        {{/each}}
-                                    </ul>
-                                </div>
+                                {{#if editingSong}}
+                                    <div class="row">
+                                        <button type="button" id="return-button" style="margin-bottom: 20px;" class="btn btn-small col l4 m4 s8 offset-l4 offset-m4 offset-s2 center waves-effect waves-light">Return</button>
+                                        <h4 class="center-align col l12 m12 s12">Add Song</h4>
+                                        <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
+                                            <select multiple id="genres">
+                                                <option value="" disabled selected>Select Genre(s):</option>
+                                                <option value="edm">EDM</option>
+                                                <option value="chill">Chill</option>
+                                            </select>
+                                            <label>Genre(s)</label>
+                                        </div>
+                                        <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
+                                            <i class="material-icons prefix">vpn_key</i>
+                                            <label for="id" class="teal-text">Song ID</label>
+                                            <input class="validate" name="id" id="id" type="text" pattern=".{11}"/>
+                                        </div>
+                                        <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
+                                            <i class="material-icons prefix">person</i>
+                                            <label for="artist" class="teal-text">Song Artist</label>
+                                            <input class="validate" name="artist" id="artist" aria-required="true" type="text"/>
+                                        </div>
+                                        <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
+                                            <i class="material-icons prefix">subject</i>
+                                            <label for="title" class="teal-text">Song Title</label>
+                                            <input class="validate required" name="title" id="title" type="text"/>
+                                        </div>
+                                        <div class="input-field col l8 m8 s12 offset-l2 offset-m2">
+                                            <i class="material-icons prefix">image</i>
+                                            <label for="img" class="teal-text">Song Image</label>
+                                            <input class="validate" name="img" id="img" type="url"/>
+                                        </div>
+                                        <button type="button" id="add-song-button" class="btn btn-large col l6 m6 s10 offset-l3 offset-m3 offset-s1 waves-effect waves-light">Add Song</button>
+                                    </div>
+                                    <script>
+                                        $('#genres').material_select();
+                                    </script>
+                                {{else}}
+                                    <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="{{result.id}}"><i class="material-icons" data-result="{{result.id}}">add</i></a>
+                                                        </li>
+                                                    {{/each}}
+                                                </ul>
+                                            </div>
+                                        {{/if}}
+                                    </div>
                                 {{/if}}
-                            </div>
                             {{else}}
                             <div class="row" id="import-playlist">
                                 <div class="input-field">
@@ -156,7 +195,7 @@
                                                     <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>
+                                                    <a href="#!" class="secondary-content" id="removeSong" data-result="{{result.id}}"><i class="material-icons" data-result="{{result.id}}">remove</i></a>
                                                 </li>
                                             {{/each}}
                                         </ul>
@@ -190,7 +229,7 @@
             </div>
         </main>
         <script>
-            $("#add-song-button").leanModal({
+            $("#add-song-modal-button").leanModal({
                 dismissible: true,
                 opacity: .5,
                 in_duration: 500,