playlist: add ability to play an item
[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_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.song_id);
278 this.parentNode.remove();
279 }
280
281 function playlist_play() {
282 mpc.playid(this.song_id);
283 this.parentNode.style.fontWeight = 'bold';
284 }
285
286 function update_ui(state, cmd) {
287 if (typeof(state) == 'string') {
288 ui_mpc_status.innerText = ({
289 'disconnect': 'Disconnecting...',
290 'init': 'Connecting...',
291 })[state];
292 return;
293 }
294
295 if (Array.isArray(state)) {
296 /*
297 switch (cmd[0]) {
298 case 'setvol':
299 case 'seekcur':
300 break;
301 default:
302 mpc_refresh();
303 }
304 */
305 return;
306 }
307
308 /* Update the metadata tab. */
309 var currentsong = {};
310 if ('Currentsong' in state)
311 currentsong = state.Currentsong;
312 ui_mpc_metadata_album.innerText = currentsong.Album;
313 ui_mpc_metadata_artist.innerText = currentsong.Artist;
314 ui_mpc_metadata_title.innerText = currentsong.Title;
315 ui_mpc_metadata_date.innerText = currentsong.Date;
316 ui_mpc_metadata_file.innerText = currentsong.file;
317
318 /* Update the playlist tab. */
319 var playlist = [];
320 if ('Playlist' in state)
321 playlist = state.Playlist;
322 ui_mpc_playlist.innerHTML = '';
323 playlist.forEach(function(song) {
324 var cell, row = ui_mpc_playlist.insertRow(-1);
325 if (song.Pos == currentsong.Pos)
326 row.style.fontWeight = 'bold';
327
328 cell = row.insertCell(-1);
329 cell.id = 'playlist_del';
330 cell.innerHTML = '&#164;';
331 cell.song_id = song.Id;
332 cell.title = 'delete';
333 cell.onclick = playlist_del;
334
335 cell = row.insertCell(-1);
336 cell.innerText = song.Pos;
337 cell.style.textAlign = 'right';
338 cell.song_id = song.Id;
339 cell.title = 'play';
340 cell.onclick = playlist_play;
341
342 if ('Artist' in song) {
343 row.insertCell(-1).innerText = song.Artist;
344 row.insertCell(-1).innerText = song.Album;
345 row.insertCell(-1).innerText = song.Title;
346 } else {
347 cell = row.insertCell(-1);
348 cell.innerText = song.file;
349 cell.colSpan = 3;
350 }
351 row.insertCell(-1).innerText = pretty_time(song.Time);
352 });
353
354 /* Update the status tab. */
355 var time;
356 if ('time' in state)
357 // When stopped, there is no time field at all.
358 time = state.time.split(':');
359 else
360 time = [0, 0];
361 ui_mpc_seekcur.max = time[1];
362 ui_mpc_seekcur.value = time[0];
363 percent = Math.floor((0.0 + time[0]) * 100 / (0.0 + time[1]));
364 ui_mpc_seekcur.title = 'seekcur (' + percent + '%)';
365 ui_mpc_currtime.innerText = [pretty_time(time[0]), pretty_time(time[1]), percent + '%'].join(' / ');
366
367 ui_mpc_setvol.value = state.volume;
368 ui_mpc_setvol.title = 'setvol (' + state.volume + '%)';
369
370 [
371 'consume', 'random', 'repeat', 'single',
372 ].forEach(function(id) {
373 setToggleButton(window['ui_mpc_' + id], szo(state[id]));
374 });
375
376 ui_mpc_status.innerText = ({
377 'play': 'Playing',
378 'pause': 'Paused',
379 'stop': 'Stopped',
380 })[state.state];
381 }