playlist: add ability to play an item
[chrome-ext/music-player-client.git] / main.js
CommitLineData
50dafc4c
MF
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 */
4var mpc;
5var tcpclient;
0c661219 6var refresh_id = NaN;
50dafc4c
MF
7
8function TcpClientSender(tcpclient) {
9 this.tcpclient = tcpclient;
10}
11TcpClientSender.prototype.send = function(data, cb) {
12 this.tcpclient.sendMessage(data, cb);
13}
0a3a435e
MF
14TcpClientSender.prototype.poll = function() {
15 this.tcpclient.poll();
16}
50dafc4c
MF
17
18function tramp_mpc_recv(data) {
19 mpc.recv(data);
20}
21
22function sync_storage(sync) {
23 return sync ? chrome.storage.sync : chrome.storage.local;
24}
25
26window.onload = function() {
27 var local_keys = [
28 'sync',
29 ];
30 var sync_keys = [
0c661219 31 'host', 'port', 'refresh',
50dafc4c
MF
32 ];
33 var options = {
34 'host': '192.168.0.2',
35 'port': 6600,
36 'sync': true,
0c661219 37 'refresh': 5,
50dafc4c
MF
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
ee26ebe4
MF
59window.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
50dafc4c
MF
76function mpc_refresh() {
77 mpc.status();
50dafc4c
MF
78}
79
80function 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);
4ed31ba8
MF
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');
50dafc4c 103 mpc_refresh();
0c661219 104 update_refresh_timer();
50dafc4c
MF
105 });
106}
107
108function tramp_mpc_consume() {
109 var val = zo(!getToggleButton(this));
110 mpc.consume(val);
111 setToggleButton(this, val);
112}
9cb957ed 113function tramp_mpc_deleteid() { mpc.deleteid(this.title); }
50dafc4c
MF
114function tramp_mpc_next() { mpc.next(); }
115function tramp_mpc_pause() { mpc.pause(); }
116function tramp_mpc_play() { mpc.play(); }
117function tramp_mpc_previous() { mpc.previous(); }
118function tramp_mpc_random() {
119 var val = zo(!getToggleButton(this));
120 mpc.random(val);
121 setToggleButton(this, val);
122}
123function tramp_mpc_repeat() {
124 var val = zo(!getToggleButton(this));
125 mpc.repeat(val);
126 setToggleButton(this, val);
127}
128function tramp_mpc_seekcur() { mpc.seekcur(this.value); }
129function tramp_mpc_setvol() { mpc.setvol(this.value); }
130function tramp_mpc_single() {
131 var val = zo(!getToggleButton(this));
132 mpc.single(val);
133 setToggleButton(this, val);
134}
135function tramp_mpc_stop() { mpc.stop(); }
136
137function zo(val) {
138 return val ? 1 : 0;
139}
140function szo(val) {
141 return val == '0' ? 0 : 1;
142}
143function getToggleButton(btn) {
144 return btn.style.borderStyle == 'inset';
145}
146function setToggleButton(btn, val) {
147 if (val === undefined)
148 val = !getToggleButton(btn);
149 btn.style.borderStyle = val ? 'inset' : '';
150}
151
152function show_page(page) {
153 if (typeof(page) != 'string')
154 page = this.id.split('.')[1];
155
ea38f3ed
MF
156 switch (page) {
157 case 'playlist':
158 mpc.playlistinfo();
159 // Fallthrough.
160 case 'metadata':
161 mpc.currentsong();
162 break;
163 }
164
50dafc4c
MF
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
0c661219
MF
179function do_refresh() {
180 mpc_refresh();
181 refresh_id = window.setTimeout(do_refresh, window['opts_refresh'].value * 1000);
182}
183
184function update_refresh_timer() {
2ff2c6c1 185 if (!isNaN(refresh_id))
0c661219
MF
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
50dafc4c
MF
192function update_local_settings() {
193 var setting = {};
194 setting[this.id] = this.checked;
195 chrome.storage.local.set(setting);
196}
197
198function 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);
0c661219
MF
203
204 switch (this.id) {
205 case 'refresh':
206 update_refresh_timer();
207 break;
208 }
50dafc4c
MF
209}
210
211function init_ui(local_keys, sync_keys, options) {
ee26ebe4
MF
212 var ele, i;
213
50dafc4c 214 /* Setup footer */
ee26ebe4 215 i = 1;
50dafc4c 216 [
ee26ebe4 217 'controls', 'metadata', 'playlist', 'options',
50dafc4c 218 ].forEach(function(id) {
ee26ebe4
MF
219 var ele = document.getElementById('tab.' + id);
220 ele.onclick = show_page;
221 ele.title = id + ' [' + i + ']';
222 ++i;
50dafc4c
MF
223 });
224
225 /* Setup control tab */
226 ui_mpc_status = document.getElementById('status');
50dafc4c
MF
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);
ea13f13a 232 ele.onchange = ele.onclick = window['tramp_mpc_' + id];
50dafc4c 233 ele.title = id;
ee26ebe4
MF
234 if (ele.accessKey)
235 ele.title += ' [' + ele.accessKey + ']'
50dafc4c 236 });
ea38f3ed 237 window['ui_mpc_currtime'] = document.getElementById('currtime');
50dafc4c 238
e9aee305
MF
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
ea38f3ed
MF
246 /* Setup playlist tab */
247 window['ui_mpc_playlist'] = document.getElementById('playlist');
248
50dafc4c
MF
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
ea38f3ed
MF
263function 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
9cb957ed 276function playlist_del() {
17ac93ed 277 mpc.deleteid(this.song_id);
9cb957ed
MF
278 this.parentNode.remove();
279}
280
17ac93ed
MF
281function playlist_play() {
282 mpc.playid(this.song_id);
283 this.parentNode.style.fontWeight = 'bold';
284}
285
50dafc4c
MF
286function 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
ea38f3ed
MF
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
9cb957ed
MF
328 cell = row.insertCell(-1);
329 cell.id = 'playlist_del';
330 cell.innerHTML = '&#164;';
17ac93ed
MF
331 cell.song_id = song.Id;
332 cell.title = 'delete';
9cb957ed
MF
333 cell.onclick = playlist_del;
334
ea38f3ed
MF
335 cell = row.insertCell(-1);
336 cell.innerText = song.Pos;
337 cell.style.textAlign = 'right';
17ac93ed
MF
338 cell.song_id = song.Id;
339 cell.title = 'play';
340 cell.onclick = playlist_play;
ea38f3ed
MF
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 });
50dafc4c 353
ea38f3ed 354 /* Update the status tab. */
a7204fc7
MF
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];
ea38f3ed
MF
361 ui_mpc_seekcur.max = time[1];
362 ui_mpc_seekcur.value = time[0];
92ef8630 363 percent = Math.floor((0.0 + time[0]) * 100 / (0.0 + time[1]));
ea38f3ed
MF
364 ui_mpc_seekcur.title = 'seekcur (' + percent + '%)';
365 ui_mpc_currtime.innerText = [pretty_time(time[0]), pretty_time(time[1]), percent + '%'].join(' / ');
92ef8630 366
ea38f3ed
MF
367 ui_mpc_setvol.value = state.volume;
368 ui_mpc_setvol.title = 'setvol (' + state.volume + '%)';
50dafc4c 369
50dafc4c
MF
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}