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

This commit is contained in:
Kasper Rynning-Tønnesen
2015-06-10 17:15:14 +02:00
parent 37ed3529c5
commit d299eb7bb4
4 changed files with 138 additions and 50 deletions

View File

@@ -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)

View File

@@ -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{

View File

@@ -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);
}

View File

@@ -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
{
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
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];
}