]> git.wh0rd.org Git - chrome-ext/music-player-client.git/blob - main.js
controls: swap play/stop buttons to match classic winamp layout
[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 function mpc_refresh() {
60         mpc.status();
61 }
62
63 function mpc_connect(host, port) {
64         if (typeof(host) != 'string') {
65                 host = window['opts_host'].value;
66                 port = parseInt(window['opts_port'].value);
67         }
68
69         if (mpc != undefined) {
70                 console.log('disconnecting');
71                 update_ui('disconnect');
72                 delete mpc;
73                 tcpclient.disconnect();
74                 delete tcpclient;
75         }
76
77         update_ui('init');
78         tcpclient = new TcpClient(host, port);
79         tcpclient.connect(function() {
80                 var mpc_sender = new TcpClientSender(tcpclient);
81                 tcpclient.addResponseListener(tramp_mpc_recv);
82                 mpc = new Mpc(mpc_sender, update_ui);
83                 console.log('connected to ' + host + ':' + port);
84                 console.log('protip: use the "mpc" object to poke mpd directly.\n' +
85                             'you can also do mpc.set_debug(3) to see traffic');
86                 mpc_refresh();
87                 update_refresh_timer();
88         });
89 }
90
91 function tramp_mpc_consume() {
92         var val = zo(!getToggleButton(this));
93         mpc.consume(val);
94         setToggleButton(this, val);
95 }
96 function tramp_mpc_next() { mpc.next(); }
97 function tramp_mpc_pause() { mpc.pause(); }
98 function tramp_mpc_play() { mpc.play(); }
99 function tramp_mpc_previous() { mpc.previous(); }
100 function tramp_mpc_random() {
101         var val = zo(!getToggleButton(this));
102         mpc.random(val);
103         setToggleButton(this, val);
104 }
105 function tramp_mpc_repeat() {
106         var val = zo(!getToggleButton(this));
107         mpc.repeat(val);
108         setToggleButton(this, val);
109 }
110 function tramp_mpc_seekcur() { mpc.seekcur(this.value); }
111 function tramp_mpc_setvol() { mpc.setvol(this.value); }
112 function tramp_mpc_single() {
113         var val = zo(!getToggleButton(this));
114         mpc.single(val);
115         setToggleButton(this, val);
116 }
117 function tramp_mpc_stop() { mpc.stop(); }
118
119 function zo(val) {
120         return val ? 1 : 0;
121 }
122 function szo(val) {
123         return val == '0' ? 0 : 1;
124 }
125 function getToggleButton(btn) {
126         return btn.style.borderStyle == 'inset';
127 }
128 function setToggleButton(btn, val) {
129         if (val === undefined)
130                 val = !getToggleButton(btn);
131         btn.style.borderStyle = val ? 'inset' : '';
132 }
133
134 function show_page(page) {
135         if (typeof(page) != 'string')
136                 page = this.id.split('.')[1];
137
138         switch (page) {
139         case 'playlist':
140                 mpc.playlistinfo();
141                 // Fallthrough.
142         case 'metadata':
143                 mpc.currentsong();
144                 break;
145         }
146
147         var eles = document.getElementsByClassName('main');
148         for (var i = 0; i < eles.length; ++i) {
149                 var ele = eles[i];
150                 var dis = 'none';
151                 var cls = '';
152                 if (ele.id == 'main.' + page) {
153                         dis = '';
154                         cls = 'selected';
155                 }
156                 ele.style.display = dis;
157                 document.getElementById('tab.' + ele.id.split('.')[1]).className = cls;
158         }
159 }
160
161 function do_refresh() {
162         mpc_refresh();
163         refresh_id = window.setTimeout(do_refresh, window['opts_refresh'].value * 1000);
164 }
165
166 function update_refresh_timer() {
167         if (!isNaN(refresh_id))
168                 window.clearTimeout(refresh_id);
169         var rate = window['opts_refresh'].value * 1000;
170         if (rate > 0)
171                 refresh_id = window.setTimeout(do_refresh, rate);
172 }
173
174 function update_local_settings() {
175         var setting = {};
176         setting[this.id] = this.checked;
177         chrome.storage.local.set(setting);
178 }
179
180 function update_sync_settings() {
181         var setting = {};
182         setting[this.id] = this.value;
183         var storage = sync_storage(window['opts_sync'].checked);
184         storage.set(setting);
185
186         switch (this.id) {
187         case 'refresh':
188                 update_refresh_timer();
189                 break;
190         }
191 }
192
193 function init_ui(local_keys, sync_keys, options) {
194         /* Setup footer */
195         [
196                 'controls', 'metadata', 'options', 'playlist',
197         ].forEach(function(id) {
198                 document.getElementById('tab.' + id).onclick = show_page;
199         });
200
201         /* Setup control tab */
202         ui_mpc_status = document.getElementById('status');
203         [
204                 'consume', 'next', 'pause', 'play', 'previous', 'random', 'repeat',
205                 'seekcur', 'setvol', 'single', 'stop',
206         ].forEach(function(id) {
207                 var ele = window['ui_mpc_' + id] = document.getElementById(id);
208                 ele.onchange = ele.onclick = window['tramp_mpc_' + id];
209                 ele.title = id;
210         });
211         window['ui_mpc_currtime'] = document.getElementById('currtime');
212
213         /* Setup metadata tab */
214         [
215                 'album', 'artist', 'date', 'file', 'title',
216         ].forEach(function(id) {
217                 window['ui_mpc_metadata_' + id] = document.getElementById('metadata.' + id);
218         });
219
220         /* Setup playlist tab */
221         window['ui_mpc_playlist'] = document.getElementById('playlist');
222
223         /* Setup options tab */
224         document.getElementById('connect').onclick = mpc_connect;
225         local_keys.forEach(function(id) {
226                 var ele = window['opts_' + id] = document.getElementById(id);
227                 ele.checked = options[id];
228                 ele.onchange = update_local_settings;
229         });
230         sync_keys.forEach(function(id) {
231                 var ele = window['opts_' + id] = document.getElementById(id);
232                 ele.value = options[id];
233                 ele.oninput = update_sync_settings;
234         });
235 }
236
237 function pretty_time(time) {
238         var sec, min, hrs, ret = '';
239         time = parseInt(time);
240         sec = time % 60;
241         min = parseInt((time / 60) % 60);
242         hrs = parseInt((time / 3600) % 3600);
243         if (hrs)
244                 ret = hrs + ':' + ("00" + min).substr(-2) + ':';
245         else
246                 ret = min + ':';
247         return ret + ("00" + sec).substr(-2);
248 }
249
250 function update_ui(state, cmd) {
251         if (typeof(state) == 'string') {
252                 ui_mpc_status.innerText = ({
253                         'disconnect': 'Disconnecting...',
254                         'init': 'Connecting...',
255                 })[state];
256                 return;
257         }
258
259         if (Array.isArray(state)) {
260                 /*
261                 switch (cmd[0]) {
262                 case 'setvol':
263                 case 'seekcur':
264                         break;
265                 default:
266                         mpc_refresh();
267                 }
268                 */
269                 return;
270         }
271
272         /* Update the metadata tab. */
273         var currentsong = {};
274         if ('Currentsong' in state)
275                 currentsong = state.Currentsong;
276         ui_mpc_metadata_album.innerText = currentsong.Album;
277         ui_mpc_metadata_artist.innerText = currentsong.Artist;
278         ui_mpc_metadata_title.innerText = currentsong.Title;
279         ui_mpc_metadata_date.innerText = currentsong.Date;
280         ui_mpc_metadata_file.innerText = currentsong.file;
281
282         /* Update the playlist tab. */
283         var playlist = [];
284         if ('Playlist' in state)
285                 playlist = state.Playlist;
286         ui_mpc_playlist.innerHTML = '';
287         playlist.forEach(function(song) {
288                 var cell, row = ui_mpc_playlist.insertRow(-1);
289                 if (song.Pos == currentsong.Pos)
290                         row.style.fontWeight = 'bold';
291
292                 cell = row.insertCell(-1);
293                 cell.innerText = song.Pos;
294                 cell.style.textAlign = 'right';
295
296                 if ('Artist' in song) {
297                         row.insertCell(-1).innerText = song.Artist;
298                         row.insertCell(-1).innerText = song.Album;
299                         row.insertCell(-1).innerText = song.Title;
300                 } else {
301                         cell = row.insertCell(-1);
302                         cell.innerText = song.file;
303                         cell.colSpan = 3;
304                 }
305                 row.insertCell(-1).innerText = pretty_time(song.Time);
306         });
307
308         /* Update the status tab. */
309         var time;
310         if ('time' in state)
311                 // When stopped, there is no time field at all.
312                 time = state.time.split(':');
313         else
314                 time = [0, 0];
315         ui_mpc_seekcur.max = time[1];
316         ui_mpc_seekcur.value = time[0];
317         percent = Math.floor((0.0 + time[0]) * 100 / (0.0 + time[1]));
318         ui_mpc_seekcur.title = 'seekcur (' + percent + '%)';
319         ui_mpc_currtime.innerText = [pretty_time(time[0]), pretty_time(time[1]), percent + '%'].join(' / ');
320
321         ui_mpc_setvol.value = state.volume;
322         ui_mpc_setvol.title = 'setvol (' + state.volume + '%)';
323
324         [
325                 'consume', 'random', 'repeat', 'single',
326         ].forEach(function(id) {
327                 setToggleButton(window['ui_mpc_' + id], szo(state[id]));
328         });
329
330         ui_mpc_status.innerText = ({
331                 'play': 'Playing',
332                 'pause': 'Paused',
333                 'stop': 'Stopped',
334         })[state.state];
335 }