Nicer effect on chat icon

server/server.js

@@ -37,6 +37,7 @@ io.on('connection', function(socket){
   var in_list = false;
 
   socket.on('chat', function (data) {
+    check_inlist(coll, guid, socket);
     if(data != "" && data !== undefined && data !== null && data.length < 151 && data.replace(/\s/g, '').length)
       io.sockets.emit('chat,'+coll, rndName(guid) + ": " + data);
   });
@@ -95,16 +96,7 @@ io.on('connection', function(socket){
 
       console.log(guid + " joined list " + coll);
 
-      if(lists[coll] == undefined)
-      {
-      	lists[coll] = [];
-      	lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }else if(!contains(lists[coll], guid))
-      {
-        lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }
+      check_inlist(coll, guid, socket);
 
       io.sockets.emit(coll+",viewers", lists[coll].length);
 
@@ -134,16 +126,7 @@ io.on('connection', function(socket){
   {
     if(id !== undefined && id !== null && id != "")
     {
-      if(lists[coll] == undefined)
-      {
-      	lists[coll] = [];
-      	lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }else if(!contains(lists[coll], guid))
-      {
-        lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }
+      check_inlist(coll, guid, socket);
 
     	db.collection(coll).find({now_playing:true}, function(err, np){
         //console.log(docs);
@@ -208,16 +191,7 @@ io.on('connection', function(socket){
   {
     if(arr !== undefined && arr !== null && arr != "")
     {
-      if(lists[coll] == undefined)
-      {
-      	lists[coll] = [];
-      	lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }else if(!contains(lists[coll], guid))
-      {
-        lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }
+      check_inlist(coll, guid, socket);
 
     	var id = arr[0];
     	var title = arr[1];
@@ -258,16 +232,7 @@ io.on('connection', function(socket){
   {
     if(msg !== undefined && msg !== null)
     {
-      if(lists[coll] == undefined)
-      {
-      	lists[coll] = [];
-      	lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }else if(!contains(lists[coll], guid))
-      {
-        lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }
+      check_inlist(coll, guid, socket);
 
       if(msg[2] == "del")
         del(msg, socket);
@@ -297,16 +262,8 @@ io.on('connection', function(socket){
       pw = inp[0];
       coll = inp[1];
       //guid = inp[2];
-      if(lists[coll] == undefined)
-      {
-      	lists[coll] = [];
-      	lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }else if(!contains(lists[coll], guid))
-      {
-        lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }
+      check_inlist(coll, guid, socket);
+
       //console.log(coll);
       db.collection(coll).find({views:{$exists:true}}, function(err, docs){
         //console.log(docs);
@@ -330,16 +287,7 @@ io.on('connection', function(socket){
   {
     if(list !== undefined && list !== null && list != "")
     {
-      if(lists[coll] == undefined)
-      {
-      	lists[coll] = [];
-      	lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }else if(!contains(lists[coll], guid))
-      {
-        lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }
+      check_inlist(coll, guid, socket);
 
       adminpass = "";
 
@@ -394,16 +342,7 @@ io.on('connection', function(socket){
   {
     if(params !== undefined && params !== null && params != "")
     {
-      if(lists[coll] == undefined)
-      {
-      	lists[coll] = [];
-      	lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }else if(!contains(lists[coll], guid))
-      {
-        lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }
+      check_inlist(coll, guid, socket);
 
       var voting = params[0];
     	var addsongs = params[1];
@@ -453,16 +392,7 @@ io.on('connection', function(socket){
   {
     if(pass !== undefined && pass !== null && pass != "")
     {
-      if(lists[coll] == undefined)
-      {
-      	lists[coll] = [];
-      	lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }else if(!contains(lists[coll], guid))
-      {
-        lists[coll].push(guid);
-        io.sockets.emit(coll+",viewers", lists[coll].length);
-      }
+      check_inlist(coll, guid, socket);
 
       var hash = hash_pass(pass);
       db.collection(coll).find({views:{$exists:true}}, function(err, docs){
@@ -500,6 +430,7 @@ io.on('connection', function(socket){
     {
     	try
     	{
+          io.sockets.emit('chat,'+coll, rndName(guid) + " left");
           console.log(guid + " left list " + coll);
     	  	var index = lists[coll].indexOf(guid);
     	  	lists[coll].splice(index, 1);
@@ -510,17 +441,7 @@ io.on('connection', function(socket){
 
   socket.on('pos', function()
   {
-    if(lists[coll] == undefined)
-    {
-    	lists[coll] = [];
-    	lists[coll].push(guid);
-      io.sockets.emit(coll+",viewers", lists[coll].length);
-    }else if(!contains(lists[coll], guid))
-    {
-      lists[coll].push(guid);
-      io.sockets.emit(coll+",viewers", lists[coll].length);
-    }
-
+    check_inlist(coll, guid, socket);
     send_play(coll, socket);
   });
 });
@@ -536,7 +457,23 @@ function del(params, socket)
         sort_list(coll, undefined, false, true);
       })
     }
-  })
+  });
+}
+
+function check_inlist(coll, guid, socket)
+{
+  if(lists[coll] == undefined)
+  {
+    lists[coll] = [];
+    lists[coll].push(guid);
+    io.sockets.emit(coll+",viewers", lists[coll].length);
+    socket.broadcast.emit('chat,'+coll, rndName(guid) + " joined");
+  }else if(!contains(lists[coll], guid))
+  {
+    lists[coll].push(guid);
+    io.sockets.emit(coll+",viewers", lists[coll].length);
+    socket.broadcast.emit('chat,'+coll, rndName(guid) + " joined");
+  }
 }
 
 function hash_pass(adminpass)
@@ -681,4 +618,4 @@ function rndName(seed) {
     word += arr[(seed[i%seed.length].charCodeAt()+i) % arr.length-1];
   }
   return word.substring(0,8)
-}
+}

static/css/style.css

@@ -208,6 +208,11 @@ hide mdi-action-visibility mdi-action-visibility-off
     float: left;
 }
 
+#chat-btn {
+  -webkit-transition:opacity 1s;
+  transition:opacity 1s;
+}
+
 ul #chat-log{
   padding: 0px 0px 0px 11px !important;
 }

static/js/chat.js

@@ -1,3 +1,4 @@
+var blink_interval;
 
 function chat(data)
 {
@@ -11,14 +12,17 @@ function chat(data)
 document.getElementById("chat-btn").addEventListener("click", function(){
     console.log("clicked");
     $("#text-chat-input").focus();
-    $("#chat-btn").css("color", "white");
+    //$("#chat-btn").css("color", "white");
+    $("#chat-btn").css("opacity", 1);
+    clearInterval(blink_interval);
 });
 
 socket.on("chat,"+chan.toLowerCase(), function(data)
 {
   if($("#chat-bar").position()["left"] != 0)
   {
-    $("#chat-btn").css("color", "grey");
+    //$("#chat-btn").css("color", "grey");
+    blink_interval = setInterval(chat_blink, 2000);
   }
   var color = intToARGB(hashCode(data.substring(0,8))).substring(0,6);
 	$("#chat").append("<li><span style='color:"+color+";'>"+data.substring(0,8)+"</span></li>");
@@ -27,6 +31,12 @@ socket.on("chat,"+chan.toLowerCase(), function(data)
   document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight
 });
 
+function chat_blink()
+{
+  $("#chat-btn").css("opacity", 0.5);
+  setTimeout(function(){$("#chat-btn").css("opacity", 1);}, 1000);
+}
+
 function hashCode(str) { // java String#hashCode
     var hash = 0;
     for (var i = 0; i < str.length; i++) {