]> git.wh0rd.org Git - chrome-ext/music-player-client.git/blob - main.js
controls: add shortcut keys for a bunch of items
[chrome-ext/music-player-client.git] / 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_next() { mpc.next(); }
114 function tramp_mpc_pause() { mpc.pause(); }
115 function tramp_mpc_play() { mpc.play(); }
116 function tramp_mpc_previous() { mpc.previous(); }
117 function tramp_mpc_random() {
118         var val = zo(!getToggleButton(this));
119         mpc.random(val);
120         setToggleButton(this, val);
121 }
122 function tramp_mpc_repeat() {
123         var val = zo(!getToggleButton(this));
124         mpc.repeat(val);
125         setToggleButton(this, val);
126 }
127 function tramp_mpc_seekcur() { mpc.seekcur(this.value); }
128 function tramp_mpc_setvol() { mpc.setvol(this.value); }
129 function tramp_mpc_single() {
130         var val = zo(!getToggleButton(this));
131         mpc.single(val);
132         setToggleButton(this, val);
133 }
134 function tramp_mpc_stop() { mpc.stop(); }
135
136 function zo(val) {
137         return val ? 1 : 0;
138 }
139 function szo(val) {
140         return val == '0' ? 0 : 1;
141 }
142 function getToggleButton(btn) {
143         return btn.style.borderStyle == 'inset';
144 }
145 function setToggleButton(btn, val) {
146         if (val === undefined)
147                 val = !getToggleButton(btn);
148         btn.style.borderStyle = val ? 'inset' : '';
149 }
150
151 function show_page(page) {
152         if (typeof(page) != 'string')
153                 page = this.id.split('.')[1];
154
155         switch (page) {
156         case 'playlist':
157                 mpc.playlistinfo();
158                 // Fallthrough.
159         case 'metadata':
160                 mpc.currentsong();
161                 break;
162         }
163
164         var eles = document.getElementsByClassName('main');
165         for (var i = 0; i < eles.length; ++i) {
166                 var ele = eles[i];
167                 var dis = 'none';
168                 var cls = '';
169                 if (ele.id == 'main.' + page) {
170                         dis = '';
171                         cls = 'selected';
172                 }
173                 ele.style.display = dis;
174                 document.getElementById('tab.' + ele.id.split('.')[1]).className = cls;
175         }
176 }
177
178 function do_refresh() {
179         mpc_refresh();
180         refresh_id = window.setTimeout(do_refresh, window['opts_refresh'].value * 1000);
181 }
182
183 function update_refresh_timer() {
184         if (!isNaN(refresh_id))
185                 window.clearTimeout(refresh_id);
186         var rate = window['opts_refresh'].value * 1000;
187         if (rate > 0)
188                 refresh_id = window.setTimeout(do_refresh, rate);
189 }
190
191 function update_local_settings() {
192         var setting = {};
193         setting[this.id] = this.checked;
194         chrome.storage.local.set(setting);
195 }
196
197 function update_sync_settings() {
198         var setting = {};
199         setting[this.id] = this.value;
200         var storage = sync_storage(window['opts_sync'].checked);
201         storage.set(setting);
202
203         switch (this.id) {
204         case 'refresh':
205                 update_refresh_timer();
206                 break;
207         }
208 }
209
210 function init_ui(local_keys, sync_keys, options) {
211         var ele, i;
212
213         /* Setup footer */
214         i = 1;
215         [
216                 'controls', 'metadata', 'playlist', 'options',
217         ].forEach(function(id) {
218                 var ele = document.getElementById('tab.' + id);
219                 ele.onclick = show_page;
220                 ele.title = id + ' [' + i + ']';
221                 ++i;
222         });
223
224         /* Setup control tab */
225         ui_mpc_status = document.getElementById('status');
226         [
227                 'consume', 'next', 'pause', 'play', 'previous', 'random', 'repeat',
228                 'seekcur', 'setvol', 'single', 'stop',
229         ].forEach(function(id) {
230                 var ele = window['ui_mpc_' + id] = document.getElementById(id);
231                 ele.onchange = ele.onclick = window['tramp_mpc_' + id];
232                 ele.title = id;
233                 if (ele.accessKey)
234                         ele.title += ' [' + ele.accessKey + ']'
235         });
236         window['ui_mpc_currtime'] = document.getElementById('currtime');
237
238         /* Setup metadata tab */
239         [
240                 'album', 'artist', 'date', 'file', 'title',
241         ].forEach(function(id) {
242                 window['ui_mpc_metadata_' + id] = document.getElementById('metadata.' + id);
243         });
244
245         /* Setup playlist tab */
246         window['ui_mpc_playlist'] = document.getElementById('playlist');
247
248         /* Setup options tab */
249         document.getElementById('connect').onclick = mpc_connect;
250         local_keys.forEach(function(id) {
251                 var ele = window['opts_' + id] = document.getElementById(id);
252                 ele.checked = options[id];
253                 ele.onchange = update_local_settings;
254         });
255         sync_keys.forEach(function(id) {
256                 var ele = window['opts_' + id] = document.getElementById(id);
257                 ele.value = options[id];
258                 ele.oninput = update_sync_settings;
259         });
260 }
261
262 function pretty_time(time) {
263         var sec, min, hrs, ret = '';
264         time = parseInt(time);
265         sec = time % 60;
266         min = parseInt((time / 60) % 60);
267         hrs = parseInt((time / 3600) % 3600);
268         if (hrs)
269                 ret = hrs + ':' + ("00" + min).substr(-2) + ':';
270         else
271                 ret = min + ':';
272         return ret + ("00" + sec).substr(-2);
273 }
274
275 function update_ui(state, cmd) {
276         if (typeof(state) == 'string') {
277                 ui_mpc_status.innerText = ({
278                         'disconnect': 'Disconnecting...',
279                         'init': 'Connecting...',
280                 })[state];
281                 return;
282         }
283
284         if (Array.isArray(state)) {
285                 /*
286                 switch (cmd[0]) {
287                 case 'setvol':
288                 case 'seekcur':
289                         break;
290                 default:
291                         mpc_refresh();
292                 }
293                 */
294                 return;
295         }
296
297         /* Update the metadata tab. */
298         var currentsong = {};
299         if ('Currentsong' in state)
300                 currentsong = state.Currentsong;
301         ui_mpc_metadata_album.innerText = currentsong.Album;
302         ui_mpc_metadata_artist.innerText = currentsong.Artist;
303         ui_mpc_metadata_title.innerText = currentsong.Title;
304         ui_mpc_metadata_date.innerText = currentsong.Date;
305         ui_mpc_metadata_file.innerText = currentsong.file;
306
307         /* Update the playlist tab. */
308         var playlist = [];
309         if ('Playlist' in state)
310                 playlist = state.Playlist;
311         ui_mpc_playlist.innerHTML = '';
312         playlist.forEach(function(song) {
313                 var cell, row = ui_mpc_playlist.insertRow(-1);
314                 if (song.Pos == currentsong.Pos)
315                         row.style.fontWeight = 'bold';
316
317                 cell = row.insertCell(-1);
318                 cell.innerText = song.Pos;
319                 cell.style.textAlign = 'right';
320
321                 if ('Artist' in song) {
322                         row.insertCell(-1).innerText = song.Artist;
323                         row.insertCell(-1).innerText = song.Album;
324                         row.insertCell(-1).innerText = song.Title;
325                 } else {
326                         cell = row.insertCell(-1);
327                         cell.innerText = song.file;
328                         cell.colSpan = 3;
329                 }
330                 row.insertCell(-1).innerText = pretty_time(song.Time);
331         });
332
333         /* Update the status tab. */
334         var time;
335         if ('time' in state)
336                 // When stopped, there is no time field at all.
337                 time = state.time.split(':');
338         else
339                 time = [0, 0];
340         ui_mpc_seekcur.max = time[1];
341         ui_mpc_seekcur.value = time[0];
342         percent = Math.floor((0.0 + time[0]) * 100 / (0.0 + time[1]));
343         ui_mpc_seekcur.title = 'seekcur (' + percent + '%)';
344         ui_mpc_currtime.innerText = [pretty_time(time[0]), pretty_time(time[1]), percent + '%'].join(' / ');
345
346         ui_mpc_setvol.value = state.volume;
347         ui_mpc_setvol.title = 'setvol (' + state.volume + '%)';
348
349         [
350                 'consume', 'random', 'repeat', 'single',
351         ].forEach(function(id) {
352                 setToggleButton(window['ui_mpc_' + id], szo(state[id]));
353         });
354
355         ui_mpc_status.innerText = ({
356                 'play': 'Playing',
357                 'pause': 'Paused',
358                 'stop': 'Stopped',
359         })[state.state];
360 }