Working on Room design and functionality.

app/client/scripts/events.js

@@ -1166,47 +1166,6 @@ Template.room.events({
         Session.set("currentSongR", Session.get("currentSong"));
         Session.set("previousSongR", Session.get("previousSong"));
     },
-    "click #add-song-button": function (e) {
-        e.preventDefault();
-        parts = location.href.split('/');
-        var roomType = parts.pop();
-        var genre = roomType.toLowerCase();
-        var type = $("#type").val();
-        id = $("#id").val();
-        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();
-            });
-        } 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();
-                    });
-                } 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();
-                    });
-                }
-            });
-        }
-        $("#close-modal-a").click();
-    },
     "click #toggle-video": function (e) {
         e.preventDefault();
         if (Session.get("mediaHidden")) {
@@ -1346,330 +1305,6 @@ Template.room.events({
     }
 });
 
-Template.room.helpers({
-    singleVideo: function() {
-        return true;
-    },
-    chat: function() {
-        Meteor.setTimeout(function() {
-            var elem = document.getElementById('chat');
-            if (elem !== undefined && elem !== null) {
-                elem.scrollTop = elem.scrollHeight;
-            }
-        }, 100);
-        return Chat.find({type: Session.get("type")}, {sort: {time: -1}, limit: 50 }).fetch().reverse();
-    },
-    globalChat: function() {
-        Meteor.setTimeout(function() {
-            var elem = document.getElementById('global-chat');
-            if (elem !== undefined && elem !== null) {
-                elem.scrollTop = elem.scrollHeight;
-            }
-        }, 100);
-        return Chat.find({type: "global"}, {sort: {time: -1}, limit: 50 }).fetch().reverse();
-    },
-    likes: function() {
-        var playlist = Playlists.findOne({type: Session.get("type")});
-        var likes = 0;
-        playlist.songs.forEach(function(song) {
-            if (Session.get("currentSong") && song.mid === Session.get("currentSong").mid) {
-                likes = song.likes;
-                return;
-            }
-        });
-        return likes;
-    },
-    dislikes: function() {
-        var playlist = Playlists.findOne({type: Session.get("type")});
-        var dislikes = 0;
-        playlist.songs.forEach(function(song) {
-            if (Session.get("currentSong") && song.mid === Session.get("currentSong").mid) {
-                dislikes = song.dislikes;
-                return;
-            }
-        });
-        return dislikes;
-    },
-    liked: function() {
-        if (Meteor.userId()) {
-            var currentSong = Session.get("currentSong");
-            if (currentSong && Meteor.user().profile.liked.indexOf(currentSong.mid) !== -1) {
-                return "active";
-            } else {
-                return "";
-            }
-        } else {
-            "";
-        }
-    },
-    disliked: function() {
-        if (Meteor.userId()) {
-            var currentSong = Session.get("currentSong");
-            if (currentSong && Meteor.user().profile.disliked.indexOf(currentSong.mid) !== -1) {
-                return "active";
-            } else {
-                return "";
-            }
-        } else {
-            "";
-        }
-    },
-    type: function() {
-        var parts = location.href.split('/');
-        var id = parts.pop().toLowerCase();
-        return Rooms.findOne({type: id}).display;
-    },
-    users: function() {
-        var parts = location.href.split('/');
-        var id = parts.pop().toLowerCase();
-        return Rooms.findOne({type: id}).users;
-    },
-    title: function(){
-        return Session.get("title");
-    },
-    artist: function(){
-        return Session.get("artist");
-    },
-    loaded: function() {
-        return Session.get("loaded");
-    },
-    paused: function() {
-        return Session.get("state") === "paused";
-    },
-    private: function() {
-        return Rooms.findOne({type: Session.get("type")}).private === true;
-    },
-    report: function() {
-        return Session.get("reportObj");
-    },
-    reportSong: function() {
-        return Session.get("reportSong");
-    },
-    reportTitle: function() {
-        return Session.get("reportTitle");
-    },
-    reportAuthor: function() {
-        return Session.get("reportAuthor");
-    },
-    reportDuration: function() {
-        return Session.get("reportDuration");
-    },
-    reportAudio: function() {
-        return Session.get("reportAudio");
-    },
-    reportAlbumart: function() {
-        return Session.get("reportAlbumart");
-    },
-    reportOther: function() {
-        return Session.get("reportOther");
-    },
-    currentSong: function() {
-        return Session.get("currentSong");
-    },
-    previousSong: function() {
-        return Session.get("previousSong");
-    },
-    currentSongR: function() {
-        return Session.get("currentSongR");
-    },
-    previousSongR: function() {
-        return Session.get("previousSongR");
-    },
-    reportingSong: function() {
-        if (Session.get("reportPrevious")) {
-            return Session.get("previousSongR");
-        } else {
-            return Session.get("currentSongR");
-        }
-    },
-    votes: function(){
-        return Rooms.findOne({type: Session.get("type")}).votes;
-    }
-});
-Template.room.onCreated(function () {
-    Chat.after.find(function(userId, selector) {
-        if (selector.type === "global") {
-            if (!$("#global-chat-tab").hasClass("active")) {
-                $("#global-chat-tab").addClass("unread-messages");
-            }
-        } else if(selector.type === Session.get("type")) {
-            if (!$("#chat-tab").hasClass("active")) {
-                $("#chat-tab").addClass("unread-messages");
-            }
-        }
-    });
-    Session.set("reportSong", false);
-    Session.set("reportTitle", false);
-    Session.set("reportAuthor", false);
-    Session.set("reportDuration", false);
-    Session.set("reportAudio", false);
-    Session.set("reportAlbumart", false);
-    Session.set("reportOther", false);
-    /*if (resizeSeekerbarInterval !== undefined) {
-        Meteor.clearInterval(resizeSeekerbarInterval);
-        resizeSeekerbarInterval = undefined;
-    }*/
-    YTPlayer = undefined;
-    Session.set("videoHidden", false);
-    var tag = document.createElement("script");
-    tag.src = "https://www.youtube.com/iframe_api";
-    var firstScriptTag = document.getElementsByTagName('script')[0];
-    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
-    Session.set("singleVideo", true);
-
-    var currentSong = undefined;
-    var currentSongR = undefined;
-
-    function getTimeElapsed() {
-        if (currentSong !== undefined) {
-            var room = Rooms.findOne({type: type});
-            if (room !== undefined) {
-                return Date.now() - currentSong.started - room.timePaused;
-            }
-        }
-        return 0;
-    }
-
-    function getSongInfo(songData){
-        Session.set("title", songData.title);
-        Session.set("artist", songData.artist);
-        Session.set("id", songData.id);
-        $("#song-img").attr("src", songData.img);
-        Session.set("duration", parseInt(songData.duration));
-        var d = moment.duration(parseInt(songData.duration), 'seconds');
-        $("#time-total").text(d.minutes() + ":" + ("0" + d.seconds()).slice(-2));
-        Session.set("timeFormat", d.minutes() + ":" + ("0" + d.seconds()).slice(-2));
-    }
-
-    function resizeSeekerbar() {
-        if (Session.get("state") === "playing") {
-            $("#seeker-bar").width(((getTimeElapsed() / 1000) / Session.get("duration") * 100) + "%");
-        }
-    }
-
-    function startSong() {
-        $("#time-elapsed").text("0:00");
-        $("#vote-skip").attr("disabled", false);
-        if (currentSong !== undefined) {
-            if (YTPlayer !== undefined && YTPlayer.stopVideo !== undefined) YTPlayer.stopVideo();
-
-            var volume = localStorage.getItem("volume") || 20;
-
-            if ($("#player").length !== 1) {
-                $("#media-container").append('<div id="player" class="embed-responsive-item"></div>');
-            }
-            $("#player").show();
-            function loadVideo() {
-                if (!Session.get("YTLoaded")) {
-                    Session.set("loadVideoTimeout", Meteor.setTimeout(function () {
-                        loadVideo();
-                    }, 500));
-                } else {
-                    if (YTPlayer === undefined) {
-                        YTPlayer = new YT.Player("player", {
-                            height: 540,
-                            width: 960,
-                            videoId: currentSong.id,
-                            playerVars: {controls: 0, iv_load_policy: 3, rel: 0, showinfo: 0},
-                            events: {
-                                'onReady': function (event) {
-                                    if (currentSong.skipDuration === undefined) {
-                                        currentSong.skipDuration = 0;
-                                    }
-                                    event.target.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
-                                    event.target.playVideo();
-                                    event.target.setVolume(volume);
-                                    resizeSeekerbar();
-                                },
-                                'onStateChange': function (event) {
-                                    if (Session.get("YTLoaded")) {
-                                        if (event.data == YT.PlayerState.PAUSED && Session.get("state") === "playing") {
-                                            event.target.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
-                                            event.target.playVideo();
-                                        }
-                                        if (event.data == YT.PlayerState.PLAYING && Session.get("state") === "paused") {
-                                            event.target.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
-                                            event.target.pauseVideo();
-                                        }
-                                    }
-                                }
-                            }
-                        });
-                    } else {
-                        YTPlayer.loadVideoById(currentSong.id);
-                        if (currentSong.skipDuration === undefined) {
-                            currentSong.skipDuration = 0;
-                        }
-                        YTPlayer.seekTo(Number(currentSong.skipDuration) + getTimeElapsed() / 1000);
-                    }
-                    Session.set("pauseVideo", false);
-                    getSongInfo(currentSong);
-                }
-            }
-            loadVideo();
-        }
-    }
-
-    Session.set("loaded", false);
-    Meteor.subscribe("rooms", function() {
-        var parts = location.href.split('/');
-        var id = parts.pop();
-        var type = id.toLowerCase();
-        Session.set("type", type);
-        if (Rooms.find({type: type}).count() !== 1) {
-            window.location = "/";
-        } else {
-            StationSubscription = Meteor.subscribe(type);
-            Session.set("loaded", true);
-            minterval = Meteor.setInterval(function () {
-                var room = Rooms.findOne({type: type});
-                if (room !== undefined) {
-                    if (room.state === "paused" || Session.get("pauseVideo")) {
-                        Session.set("state", "paused");
-                        // TODO Fix issue where sometimes nothing loads with the YT is not defined error. The error points to around this.
-                        if (YTPlayer !== undefined && YTPlayer.getPlayerState !== undefined && YTPlayer.getPlayerState() === 1) {
-                            YTPlayer.pauseVideo();
-                        }
-                    } else {
-                        Session.set("state", "playing");
-                        if (YTPlayer !== undefined && YTPlayer.getPlayerState !== undefined && YTPlayer.getPlayerState() !== 1) {
-                            YTPlayer.playVideo();
-                        }
-                    }
-                }
-
-                if (room.currentSong.song !== undefined && (currentSongR === undefined || room.currentSong.started !== currentSongR.started)) {
-                    Session.set("previousSong", currentSong);
-                    currentSongR = room.currentSong;
-
-                    currentSong = room.currentSong.song;
-                    currentSong.started = room.currentSong.started;
-                    Session.set("currentSong", currentSong);
-                    Meteor.clearTimeout(Session.get("loadVideoTimeout"));
-                    startSong();
-                }
-
-                if (currentSong !== undefined) {
-                    if (room !== undefined) {
-                        var duration = (Date.now() - currentSong.started - room.timePaused) / 1000;
-                        var song_duration = currentSong.duration;
-                            if (song_duration <= duration) {
-                                Session.set("pauseVideo", true);
-                            }
-                        var d = moment.duration(duration, 'seconds');
-                        if (Session.get("state") === "playing") {
-                            $("#time-elapsed").text(d.minutes() + ":" + ("0" + d.seconds()).slice(-2));
-                        }
-                    }
-                }
-            }, 100);
-            resizeSeekerbarInterval = Meteor.setInterval(function () {
-                resizeSeekerbar();
-            }, 500);
-        }
-    });
-});
 // Settings Template
 Template.settings.events({
     "click #save-settings": function() {
@@ -1708,4 +1343,4 @@ Template.settings.events({
     }
 });
 
-var previewEndSongTimeout = undefined;
+var previewEndSongTimeout = undefined;

app/client/scripts/onCreated.js

@@ -127,6 +127,7 @@ Template.room.onCreated(function () {
             }
         }
     });
+
     Session.set("reportSong", false);
     Session.set("reportTitle", false);
     Session.set("reportAuthor", false);
@@ -149,6 +150,7 @@ Template.room.onCreated(function () {
 
     var currentSong = undefined;
     var currentSongR = undefined;
+    var type = Session.get("type");
 
     function getTimeElapsed() {
         if (currentSong !== undefined) {

app/client/stylesheets/app.css

@@ -180,9 +180,24 @@ textarea{
 }
 
 #room-content {
+  background-color: black;
+  color: white;
   padding-top: 15px;
 }
 
+#thumbs_up, #thumbs_down {
+  color: white;
+  cursor: pointer;
+}
+
+#thumbs_up:hover {
+  color: #00bfa5;
+}
+
+#thumbs_down:hover {
+  color: #e53935;
+}
+
 .feedback-message{
     word-wrap: break-word;
 }

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"><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>
@@ -40,8 +40,8 @@
                                   </form>
                                   <div class="right col s4 m2 l2">
                                     <ul>
-                                      <li class="left"><a href="#add_song_modal"><i class="material-icons black-text">thumb_up</i></a></li>
-                                      <li class="right"><a href="#bug_report_modal"><i class="material-icons black-text">thumb_down</i></a></li>
+                                      <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>
@@ -54,6 +54,46 @@
                     </div>
                 </div>
             </div>
+            <div id="add_song_modal" class="modal">
+              <div class="center modal-content">
+                <div class="row">
+                  <a class="dropdown-button btn" href="#" data-activates="type_dropdown">Select import type</a>
+                  <ul id="type_dropdown" class="dropdown-content">
+                    <li><a href="#!">Single Song</a></li>
+                    <li><a href="#!">Import Playlist</a></li>
+                  </ul>
+                </div>
+                <div class="row">
+                  <a class="dropdown-button btn" href="#" data-activates="source_dropdown">Select music source</a>
+                  <ul id="source_dropdown" class="dropdown-content">
+                    <li><a href="#!">YouTube</a></li>
+                    <li><a href="#!">SoundCloud</a></li>
+                  </ul>
+                </div>
+                <div class="row">
+                  <div class="input-field">
+                    <input id="search_for_song" type="text" class="validate black-text">
+                    <label for="search_for_song">Search for song</label>
+                  </div>
+                </div>
+              </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({
+            constrain_width: true
+          });
+        </script>
     {{/if}}
 </template>