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 }