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

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>