main.js

   1 // Written by Mike Frysinger <vapier@gmail.com>.  Released into the public domain.  Suck it.
   2
   3 /* Globals to allow easy manipulation via javascript console */
   4 var mpc;
   5 var tcpclient;
   6 var refresh_id = NaN;
   7
   8 function TcpClientSender(tcpclient) {
   9         this.tcpclient = tcpclient;
  10 }
  11 TcpClientSender.prototype.send = function(data, cb) {
  12         this.tcpclient.sendMessage(data, cb);
  13 }
  14 TcpClientSender.prototype.poll = function() {
  15         this.tcpclient.poll();
  16 }
  17
  18 function tramp_mpc_recv(data) {
  19         mpc.recv(data);
  20 }
  21
  22 function sync_storage(sync) {
  23         return sync ? chrome.storage.sync : chrome.storage.local;
  24 }
  25
  26 window.onload = function() {
  27         var local_keys = [
  28                 'sync',
  29         ];
  30         var sync_keys = [
  31                 'host', 'port', 'refresh',
  32         ];
  33         var options = {
  34                 'host': '192.168.0.2',
  35                 'port': 6600,
  36                 'sync': true,
  37                 'refresh': 5,
  38         };
  39
  40         chrome.storage.local.get(local_keys, function(settings) {
  41                 local_keys.forEach(function(key) {
  42                         if (key in settings)
  43                                 options[key] = settings[key]
  44                 });
  45
  46                 var storage = sync_storage(options['sync']);
  47                 storage.get(sync_keys, function(settings) {
  48                         sync_keys.forEach(function(key) {
  49                                 if (key in settings)
  50                                         options[key] = settings[key];
  51                         });
  52
  53                         init_ui(local_keys, sync_keys, options);
  54                         mpc_connect();
  55                 });
  56         });
  57 };
  58
  59 window.onkeypress = function(e) {
  60         switch (e.keyCode) {
  61         case 49: // 1
  62                 show_page('controls');
  63                 break;
  64         case 50: // 1
  65                 show_page('metadata');
  66                 break;
  67         case 51: // 1
  68                 show_page('playlist');
  69                 break;
  70         case 52: // 1
  71                 show_page('options');
  72                 break;
  73         }
  74 };
  75
  76 function mpc_refresh() {
  77         mpc.status();
  78 }
  79
  80 function mpc_connect(host, port) {
  81         if (typeof(host) != 'string') {
  82                 host = window['opts_host'].value;
  83                 port = parseInt(window['opts_port'].value);
  84         }
  85
  86         if (mpc != undefined) {
  87                 console.log('disconnecting');
  88                 update_ui('disconnect');
  89                 delete mpc;
  90                 tcpclient.disconnect();
  91                 delete tcpclient;
  92         }
  93
  94         update_ui('init');
  95         tcpclient = new TcpClient(host, port);
  96         tcpclient.connect(function() {
  97                 var mpc_sender = new TcpClientSender(tcpclient);
  98                 tcpclient.addResponseListener(tramp_mpc_recv);
  99                 mpc = new Mpc(mpc_sender, update_ui);
 100                 console.log('connected to ' + host + ':' + port);
 101                 console.log('protip: use the "mpc" object to poke mpd directly.\n' +
 102                             'you can also do mpc.set_debug(3) to see traffic');
 103                 mpc_refresh();
 104                 update_refresh_timer();
 105         });
 106 }
 107
 108 function tramp_mpc_consume() {
 109         var val = zo(!getToggleButton(this));
 110         mpc.consume(val);
 111         setToggleButton(this, val);
 112 }
 113 function tramp_mpc_deleteid() { mpc.deleteid(this.title); }
 114 function tramp_mpc_next() { mpc.next(); }
 115 function tramp_mpc_pause() { mpc.pause(); }
 116 function tramp_mpc_play() { mpc.play(); }
 117 function tramp_mpc_previous() { mpc.previous(); }
 118 function tramp_mpc_random() {
 119         var val = zo(!getToggleButton(this));
 120         mpc.random(val);
 121         setToggleButton(this, val);
 122 }
 123 function tramp_mpc_repeat() {
 124         var val = zo(!getToggleButton(this));
 125         mpc.repeat(val);
 126         setToggleButton(this, val);
 127 }
 128 function tramp_mpc_seekcur() { mpc.seekcur(this.value); }
 129 function tramp_mpc_setvol() { mpc.setvol(this.value); }
 130 function tramp_mpc_single() {
 131         var val = zo(!getToggleButton(this));
 132         mpc.single(val);
 133         setToggleButton(this, val);
 134 }
 135 function tramp_mpc_stop() { mpc.stop(); }
 136
 137 function zo(val) {
 138         return val ? 1 : 0;
 139 }
 140 function szo(val) {
 141         return val == '0' ? 0 : 1;
 142 }
 143 function getToggleButton(btn) {
 144         return btn.style.borderStyle == 'inset';
 145 }
 146 function setToggleButton(btn, val) {
 147         if (val === undefined)
 148                 val = !getToggleButton(btn);
 149         btn.style.borderStyle = val ? 'inset' : '';
 150 }
 151
 152 function show_page(page) {
 153         if (typeof(page) != 'string')
 154                 page = this.id.split('.')[1];
 155
 156         switch (page) {
 157         case 'playlist':
 158                 mpc.playlistinfo();
 159                 // Fallthrough.
 160         case 'metadata':
 161                 mpc.currentsong();
 162                 break;
 163         }
 164
 165         var eles = document.getElementsByClassName('main');
 166         for (var i = 0; i < eles.length; ++i) {
 167                 var ele = eles[i];
 168                 var dis = 'none';
 169                 var cls = '';
 170                 if (ele.id == 'main.' + page) {
 171                         dis = '';
 172                         cls = 'selected';
 173                 }
 174                 ele.style.display = dis;
 175                 document.getElementById('tab.' + ele.id.split('.')[1]).className = cls;
 176         }
 177 }
 178
 179 function do_refresh() {
 180         mpc_refresh();
 181         refresh_id = window.setTimeout(do_refresh, window['opts_refresh'].value * 1000);
 182 }
 183
 184 function update_refresh_timer() {
 185         if (!isNaN(refresh_id))
 186                 window.clearTimeout(refresh_id);
 187         var rate = window['opts_refresh'].value * 1000;
 188         if (rate > 0)
 189                 refresh_id = window.setTimeout(do_refresh, rate);
 190 }
 191
 192 function update_local_settings() {
 193         var setting = {};
 194         setting[this.id] = this.checked;
 195         chrome.storage.local.set(setting);
 196 }
 197
 198 function update_sync_settings() {
 199         var setting = {};
 200         setting[this.id] = this.value;
 201         var storage = sync_storage(window['opts_sync'].checked);
 202         storage.set(setting);
 203
 204         switch (this.id) {
 205         case 'refresh':
 206                 update_refresh_timer();
 207                 break;
 208         }
 209 }
 210
 211 function init_ui(local_keys, sync_keys, options) {
 212         var ele, i;
 213
 214         /* Setup footer */
 215         i = 1;
 216         [
 217                 'controls', 'metadata', 'playlist', 'options',
 218         ].forEach(function(id) {
 219                 var ele = document.getElementById('tab.' + id);
 220                 ele.onclick = show_page;
 221                 ele.title = id + ' [' + i + ']';
 222                 ++i;
 223         });
 224
 225         /* Setup control tab */
 226         ui_mpc_status = document.getElementById('status');
 227         [
 228                 'consume', 'next', 'pause', 'play', 'previous', 'random', 'repeat',
 229                 'seekcur', 'setvol', 'single', 'stop',
 230         ].forEach(function(id) {
 231                 var ele = window['ui_mpc_' + id] = document.getElementById(id);
 232                 ele.onchange = ele.onclick = window['tramp_mpc_' + id];
 233                 ele.title = id;
 234                 if (ele.accessKey)
 235                         ele.title += ' [' + ele.accessKey + ']'
 236         });
 237         window['ui_mpc_currtime'] = document.getElementById('currtime');
 238
 239         /* Setup metadata tab */
 240         [
 241                 'album', 'artist', 'date', 'file', 'title',
 242         ].forEach(function(id) {
 243                 window['ui_mpc_metadata_' + id] = document.getElementById('metadata.' + id);
 244         });
 245
 246         /* Setup playlist tab */
 247         window['ui_mpc_playlist'] = document.getElementById('playlist');
 248
 249         /* Setup options tab */
 250         document.getElementById('connect').onclick = mpc_connect;
 251         local_keys.forEach(function(id) {
 252                 var ele = window['opts_' + id] = document.getElementById(id);
 253                 ele.checked = options[id];
 254                 ele.onchange = update_local_settings;
 255         });
 256         sync_keys.forEach(function(id) {
 257                 var ele = window['opts_' + id] = document.getElementById(id);
 258                 ele.value = options[id];
 259                 ele.oninput = update_sync_settings;
 260         });
 261 }
 262
 263 function pretty_time(time) {
 264         var sec, min, hrs, ret = '';
 265         time = parseInt(time);
 266         sec = time % 60;
 267         min = parseInt((time / 60) % 60);
 268         hrs = parseInt((time / 3600) % 3600);
 269         if (hrs)
 270                 ret = hrs + ':' + ("00" + min).substr(-2) + ':';
 271         else
 272                 ret = min + ':';
 273         return ret + ("00" + sec).substr(-2);
 274 }
 275
 276 function playlist_del() {
 277         mpc.deleteid(this.title);
 278         this.parentNode.remove();
 279 }
 280
 281 function update_ui(state, cmd) {
 282         if (typeof(state) == 'string') {
 283                 ui_mpc_status.innerText = ({
 284                         'disconnect': 'Disconnecting...',
 285                         'init': 'Connecting...',
 286                 })[state];
 287                 return;
 288         }
 289
 290         if (Array.isArray(state)) {
 291                 /*
 292                 switch (cmd[0]) {
 293                 case 'setvol':
 294                 case 'seekcur':
 295                         break;
 296                 default:
 297                         mpc_refresh();
 298                 }
 299                 */
 300                 return;
 301         }
 302
 303         /* Update the metadata tab. */
 304         var currentsong = {};
 305         if ('Currentsong' in state)
 306                 currentsong = state.Currentsong;
 307         ui_mpc_metadata_album.innerText = currentsong.Album;
 308         ui_mpc_metadata_artist.innerText = currentsong.Artist;
 309         ui_mpc_metadata_title.innerText = currentsong.Title;
 310         ui_mpc_metadata_date.innerText = currentsong.Date;
 311         ui_mpc_metadata_file.innerText = currentsong.file;
 312
 313         /* Update the playlist tab. */
 314         var playlist = [];
 315         if ('Playlist' in state)
 316                 playlist = state.Playlist;
 317         ui_mpc_playlist.innerHTML = '';
 318         playlist.forEach(function(song) {
 319                 var cell, row = ui_mpc_playlist.insertRow(-1);
 320                 if (song.Pos == currentsong.Pos)
 321                         row.style.fontWeight = 'bold';
 322
 323                 cell = row.insertCell(-1);
 324                 cell.id = 'playlist_del';
 325                 cell.innerHTML = '&#164;';
 326                 cell.title = song.Id;
 327                 cell.onclick = playlist_del;
 328
 329                 cell = row.insertCell(-1);
 330                 cell.innerText = song.Pos;
 331                 cell.style.textAlign = 'right';
 332
 333                 if ('Artist' in song) {
 334                         row.insertCell(-1).innerText = song.Artist;
 335                         row.insertCell(-1).innerText = song.Album;
 336                         row.insertCell(-1).innerText = song.Title;
 337                 } else {
 338                         cell = row.insertCell(-1);
 339                         cell.innerText = song.file;
 340                         cell.colSpan = 3;
 341                 }
 342                 row.insertCell(-1).innerText = pretty_time(song.Time);
 343         });
 344
 345         /* Update the status tab. */
 346         var time;
 347         if ('time' in state)
 348                 // When stopped, there is no time field at all.
 349                 time = state.time.split(':');
 350         else
 351                 time = [0, 0];
 352         ui_mpc_seekcur.max = time[1];
 353         ui_mpc_seekcur.value = time[0];
 354         percent = Math.floor((0.0 + time[0]) * 100 / (0.0 + time[1]));
 355         ui_mpc_seekcur.title = 'seekcur (' + percent + '%)';
 356         ui_mpc_currtime.innerText = [pretty_time(time[0]), pretty_time(time[1]), percent + '%'].join(' / ');
 357
 358         ui_mpc_setvol.value = state.volume;
 359         ui_mpc_setvol.title = 'setvol (' + state.volume + '%)';
 360
 361         [
 362                 'consume', 'random', 'repeat', 'single',
 363         ].forEach(function(id) {
 364                 setToggleButton(window['ui_mpc_' + id], szo(state[id]));
 365         });
 366
 367         ui_mpc_status.innerText = ({
 368                 'play': 'Playing',
 369                 'pause': 'Paused',
 370                 'stop': 'Stopped',
 371         })[state.state];
 372 }