controls: add shortcut keys for a bunch of items

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

diff --git a/main.js b/main.js
index b83e0a219739a85ff931f8129635815c3eb3b533..aa4c7bd961f329b5506724635ae7e4c7b6b72908 100644 (file)
--- a/main.js
+++ b/main.js
@@ -56,9 +56,25 @@ window.onload = function() {
        });
 };
 
        });
 };
 

+window.onkeypress = function(e) {
+       switch (e.keyCode) {
+       case 49: // 1
+               show_page('controls');
+               break;
+       case 50: // 1
+               show_page('metadata');
+               break;
+       case 51: // 1
+               show_page('playlist');
+               break;
+       case 52: // 1
+               show_page('options');
+               break;
+       }
+};
+

 function mpc_refresh() {
        mpc.status();
 function mpc_refresh() {
        mpc.status();

-       mpc.currentsong();

 }
 
 function mpc_connect(host, port) {
 }
 
 function mpc_connect(host, port) {


@@ -136,6 +152,15 @@ function show_page(page) {
        if (typeof(page) != 'string')
                page = this.id.split('.')[1];
 
        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];
        var eles = document.getElementsByClassName('main');
        for (var i = 0; i < eles.length; ++i) {
                var ele = eles[i];


@@ -183,16 +208,21 @@ function update_sync_settings() {
 }
 
 function init_ui(local_keys, sync_keys, options) {
 }
 
 function init_ui(local_keys, sync_keys, options) {

+       var ele, i;
+

        /* Setup footer */
        /* Setup footer */

+       i = 1;

        [
        [

-               'controls', 'metadata', 'options',
+               'controls', 'metadata', 'playlist', 'options',

        ].forEach(function(id) {
        ].forEach(function(id) {

-               document.getElementById('tab.' + id).onclick = show_page;
+               var ele = document.getElementById('tab.' + id);
+               ele.onclick = show_page;
+               ele.title = id + ' [' + i + ']';
+               ++i;

        });
 
        /* Setup control tab */
        ui_mpc_status = document.getElementById('status');
        });
 
        /* 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',
        [
                'consume', 'next', 'pause', 'play', 'previous', 'random', 'repeat',
                'seekcur', 'setvol', 'single', 'stop',


@@ -200,7 +230,20 @@ function init_ui(local_keys, sync_keys, options) {
                var ele = window['ui_mpc_' + id] = document.getElementById(id);
                ele.onchange = ele.onclick = window['tramp_mpc_' + id];
                ele.title = id;
                var ele = window['ui_mpc_' + id] = document.getElementById(id);
                ele.onchange = ele.onclick = window['tramp_mpc_' + id];
                ele.title = id;

+               if (ele.accessKey)
+                       ele.title += ' [' + ele.accessKey + ']'

        });
        });

+       window['ui_mpc_currtime'] = document.getElementById('currtime');
+
+       /* Setup metadata tab */
+       [
+               'album', 'artist', 'date', 'file', 'title',
+       ].forEach(function(id) {
+               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;
 
        /* Setup options tab */
        document.getElementById('connect').onclick = mpc_connect;


@@ -216,6 +259,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 = ({
 function update_ui(state, cmd) {
        if (typeof(state) == 'string') {
                ui_mpc_status.innerText = ({


@@ -238,24 +294,57 @@ function update_ui(state, cmd) {
                return;
        }
 
                return;
        }
 

-       if ('file' in state) {
-               // Hack: should be a real object.
-               ui_mpc_metadata.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];
        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]));
        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',
 
        [
                'consume', 'random', 'repeat', 'single',