Moved sorting of lists clientside, and added animation when a song is deleted or added

server/server.js

@@ -144,13 +144,13 @@ io.on('connection', function(socket){
 
       	if(contains(docs, coll))
       	{
-      		sort_list(coll, socket, true, false);
+      		send_list(coll, socket, true, false);
       	}else
       	{
       		db.createCollection(coll, function(err, docs){
     				db.collection(coll).insert({"addsongs":false, "adminpass":"", "allvideos":false, "frontpage":true, "longsongs":false, "removeplay": false, "shuffle": true, "skip": false, "skips": [], "startTime":get_time(), "views": [], "vote": false}, function(err, docs)
     				{
-              sort_list(coll, socket, true, false);
+              send_list(coll, socket, true, false);
               /*db.collection(coll).find().sort({votes:-1}, function(err, docs) {
       		    	socket.emit(coll, docs);
       		    	//send_play(coll, socket);
@@ -210,7 +210,7 @@ io.on('connection', function(socket){
                                 added:get_time()}}, function(err, docs){
                                   db.collection(coll).update({views:{$exists:true}},
                                     {$set:{startTime:get_time(), skips:[]}}, function(err, docs){
-                                      sort_list(coll, undefined, true, true);
+                                      send_list(coll, undefined, true, true);
                                   });
                                 });
                             }
@@ -256,7 +256,8 @@ io.on('connection', function(socket){
                 else
                   np = false;
           			db.collection(coll).insert({"added":get_time(),"guids":guids,"id":id,"now_playing":np,"title":title,"votes":votes, "duration":duration}, function(err, docs){
-        		  		sort_list(coll, undefined, np, true);
+        		  		io.sockets.emit(coll, ["added", {"_id": "asd", "added":get_time(),"guids":guids,"id":id,"now_playing":np,"title":title,"votes":votes, "duration":duration}]);
+                  //sort_list(coll, undefined, np, true);
         		  	});
               });
             }else{
@@ -418,7 +419,6 @@ io.on('connection', function(socket){
                 io.sockets.emit(coll+",conf", docs);
                 socket.emit("toast", "savedsettings");
               });
-              //sort_list(coll,undefined,false);
             });
 
         }else
@@ -442,15 +442,12 @@ io.on('connection', function(socket){
         {
           db.collection(coll).find({now_playing:false}).forEach(function(err, docs){
             if(!docs){
-              sort_list(coll, undefined, false, true);
+              send_list(coll, undefined, false, true);
               socket.emit("toast", "shuffled");
               return;
             }else{
               num = Math.floor(Math.random()*1000000);
-              db.collection(coll).update({id:docs["id"]}, {$set:{added:num}}, function(err, d)
+              db.collection(coll).update({id:docs["id"]}, {$set:{added:num}});
-              {
-
-              });
             }
           });
         }else
@@ -460,7 +457,7 @@ io.on('connection', function(socket){
       var complete = function(tot, curr){
         if(tot == curr)
         {
-          sort_list(coll, undefined, false, true);
+          send_list(coll, undefined, false, true);
         }
       };
     }else
@@ -514,8 +511,8 @@ function del(params, socket)
     {
       db.collection(coll).remove({id:params[1]}, function(err, docs){
         socket.emit("toast", "deletesong");
-        sort_list(coll, undefined, false, true);
+        io.sockets.emit(coll, ["deleted", params[1]]);
-      })
+      });
     }
   });
 }
@@ -546,13 +543,11 @@ function vote(coll, id, guid, socket)
 	db.collection(coll).find({id:id}, function(err, docs){
 		if(docs !== null && docs.length > 0 && !contains(docs[0]["guids"], guid))
 		{
-  		db.collection(coll).update({id:id}, {$inc:{votes:1}, $set:{added:get_time()}}, function(err, docs)
+  		db.collection(coll).update({id:id}, {$inc:{votes:1}, $set:{added:get_time()}, $push :{guids: guid}}, function(err, docs)
   		{
-  			db.collection(coll).update({id:id}, {$push :{guids: guid}}, function(err, docs)
-  			{
           socket.emit("toast", "voted");
-          sort_list(coll, undefined, false, true);
+          io.sockets.emit(coll, ["vote", id, get_time()]);
-  			});
+          //sort_list(coll, undefined, false, true);
   			//sort_list(coll, undefined, false);
   		});
 		}else
@@ -607,7 +602,7 @@ function change_song_post(coll)
             added:get_time()}}, function(err, docs){
               db.collection(coll).update({views:{$exists:true}},
                 {$set:{startTime:get_time(), skips:[]}}, function(err, docs){
-                  sort_list(coll,undefined,true, true);
+                  send_list(coll,undefined,true, true);
               });
 
             });
@@ -615,15 +610,15 @@ function change_song_post(coll)
   });
 }
 
-function sort_list(coll, socket, send, list_send)
+function send_list(coll, socket, send, list_send)
 {
-  db.collection(coll).aggregate([{$sort:{votes:-1, added:1}}], function(err, docs)
+  db.collection(coll).find(function(err, docs)
   {
     //io.sockets.emit(coll, docs);
     if(list_send)
-      io.sockets.emit(coll, docs);
+      io.sockets.emit(coll, ["list", docs]);
     else if(!list_send)
-      socket.emit(coll,docs);
+      socket.emit(coll,["list", docs]);
     if(socket === undefined && send)
       send_play(coll);
     else if(send)

static/css/style.css

@@ -430,6 +430,8 @@ ul #chat-log{
     background-color: rgba(255, 255, 255, 0.04);
     color:white;
     font:12px Arial,sans-serif;
+		-webkit-transition:height 1s;
+		height:66px;
 }
 .list-song .card-content{padding:0;}
 .list-title{

static/js/admin.js

@@ -67,7 +67,7 @@ socket.on("pw", function(msg)
 
 socket.on(chan.toLowerCase()+",conf", function(msg)
 {
-	populate_list(msg, true);
+	set_conf(msg[0]);
 });
 
 $('input[class=conf]').change(function()
@@ -126,7 +126,6 @@ function submitAdmin(form)
 	shuffling = form.shuffle.checked;
 
 	configs = [voting, addsongs, longsongs, frontpage, allvideos, removeplay, adminpass, skipping, shuffling];
-	console.log(configs);
 	socket.emit("conf", configs);
 }
 

static/js/list.js

@@ -7,6 +7,8 @@ var list_html = $("#list-song-html").html();
 var hasadmin=0;
 var w_p = true;
 var peis = false;
+var full_playlist;
+var conf;
 
 window.mobilecheck = function() {
 var check = false;
@@ -14,7 +16,36 @@ var check = false;
 return check; };
 
 socket.on(chan.toLowerCase(), function(msg){
-	populate_list(msg, false);
+	if(msg[0] == "list")
+	{
+		full_playlist = msg[1];
+		var index_of_conf = getIndexOfConf(full_playlist);
+		conf = full_playlist[index_of_conf];
+		full_playlist.splice(index_of_conf, 1);
+		full_playlist.sort(sortFunction);
+		set_conf(conf);
+		populate_list(full_playlist);
+	}else if(msg[0] == "added")
+	{
+		full_playlist.push(msg[1]);
+		full_playlist.sort(sortFunction);
+		insertAtIndex(getIndexOfSong(msg[1].id), msg[1]);
+	}else if(msg[0] == "deleted")
+	{
+		var to_delete = $("#wrapper").children()[getIndexOfSong(msg[1])];
+		to_delete.style.height = 0;
+		setTimeout(function()
+		{
+			$("#"+msg[1]).remove();
+		}, 1050);
+	}else if(msg[0] == "vote")
+	{
+		var index_of_song = getIndexOfSong(msg[1]);
+		full_playlist[index_of_song].votes += 1;
+		full_playlist[index_of_song].added = msg[2];
+		full_playlist.sort(sortFunction);
+		populate_list(full_playlist, false);
+	}
 });
 
 socket.on("skipping", function(obj)
@@ -26,34 +57,27 @@ socket.on("skipping", function(obj)
 	},1500);
 });
 
-function populate_list(msg, conf_only)
+function set_conf(conf_array)
+{
+	console.log("startTime");
+	if(conf_array['adminpass'] == "" || w_p == false) hasadmin = false;
+	else hasadmin = true;
+	music = conf_array["allvideos"];
+	longsongs = conf_array["longsongs"];
+	names=["vote","addsongs","longsongs","frontpage", "allvideos", "removeplay", "skip", "shuffle"];
+	for (var i = 0; i < names.length; i++) {
+		document.getElementsByName(names[i])[0].checked = (conf_array[names[i]] === true);
+		if(hasadmin)
+			$("input[name="+names[i]+"]").attr("disabled", true);
+	}
+}
+
+function populate_list(msg)
 {
-	//console.log(msg);
-	//console.log(conf_only);
-	if(!conf_only)
 		$("#wrapper").empty();
 
 		$.each(msg, function(j, listeID){
-			if(listeID.hasOwnProperty('startTime')) //check if its config part of list
+			if(!listeID.now_playing){ //check that the song isnt playing
-			{
-				console.log("startTime");
-				if(listeID['adminpass'] == "" || w_p == false) hasadmin = false;
-				else hasadmin = true;
-				music = listeID["allvideos"];
-				longsongs = listeID["longsongs"];
-				names=["vote","addsongs","longsongs","frontpage", "allvideos", "removeplay", "skip", "shuffle"];
-				for (var i = 0; i < names.length; i++) {
-					document.getElementsByName(names[i])[0].checked = (listeID[names[i]] === true);
-					if(hasadmin)
-						$("input[name="+names[i]+"]").attr("disabled", true);
-
-
-					/*if(hasadmin)
-						$("#setpass").text("Channel has admin");
-					else
-						$("#setpass").text("Channel has no admin");*/
-				}
-			}else if(!listeID.now_playing){ //check that the song isnt playing
 
 				var video_title=decodeURIComponent(listeID.title);
 				var video_id = listeID.id;
@@ -89,6 +113,8 @@ function populate_list(msg, conf_only)
 		$("#settings").css("opacity", "1");
 		$("#wrapper").css("opacity", "1");
 
+		full_playlist = msg;
+		full_playlist = full_playlist.sort(sortFunction);
 }
 
 function vote(id, vote){
@@ -145,3 +171,69 @@ function show(){
 	   fitToScreen();
 	}
 }
+
+function sortFunction(a, b) {
+  var o1 = a.votes;
+  var o2 = b.votes;
+
+  var p1 = a.added;
+  var p2 = b.added;
+
+  if (o1 < o2) return 1;
+  if (o1 > o2) return -1;
+  if (p1 > p2) return 1;
+  if (p1 < p2) return -1;
+  return 0;
+}
+
+function insertAtIndex(i, song_info) {
+		setTimeout(function(){
+			var test = $("#wrapper").children()[i];
+			test.style.height = 66;
+		},50);
+
+		var video_id = song_info.id;
+		var video_title = song_info.title;
+		var video_votes = song_info.votes;
+		var video_thumb = "background-image:url('http://img.youtube.com/vi/"+video_id+"/mqdefault.jpg');";
+
+		var song = $("<div>"+list_html+"</div>");
+		song.find("#list-song").css("height", 0);
+		song.find(".list-title").text(video_title);
+		song.find(".list-title").attr("title", video_title);
+		song.find(".list-votes").text(video_votes);
+		song.find(".vote-container").attr("onclick", "vote('"+video_id+"','pos')");
+		song.find(".list-image").attr("style",video_thumb);
+		song.attr("id",video_id);
+		song.find("#del").attr("onclick", "vote('"+video_id+"', 'del')");
+		if(!w_p) song.find(".card-action").removeClass("hide");
+		if(video_votes == 1)song.find(".vote-text").text("vote");
+
+    if(i === 0) {
+     	$("#wrapper").prepend(song.html());
+			return;
+    }
+
+    $("#wrapper > div:nth-child(" + (i) + ")").after(song.html());
+
+}
+
+function getIndexOfSong(id)
+{
+	indexes = $.map(full_playlist, function(obj, index) {
+	    if(obj.id == id) {
+	        return index;
+	    }
+	});
+	return indexes[0];
+}
+
+function getIndexOfConf(flist)
+{
+	indexes = $.map(flist, function(obj, index) {
+	    if("views" in obj) {
+	        return index;
+	    }
+	});
+	return indexes[0];
+}