Added unread message indicator. This closes #37.

app/.meteor/packages

@@ -30,3 +30,4 @@ zimme:iron-router-active
 momentjs:moment
 emojione:emojione
 utilities:avatar
+matb33:collection-hooks

app/.meteor/versions

@@ -56,6 +56,7 @@ launch-screen@1.0.4
 livedata@1.0.15
 localstorage@1.0.5
 logging@1.0.8
+matb33:collection-hooks@0.8.1
 meteor@1.1.10
 meteor-base@1.0.1
 meteorhacks:async@1.0.0

app/client/app.css

@@ -1464,3 +1464,14 @@ input[type="checkbox"]:checked + #two-label:after {
 /*adding some colors for fun*/
 #two+label:before, #two+label:after {color: hsl(180, 45%, 40%);}
 
+#chat-tab {
+    -webkit-transition: background-color 500ms linear;
+    -moz-transition: background-color 500ms linear;
+    -ms-transition: background-color 500ms linear;
+    -o-transition: background-color 500ms linear;
+    transition: background-color 500ms linear;
+}
+
+.unread-messages {
+    background-color: orange;
+}

app/client/client.js

@@ -475,7 +475,6 @@ function sendMessage() {
             }
         } else {
             Meteor.call("sendMessage", Session.get("type"), message, function (err, res) {
-                console.log(err, res);
                 if (res) {
                     $("#chat-input").val("");
                 }
@@ -485,6 +484,9 @@ function sendMessage() {
 }
 
 Template.room.events({
+    "click #chat-tab": function() {
+        $("#chat-tab").removeClass("unread-messages");
+    },
     "click #sync": function() {
         if (Session.get("currentSong") !== undefined) {
             var room = Rooms.findOne({type: Session.get("type")});
@@ -1702,6 +1704,11 @@ Template.playlist.events({
 Meteor.subscribe("rooms");
 
 Template.room.onCreated(function () {
+    Chat.after.find(function() {
+        if (!$("#chat-tab").hasClass("active")) {
+            $("#chat-tab").addClass("unread-messages");
+        }
+    });
     Session.set("reportSong", false);
     Session.set("reportTitle", false);
     Session.set("reportAuthor", false);
@@ -1816,13 +1823,15 @@ Template.room.onCreated(function () {
                                         resizeSeekerbar();
                                     },
                                     'onStateChange': function(event){
-                                        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();
+                                        if (YT !== undefined) {
+                                            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();
+                                            }
                                         }
                                     }
                                 }
@@ -1859,6 +1868,7 @@ Template.room.onCreated(function () {
                 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 (yt_player !== undefined && yt_player.getPlayerState !== undefined && yt_player.getPlayerState() === 1) {
                             yt_player.pauseVideo();
                         } else if (_sound !== undefined && _sound.getState().indexOf("playing") !== -1) {

app/client/templates/room.html

@@ -108,7 +108,7 @@
                 <div class="col-md-3" id="side-panel">
                     <ul class="nav nav-tabs nav-justified" data-tabs="tabs">
                         <li role="presentation" class="active"><a data-toggle="tab" href="#playlist">Playlist</a></li>
-                        <li role="presentation"><a data-toggle="tab" href="#chat">Chat</a></li>
+                        <li role="presentation" id="chat-tab"><a data-toggle="tab" href="#chat">Chat</a></li>
                     </ul>
                     <div id='content' class="tab-content sidebar-content">
                         <div class="tab-pane active" id="playlist">