playlist: new tab (very basic)

diff --git a/js/mpc.js b/js/mpc.js
index ae013332e618a7700ae0e5a75f4d913c3f94f671..f27901d266dfb2558b38a86d84f65f2a4b2d03fb 100644 (file)
--- a/js/mpc.js
+++ b/js/mpc.js
@@ -31,30 +31,60 @@ Mpc.prototype.send = function(msg) {
        });
 }
 
+Mpc.prototype._parse_result = function(lines) {
+       var state = {};
+       var keys = [];
+       var key, val, i;
+
+       lines.forEach(function(line) {
+               i = line.indexOf(':');
+               if (i == -1)
+                       return; // Ignores the OK line
+               key = line.substr(0, i);
+               keys.push(key);
+               val = line.substr(i + 2);
+               state[key] = val;
+       });
+
+       return {
+               'state': state,
+               'keys': keys,
+       };
+}
+
 Mpc.prototype.recv_msg = function(lines) {
-       curr = this._queue.shift();
+       var state, keys, ret;
+       var curr = this._queue.shift();
        this.log(0x2, 'recv: [' + curr + ']:', lines.join('\n'));
        if (lines[0].substr(0, 4) == 'ACK ')
                this.err(curr, lines.join('\n'));
        curr = curr.split(' ');
 
        switch (curr[0]) {
-       // Needs to return a list of dicts (see above for dicts).
-       //case 'playlistinfo':
+       case 'playlistinfo':
+               var i = 2, playlist = [], song;
+               while (i < lines.length) {
+                       if (lines[i].substr(0, 5) == 'file:') {
+                               song = this._parse_result(lines.splice(0, i + 1)).state;
+                               playlist = playlist.concat(song);
+                               i = 0;
+                       } else
+                               ++i;
+               }
+               this.state.Playlist = playlist;
+               this._cb_update_state(this.state);
+               break;
+
        case 'currentsong':
+               this.state.Currentsong = this._parse_result(lines).state;
+               this._cb_update_state(this.state);
+               break;
+
        case 'stats':
        case 'status':
-               state = {};
-               keys = [];
-               lines.forEach(function(line) {
-                       i = line.indexOf(':');
-                       if (i == -1)
-                               return; // Ignores the OK line
-                       key = line.substr(0, i);
-                       keys.push(key);
-                       val = line.substr(i + 2);
-                       state[key] = val;
-               });
+               ret = this._parse_result(lines);
+               state = ret.state;
+               keys = ret.keys;
 
                // When mpd is stopped, it gives us back crap values for some things.
                if ('state' in state && state.state == 'stop') {
@@ -63,13 +93,14 @@ Mpc.prototype.recv_msg = function(lines) {
                }
                // Now merge the current state with the previous one so that we don't
                // lose information like volume or song position.
-               curr_state = this.state;
+               var curr_state = this.state;
                keys.forEach(function(key) {
                        curr_state[key] = state[key];
                });
 
                this._cb_update_state(curr_state);
                break;
+
        default:
                this._cb_update_state(lines, curr);
                break;

diff --git a/main.html b/main.html
index 1af66ee99690d7f690b85b314d2776bdd4c9c3b7..4305f7d66451997a676654292f83d9fe7a1f434d 100644 (file)
--- a/main.html
+++ b/main.html
@@ -36,6 +36,11 @@ table.tabs td.selected {
        background-color: white;
 }
 
+table#playlist td {
+       border-left: black solid 1px;
+       padding-right: 0.5em;
+}
+
 /* Get the tabs to float at the bottom */
 html, body {
        height: 100%;
@@ -79,9 +84,10 @@ div#footer {
   </td>
  </tr>
  <tr>
-  <td colspan=2>
-   <span id='status'>Loading...</span>
+  <td id='status'>
+   Loading...
   </td>
+  <td id='currtime'></td>
  </tr>
 </table>
 </div>
@@ -119,6 +125,10 @@ div#footer {
 <span id='metadata.file'></span>
 </div>
 
+<div class='main' id='main.playlist' style='display: none'>
+<table id='playlist'></table>
+</div>
+
 </div>
 
 <div id='footer'>
@@ -126,6 +136,7 @@ div#footer {
  <tr>
   <td id='tab.controls' class='selected'>Controls</td>
   <td id='tab.metadata'>Metadata</td>
+  <td id='tab.playlist'>Playlist</td>
   <td id='tab.options'>Options</td>
  </tr>
 </table>

diff --git a/main.js b/main.js
index 88c146f850c6c271ff2caafa0aeb907282b779a7..9155650966c2f3a40c2f14befc72a61a33437080 100644 (file)
--- a/main.js
+++ b/main.js
@@ -58,7 +58,6 @@ window.onload = function() {
 
 function mpc_refresh() {
        mpc.status();
-       mpc.currentsong();
 }
 
 function mpc_connect(host, port) {
@@ -136,6 +135,15 @@ function show_page(page) {
        if (typeof(page) != 'string')
                page = this.id.split('.')[1];
 
+       switch (page) {
+       case 'playlist':
+               mpc.playlistinfo();
+               // Fallthrough.
+       case 'metadata':
+               mpc.currentsong();
+               break;
+       }
+
        var eles = document.getElementsByClassName('main');
        for (var i = 0; i < eles.length; ++i) {
                var ele = eles[i];
@@ -185,7 +193,7 @@ function update_sync_settings() {
 function init_ui(local_keys, sync_keys, options) {
        /* Setup footer */
        [
-               'controls', 'metadata', 'options',
+               'controls', 'metadata', 'options', 'playlist',
        ].forEach(function(id) {
                document.getElementById('tab.' + id).onclick = show_page;
        });
@@ -200,6 +208,7 @@ function init_ui(local_keys, sync_keys, options) {
                ele.onchange = ele.onclick = window['tramp_mpc_' + id];
                ele.title = id;
        });
+       window['ui_mpc_currtime'] = document.getElementById('currtime');
 
        /* Setup metadata tab */
        [
@@ -208,6 +217,9 @@ function init_ui(local_keys, sync_keys, options) {
                window['ui_mpc_metadata_' + id] = document.getElementById('metadata.' + id);
        });
 
+       /* Setup playlist tab */
+       window['ui_mpc_playlist'] = document.getElementById('playlist');
+
        /* Setup options tab */
        document.getElementById('connect').onclick = mpc_connect;
        local_keys.forEach(function(id) {
@@ -222,6 +234,19 @@ function init_ui(local_keys, sync_keys, options) {
        });
 }
 
+function pretty_time(time) {
+       var sec, min, hrs, ret = '';
+       time = parseInt(time);
+       sec = time % 60;
+       min = parseInt((time / 60) % 60);
+       hrs = parseInt((time / 3600) % 3600);
+       if (hrs)
+               ret = hrs + ':' + ("00" + min).substr(-2) + ':';
+       else
+               ret = min + ':';
+       return ret + ("00" + sec).substr(-2);
+}
+
 function update_ui(state, cmd) {
        if (typeof(state) == 'string') {
                ui_mpc_status.innerText = ({
@@ -244,26 +269,57 @@ function update_ui(state, cmd) {
                return;
        }
 
-       // Hack: should be a real object.
-       ui_mpc_metadata_album.innerText = state.Album;
-       ui_mpc_metadata_artist.innerText = state.Artist;
-       ui_mpc_metadata_title.innerText = state.Title;
-       ui_mpc_metadata_date.innerText = state.Date;
-       ui_mpc_metadata_file.innerText = state.file;
+       /* Update the metadata tab. */
+       var currentsong = {};
+       if ('Currentsong' in state)
+               currentsong = state.Currentsong;
+       ui_mpc_metadata_album.innerText = currentsong.Album;
+       ui_mpc_metadata_artist.innerText = currentsong.Artist;
+       ui_mpc_metadata_title.innerText = currentsong.Title;
+       ui_mpc_metadata_date.innerText = currentsong.Date;
+       ui_mpc_metadata_file.innerText = currentsong.file;
+
+       /* Update the playlist tab. */
+       var playlist = [];
+       if ('Playlist' in state)
+               playlist = state.Playlist;
+       ui_mpc_playlist.innerHTML = '';
+       playlist.forEach(function(song) {
+               var cell, row = ui_mpc_playlist.insertRow(-1);
+               if (song.Pos == currentsong.Pos)
+                       row.style.fontWeight = 'bold';
+
+               cell = row.insertCell(-1);
+               cell.innerText = song.Pos;
+               cell.style.textAlign = 'right';
+
+               if ('Artist' in song) {
+                       row.insertCell(-1).innerText = song.Artist;
+                       row.insertCell(-1).innerText = song.Album;
+                       row.insertCell(-1).innerText = song.Title;
+               } else {
+                       cell = row.insertCell(-1);
+                       cell.innerText = song.file;
+                       cell.colSpan = 3;
+               }
+               row.insertCell(-1).innerText = pretty_time(song.Time);
+       });
 
+       /* Update the status tab. */
        var time;
        if ('time' in state)
                // When stopped, there is no time field at all.
                time = state.time.split(':');
        else
                time = [0, 0];
-       window.ui_mpc_seekcur.max = time[1];
-       window.ui_mpc_seekcur.value = time[0];
+       ui_mpc_seekcur.max = time[1];
+       ui_mpc_seekcur.value = time[0];
        percent = Math.floor((0.0 + time[0]) * 100 / (0.0 + time[1]));
-       window.ui_mpc_seekcur.title = 'seekcur (' + percent + '%)';
+       ui_mpc_seekcur.title = 'seekcur (' + percent + '%)';
+       ui_mpc_currtime.innerText = [pretty_time(time[0]), pretty_time(time[1]), percent + '%'].join(' / ');
 
-       window.ui_mpc_setvol.value = state.volume;
-       window.ui_mpc_setvol.title = 'setvol (' + state.volume + '%)';
+       ui_mpc_setvol.value = state.volume;
+       ui_mpc_setvol.title = 'setvol (' + state.volume + '%)';
 
        [
                'consume', 'random', 'repeat', 'single',