-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
499 lines (472 loc) · 23.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bragi MPD</title>
<link rel='shortcut icon' href='img/favicon.ico' type='image/x-icon'/>
<link rel="manifest" href="manifest.json">
<link rel="shortcut icon" sizes="192x192" href="img/bragi-192.png">
<link rel="shortcut icon" sizes="128x128" href="img/bragi-128.png">
<link rel="apple-touch-icon" sizes="128x128" href="img/bragi-128.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="img/bragi-128.png">
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/firefox.css"/>
<link rel="stylesheet" href="css/ie.css"/>
<link rel="stylesheet" href="css/list.css"/>
<link rel="stylesheet" href="css/tab.css"/>
<link rel="stylesheet" href="css/mpd_controller.css"/>
<link rel="stylesheet" href="css/mpd_output.css"/>
<link rel="stylesheet" href="css/mpd_instances.css"/>
<link rel="stylesheet" href="css/mpd_queue.css"/>
<link rel="stylesheet" href="css/mpd_playlist.css"/>
<link rel="stylesheet" href="css/mpd_files.css"/>
<link rel="stylesheet" href="css/mpd_settings.css"/>
<link rel="stylesheet" href="css/mpd_search.css"/>
<link rel="stylesheet" href="css/songs.css"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/color.css"/>
<!-- prefix cross compatability library -->
<script src="js/prefixfree.min.js"></script>
<!-- application configuration object -->
<script src="default_config.js"></script>
<!-- websocket adapter library -->
<script src="js/websock/base64.js"></script>
<script src="js/websock/util.js"></script>
<script src="js/websock/websock.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/mpd.js"></script>
<script src="js/tab.js"></script>
<script src="js/list.js"></script>
<script src="js/UI.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
<meta name="mobile-web-app-capable" content="yes">
<!--
template for a song on the queue
-->
<template id="template_LIST_queue_song">
<li class="LIST_item LIST_song hbox" data-mpd_queue_song_id="">
<div class="LIST_overlay" style="display:none;">
<div class="LIST_overlay_header"></div>
<div class="LIST_overlay_message"></div>
<div class="LIST_overlay_footer"></div>
</div>
<span class="LIST_song_important_information">
<div>
<span class="LIST_song_toolbar MPD_toolbar hbox">
<span class="LIST_song_property LIST_song_title colapse" onclick="UI.playQueueSong(this)"></span>
<span></span>
<span class="LIST_song_play MPD_button colapse" onclick="UI.playQueueSong(this)"> </span>
<span class="LIST_song_remove MPD_button colapse" onclick="UI.removeQueueSong(this)"> </span>
</span>
</div>
<div class="LIST_song_property LIST_song_artist"></div>
<div class="LIST_song_property LIST_song_album"></div>
</span>
<span class="desktop_only LIST_song_minor_information">
<span class="hbox">
<span></span>
<span class="colapse">
<div class="LIST_song_property LIST_song_duration"></div>
<div class="LIST_song_property LIST_song_genre"></div>
</span>
<span class="colapse">
<div class="LIST_song_property LIST_song_disk"></div>
<div class="LIST_song_property LIST_song_track"></div>
</span>
</span>
<div class="LIST_song_property LIST_song_path"></div>
</span>
<span class="vbox colapse LIST_move">
<div class="MPD_button LIST_song_move_up" onclick="UI.moveItemUp(this);"></div>
<div class="MPD_button LIST_song_swap" onclick="UI.moveItemStartReorder(this);"></div>
<div class="MPD_button LIST_song_move_down" onclick="UI.moveItemDown(this);"></div>
</span>
</li>
</template>
<!--
template for a song on a playlist
-->
<template id="template_LIST_playlist_song">
<li class="LIST_item LIST_song hbox">
<div class="LIST_overlay" style="display:none;">
<div class="LIST_overlay_header"></div>
<div class="LIST_overlay_message"></div>
<div class="LIST_overlay_footer"></div>
</div>
<span class="LIST_song_important_information">
<div>
<span class="LIST_song_toolbar MPD_toolbar hbox">
<span class="LIST_song_property LIST_song_title colapse"></span>
<span></span>
<span class="LIST_song_add MPD_button colapse" onclick="UI.addSongToQueue(this)"> </span>
<span class="LIST_song_play MPD_button colapse" onclick="UI.addSongToQueueAndPlay(this)"> </span>
<span class="LIST_song_remove MPD_button colapse" onclick="UI.removeSongFromPlaylist(this)"> </span>
</span>
</div>
<div class="LIST_song_property LIST_song_artist"></div>
<div class="LIST_song_property LIST_song_album"></div>
</span>
<span class="desktop_only LIST_song_minor_information">
<span class="hbox">
<span></span>
<span class="colapse">
<div class="LIST_song_property LIST_song_duration"></div>
<div class="LIST_song_property LIST_song_genre"></div>
</span>
<span class="colapse">
<div class="LIST_song_property LIST_song_disk"></div>
<div class="LIST_song_property LIST_song_track"></div>
</span>
</span>
<div class="LIST_song_property LIST_song_path"></div>
</span>
<span class="vbox colapse LIST_move">
<div class="MPD_button LIST_song_move_up" onclick="UI.moveItemUp(this);"></div>
<div class="MPD_button LIST_song_swap" onclick="UI.moveItemStartReorder(this);"></div>
<div class="MPD_button LIST_song_move_down" onclick="UI.moveItemDown(this);"></div>
</span>
</li>
</template>
<!--
template for a song file
-->
<template id="template_LIST_file_song">
<li class="LIST_item LIST_song vbox">
<span class="LIST_song_important_information">
<div>
<span class="LIST_song_toolbar MPD_toolbar hbox">
<span class="LIST_song_property LIST_song_title colapse"></span>
<span></span>
<span class="LIST_song_add MPD_button colapse" onclick="UI.addSongToQueue(this)"> </span>
<span class="LIST_song_play MPD_button colapse" onclick="UI.addSongToQueueAndPlay(this)"> </span>
<span class="LIST_song_add_playlist MPD_button colapse" onclick="UI.addSongToPlaylist(this)"> </span>
</span>
</div>
<div class="LIST_song_property LIST_song_artist"></div>
<div class="LIST_song_property LIST_song_album"></div>
</span>
<span class="desktop_only LIST_song_minor_information">
<span class="hbox">
<span></span>
<span class="colapse">
<div class="LIST_song_property LIST_song_duration"></div>
<div class="LIST_song_property LIST_song_genre"></div>
</span>
<span class="colapse">
<div class="LIST_song_property LIST_song_disk"></div>
<div class="LIST_song_property LIST_song_track"></div>
</span>
</span>
<div class="LIST_song_property LIST_song_path"></div>
</span>
</li>
</template>
<!--
template for a song search
-->
<template id="template_LIST_search_song">
<li class="LIST_item LIST_song vbox">
<span class="LIST_song_important_information">
<div>
<span class="LIST_song_toolbar MPD_toolbar hbox">
<span class="LIST_song_property LIST_song_title colapse"></span>
<span></span>
<span class="LIST_song_add MPD_button colapse" onclick="UI.addSongToQueue(this)"> </span>
<span class="LIST_song_play MPD_button colapse" onclick="UI.addSongToQueueAndPlay(this)"> </span>
<span class="LIST_song_add_playlist MPD_button colapse" onclick="UI.addSongToPlaylist(this)"> </span>
</span>
</div>
<div class="LIST_song_property LIST_song_artist"></div>
<div class="LIST_song_property LIST_song_album"></div>
</span>
</li>
</template>
<!--
generic template for any song on any list
-->
<template id="template_LIST_song">
<li class="LIST_item LIST_song vbox">
<span class="LIST_song_important_information">
<div>
<span class="LIST_song_toolbar MPD_toolbar hbox">
<span class="LIST_song_property LIST_song_title colapse"></span>
<span></span>
</span>
</div>
<div class="LIST_song_property LIST_song_artist"></div>
<div class="LIST_song_property LIST_song_album"></div>
</span>
<span class="desktop_only LIST_song_minor_information">
<span class="hbox">
<span></span>
<span class="colapse">
<div class="LIST_song_property LIST_song_duration"></div>
<div class="LIST_song_property LIST_song_genre"></div>
</span>
<span class="colapse">
<div class="LIST_song_property LIST_song_disk"></div>
<div class="LIST_song_property LIST_song_track"></div>
</span>
</span>
<div class="LIST_song_property LIST_song_path"></div>
</span>
</li>
</template>
<!--
template for a file directory
-->
<template id="template_LIST_directory">
<li class="LIST_item LIST_directory MPD_button" data-mpd_file_path="" onclick="UI.fileListClick(this);event.stopPropagation();">
<div>
<span class="LIST_directory_path"></span>
<span class="LIST_song_add MPD_button colapse" onclick="UI.addDirectoryToQueue(this);event.stopPropagation();">Add All to Queue</span>
<span class="LIST_song_add_playlist MPD_button colapse" onclick="UI.addDirectoryToPlaylist(this);event.stopPropagation();">Add All to Playlist</span>
</div>
<ul class="MPD_directory_children" onclick="event.stopPropagation();"></ul>
</li>
</template>
<!--
template for lists
-->
<template id="template_LIST">
<div class="LIST_container vbox">
<div class="LIST_header"></div>
<div class="LIST_content_container">
<ul class="LIST_contents"></ul>
</div>
<div class="LIST_empty"></div>
</div>
</template>
<!--
template for search criteria
-->
<template id="template_SEARCH_criteria">
<div class="hbox colapse SEARCH_criteria_row">
<select class="SEARCH_criteria_type" onchange="UI.updateSearchEditor(this);" ></select>
<input class="SEARCH_criteria_value" onchange="UI.onSearchCriteriaValueChange(this);" ></input>
<div class="MPD_button SEARCH_remove colapse" onclick="UI.removeSearchCriteria(this);">Remove</div>
</div>
</template>
<!--
template for an instance
-->
<template id="template_INSTANCE">
<div class="vbox INSTANCE_instance" onclick="UI.selectInstance(this)" data-instance_idx="">
<table>
<tr><th>Name:</th><td class="INSTANCE_name"></td></tr>
<tr><th>Port:</th><td class="INSTANCE_port"></td></tr>
<tr><th>Host Name:</th><td class="INSTANCE_host"></td></tr>
<tr><th>Connection Status:</th><td class="INSTANCE_connection_status"></td></tr>
<tr><th>Password</th><td><input class="INSTANCE_password" type="password" onchange="UI.setPassword(this);"></input><span class="INSTANCE_password_message bad"></span></td></tr>
<tr><th>Stream port:</th><td class="INSTANCE_stream_port"></td></tr>
<tr><th>Local volume:</th><td class="INSTANCE_local_volume"></td></tr>
</table>
</div>
</template>
<!--
template for an output
-->
<template id="template_OUTPUT">
<div class="vbox OUTPUT_output" data-output_id="">
<table>
<tr><th>Name:</th><td class="OUTPUT_name"></td></tr>
<tr>
<th>Enabled:</th>
<td>
<span class="OUTPUT_enabled"></span>
<span class="OUTPUT_switch_to MPD_button" onclick="UI.switchToOutput(this)">Switch to</span>
<span class="OUTPUT_enable MPD_button" onclick="UI.enableOutput(this)">Enable</span>
<span class="OUTPUT_disable MPD_button" onclick="UI.disableOutput(this)">Disable</span>
</td>
</tr>
</table>
</div>
</template>
</head>
<body>
<div class="TAB_container UI_main">
<div class="MPD_disconnected">
<span>Connecting...</span>
</div>
<div class="TAB_body">
<!--
< MAIN CONTROL
< play/pause/seek/volume it's all right here
-->
<div class="MPD_controller hbox">
<audio class="MPD_stream" onerror="UI.onStreamError(this);">
</audio>
<div class="MPD_play MPD_button" onclick="UI.play();"></div>
<div class="MPD_pause MPD_button" onclick="UI.pause();"></div>
<div class="MPD_controller_middle_controls vbox">
<div class="MPD_controller_track_info hbox">
<div class="MPD_controller_current_song_title marque_overflow"></div>
<div class="MPD_controller_playing_info vbov">
<div>
<span class="MPD_controller_current_song_time"></span>
/
<span class="MPD_controller_current_song_duration"></span>
</div>
</div>
<div class="MPD_controller_extra_info vbox">
<div class="MPD_controller_current_song_artist marque_overflow"></div>
<div class="MPD_controller_current_song_album marque_overflow"></div>
</div>
</div>
<div class="hbox">
<div class="MPD_prev MPD_button" onclick="UI.previous();"></div>
<input class="MPD_seek" type="range" min="0" oninput="UI.seek(this);"></input>
<div class="MPD_next MPD_button" onclick="UI.next();"></div>
</div>
</div>
<div class="MPD_controller_volume_container hbox">
<div class="MPD_controller_volume_icons vbox">
<img class="MPD_icon" src="img/volume-high.svg"/>
<img class="MPD_icon" src="img/volume-low.svg"/>
</div>
<input class="MPD_volume" orient="vertical" type="range" min="0" max="1" step="0.0000001" onchange="UI.setVolume(this);"></input>
</div>
</div>
<!--
< INSTANCES
< list of available instances
-->
<div class="TAB_page vbox" data-tab_page="instance">
<div class="MPD_instances">
<div class="empty">
No Instances Configured! See config.js!
</div>
</div>
</div>
<!--
< OUTPUTS
< list of outputs and ability to turn them on/off
-->
<div class="TAB_page vbox" data-tab_page="output">
<div class="MPD_outputs">
<div class="empty">
No Outputs Configured!
</div>
</div>
</div>
<!--
< QUEUE
< list of currently playing songs
-->
<div class="TAB_page TAB_default vbox" data-tab_page="queue">
<div class="MPD_queue LIST">
<ul class="LIST_header LIST_song_toolbar MPD_toolbar">
<li class="LIST_show_current MPD_button" onclick="UI.showCurrenSong(this);">Scroll to Current Song</li>
<li class="LIST_queue_find MPD_button" onclick="UI.showQueueFind(this);">Find</li>
<li class="LIST_remove_current MPD_button" onclick="UI.removeCurrenSong(this);">Remove Current Song</li>
<li class="LIST_save_queue MPD_button" onclick="UI.saveQueueAsPlaylist(this);">Save Queue</li>
<li class="LIST_clear_queue MPD_button" onclick="UI.clearQueue(this);">Clear Queue</li>
</ul>
<ul class="LIST_header LIST_queue_find_toolbar hbox" style="display:none;">
<li class="LIST_queue_find_quit colapse MPD_button" onclick="UI.hideQueueFind(this);"> </li>
<li class="LIST_queue_find_prev colapse MPD_button" onclick="UI.queueFindPrev(this);"> </li>
<li><input class="LIST_queue_find_value" type="text"></input></li>
<li class="LIST_queue_find_next colapse MPD_button" onclick="UI.queueFindNext(this);"> </li>
</ul>
<div class="LIST_empty">
The Queue is empty!
</div>
</div>
</div>
<!--
< PLAYLISTS
< list of saved lists of songs
-->
<div class="TAB_page vbox" data-tab_page="playlists">
<div class="MPD_playlist LIST">
<ul class="LIST_header LIST_playlist_toolbar MPD_toolbar">
<select class="MPD_playlist_list" onchange="UI.selectPlaylist(this);"></select><br/>
<li class="LIST_append_playlist MPD_button" onclick="UI.appendPlaylist(this);">Append to Queue</li>
<li class="LIST_replace_playlist MPD_button" onclick="UI.loadPlaylist(this);">Replace Queue</li>
<li class="LIST_delete_playlist MPD_button" onclick="UI.deletePlaylist(this);">Delete Playlist</li>
<li class="LIST_rename_playlist MPD_button" onclick="UI.renamePlaylist(this);">Rename Playlist</li>
</ul>
<div class="LIST_empty">
<!--No songs in this playlist!-->
</div>
</div>
</div>
<!--
< FILES
< recursive listing of all files in MPD music directory
-->
<div class="TAB_page vbox" data-tab_page="files">
<div class="MPD_files">
<ul>
<li class="MPD_file_placeholder"></li>
</ul>
</div>
</div>
<!--
< SEARCH
< search capability
-->
<div class="TAB_page vbox" data-tab_page="search">
<div class="MPD_search vbox">
<form onsubmit="UI.doSearch(this); return false;">
<div class="SEARCH_criteria vbox"></div>
<div class="SEARCH_criteria_control">
<span class="MPD_button SEARCH_add_criteria" onclick="UI.addSearchCriteria(this);">Add Criteria</span>
<span class="MPD_button SEARCH_clear_criteria" onclick="UI.resetSearch(this);">Clear Criteria</span>
</div>
<div class="SEARCH_control">
<span class="MPD_button SEARCH_do_search" onclick="UI.doSearch(this);">Search</span>
<span class="MPD_button SEARCH_expand" style="display:none" onclick="UI.expandSearch(this);">Expand</span>
<span class="MPD_button SEARCH_collapse" onclick="UI.collapseSearch(this);">Collapse</span>
<span><label><input name="hide_queue_songs" type="checkbox"></input> Hide Songs Already on the Queue</label></span>
</div>
</form>
<div class="SEARCH_results">
</div>
<div class="SEARCH_results_control">
Append Results:
<span class="MPD_button SEARCH_append_to_queue" onclick="UI.appendSearchResultsToQueue(this);">to Queue</span>
<span class="MPD_button SEARCH_append_to_playlist" onclick="UI.appendSearchResultsToPlaylist(this);">to Playlist</span>
</div>
</div>
</div>
<!--
< SETTINGS
< all of the runtime configurable options
-->
<div class="TAB_page" data-tab_page="settings">
<table class="MPD_setting">
<tr>
<th>Repeat:</th><td><input type="checkbox" data-setting="repeat" onchange="UI.settingChange(this);"></input></td>
</tr>
<tr>
<th>Single:</th><td><input type="checkbox" data-setting="single" onchange="UI.settingChange(this);"></input></td>
</tr>
<tr>
<th>Consume:</th><td><input type="checkbox" data-setting="consume" onchange="UI.settingChange(this);"></input></td>
</tr>
<tr>
<th>Random:</th><td><input type="checkbox" data-setting="random" onchange="UI.settingChange(this);"></input></td>
</tr>
<tr>
<th>Crossfade:</th><td><input type="number" data-setting="crossfade" onchange="UI.settingChange(this);" onkeyup="UI.settingChange(this);" min="0" step="1"></input>(seconds)</td>
</tr>
<tr>
<th>Notifications:</th><td><input type="checkbox" data-setting="notifications" onchange="UI.settingChange(this);"></input></td>
</tr>
</table>
</div>
</div>
<div class="TAB_control">
<div class="TAB_button" data-tab_page="instance">Instances</div>
<div class="TAB_button" data-tab_page="output">Outputs</div>
<div class="TAB_button" data-tab_page="queue">Queue</div>
<div class="TAB_button" data-tab_page="playlists">Playlists</div>
<div class="TAB_button" data-tab_page="files">Files</div>
<div class="TAB_button" data-tab_page="search">Search</div>
<div class="TAB_button" data-tab_page="settings">Settings</div>
</div>
</div>
<div class="hide_the_fucking_address_bar"> </div>
</body>
</html>