More descriptive about how many messages have appeared

public/css/style.css

@@ -491,6 +491,13 @@ span.badge.new,
     background-color: #2D2D2D;
 }
 
+span.badge.new.white{
+  color: black;
+  margin-top: 12px;
+  background: white;
+  margin-left: -15px;
+}
+
 input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
     border-bottom: 1px solid #9D9D9D;
     box-shadow: 0 1px 0 0 #9D9D9D;
@@ -1291,9 +1298,11 @@ ul #chat-log{
 }
 
 .control-list{
-    position: fixed;
+  position: fixed;
-    top:0;
+  top: 0;
-    right:0;
+  right: 0;
+  height: 64px;
+  overflow: hidden;
 }
 
 .title-container{

public/js/chat.js

@@ -1,5 +1,8 @@
 var Chat = {
 
+  channel_received: 0,
+  all_received: 0,
+
   namechange: function(newName)
   {
     socket.emit("namechange", newName);
@@ -33,13 +36,18 @@ var Chat = {
   {
     //$("#chat-btn").css("color", "grey");
 
-    if(!blink_interval_exists && inp.msg.substring(0,1) == ":" && !chat_active)
+    if(inp.msg.substring(0,1) == ":" && !chat_active)
     {
+      Chat.all_received += 1;
       $("#favicon").attr("href", "public/images/highlogo.png");
-      blink_interval_exists = true;
       unseen = true;
       chat_unseen = true;
-      if(!blinking) Chat.chat_blink();
+      if($("span.badge.new.white").hasClass("hide")){
+        $("span.badge.new.white").removeClass("hide");
+      }
+      var to_display = Chat.channel_received + Chat.all_received > 9 ? "9+" : Chat.channel_received + Chat.all_received;
+      $("span.badge.new.white").html(to_display);
+      //if(!blinking) Chat.chat_blink();
       //blink_interval = setTimeout(Chat.chat_blink, 2000);
     }
 
@@ -63,13 +71,18 @@ var Chat = {
 
   channelchat: function(data)
   {
-    if(!blink_interval_exists && data.msg.substring(0,1) == ":" && !chat_active)
+    if(data.msg.substring(0,1) == ":" && !chat_active)
     {
       $("#favicon").attr("href", "public/images/highlogo.png");
       unseen = true;
       chat_unseen = true;
-      if(!blinking) Chat.chat_blink();
+      Chat.channel_received += 1;
       //blink_interval = setTimeout(Chat.chat_blink, 1000);
+      if($("span.badge.new.white").hasClass("hide")){
+        $("span.badge.new.white").removeClass("hide");
+      }
+      var to_display = Chat.channel_received + Chat.all_received > 9 ? "9+" : Chat.channel_received + Chat.all_received;
+      $("span.badge.new.white").html(to_display);
     }
 
     var color = Helper.intToARGB(Helper.hashCode(data.from));

public/js/listeners.js

@@ -3,7 +3,6 @@ var w_p 				  = true;
 var hasadmin			  = 0;
 var showToggle 			  = true;
 var list_html 			  = $("#list-song-html").html();
-var blink_interval_exists = false;
 var unseen 			   	  = false;
 var api_key 		   	  = "***REMOVED***";
 var searching 		   	  = false;
@@ -64,7 +63,6 @@ var timeout_search;
 var id;
 var full_playlist;
 var conf;
-var blink_interval;
 var tag;
 var firstScriptTag;
 var title;
@@ -988,11 +986,16 @@ $(document).on("submit", "#remoteform", function(e) {
 	Mobile_remote.get_input($("#remote_channel").val());
 });
 
-$(document).on("click", "#chat-btn", function(){
+$(document).on("click", ".chat-link", function(){
 	$("#text-chat-input").focus();
     $("#chat-btn i").css("opacity", 1);
-    clearInterval(blink_interval);
+    //clearInterval(blink_interval);
-    blink_interval_exists = false;
+    //blink_interval_exists = false;
+    Chat.channel_received = 0;
+    Chat.all_received = 0;
+    if(!$("span.badge.new.white").hasClass("hide")){
+        $("span.badge.new.white").addClass("hide");
+    }
     unseen = false;
     $("#favicon").attr("href", "public/images/favicon.png");
 });

public/php/channel.php

@@ -199,12 +199,12 @@
               <div id="bottom-button" title="Scroll to the bottom" class="rounded-top hide hide-on-small-only">Bottom</div>
               <ul class="tabs playlist-tabs tabs-fixed-width" style="width:96%">
                 <li class="tab col s3"><a class="playlist-tab-links playlist-link active truncate" href="#wrapper">Playlist</a></li>
-                <li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat">Chat</a></li>
+                <li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat">Chat<span class="new badge white hide"></span></a></li>
               </ul>
               <ul class="tabs playlist-tabs-loggedIn hide tabs-fixed-width" style="width: 96%;">
                 <li class="tab col s3"><a class="playlist-tab-links playlist-link active truncate" href="#wrapper">Playlist</a></li>
                 <li class="tab col s3"><a class="playlist-tab-links suggested-link truncate" href="#suggestions">Suggested</a></li>
-                <li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat">Chat</a></li>
+                <li class="tab col s3"><a class="playlist-tab-links chat-link truncate" href="#chat">Chat<span class="new badge white hide"></span></a></li>
               </ul>
               <div id="find_div" class="hide">
                 <form id="find_form">