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