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

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

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 = "";
 }

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;

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)

www/index.html

@@ -85,6 +85,11 @@
                 <button class="btn btn-danger" id="voteskip">Voteskip</button>
                 <ul id="queue" class="videolist">
                 </ul>
+                <div id="plmeta">
+                    <p id="plcount"></p>
+                    <p id="pllength"></p>
+                    <div style="clear: both;"></div>
+                </div>
                 <button class="btn btn-danger" id="qlockbtn" style="width: 100%; display:none;">Unlock Queue</button>
                 <div class="btn-group" style="width: 100%;">
                     <button class="btn" id="getplaylist" style="width: 34%">Get Playlist URLs</button>