From 623aec89b17a7dbce819e3508a3c3939957191bc Mon Sep 17 00:00:00 2001 From: calzoneman Date: Wed, 24 Apr 2013 14:28:20 -0500 Subject: [PATCH] Add playlist length indicator (Issue #51) It's not exactly pretty, but I'm hoping to have someone help me pretty up the interface this summer --- channel.js | 28 ++++++++++++++++++++++++++++ media.js | 7 ++++++- www/assets/css/ytsync.css | 19 +++++++++++++++++++ www/assets/js/callbacks.js | 5 +++++ www/index.html | 5 +++++ 5 files changed, 63 insertions(+), 1 deletion(-) diff --git a/channel.js b/channel.js index 3a0472d6..39d920a7 100644 --- a/channel.js +++ b/channel.js @@ -14,6 +14,7 @@ var fs = require("fs"); var Database = require("./database.js"); var Poll = require("./poll.js").Poll; var Media = require("./media.js").Media; +var formatTime = require("./media.js").formatTime; var Logger = require("./logger.js"); var InfoGetter = require("./get-info.js"); var io = require("./server.js").io; @@ -63,6 +64,10 @@ var Channel = function(name) { this.logger = new Logger.Logger("chanlogs/" + this.name + ".log"); this.i = 0; this.time = new Date().getTime(); + this.plmeta = { + count: 0, + time: "00:00" + }; Database.loadChannel(this); if(this.registered) { @@ -89,6 +94,7 @@ Channel.prototype.loadDump = function() { this.sendAll("playlist", { pl: this.queue }); + this.broadcastPlaylistMeta(); // Backwards compatibility if(data.currentPosition != undefined) { this.position = data.currentPosition - 1; @@ -407,6 +413,7 @@ Channel.prototype.sendPlaylist = function(user) { user.socket.emit("updatePlaylistIdx", { idx: this.position }); + user.socket.emit("updatePlaylistMeta", this.plmeta); } Channel.prototype.sendMediaUpdate = function(user) { @@ -444,6 +451,20 @@ Channel.prototype.sendAll = function(message, data) { io.sockets.in(this.name).emit(message, data); } +Channel.prototype.broadcastPlaylistMeta = function() { + var total = 0; + for(var i = 0; i < this.queue.length; i++) { + total += this.queue[i].seconds; + } + var timestr = formatTime(total); + var packet = { + count: this.queue.length, + time: timestr + }; + this.plmeta = packet; + this.sendAll("updatePlaylistMeta", packet); +} + Channel.prototype.broadcastUsercount = function() { this.sendAll("usercount", { count: this.users.length @@ -587,6 +608,7 @@ Channel.prototype.enqueue = function(data, user) { media: media.pack(), pos: idx }); + this.broadcastPlaylistMeta(); this.logger.log("*** Queued from cache: id=" + data.id); } else { @@ -603,6 +625,7 @@ Channel.prototype.enqueue = function(data, user) { media: media.pack(), pos: idx }); + this.broadcastPlaylistMeta(); this.cacheMedia(media); if(data.type == "yp") idx++; @@ -616,6 +639,7 @@ Channel.prototype.enqueue = function(data, user) { media: media.pack(), pos: idx }); + this.broadcastPlaylistMeta(); break; case "tw": var media = new Media(data.id, "Twitch - " + data.id, "--:--", "tw"); @@ -625,6 +649,7 @@ Channel.prototype.enqueue = function(data, user) { media: media.pack(), pos: idx }); + this.broadcastPlaylistMeta(); break; case "rt": var media = new Media(data.id, "Livestream", "--:--", "rt"); @@ -634,6 +659,7 @@ Channel.prototype.enqueue = function(data, user) { media: media.pack(), pos: idx }); + this.broadcastPlaylistMeta(); break; default: break; @@ -677,6 +703,7 @@ Channel.prototype.dequeue = function(data) { this.sendAll("unqueue", { pos: data.pos }); + this.broadcastPlaylistMeta(); // If you remove the currently playing video, play the next one if(data.pos == this.position) { @@ -811,6 +838,7 @@ Channel.prototype.clearqueue = function() { for(var i = 0; i < this.users.length; i++) { this.sendPlaylist(this.users[i]); } + this.broadcastPlaylistMeta(); } Channel.prototype.tryClearqueue = function(user) { diff --git a/media.js b/media.js index a480300a..db71ce3a 100644 --- a/media.js +++ b/media.js @@ -39,12 +39,17 @@ function formatTime(sec) { return time; } +exports.formatTime = formatTime; + // Represents a media entry var Media = function(id, title, seconds, type) { this.id = id; this.title = title; - this.seconds = seconds; + this.seconds = seconds == "--:--" ? "--:--" : parseInt(seconds); this.duration = formatTime(this.seconds); + if(seconds == "--:--") { + this.seconds = 0; + } this.type = type; this.queueby = ""; } diff --git a/www/assets/css/ytsync.css b/www/assets/css/ytsync.css index 272b84e4..20daf33f 100644 --- a/www/assets/css/ytsync.css +++ b/www/assets/css/ytsync.css @@ -37,12 +37,31 @@ clear: both; } +#queue { + margin-bottom: 0; +} + #usercount, #currenttitle { border: 1px solid #aaaaaa; border-bottom: none; margin: 0; } +#plmeta { + border: 1px solid #aaaaaa; + margin: 0; + padding: 3px 3px; + font-size: 12pt; +} + +#plcount { + float: left; +} + +#pllength { + float: right; +} + #userlist { overflow-y: scroll; overflow-x: hidden; diff --git a/www/assets/js/callbacks.js b/www/assets/js/callbacks.js index 9d763aea..6a7b0cb0 100644 --- a/www/assets/js/callbacks.js +++ b/www/assets/js/callbacks.js @@ -253,6 +253,11 @@ function initCallbacks() { } }); + socket.on("updatePlaylistMeta", function(data) { + $("#plcount").text(data.count + " items"); + $("#pllength").text(data.time); + }); + socket.on("queue", function(data) { var li = makeQueueEntry(data.media); if(RANK >= Rank.Moderator || OPENQUEUE || LEADER) diff --git a/www/index.html b/www/index.html index 23b4fb34..4d40b06b 100644 --- a/www/index.html +++ b/www/index.html @@ -85,6 +85,11 @@ +
+

+

+
+