-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
531 lines (512 loc) · 35.4 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
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
<!DOCTYPE html>
<html data-theme="dark" lang="en" xml:lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>foobar2000</title>
<link type="text/css" href="css/contextual.css" rel="stylesheet" />
<link type="text/css" href="css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
<link rel="shortcut Icon" href="/ajquery-xxx/img/favicon.ico" type="image/x-icon" />
<script type="text/javascript" defer src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" defer src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" defer src="js/ajquery.js"></script>
<script type="text/javascript" defer src="js/vibrant.js"></script>
<script type="text/javascript" defer src="js/contextual.js"></script>
<script type="text/javascript" defer src="js/startup.js"></script>
<script type="text/javascript" defer src="js/daypilot-modal.min.js"></script>
<style type="text/css">
:root { --background-color: #fff; --background-color-v2: #e8e8e8; --background-color-v3: #e7e7e7; --background-color-v4: #f8f8f8; --border-color: gray; --border-color-v2: white; --text-color: #000; --text-color-v2: gray; --console-color: #000; --tabs-color-v1: #dddddd url(css/smoothness/images/ui-bg_highlight-soft_75_dddddd_1x100.png) 50% 0% repeat-x; --tabs-color-v2: none; --pl_prev: #5f5f5f; --pl_play: #6c0101; --pl-album_play: #653b3b; --modal-main: #2367bf;}
[data-theme="dark"] { --background-color: #3F3F3F; --background-color-v2: #a2a2a2; --background-color-v3: #a2a2a2; --background-color-v4: #e8e8e8; --border-color: #000; --border-color-v2: #d7d7d7; --text-color: #000; --text-color-v2: #3f3d3d; --console-color: white; --tabs-color-v1: #cccccc url(css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 0% repeat-x; --tabs-color-v2: #c8c8c8; --pl_prev: #474747; --pl_play: #6c0101; --pl-album_play: #653b3b;}
body{ font-size: 0.5em; margin: 10px; background-color: var(--background-color); max-width: 600px;}
ul#buttons {margin: 0; padding: 0;}
ul#buttons li {margin: 3px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#buttons span.ui-icon {float: left; margin: 0 4px;}
button { margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; }
.lindicator { padding: 8px; visibility: hidden; mix-blend-mode: multiply;}
.ui-progressbar .ui-progressbar-value { background: var(--background-color-v2); }
.ui-widget-content { background: var(--background-color-v4); color: var(--text-color); border: 1px solid var(--border-color)}
.ui-widget-header {border: 1px solid #aaaaaa; background: var(--tabs-color-v1); color: #222222; font-weight: bold;}
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default {border: 1px solid #8ba5a0;}
.ui-tabs .ui-tabs-panel {background: var(--tabs-color-v2);}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {padding: .3em .4em;}
#pl { display: table; width: 100%; }
.pl_row { display: table-row; height: 18px; cursor: cell; }
.pl_c1 { width: 9%; display: table-cell; padding: 2px; text-align: right; vertical-align: middle; }
.pl_c2 { width: 71%; display: table-cell; padding: 2px; vertical-align: middle; }
.pl_c3 { width: 15%; display: table-cell; padding: 2px; text-align: right; vertical-align: middle; }
.pl_c4 { width: 5%; display: table-cell; padding: 2px; text-align: right; vertical-align: middle; }
.pl_even { background: var(--background-color-v3); }
.pl_play { color: var(--pl_play); }
.pl_prev { color: var(--pl_prev); }
.pl_selected { background: #daeaff; border: 1px solid white; }
.bbl { border-left: 1px solid var(--border-color); } /* border black left */
.bbm { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } /* border black top and bottom */
.bbr { border-right: 1px solid var(--border-color); } /* border black right */
.bwl { border-left: 1px solid var(--border-color-v2); } /* border white left */
.bwm { border-top: 1px solid var(--border-color-v2); border-bottom: 1px solid var(--border-color-v2); } /* border white top and bottom */
.bwr { border-right: 1px solid var(--border-color-v2); } /* border white right */
.bbt { border-bottom: 1px solid var(--border-color-v2); border-top: 1px solid var(--border-color-v2); } /* border black top */
.pl-album { color: var(--text-color-v2);}
.pl-album_play { color: var(--pl-album_play);}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
-user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
#playlist { margin-right: -10px; margin-left: -10px; }
.br_o { background: var(--background-color-v2); } /* odd file browser row */
.br_g { color: #a5a5a5; } /* inactive file browser row */
hr { border: 0; border-bottom: 1px #b0b0b0 solid; }
#progressbar { cursor: pointer; margin-bottom: 12px; }
#playingtitle { float: left; font-size: 1.2em; padding: 0.25em; font-style: italic; font-weight: bold; margin: 0; position: absolute; top: 50%; transform: translateY(-50%);}
#playingtime { float: right; font-size: 1.2em; padding: 0.25em; font-style: italic; font-weight: bold; margin: 0; position: relative; top: 50%; transform: translateY(-50%);}
#browse_table { width: 100%; overflow-y: hidden; overflow-x:hidden; }
#aa_pane { opacity: .95; width: 50%; display: none; z-index: 2; cursor: move; margin: 0px;}
#cl_pane { opacity: .95; width: 50%; display: none; z-index: 2; cursor: move; margin: 0px;}
#cl_text { font-size: 2em; white-space: pre-line; color: var(--console-color)}
#querylist { height: 300px; overflow: visible;}
#querylist #qr { cursor: pointer; }
.qr_selected { background: #daeaff; cursor: pointer;}
#tooltip { background: #ededed; padding: 2px; border: 1px solid gray; display: none; z-index: 1000; }
.dragplacer-top div { border-top: 1px double red;}
.dragplacer-bottom div { border-bottom: 1px double red;}
.justify {text-align: justify; text-justify: inter-word;}
.row { display: flex; }
.column { flex: 50%;}
.columnA { flex: 40%;}
.columnB { flex: 60%;}
.modal_ajquery_background { background-color: var(--background-color-v2); opacity: 0.75; }
.modal_ajquery_main { border-radius: 4px; background-color: #fff0;}
.modal_ajquery_main, .modal_ajquery_main button { font-size: 1.7em;}
.modal_ajquery_main input { font-size: 1em; }
.modal_ajquery_inner { padding: 20px; padding-top: 10px; padding-bottom: 10px; background: var(--background-color-v3); color: var(--text-color); border-radius: 8px; }
.modal_ajquery_main input, .modal_ajquery_main button { padding: 5px; box-sizing: border-box; border-radius: 4px; border: 1px solid var(--modal-main); }
.modal_ajquery_content { margin: 10px 0px; font-family: verdana,sans-serif;}
.modal_ajquery_input { margin: 20px 0px 0px 0px; font-family: verdana,sans-serif;}
.modal_ajquery_input input { accent-color: var(--modal-main);}
.modal_ajquery_buttons { margin-top: 10px; margin-bottom: 0px; }
.modal_ajquery_main button { font-size: 1em; background-color: var(--modal-main); color: white; padding: 8px 0px; border: 0px; cursor: pointer; outline: none; width: 100px; }
button.modal_ajquery_cancel { font-size: 1em; margin-left: 10px; border: 1px solid var(--modal-main); background-color: #fff; color: var(--modal-main); }
</style>
</head>
<body>
<!-- Buttons and playlist -->
<div id="wnd">
<ul id="buttons" class="ui-widget ui-helper-clearfix" style="float: left;">
<li class="btncmd ui-state-default ui-corner-all" title="Play or pause (Space)" id="PlayOrPause"><span class="ui-icon ui-icon-play"></span></li>
<li class="btncmd ui-state-default ui-corner-all" style="margin-left: 0px;" title="Stop" id="Stop"><span class="ui-icon ui-icon-stop"></span></li>
<li class="btncmd ui-state-default ui-corner-all" title="Previous" id="StartPrevious"><span class="ui-icon ui-icon-seek-first"></span></li>
<li class="btncmd ui-state-default ui-corner-all" title="Next" id="StartNext"><span class="ui-icon ui-icon-seek-end"></span></li>
<li class="btncmd ui-state-default ui-corner-all" title="Random" id="StartRandom"><span class="ui-icon ui-icon-shuffle"></span></li>
<li class=""></li>
<li class="ui-state-default ui-corner-all" title="Browse files" id="browse_btn"><span class="ui-icon ui-icon-folder-open"></span></li>
<li class="ui-state-default ui-corner-all" title="Search media library" id="search_btn"><span class="ui-icon ui-icon-search"></span></li>
<li class="ui-state-default ui-corner-all" title="Album art" id="aa_btn"><span class="ui-icon ui-icon-image"></span></li>
<li class="ui-state-default ui-corner-all" title="Extended controls" id="pbs_btn"><span class="ui-icon ui-icon-gear"></span></li>
<li class="ui-state-default ui-corner-all" title="Playlist Tools" id="pt_btn"><span class="ui-icon ui-icon-wrench"></span></li>
<li class="ui-state-default ui-corner-all" title="Playlist Manager" id="pm_btn"><span class="ui-icon ui-icon-note"></span></li>
<li class="ui-state-default ui-corner-all" title="Console log" id="cl_btn"><span class="ui-icon ui-icon-alert"></span></li>
<li class="ui-state-default ui-corner-all" title="Help" id="help_btn"><span class="ui-icon ui-icon-help"></span></li>
<li class="ui-state-default ui-corner-all" id="mute"><span class="ui-icon ui-icon-volume-off"></span></li>
<li id="vol"><div id="volume" style="width: 100px; margin: 0.5em"></div></li>
</ul>
<div id="loading" class="lindicator"> <img alt="Loading" src="img/loading.gif"></div>
<p><div id="progressbar" class="noselect"><div id="playingtitle"></div><div id="playingtime"></div></div>
<div id="tabs" class="ui-tabs ui-helper-clearfix">
<ul>
<li><a title ="dummy" href="#t"></a></li>
</ul>
<div id="t">
<div>
<div style="float: right; width: 8em; margin-right: -1em;">
<ul id="buttons" class="ui-widget" style="margin-top: -1.3em; ">
<li style="border: 1px solid transparent;" title="" id="prevpage_btn"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li>
<li style="border: 1px solid transparent;" title="" id="nextpage_btn"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li>
<li style="border: 1px solid transparent;" title="Refresh controller" id="rel_btn"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
</ul>
</div>
<div style="margin-top:0.5em; margin-right: 8em; cursor: pointer;"><div id="pageslider"></div></div>
</div>
<div id="playlist" style="clear: both;">Loading...</div>
<hr style="margin-right: -1.5em; margin-left: -1.5em;">
<div id="summary" class="noselect" style="margin-bottom: -0.5em; cursor: pointer;"></div>
</div>
</div>
</div>
<!-- Windows -->
<div id="pbs_dlg" class="noselect" title="Extended controls" style="overflow-x: hidden;">
<p>Playlist:</p>
<ul id="buttons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title="Add" id="CreatePlaylist"><span class="ui-icon ui-icon-plusthick"></span></li>
<li class="ui-state-default ui-corner-all" title="Remove" id="RemovePlaylist"><span class="ui-icon ui-icon-closethick"></span></li>
<li class="ui-state-default ui-corner-all" title="Rename" id="RenamePlaylist"><span class="ui-icon ui-icon-pencil"></span></li>
<li class="ui-state-default ui-corner-all" title="Empty" id="EmptyPlaylist"><span class="ui-icon ui-icon-document"></span></li>
<li class="ui-state-default ui-corner-all" title="Undo (u / ctrl + z)" id="Undo"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title="Redo (r / ctrl + y)" id="Redo"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title="Refresh controller" id="RefreshPlaylist"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title="Show now playing (f)" id="FocusOnPlaying"><span class="ui-icon ui-icon-lightbulb"></span></li>
</ul>
<hr/>
<p>Playlist items:</p>
<ul id="buttons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title="Enqueue selected items (q)" id="QueueItems"><span class="ui-icon ui-icon-circle-plus"></span></li>
<li class="ui-state-default ui-corner-all" title="Dequeue selected items (w)" id="DequeueItems"><span class="ui-icon ui-icon-circle-minus"></span></li>
<li class="ui-state-default ui-corner-all" title="Queue random item" id="QueueRandomItems"><span class="ui-icon ui-icon-shuffle"></span></li>
<li class="ui-state-default ui-corner-all" title="Flush queue" id="FlushQueue"><span class="ui-icon ui-icon-trash"></span></li>
<li class="ui-state-default ui-corner-all" title="Delete (Del)" id="Del"><span class="ui-icon ui-icon-minusthick"></span></li>
<li class="ui-state-default ui-corner-all" title="Set cursor" id="SetFocus"><span class="ui-icon ui-icon-pin-s"></span></li>
<li class="ui-state-default ui-corner-all" title="Run contextual menu...
(on selection)" id="InputCC"><span class="ui-icon ui-icon-script"></span></li>
<li class="ui-state-default ui-corner-all" title="Sort by...
(all playlist items)" id="InputSort"><span class="ui-icon ui-icon-carat-2-n-s"></span></li>
</ul>
<hr/>
<p>Rating:</p>
<ul id="buttons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title="Rate 1 on selected items (1)" id="R1"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title="Rate 2 on selected items (2)" id="R2"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title="Rate 3 on selected items (3)" id="R3"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title="Rate 4 on selected items (4)" id="R4"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title="Rate 5 on selected items (5)" id="R5"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title="Rate + on selected items (Numpad +)" id="RPLUS"><span class="ui-icon ui-icon-plus"></span></li>
<li class="ui-state-default ui-corner-all" title="Rate - on selected items (Numpad -)" id="RMINUS"><span class="ui-icon ui-icon-minus"></span></li>
<li class="ui-state-default ui-corner-all" title="Rate 0 on selected items (0)" id="R0"><span class="ui-icon ui-icon-radio-off"></span></li>
</ul>
<hr/>
<p>Custom contextual menus:</p>
<ul id="buttons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title="Custom 1" id="CC1"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title="Custom 2" id="CC2"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title="Custom 3" id="CC3"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title="Custom 4" id="CC4"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title="Custom 5" id="CC5"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title="Custom 6" id="CC6"><span class="ui-icon ui-icon-plus"></span></li>
<li class="ui-state-default ui-corner-all" title="Custom 7" id="CC7"><span class="ui-icon ui-icon-minus"></span></li>
<li class="ui-state-default ui-corner-all" title="Custom 8" id="CC8"><span class="ui-icon ui-icon-radio-off"></span></li>
</ul>
<hr/>
<p>Playback order <select id="PBO"><option value="0">Default</option><option value="1">Repeat (playlist)</option><option value="2">Repeat (track)</option><option value="3">Random</option><option value="4">Shuffle (tracks)</option><option value="5">Shuffle (albums)</option><option value="6">Shuffle (folders)</option></select></p>
<p><input type="checkbox" id="SAC">Stop after current</p>
<p><input type="checkbox" id="SAQ">Stop after queue</p>
</div>
<div id="pt_dlg" class="noselect" title="Playlist Tools" style="overflow-x: hidden;">
<p>Playlist:</p>
<ul id="buttons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title="Add" id="PTCreatePlaylist"><span class="ui-icon ui-icon-plusthick"></span></li>
<li class="ui-state-default ui-corner-all" title="Remove" id="PTRemovePlaylist"><span class="ui-icon ui-icon-closethick"></span></li>
<li class="ui-state-default ui-corner-all" title="Rename" id="PTRenamePlaylist"><span class="ui-icon ui-icon-pencil"></span></li>
<li class="ui-state-default ui-corner-all" title="Empty" id="PTEmptyPlaylist"><span class="ui-icon ui-icon-document"></span></li>
<li class="ui-state-default ui-corner-all" title="Undo (u / ctrl + z)" id="PTUndo"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title="Redo (r / ctrl + y)" id="PTRedo"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title="Refresh controller" id="PTRefreshPlaylist"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title="Show now playing" id="PTFocusOnPlaying"><span class="ui-icon ui-icon-lightbulb"></span></li>
<li class="ui-state-default ui-corner-all" title="Set focus" id="PTSetFocus"><span class="ui-icon ui-icon-pin-s"></span></li>
</ul>
<hr/>
<p>SMP Menus:</p>
<ul id="buttons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title="SMP 1" id="PTSMP1"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title="SMP 2" id="PTSMP2"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title="SMP 3" id="PTSMP3"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title="SMP 4" id="PTSMP4"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title="SMP 5" id="PTSMP5"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title="SMP 6" id="PTSMP6"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title="SMP 7" id="PTSMP7"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title="SMP 8" id="PTSMP8"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title="SMP 9" id="PTSMP9"><span class="ui-icon ui-icon-circle-check"></span></li>
</ul>
<hr/>
<p>Playlist Tools Menu entries (listener) <br><select id="PTME" style="max-width: 100%; width: 100%;"><option value="0">None</option></select></p>
<p>Playlist Tools Menu entries (CMD) <br><select id="PTMECMD" style="max-width: 100%; width: 100%;"><option value="0">None</option></select></p>
<hr/>
<p>Output device <select id="PTOD" style="max-width: 100%;"><option value="0">None</option></select></p>
<p>DSP List <select id="PTDSP" style="max-width: 100%;"><option value="0">None</option></select></p>
<hr/>
<div id="pt_dlg_text" class="justify">
<p>When <a href="https://github.com/regorxxx/Playlist-Tools-SMP">Playlist Tools</a> (Spider Monkey Panel script) is installed on foobar server, menu entries, output devices and DSP list will be available. They are read only (greyed), unless <a href="https://foosion.foobar2000.org/components/?id=runcmd">foo_runcmd</a> and <a href="https://marc2k3.github.io/run-main/">foo_run_main</a> plugins are both installed.</p>
<p>When the latter happens, devices and DSPs may be changed by using the drop-down list (uses command line).
</p>
<p><a href="https://github.com/regorxxx/Playlist-Tools-SMP">Playlist Tools (CMD)</a> menu entries work the same, executing the selected menu entry via CMD. Feature must be enabled at 'Script integration\SMP Dynamic menu'.
</p>
<p><a href="https://github.com/regorxxx/Playlist-Tools-SMP">Playlist Tools (listener)</a> menu entries allow multiple commands execution. Everytime a menu entry is selected, the command is added to the server list. Clicking on the execute button process the entire list and clears it. 'Execute menu entry by name' must be added at 'Script integration\SMP Dynamic menu' to bind the execute button to one of the 9 available buttons.
</p>
</div>
</div>
<div id="pm_dlg" class="noselect justify" title="Playlist Manager" style="overflow-x: hidden;">
<p>Playlist manager panels: <span id="pm_num">0 (none found)</span></p>
<div class="row">
<div class="columnA">
<p style="height: 1.5em;">Available playlists: </p>
</div>
<div class="columnB">
<p style="height: 1.5em; max-width: 100%;"><select id="PMME0" style="width: 100%; max-width: 100%;"><option value="0">None</option></select></p>
</div>
</div>
<hr/>
<div class="row">
<div class="columnA">
<p style="height: 1.5em;">Load playlist file: </p>
<p style="height: 1.5em;">Lock / unlock playlist: </p>
<p style="height: 1.5em;">Delete playlist file: </p>
<p style="height: 1.5em;">Clone in UI (copy): </p>
</div>
<div class="columnB">
<p style="height: 1.5em; max-width: 100%;"><select id="PMME1" style="width: 100%; max-width: 100%;"><option value="0">None</option></select></p>
<p style="height: 1.5em; max-width: 100%;"><select id="PMME2" style="width: 100%; max-width: 100%;"><option value="0">None</option></select></p>
<p style="height: 1.5em; max-width: 100%;"><select id="PMME3" style="width: 100%; max-width: 100%;"><option value="0">None</option></select></p>
<p style="height: 1.5em; max-width: 100%;"><select id="PMME4" style="width: 100%; max-width: 100%;"><option value="0">None</option></select></p>
</div>
</div>
<hr/>
<div class="row">
<div class="columnA">
<p style="height: 1.5em;">Send selection to: </p>
</div>
<div class="columnB">
<p style="height: 1.5em; max-width: 100%;"><select id="PMME5" style="width: 100%; max-width: 100%;"><option value="0">None</option></select></p>
</div>
</div>
<hr/>
<div class="row">
<div class="columnA">
<p style="height: 1.5em;">New empty playlist file: </p>
<p style="height: 1.5em;">Playlist file from active playlist: </p>
<p style="height: 1.5em;">Manually refresh panel: </p>
</div>
<div class="columnB">
<p style="height: 1.5em; max-width: 100%;"><select id="PMME6" style="width: 100%; max-width: 100%;"><option value="0">None</option></select></p>
<p style="height: 1.5em; max-width: 100%;"><select id="PMME7" style="width: 100%; max-width: 100%;"><option value="0">None</option></select></p>
<p style="height: 1.5em; max-width: 100%;"><select id="PMME8" style="width: 100%; max-width: 100%;"><option value="0">None</option></select></p>
</div>
</div>
<hr/>
<div id="pm_dlg_text">
<p>When <a href="https://github.com/regorxxx/Playlist-Manager-SMP">Playlist Manager</a> (Spider Monkey Panel script) is installed on foobar, server playlists will be available in every action list. They are read only (greyed), unless <a href="https://foosion.foobar2000.org/components/?id=runcmd">foo_runcmd</a> and <a href="https://marc2k3.github.io/run-main/">foo_run_main</a> plugins are both installed.</p>
<p>When the latter happens, playlist actions may be run by using the drop-down lists (using command line). Available playlists can be found at the top drop-down list with the following info:
<div class="row">
<div class="column">
<ul>
<li>Name</li>
<li>Size (tracks)</li>
<li>Writable (RW)</li>
</ul>
</div>
<div class="column">
<ul>
<li>Extension / format</li>
<li>Read only (R)</li>
<li>Duration (d/h/m)</li>
</ul>
</div>
</div>
</p>
<p>Note every panel has its own set of associated playlists, so every panel <strong>must have</strong> a different panel name to work.
</p>
<p>It's recommended to enable <strong>auto-saving</strong> on the server-side panels, otherwise changes to playlists will not be synced with their bound files. If that behavior is desired, playlist files may be selectively locked or cloned in UI (instead of loaded) to ensure no changes are made to the files -without disabling the global auto-saving feature-.
</p>
</div>
</div>
<div id="aa_pane">
<img id="aa_img" alt="Album art" style="width: 100%;">
</div>
<div id="cl_pane">
<div id="cl_text"><p>No console.</p></div>
</div>
<div id="help_dlg" class="noselect justify" style="width: 50%; overflow-x: hidden;" title="Help">
<div id="help_dlg_text1">
<h3>Tips</h3>
<ul>
<li>It is recommended to enable 'Cursor follows playback' option in foobar2000 Playback menu for more convenient playlists browsing.</li>
<li>It's also recommended to uncheck 'Log access to console' at 'Preferences/Tools/Http Control' on foobar (to not pollute console).</li>
<li>If the UI colors are not adjusted to specific album art files while playing, try opening and re-saving the cover file on any image editor since it will probably be a format error (recommended 'Baseline optimized').</li>
</ul>
</div>
<hr>
<div id="help_dlg_text2">
<h3>Playlist</h3>
<h4>Playlist items</h4>
<ul>
<li>Double clicking any playlist item starts playback.</li>
<li>Single clicking playlist item selects item(s):</li>
<ul>
<li><strong>On album name</strong> selects contiguous tracks from album.</li>
<ul><li>+ Shift selects multiple albums.</li></ul>
<li><strong>On track name</strong> selects the track.</li>
<ul><li>+ Shift selects in between track(s).</li>
<li>+ Control adds single track to selection.</li></ul>
</ul>
<li>Right clicking shows contextual menu for selection:</li>
<ul>
<li>Non available actions are greyed out.</li>
<li>If no items are selected, some entries will be disabled.</li>
<li>If the active playlist is locked, some entries may be disabled.</li>
<li>Native contextual menu is overridden (Shift + R. Click).</li>
</ul>
</ul>
<h4>Status bar</h4>
<ul>
<li>Double clicking sets focus on playing item.</li>
</ul>
<h4>Playlist page and slider</h4>
<ul>
<li>Dragging playlist item or selection moves it within the current playlist page.</li>
<li>Playlist slider is working as playlist page switcher, drag its thumb to change page.</li>
<li>Double clicking on playlist slider sets focus on playing item.</li>
</ul>
<h4>Playlist Tabs</h4>
<ul>
<li>Double clicking active playlist tab opens rename popup.</li>
<li>Ctrl + Double clicking a playlist tab removes the playlist.</li>
</ul>
<h4>Hotkeys (also shown on buttons tooltip)</h4>
<ul>
<li><strong>f </strong>: focus on now playing item.</li>
<li><strong>s </strong>: stop after current.</li>
<li><strong>u / ctrl + z </strong>: undo.</li>
<li><strong>r / ctrl + y </strong>: redo.</li>
<li><strong>del </strong>: delete selection.</li>
<li><strong>q </strong>: enqueue selection.</li>
<li><strong>w </strong>: dequeue selection.</li>
<li><strong>ctrl + w </strong>: remove playlist (may not work on most browsers).</li>
<li><strong>ctrl + n </strong>: create new playlist (may not work on most browsers).</li>
<li><strong>w </strong>: dequeue selection.</li>
<li><strong>0...5 </strong>: rate selection from 0 to 5.</li>
<li><strong>º </strong>: rate selection 0.</li>
<li><strong>+ (numpad) </strong>: reduce rating on selection.</li>
<li><strong>- (numpad) </strong>: increase rating on selection.</li>
<li><strong>Space </strong>: play/pause</li>
<li><strong>Shift + PageUp </strong>: increase playlist size</li>
<li><strong>Shift + PageDown</strong>: reduce playlist size</li>
</ul>
</div>
<hr>
<div id="help_dlg_text3">
<h3>Browser</h3>
<h4>Search media library</h4>
<ul>
<li>Queries have 3 configurable levels.</li>
<li>Tag values may be searched or full list navigated.</li>
<li>Use '$meta_sep(myTag,;)' notation to display separate values.</li>
<li>Tags may be set on the preferences panel on Foobar2000:</li>
<br>
<img src="img/_doc/queries.png" alt="Disable 'Query tag settings." style="width: 100%;">
</ul>
</div>
<hr>
<div id="help_dlg_text4">
<h3>Extended Controls</h3>
<p>This window has general tools for playlist/track management, among them you will find:</p>
<ul>
<li>Multiple playlist commands: new, delete, ...</li>
<li>Multiple selection commands: set cursor, delete, ...</li>
<li>Sorting popup.</li>
<li>Run CMD: Run an arbitrary contextual menu on selection.</li>
<li>Rating: from 1-5, +, - and reset for the current selection.</li>
<li>Custom contextual menu buttons: pre-defined tools associated to plugins.(*)</li>
<ul>
<li><a href="https://www.foobar2000.org/components/view/foo_quicksearch">foo_quicksearch</a> (**)</li>
<li><a href="https://fy.3dyd.com/home/">foo_youtube</a></li>
</ul>
<li>Playback order.</li>
</ul>
<p>
(*) When <a href="https://github.com/regorxxx/Playlist-Tools-SMP">Playlist Tools</a> (Spider Monkey Panel script) is installed, component checking is also allowed, therefore Contextual menu Buttons are enabled/disabled according to the components installed.
</p>
<p>(**) The default contextual buttons make use of title, artist and genre queries. Style is not a query provided by default when you install the component but it can be added with this data: (name: Style, query: %style%, context menu: checked).
<br><br>
<img src="img/_doc/quicksearch.png" alt="Quicksearch configuration" style="width: 100%;">
</p>
</div>
<hr>
<div id="help_dlg_text5">
<h3>Playlist Tools</h3>
<p>When <a href="https://github.com/regorxxx/Playlist-Tools-SMP">Playlist Tools</a> (Spider Monkey Panel script) is installed on foobar server, menu entries, output devices and DSP list will be available (*):</p>
<p>All functionality will be disabled unless <a href="https://foosion.foobar2000.org/components/?id=runcmd">foo_runcmd</a> and <a href="https://marc2k3.github.io/run-main/">foo_run_main</a> plugins are both installed. Having both installed will enable these features:</p>
<ul>
<li>Output Device</li>
<br>
<li>DSP List</li>
</ul>
<p>To enable the rest of SMP integration features, Playlist tools must be configured within foobar2000:</p>
<ul>
<li>Playlist Tools buttons: added at 'Script integration\SMP Dynamic menu\Set menu'. There are up to 9 slots available for the buttons.</li>
<br>
<li>Playlist Tools (CMD): enabled at 'Script integration\SMP Dynamic menu\Create SMP dynamic menus'. Executes the selected menu entry via CMD.</li>
<br>
<li>Playlist Tools (listener): enabled when 'Execute menu entry by name' is used in one of the 9 available button slots. It allows multiple -sequential- command execution. Everytime a menu entry is selected, the command is added to the server list (**). Clicking on the execute button process the entire list and clears it. 'Execute menu entry by name' is added at 'Script integration\SMP Dynamic menu' to bind the execute button to one of the 9 available buttons.</li>
</ul>
<img src="img/_doc/enable_cmd.jpg" alt="Enable 'Playlist Tools (CMD)'." style="width: 100%;">
(*) The panel is the one sending those lists to the server. Whether you enable or not the rest of the features, so it's a 'requirement' to see the actual devices or DSPs on the controller on real time. There is a 'workaround' if you don't use SMP and/or Playlist Tools though: you can manually edit 'smp\dsp.json' and 'devices.json' according to your PC config. Examples can be found at 'smp\defaults' folder.
<br><br>
(**) <strong>It's mandatory to disable 'Always send new files to playist' at 'Preferences/shell integration', otherwise the commands will be sent to the wrong playlist</strong>.
<br><br>
<img src="img/_doc/always_send_new_files.jpg" alt="Disable 'Always send new files to playist'." style="width: 100%;">
</p>
</div>
</div>
<div id="search_dlg" class="noselect" title="Search media library" style="overflow-x: hidden;">
<div id="querylist"></div>
</div>
<div id="search_dlg_nav1" class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix noselect" style="border-bottom-width: 1px; border-top-width: 0px; font-size: 1em; width: 92%; white-space:nowrap; max-width: 92%;">
<p><input type="text" placeholder="Search" size="30" id="searchstr" style="max-width: 80%;"> <a style="padding-right: 5px;" href="http://wiki.hydrogenaudio.org/index.php?title=Foobar2000:Query_syntax" target="_blank" title="Query syntax help">?</a><span id="searchstrBttn" style="position: relative;left: -8%;">X</span></p>
</div>
<div id="search_dlg_nav2" class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix noselect" style="border-bottom-width: 1px; border-top-width: 0px; font-size: 1em; width: 92%; white-space:nowrap; max-width: 92%;">
<button id="r_btn">All</button><button id="r_btn2"><</button><span id="querypath"></span>
</div>
<div id="browse_dlg" class="noselect" title="File browser" style="overflow-x: hidden;">
<div id="browse_table"></div>
</div>
<div id="browse_dlg_nav" class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" style="border-bottom-width: 1px; border-top-width: 0px; font-size: 1em; width: 100%; white-space:nowrap; max-width: 100%;">
<a id="browse_parent" title="Up one folder" href="#"></a> <span id="browse_path"></span>
</div>
<div id="error_dlg" title="☠ Ouch!">
<p>An AJAX error occured.</p>
<p>Possible reasons:</p>
<ul>
<li>JSON parser got stuck on invalid data; response dump might be provided below so you can analyze what went wrong using JSON validator of your choice, for example: <a href="http://jsonformatter.curiousconcept.com/">http://jsonformatter.curiousconcept.com/</a>;</li>
<li>Broken connection.</li>
<li>foobar2000 crash or server stopped.</li>
</ul>
<p><a href="/ajquery-xxx/index.html">Restart</a> template, foobar2000 server or think of something else.</p>
<hr/>
<textarea id="dbg" cols="90" rows="30"></textarea>
</div>
<!-- Tooltip -->
<span id="tooltip" class="ui-widget"></span>
<!-- Contextual Menus -->
<div id="ctxMenu" class="menu">
<a id="ctxMenuDelete">
Remove <span>Del</span>
</a>
<hr />
<a id="ctxMenuQueue">
Queue <span>q</span>
</a>
<a id="ctxMenuDequeue">
Dequeue <span>w</span>
</a>
<hr />
<a id="ctxMenuUndo">
Undo <span>Ctrl + z</span>
</a>
<a id="ctxMenuRedo">
Redo <span>Ctrl + y</span>
</a>
</div>
<div id="plsMenu" class="menu">
<a id="plsMenuRename">
<b>Rename </b><span>Dbl. click</span>
</a>
<hr />
<a id="plsMenuRemove">
Remove <span>Ctrl + w</span>
</a>
<hr />
<a id="plsMenuNew">
New <span>Ctrl + n</span>
</a>
</div>
</body>
</html>