metadata: add a bit more info to the tab
[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 mpc.currentsong();
62 }
63
64 function mpc_connect(host, port) {
65 if (typeof(host) != 'string') {
66 host = window['opts_host'].value;
67 port = parseInt(window['opts_port'].value);
68 }
69
70 if (mpc != undefined) {
71 console.log('disconnecting');
72 update_ui('disconnect');
73 delete mpc;
74 tcpclient.disconnect();
75 delete tcpclient;
76 }
77
78 update_ui('init');
79 tcpclient = new TcpClient(host, port);
80 tcpclient.connect(function() {
81 var mpc_sender = new TcpClientSender(tcpclient);
82 tcpclient.addResponseListener(tramp_mpc_recv);
83 mpc = new Mpc(mpc_sender, update_ui);
84 console.log('connected to ' + host + ':' + port);
85 console.log('protip: use the "mpc" object to poke mpd directly.\n' +
86 'you can also do mpc.set_debug(3) to see traffic');
87 mpc_refresh();
88 update_refresh_timer();
89 });
90 }
91
92 function tramp_mpc_consume() {
93 var val = zo(!getToggleButton(this));
94 mpc.consume(val);
95 setToggleButton(this, val);
96 }
97 function tramp_mpc_next() { mpc.next(); }
98 function tramp_mpc_pause() { mpc.pause(); }
99 function tramp_mpc_play() { mpc.play(); }
100 function tramp_mpc_previous() { mpc.previous(); }
101 function tramp_mpc_random() {
102 var val = zo(!getToggleButton(this));
103 mpc.random(val);
104 setToggleButton(this, val);
105 }
106 function tramp_mpc_repeat() {
107 var val = zo(!getToggleButton(this));
108 mpc.repeat(val);
109 setToggleButton(this, val);
110 }
111 function tramp_mpc_seekcur() { mpc.seekcur(this.value); }
112 function tramp_mpc_setvol() { mpc.setvol(this.value); }
113 function tramp_mpc_single() {
114 var val = zo(!getToggleButton(this));
115 mpc.single(val);
116 setToggleButton(this, val);
117 }
118 function tramp_mpc_stop() { mpc.stop(); }
119
120 function zo(val) {
121 return val ? 1 : 0;
122 }
123 function szo(val) {
124 return val == '0' ? 0 : 1;
125 }
126 function getToggleButton(btn) {
127 return btn.style.borderStyle == 'inset';
128 }
129 function setToggleButton(btn, val) {
130 if (val === undefined)
131 val = !getToggleButton(btn);
132 btn.style.borderStyle = val ? 'inset' : '';
133 }
134
135 function show_page(page) {
136 if (typeof(page) != 'string')
137 page = this.id.split('.')[1];
138
139 var eles = document.getElementsByClassName('main');
140 for (var i = 0; i < eles.length; ++i) {
141 var ele = eles[i];
142 var dis = 'none';
143 var cls = '';
144 if (ele.id == 'main.' + page) {
145 dis = '';
146 cls = 'selected';
147 }
148 ele.style.display = dis;
149 document.getElementById('tab.' + ele.id.split('.')[1]).className = cls;
150 }
151 }
152
153 function do_refresh() {
154 mpc_refresh();
155 refresh_id = window.setTimeout(do_refresh, window['opts_refresh'].value * 1000);
156 }
157
158 function update_refresh_timer() {
159 if (!isNaN(refresh_id))
160 window.clearTimeout(refresh_id);
161 var rate = window['opts_refresh'].value * 1000;
162 if (rate > 0)
163 refresh_id = window.setTimeout(do_refresh, rate);
164 }
165
166 function update_local_settings() {
167 var setting = {};
168 setting[this.id] = this.checked;
169 chrome.storage.local.set(setting);
170 }
171
172 function update_sync_settings() {
173 var setting = {};
174 setting[this.id] = this.value;
175 var storage = sync_storage(window['opts_sync'].checked);
176 storage.set(setting);
177
178 switch (this.id) {
179 case 'refresh':
180 update_refresh_timer();
181 break;
182 }
183 }
184
185 function init_ui(local_keys, sync_keys, options) {
186 /* Setup footer */
187 [
188 'controls', 'metadata', 'options',
189 ].forEach(function(id) {
190 document.getElementById('tab.' + id).onclick = show_page;
191 });
192
193 /* Setup control tab */
194 ui_mpc_status = document.getElementById('status');
195 [
196 'consume', 'next', 'pause', 'play', 'previous', 'random', 'repeat',
197 'seekcur', 'setvol', 'single', 'stop',
198 ].forEach(function(id) {
199 var ele = window['ui_mpc_' + id] = document.getElementById(id);
200 ele.onchange = ele.onclick = window['tramp_mpc_' + id];
201 ele.title = id;
202 });
203
204 /* Setup metadata tab */
205 [
206 'album', 'artist', 'date', 'file', 'title',
207 ].forEach(function(id) {
208 window['ui_mpc_metadata_' + id] = document.getElementById('metadata.' + id);
209 });
210
211 /* Setup options tab */
212 document.getElementById('connect').onclick = mpc_connect;
213 local_keys.forEach(function(id) {
214 var ele = window['opts_' + id] = document.getElementById(id);
215 ele.checked = options[id];
216 ele.onchange = update_local_settings;
217 });
218 sync_keys.forEach(function(id) {
219 var ele = window['opts_' + id] = document.getElementById(id);
220 ele.value = options[id];
221 ele.oninput = update_sync_settings;
222 });
223 }
224
225 function update_ui(state, cmd) {
226 if (typeof(state) == 'string') {
227 ui_mpc_status.innerText = ({
228 'disconnect': 'Disconnecting...',
229 'init': 'Connecting...',
230 })[state];
231 return;
232 }
233
234 if (Array.isArray(state)) {
235 /*
236 switch (cmd[0]) {
237 case 'setvol':
238 case 'seekcur':
239 break;
240 default:
241 mpc_refresh();
242 }
243 */
244 return;
245 }
246
247 // Hack: should be a real object.
248 ui_mpc_metadata_album.innerText = state.Album;
249 ui_mpc_metadata_artist.innerText = state.Artist;
250 ui_mpc_metadata_title.innerText = state.Title;
251 ui_mpc_metadata_date.innerText = state.Date;
252 ui_mpc_metadata_file.innerText = state.file;
253
254 var time;
255 if ('time' in state)
256 // When stopped, there is no time field at all.
257 time = state.time.split(':');
258 else
259 time = [0, 0];
260 window.ui_mpc_seekcur.max = time[1];
261 window.ui_mpc_seekcur.value = time[0];
262 percent = Math.floor((0.0 + time[0]) * 100 / (0.0 + time[1]));
263 window.ui_mpc_seekcur.title = 'seekcur (' + percent + '%)';
264
265 window.ui_mpc_setvol.value = state.volume;
266 window.ui_mpc_setvol.title = 'setvol (' + state.volume + '%)';
267
268 [
269 'consume', 'random', 'repeat', 'single',
270 ].forEach(function(id) {
271 setToggleButton(window['ui_mpc_' + id], szo(state[id]));
272 });
273
274 ui_mpc_status.innerText = ({
275 'play': 'Playing',
276 'pause': 'Paused',
277 'stop': 'Stopped',
278 })[state.state];
279 }