only refresh metadata/playlist tabs when the underlying data has changed

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

diff --git a/main.js b/main.js
index aa4c7bd961f329b5506724635ae7e4c7b6b72908..a5bf7841f730014dac609bb68e3145552b829e82 100644 (file)
--- a/main.js
+++ b/main.js
@@ -14,6 +14,10 @@ TcpClientSender.prototype.send = function(data, cb) {
 TcpClientSender.prototype.poll = function() {
        this.tcpclient.poll();
 }
+TcpClientSender.prototype.reconnect = function() {
+       this.tcpclient.disconnect();
+       this.tcpclient.connect();
+}
 
 function tramp_mpc_recv(data) {
        mpc.recv(data);
@@ -110,6 +114,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(); }
@@ -272,6 +277,16 @@ function pretty_time(time) {
        return ret + ("00" + sec).substr(-2);
 }
 
+function playlist_del() {
+       mpc.deleteid(this.song_id);
+       this.parentNode.remove();
+}
+
+function playlist_play() {
+       mpc.playid(this.song_id);
+       this.parentNode.style.fontWeight = 'bold';
+}
+
 function update_ui(state, cmd) {
        if (typeof(state) == 'string') {
                ui_mpc_status.innerText = ({
@@ -294,57 +309,75 @@ function update_ui(state, cmd) {
                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.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 {
+       /* Update the metadata tab only when things have changed. */
+       if ('Currentsong' in state && ui_mpc_metadata_file.lastUpdate != state.Currentsong.lastUpdate) {
+               var 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 only when things have changed. */
+       if ('Playlist' in state && ui_mpc_playlist.lastUpdate != state.Playlist.lastUpdate) {
+               var 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.file;
-                       cell.colSpan = 3;
-               }
-               row.insertCell(-1).innerText = pretty_time(song.Time);
-       });
+                       cell.id = 'playlist_del';
+                       cell.innerHTML = '¤';
+                       cell.song_id = song.Id;
+                       cell.title = 'delete';
+                       cell.onclick = playlist_del;
+
+                       cell = row.insertCell(-1);
+                       cell.innerText = song.Pos;
+                       cell.style.textAlign = 'right';
+                       cell.song_id = song.Id;
+                       cell.title = 'play';
+                       cell.onclick = playlist_play;
+
+                       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);
+               });
+
+               ui_mpc_playlist.lastUpdate = playlist.lastUpdate;
+       }
 
        /* Update the status tab. */
-       var time;
-       if ('time' in state)
+       var time, percent;
+       if ('time' in state) {
                // When stopped, there is no time field at all.
                time = state.time.split(':');
-       else
+               percent = Math.floor((0.0 + time[0]) * 100 / (0.0 + time[1]));
+       } else {
                time = [0, 0];
+               percent = 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 + '%)';
+       ui_mpc_setvol.title = 'setvol';
+       if ('volume' in state) {
+               ui_mpc_setvol.value = state.volume;
+               ui_mpc_setvol.title += ' (' + state.volume + '%)';
+       }
 
        [
                'consume', 'random', 'repeat', 'single',