X-Git-Url: https://git.wh0rd.org/?p=chrome-ext%2Fmusic-player-client.git;a=blobdiff_plain;f=main.js;h=9902b935d01e7042570268c13be9d07b82f337c1;hp=1e83a3b2b6c0b996f34e4b30e12478ccea15554d;hb=9cb957ede33364c6ba1b19529050a24cd2aa8f5f;hpb=a7204fc7d572e685cf591ccc941c35f8ff7cf322 diff --git a/main.js b/main.js index 1e83a3b..9902b93 100644 --- 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); @@ -53,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(); - mpc.currentsong(); } function mpc_connect(host, port) { @@ -79,6 +98,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(); }); @@ -89,6 +110,7 @@ function tramp_mpc_consume() { mpc.consume(val); setToggleButton(this, val); } +function tramp_mpc_deleteid() { mpc.deleteid(this.title); } function tramp_mpc_next() { mpc.next(); } function tramp_mpc_pause() { mpc.pause(); } function tramp_mpc_play() { mpc.play(); } @@ -131,6 +153,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]; @@ -151,7 +182,7 @@ function do_refresh() { } function update_refresh_timer() { - if (refresh_id != NaN) + if (!isNaN(refresh_id)) window.clearTimeout(refresh_id); var rate = window['opts_refresh'].value * 1000; if (rate > 0) @@ -178,25 +209,43 @@ function update_sync_settings() { } function init_ui(local_keys, sync_keys, options) { + var ele, i; + /* Setup footer */ + i = 1; [ - 'controls', 'metadata', 'options', + 'controls', 'metadata', 'playlist', 'options', ].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'); - 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; + 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; local_keys.forEach(function(id) { @@ -211,6 +260,24 @@ 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 playlist_del() { + mpc.deleteid(this.title); + this.parentNode.remove(); +} + function update_ui(state, cmd) { if (typeof(state) == 'string') { ui_mpc_status.innerText = ({ @@ -233,22 +300,64 @@ function update_ui(state, cmd) { return; } - if ('file' in state) { - // Hack: should be a real object. - ui_mpc_metadata.innerText = state['file']; - return; - } + /* 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.id = 'playlist_del'; + cell.innerHTML = '¤'; + cell.title = song.Id; + cell.onclick = playlist_del; + + 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])); + ui_mpc_seekcur.title = 'seekcur (' + percent + '%)'; + ui_mpc_currtime.innerText = [pretty_time(time[0]), pretty_time(time[1]), percent + '%'].join(' / '); + + ui_mpc_setvol.value = state.volume; + ui_mpc_setvol.title = 'setvol (' + state.volume + '%)'; - window['ui_mpc_setvol'].value = state.volume; [ 'consume', 'random', 'repeat', 'single', ].forEach(function(id) {