metadata: add a bit more info to the tab

[chrome-ext/music-player-client.git] / main.js

diff --git a/main.js b/main.js
index c0436df50ddc4ad0faf2f6eb8a19d469e211ca8b..88c146f850c6c271ff2caafa0aeb907282b779a7 100644 (file)
--- a/main.js
+++ b/main.js
@@ -11,6 +11,9 @@ function TcpClientSender(tcpclient) {
 TcpClientSender.prototype.send = function(data, cb) {
        this.tcpclient.sendMessage(data, cb);
 }
+TcpClientSender.prototype.poll = function() {
+       this.tcpclient.poll();
+}
 
 function tramp_mpc_recv(data) {
        mpc.recv(data);
@@ -79,6 +82,8 @@ function mpc_connect(host, port) {
                tcpclient.addResponseListener(tramp_mpc_recv);
                mpc = new Mpc(mpc_sender, update_ui);
                console.log('connected to ' + host + ':' + port);
+               console.log('protip: use the "mpc" object to poke mpd directly.\n' +
+                           'you can also do mpc.set_debug(3) to see traffic');
                mpc_refresh();
                update_refresh_timer();
        });
@@ -187,16 +192,22 @@ function init_ui(local_keys, sync_keys, options) {
 
        /* Setup control tab */
        ui_mpc_status = document.getElementById('status');
-       ui_mpc_metadata = document.getElementById('metadata');
        [
                'consume', 'next', 'pause', 'play', 'previous', 'random', 'repeat',
                'seekcur', 'setvol', 'single', 'stop',
        ].forEach(function(id) {
                var ele = window['ui_mpc_' + id] = document.getElementById(id);
-               ele.onclick = window['tramp_mpc_' + id];
+               ele.onchange = ele.onclick = window['tramp_mpc_' + id];
                ele.title = id;
        });
 
+       /* Setup metadata tab */
+       [
+               'album', 'artist', 'date', 'file', 'title',
+       ].forEach(function(id) {
+               window['ui_mpc_metadata_' + id] = document.getElementById('metadata.' + id);
+       });
+
        /* Setup options tab */
        document.getElementById('connect').onclick = mpc_connect;
        local_keys.forEach(function(id) {
@@ -233,11 +244,12 @@ function update_ui(state, cmd) {
                return;
        }
 
-       if ('file' in state) {
-               // Hack: should be a real object.
-               ui_mpc_metadata.innerText = state['file'];
-               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;
 
        var time;
        if ('time' in state)
@@ -245,10 +257,14 @@ function update_ui(state, cmd) {
                time = state.time.split(':');
        else
                time = [0, 0];
-       window['ui_mpc_seekcur'].max = time[1];
-       window['ui_mpc_seekcur'].value = time[0];
+       window.ui_mpc_seekcur.max = time[1];
+       window.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 + '%)';
+
+       window.ui_mpc_setvol.value = state.volume;
+       window.ui_mpc_setvol.title = 'setvol (' + state.volume + '%)';
 
-       window['ui_mpc_setvol'].value = state.volume;
        [
                'consume', 'random', 'repeat', 'single',
        ].forEach(function(id) {