-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
600 lines (557 loc) · 28 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
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
<!--
FlagPlayer - A lightweight YouTube frontend
Copyright (C) 2019 Seneral
Licensed under AGPLv3
See https://github.com/Seneral/FlagPlayer for details
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>FlagPlayer</title>
<meta name="description" content="A lightweight YouTube Web-App focused on music playback. Open source, single-page, client-side, simple.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="manifest.webmanifest">
<link rel="icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="favicon-192.png">
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>
<body class="mobile theme-dark noselect">
<script type="text/javascript">
var theme = localStorage.getItem("prefTheme") || "DARK";
document.body.className = document.body.className.replace(/\s?theme-[a-zA-Z]+\s?/gi, ' ');
document.body.classList.add("theme-" + theme.toLowerCase());
</script>
<header class="header">
<div class="side left">
<a class="headerIcon flagPlayerLogo" href="index.html" navigation="view=home">
<svg class="darkIcon" viewBox="0 0 48 32" nav><use href="#svg_logo_flag_dark" nav/></svg>
<svg class="lightIcon" viewBox="0 0 48 32" nav><use href="#svg_logo_flag" nav/></svg>
</a>
</div>
<div class="center searchBar">
<input class="searchField" type="search" id="searchField" name="flagplayersearch">
<button class="searchButton" id="searchButton">
<svg viewBox="6 6 36 36"><use href="#svg_search"/></svg>
</button>
</div>
<div class="side right">
<button class="headerIcon" id="settingsOpenButton">
<svg class="icon" viewBox="8 8 32 32"><use href="#svg_options"/></svg>
</button>
</div>
</header>
<div class="pageContainer" id="container">
<main class="section player" id="player">
<video id="videoMedia"></video>
<audio id="audioMedia"></audio>
<object class="videoPoster" id="videoPoster" draggable="false" type="image/jpg">
<object class="videoPosterFallback" id="videoPosterFallback" draggable="false" type="image/jpg"></object>
</object>
<div class="videoControls">
<div class="centerAnchor">
<svg class="indicator" id="bufferingIndicator" viewBox="0 0 48 48" filter="url(#svg_shadow)"><use href="#svg_bufferingCircle"/></svg>
<svg class="indicator static" id="startPlayIndicator" viewBox="0 0 48 48"><use href="#svg_play"/></svg>
<svg class="indicator static" id="errorIndicator" viewBox="0 0 48 48"><use href="#svg_cross"/></svg>
<svg class="indicator static" id="endedIndicator" viewBox="0 0 48 48"><use href="#svg_play"/></svg>
<svg class="indicator big" id="nextLoadIndicator" viewBox="0 0 48 48"><use href="#svg_loadCircle"/></svg>
<svg class="indicator temp" id="playIndicator" viewBox="0 0 48 48"><use href="#svg_play"/></svg>
<svg class="indicator temp" id="pauseIndicator" viewBox="0 0 48 48"><use href="#svg_pause"/></svg>
<span class="errorSubscript" id="errorMessage"><span>An Error occured!</span></span>
</div>
<div class="controlOverlay"></div>
<div class="controlBar" id="controlBar">
<div class="controlStack left">
<button class="controlButton" id="prevButton">
<svg viewBox="6 6 36 36"><use href="#svg_left" filter="url(#svg_shadow)"/></svg>
</button>
<button class="controlButton" id="playButton">
<svg viewBox="6 6 36 36" id="svg_playIcon" toggle-off><use href="#svg_play" filter="url(#svg_shadow)"/></svg>
<svg viewBox="6 6 36 36" id="svg_pauseIcon" toggle-on><use href="#svg_pause" filter="url(#svg_shadow)"/></svg>
</button>
<button class="controlButton" id="nextButton">
<svg viewBox="6 6 36 36"><use href="#svg_right" filter="url(#svg_shadow)"/></svg>
</button>
<button class="controlButton" id="muteButton">
<svg viewBox="6 6 36 36" filter="url(#svg_shadow)"><use href="#svg_volume_base"/><use href="#svg_volume_level1" id="svg_volume_lvl1"/><use href="#svg_volume_level2" id="svg_volume_lvl2"/></svg>
<svg viewBox="6 6 36 36" filter="url(#svg_shadow)" toggle-on><use href="#svg_volume_cross"/></svg>
</button>
<div class="controlExpander">
<div class="controlSlider slider" id="volumeSlider" interacting>
<div class="sliderVisual">
<div class="sliderBar background"></div>
<div class="sliderBar value" id="volumeBar"></div>
<div class="sliderKnob" id="volumePosition"></div>
</div>
</div>
</div>
<span id="timeLabel">0:00 / 0:00</span>
</div>
<div class="controlStack right">
<button class="controlButton" id="optionsButton">
<svg viewBox="6 6 36 36"><use href="#svg_options" filter="url(#svg_shadow)"/></svg>
</button>
<button class="controlButton" id="fullscreenButton">
<svg viewBox="6 6 36 36" filter="url(#svg_shadow)" toggle-off><use href="#svg_fullscreen"/></svg>
<svg viewBox="6 6 36 36" filter="url(#svg_shadow)" toggle-on><use href="#svg_smallscreen"/></svg>
</button>
</div>
<div class="timeline" id="tlControl">
<div class="timelineVisual">
<div class="timelineBar background"></div>
<div class="timelineBar buffered" id="tlBuffered"></div>
<div class="timelineBar peeking" id="tlPeeking"></div>
<div class="timelineBar progress" id="tlProgress"></div>
<div class="timelineKnob" id="tlPosition"></div>
</div>
</div>
</div>
<div class="optionsPanel" id="optionsPanel" style="display: none;">
<div id="legacyStreamGroup">
<select id="select_legacy" class="selector rightControl"></select>
</div>
<div id="dashStreamGroup">
<select id="select_codec" class="selector rightControl">
<option value="vp">VP9</option>
<option value="avc">H264</option>
<option value="av01">AV1</option>
</select>
<select id="select_dashVideo" class="selector rightControl"></select>
<select id="select_dashAudio" class="selector rightControl"></select>
</div>
<div>
<span>Loop:</span>
<label class="switch rightControl">
<input type="checkbox" id="opt_loop">
<span class="background"></span>
<span class="knob"></span>
</label>
</div>
<div>
<span>Autoplay:</span>
<label class="switch rightControl">
<input type="checkbox" id="opt_autoplay">
<span class="background"></span>
<span class="knob"></span>
</label>
</div>
<div>
<span>Playlist Shuffle:</span>
<label class="switch rightControl">
<input type="checkbox" id="opt_plshuffle">
<span class="background"></span>
<span class="knob"></span>
</label>
</div>
</div>
</div>
</main>
<section class="section banner" id="banner">
<img class="chBannerImg" id="chBannerImg">
<div class="chLinkBar" id="chLinkBar"></div>
</section>
<div class="pageContent" id="content">
<div class="desktopLayout">
<div class="column main" id="main"></div>
<div class="column side" id="side"></div>
</div>
<div class="mobileLayout" id="mobile">
<noscript>JavaScript is required to use FlagPlayer since it is a client-side web app that loads remote content.</noscript>
<!-- Secondary Content -->
<aside class="side section playlist collapsable" style="display:none" collapsed id="playlist">
<div class="playlistHead">
<div class="plHeadMain collapser">
<div class="plDesc">
<span class="collapsableline plTitle" id="plTitle"></span>
<span class="oneline plDetail" id="plDetail"></span>
</div>
<div class="loadingIndicator small" id="plLoadingIndicator">
<svg viewBox="0 0 48 48"><use href="#svg_loadCircle"/></svg>
</div>
<div class="flexSpace"></div>
<button class="plCollapser">
<svg class="icon collapsedIcon" viewBox="6 6 36 36"><use href="#svg_expand"/></svg>
<svg class="icon expandedIcon" viewBox="6 6 36 36"><use href="#svg_collapse"/></svg>
</button>
</div>
<div class="plHeadActions actionBar collapsableContainer">
<button class="barAction" id="plRemove">
<svg viewBox="6 6 36 36"><use href="#svg_list_remove"/></svg>
<span>Remove</span>
</button>
<button class="barAction" id="plSave">
<svg viewBox="6 6 36 36"><use href="#svg_list_add"/></svg>
<span>Save</span>
</button>
<button class="barAction" id="plUpdate">
<svg viewBox="6 6 36 36"><use href="#svg_list_update"/></svg>
<span>Update</span>
</button>
<a class="barAction" id="youtubePLLink" href="" target="_blank">
<svg viewBox="6 6 36 36"><use href="#svg_list_link"/></svg>
<span>YouTube</span>
</a>
<button class="barAction" id="plClose">
<svg viewBox="6 6 36 36"><use href="#svg_cross"/></svg>
<span>Close</span>
</button>
</div>
</div>
<div class="playlistContainer scrollBox collapsableContainer" id="plVideos"></div>
</aside>
<!-- Home Content -->
<section class="section home" id="home">
<div class="playlistList" id="homePlaylists">
<br>
It seems you have not saved any playlists yet.</br>
You can enter YouTube playlists as links or IDs in the search bar.</br>
</div>
</br>
<div class="collapsable" collapsed>
<button class="collapser barAction" more-text="Introduction to FlagPlayer" less-text="Alright gotcha">Introduction to FlagPlayer</button>
</br></br>
<div class="selectable textContent collapsableContainer">
FlagPlayer is a music-oriented, single-page, client-side YouTube web app - and it is <a href="https://github.com/Seneral/FlagPlayer">open source</a>! </br>
You can search for videos and playlists, or enter them directly, save playlists to access them offline at any point, and cache individual audio streams for offline playback.</br>
</br>
<span class="freeHeader">Web App?</span></br>
Once accessed FlagPlayer resides in your browser cache (less than 100KB) and does not require an active internet connection to work, except of course to fetch the videos from YouTubes servers. That means you can listen to cached audio even when completely offline. Additionally you can add FlagPlayer to your home screen and it will act like any other normal app. </br>
</br>
<span class="freeHeader">Audio Caching</span></br>
You can find the option to cache an audio stream in the context menu of the video title bar. After caching, just go to your saved playlist and FlagPlayer will detect when you are offline and automatically only play back your cached audio in that playlist, until you are online again. Even if you are online, if you left "Cache First" in the settings enabled, it will use the cached audio without redownloading the stream. To view all cached streams and the storage usage, go to the settings and click on "Audio Cache". </br>
</br>
<span class="freeHeader">Features and issues</span></br>
The player itself allows you to only listen to the audio stream if you want, in case you only want audio, and is otherwise more or less a standard player. </br>
It does not yet support subtitles and similar features, and it will stutter and go out of sync with the audio when playing back very high resolution videos. </br>
FlagPlayer does not use any official YouTube APIs and is thus completely legal to use. </br>
That does however mean it has to be constantly updated to not break. If you spot an error, please <a href="https://github.com/Seneral/FlagPlayer/issues">create an issue</a>.
</div>
</div>
</section>
<!-- Cache Content -->
<main class="section cache" id="cache">
<div class="freeText" id="cachePersistence" style="display: none;">
Browser rejects Cache Persistence! </br>
Your playlists and audio cache may be cleared by the browser when space is running low. </br>
Try bookmarking FlagPlayer or adding it to the home screen if data keeps dissappearing. </br>
</br>
</div>
<div class="freeText" id="cacheFixText" style="display: none;">
You seem to have cached playlists on an older version of FlagPlayer. </br>
Due to <a href="https://github.com/Seneral/FlagPlayer/issues/2">an issue</a> the browser estimations of the storage usage are wrong, and the browser is likely to delete your cached data. </br>
To fix this FlagPlayer needs to reload all thumbnails of your saved playlists. Hit Fix browser estimation below to continue. However, this could take a long time if you have more than a few hundred videos. </br>
You can abort this process, but if you do, some video thumbnails won't be cached for offline use. If you find yourself in this situation, simply update the affected playlist and FlagPlayer will download the missing thumbnails. </br>
</br>
</div>
<div class="actionBar headerBar" id="cacheQuotaBar">
<button class="barAction fixed" id="cacheFixButton" style="display: none;">
<svg viewBox="6 6 36 36"><use href="#svg_list_update"/></svg>
<span>Fix browser estimation</span>
</button>
<div class="flexSpace"></div>
<span class="barLabel">Total Storage Quota:</span>
<span class="barText" id="cacheQuota">0B / 0B</span>
</div>
<div class="actionBar headerBar">
<span class="barLabel">Cached Audio Streams:</span>
<span class="barText" id="cacheAmount">0</span>
<div class="flexSpace"></div>
<span class="barLabel">Memory Usage:</span>
<span class="barText" id="cacheUsage">0B</span>
</div>
<div class="videoList" id="cacheVideoList"></div>
</main>
<!-- Watch Content -->
<section class="section video" id="video">
<div class="vdDetail primary">
<span class="vdTitle selectable" id="vdTitle">Title</span>
<span class="vdViews selectable" id="vdViews">0 views</span>
<div class="vdActionBar actionBar">
<div class="vdSentiment">
<div class="vdSentimentBar" id="vdSentiment"></div>
</div>
<button class="barAction fixed">
<svg viewBox="6 6 36 36"><use href="#svg_like"/></svg>
<span id="vdUpvotes">0</span>
</button>
<button class="barAction fixed">
<svg viewBox="6 6 36 36"><use href="#svg_dislike"/></svg>
<span id="vdDownvotes">0</span>
</button>
<button class="barAction">
<svg viewBox="6 6 36 36"><use href="#svg_list_add"/></svg>
<span>Save</span>
</button>
<button class="barAction script dropdown left down" id="videoContextActions">
<svg viewBox="6 6 36 36"><use href="#svg_hdots"/></svg>
<div class="dropdownContent">
<a tabindex="0" class="youtubeLink" href="https://www.youtube.com" rel="noopener" target="_blank">Watch on YouTube</a>
<span tabindex="0" value="cache">Cache Audio Stream</span>
<a tabindex="0" value="linkAudio">Audio Stream</a>
<a tabindex="0" value="linkVideo">Video Stream</a>
<a tabindex="0" value="linkThumbnail">Thumbnail</a>
</div>
</button>
</div>
</div>
<div class="vdDetail secondary">
<div class="vdUploadContainer">
<a class="vdUploadLink" tabIndex="-1">
<img class="vdUploadImg profileImg" id="vdUploaderImg" nav>
</a>
<a class="vdUploadLink">
<div class="vdUploadDetail selectable" nav>
<span class="vdUploadName" id="vdUploaderName" nav></span>
<span class="vdUploadDate" id="vdUploadDate" nav></span>
</div>
</a>
<div class="flexSpace"></div>
<button class="vdUploadSubscribers" id="vdUploaderSubscribers"></button>
</div>
<div class="vdTextContainer collapsable" id="vdTextContainer">
<div class="vdTextContent selectable textContent collapsableText">
<div class="vdDescription" id="vdDescription"></div>
<div class="vdMetadata" id="vdMetadata"></div>
</div>
<button class="vdDescCollapser collapser" more-text="Show More" less-text="Show Less"></button>
</div>
</div>
</section>
<aside class="side section related" id="related">
<div class="videoList" id="relatedContainer"></div>
</aside>
<section class="section comments" id="comments">
<div class="vdCommentHeader actionBar">
<span id="vdCommentLabel">No comments</span>
<div class="flexSpace"></div>
<button class="barAction script dropdown left down" id="commentContextActions">
<svg viewBox="6 6 36 36"><use href="#svg_hdots"/></svg>
<div class="dropdownContent">
<span tabindex="0" value="cmTop">Top Comments</span>
<span tabindex="0" value="cmNew">New Comments</span>
</div>
</button>
</div>
<div class="vdCommentList" id="vdCommentList"></div>
</section>
<!-- Search Content -->
<main class="section search" id="search">
<div class="actionBar headerBar">
<span class="barLabel">Search Options:</span>
<div class="flexSpace"></div>
<span class="barLabel">Filter:</span>
<button class="barAction" id="search_hideCompletely">
<svg viewBox="6 6 36 36" toggle-on><use href="#svg_hide"/></svg>
<svg viewBox="6 6 36 36" toggle-off><use href="#svg_show"/></svg>
</button>
<button class="barAction script dropdown multiple crunched left down" id="search_categories">
<svg viewBox="6 6 36 36"><use href="#svg_list_filterC"/></svg>
<span>Category</span>
<div class="dropdownContent"></div>
</button>
<button class="barAction script dropdown left down" id="searchContextActions">
<svg viewBox="6 6 36 36"><use href="#svg_hdots"/></svg>
<div class="dropdownContent">
<a tabindex="0" class="youtubeLink" href="https://www.youtube.com" rel="noopener" target="_blank">Search on YouTube</a>
</div>
</button>
</div>
<div class="videoList" id="searchContainer"></div>
</main>
<!-- Channel Content -->
<main class="section channel" id="channel">
<div class="chDetail">
<button class="contextAction script dropdown left down" id="channelContextActions">
<svg viewBox="6 6 36 36"><use href="#svg_vdots"/></svg>
<div class="dropdownContent">
<a tabindex="0" class="youtubeLink" href="https://www.youtube.com" rel="noopener" target="_blank">Visit on YouTube</a>
</div>
</button>
<div class="chProfile">
<img class="chProfileImg profileImg" id="chProfileImg">
<div class="chIdentity selectable">
<span class="chName" id="chName">Name</span>
<span class="chSubscribers" id="chSubscribers">0 subscriber</span>
</div>
</div>
<div class="chDescription collapsable">
<div class="selectable textContent collapsableText" id="chDescription"></div>
<button class="chDescCollapser collapser" more-text="Show More" less-text="Show Less"></button>
</div>
</div>
<div class="tabBar" id="chTabBar"></div>
<div class="chVideoContainer" id="chVideoContainer"></div>
</main>
</div>
</div>
</div>
<div class="fullscreenPanel" id="settingsPanel" style="display: none;">
<div class="settingsPanel">
<div class="settingsHeader main">
<span>Settings</span>
<div class="flexSpace"></div>
<button class="settingsHeaderIcon" id="settingsCloseButton">
<svg class="icon" viewBox="0 0 48 48"><use href="#svg_cross"/></svg>
</button>
</div>
<div class="settingsContent">
<div>
<span>Theme</span>
<select class="selector rightControl" id="st_theme">
<option value="LIGHT">Light</option>
<option value="DARK">Dark</option>
</select>
</div>
<div>
<span>Small Player</span>
<label class="switch rightControl">
<input type="checkbox" id="st_small_player">
<span class="background"></span>
<span class="knob"></span>
</label>
</div>
<div>
<span>Related Videos</span>
<select class="selector rightControl" id="st_related">
<option value="NONE">None</option>
<option value="NEXT">Next</option>
<option value="ALL">All</option>
</select>
</div>
<div>
<span>Load Comments</span>
<label class="switch rightControl">
<input type="checkbox" id="st_comments">
<span class="background"></span>
<span class="knob"></span>
</label>
</div>
<div>
<span>CORS Host</span>
<input type="text" class="baseField rightControl" id="st_corsHost">
</div>
<div>
<a class="freeLink" href="?view=cache" navigation="view=cache">
Audio Cache
<span class="rightControl" id="st_cache_usage" nav>0B - View All</span>
<span class="rightControl" id="st_cache_persistence" nav style="display: none;">(!!)</span>
</a>
</br>
<span>Cache Quality</span>
<select class="selector rightControl" id="st_cache_quality">
<option value="BEST">Best</option>
<option value="160">160kbps</option>
<option value="128">128kbps</option>
<option value="70">70kbps</option>
<option value="50">50kbps</option>
<option value="WORST">Worst</option>
</select>
</br>
<span>Cache First</span>
<label class="switch rightControl">
<input type="checkbox" id="st_cache_force">
<span class="background"></span>
<span class="knob"></span>
</label>
</div>
</div>
<div class="settingsHeader">
<span>About</span>
</div>
<div class="settingsContent">
<span class="textContent">
License: AGPLv3 <br>
More information: <a href="https://github.com/Seneral/FlagPlayer">FlagPlayer on Github</a>
</span>
</div>
</div>
</div>
<div class="notificationContainer" id="notificationContainer"></div>
<!-- SVG ICONS -->
<svg style="position: absolute; width: 0; height: 0;">
<defs>
<!-- Shadow Filter -->
<!--<filter id="svg_shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="0" stdDeviation="3"/>
</filter>-->
<filter id='svg_shadow' x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox">
<feFlood flood-color='#0006'/>
<feComposite operator='in' in2='SourceGraphic'/>
<feGaussianBlur stdDeviation='4'/>
<feBlend in='SourceGraphic' in2='glow'/>
</filter>
<!-- <filter id="svg_shadow" x="-25%" y="-25%" width="150%" height="150%" filterUnits="objectBoundingBox">
<feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="5" />
<feColorMatrix result="colorOut" in="blurOut" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.4 0"/>
<feBlend in="SourceGraphic" in2="colorOut" mode="normal" />
</filter> -->
<!-- Icon Background Dish -->
<!-- Playback Control Icons -->
<path id="svg_left" d="M 16,16 19,16 19,32 16,32 Z M 21.5,24 32,16 32,32 Z"></path>
<path id="svg_right" d="M 26.5,24 16,16 16,32 Z M 29,16 32,16 32,32 29,32 Z"></path>
<path id="svg_play" d="M 19,32 19,16 31,24 Z"></path>
<path id="svg_pause" d="M 18,32 22,32 22,16 18,16 Z M 26,32 30,32 30,16 26,16 Z"></path>
<!-- Volume Icons -->
<path id="svg_volume_base" d="M16,27 19,27 24,32 24,16 19,21 16,21 Z"></path>
<path id="svg_volume_level1" d="M26,20 A 2,3 0 0,1 26,28 Z"></path>
<path id="svg_volume_level2" d="M26,16 A 5,6 0 0,1 26,32 M26,30 A 4,5 0 0,0 26,18 Z"></path>
<path id="svg_volume_cross" d="M 33.5,16 32,14.5 14.5,32 16,33.5 Z"></path>
<!-- Other control Icons -->
<g id="svg_options">
<path d="M21.2,24 A 1,1 0 0,0 26.8,24 M31,24 A 1,1 0 0,0 17,24 Z M21.2,24 A 1,1 0 0,1 26.8,24 M31,24 A 1,1 0 0,1 17,24 Z"></path>
<path d="M21.50,18.00 22.00,15.00 26.00,15.00 26.50,18.00 Z M21.50,30.00 22.00,33.00 26.00,33.00 26.50,30.00 Z M27.95,18.83 30.79,17.77 32.79,21.23 30.45,23.17 Z M20.05,29.17 17.21,30.23 15.21,26.77 17.55,24.83 Z M30.45,24.83 32.79,26.77 30.79,30.23 27.95,29.17 Z M17.55,23.17 15.21,21.23 17.21,17.77 20.05,18.83 Z"></path>
</g>
<path id="svg_fullscreen" d="M 15,16 h6 v2 h-4 v4 h-2 Z M 33,16 h-6 v2 h4 v4 h2 Z M 33,32 h-6 v-2 h4 v-4 h2 Z M 15,32 h6 v-2 h-4 v-4 h-2 Z"></path>
<path id="svg_smallscreen" d="M 27,26 h6 v2 h-4 v4 h-2 Z M 21,26 h-6 v2 h4 v4 h2 Z M 21,22 h-6 v-2 h4 v-4 h2 Z M 27,22 h6 v-2 h-4 v-4 h-2 Z"></path>
<!-- List Icons -->
<path id="svg_list_add" d="M10,14 v3 h18 v-3 Z m0,6 v3 h18 v-3 Z m0,6 v3 h12 v-3 Z m0,6 v3 h18 v-3 Z M25,26 h6 v-6 h3 v6 h6 v3 h-6 v6 h-3 v-6 h-6 Z"></path>
<path id="svg_list_remove" d="M10,14 v3 h18 v-3 Z m0,6 v3 h11 v-3 Z m0,6 v3 h13 v-3 Z m0,6 v3 h11 v-3 Z M24,23 26,21 38,33 36,35 Z M38,23 26,35 24,33 36,21 Z"></path>
<path id="svg_list_filterC" d="M 10,14 v3 h18 v-3 Z m 0,6 v3 h12 v-3 Z m 0,6 v3 h11 v-3 Z m 0,6 v3 h12 v-3 Z M 34,20 Q 24,19 24,28 T 34,36 M34,33 Q 27,34 27,28 T 34,23"></path>
<path id="svg_list_update" d="M10,14 v3 h18 v-3 Z m0,6 v3 h12 v-3 Z m0,6 v3 h11 v-3 Z m0,6 v3 h12 v-3 Z M32,20 q-8,0 -8,8 t8,8 t8,-8 h-3 q0,5 -5,5 t-5,-5 t5,-5 Z M32,17 l5,5 -5,5 Z"></path>
<path id="svg_list_link" d="M10,14 v3 h6 v-3 Z m0,6 v3 h6 v-3 Z m0,6 v3 h18 v-3 Z m0,6 v3 h18 v-3 Z M20.5,24 18,21.5 27.5,12 30,14.5 Z M19,11 h12 v12 h-3 v-9 h-9 Z"></path>
<path id="svg_list_play" d="M10,14 v3 h18 v-3 Z m0,6 v3 h10 v-3 Z m0,6 v3 h10 v-3 Z m0,6 v3 h10 v-3 Z M 23,20 23,36 35,28 Z"></path>
<!-- M 19,32 19,16 31,24 Z"></path> -->
<!-- M32,20 q-8,0 -8,8 t8,8 t8,-8 h-3 q0,5 -5,5 t-5,-5 t5,-5 Z M32,17 l5,5 -5,5 Z"></path> -->
<!-- InPage Icons -->
<path id="svg_search" d="M16,16 A 1,1 0 0,0 26,26 M24.5,24.5 A 1,1 0 0,1 17.5,17.5 Z M16,16 A 1,1 0 0,1 26,26 M24.5,24.5 A 1,1 0 0,0 17.5,17.5 Z M26.5,24.5 24.5,26.5 31.5,33.5 33.5,31.5 Z"></path>
<path id="svg_like" d="M 8,18 8,38 14,38 14,18 Z M 16,38 34,38 40,24 40,18 28,18 30,10 28,8 16,18 Z"></path>
<path id="svg_dislike" d="M 8,30 8,10 14,10 14,30 Z M 16,10 34,10 40,24 40,30 28,30 30,38 28,40 16,30 Z"></path>
<g id="svg_hdots"><circle cx="12" cy="24" r="3"></circle><circle cx="24" cy="24" r="3"></circle><circle cx="36" cy="24" r="3"></circle></g>
<g id="svg_vdots"><circle cx="24" cy="12" r="3"></circle><circle cx="24" cy="24" r="3"></circle><circle cx="24" cy="36" r="3"></circle></g>
<path id="svg_expand" d="M12,20 15,17 24,26 33,17 36,20 24,31.5 Z"></path>
<path id="svg_collapse" d="M12,28 15,31 24,22 33,31 36,28 24,16.5 Z"></path>
<path id="svg_cross" d="M13,15 15,13 35,33 33,35 Z M35,15 15,35 13,33 33,13 Z"></path>
<path id="svg_show" d="M8,24 Q 24,8 40,24 Q24,40 8,24 M20,24 A1,1 0 0,0 28,24 A1,1 0 0,0 20,24"></path>
<path id="svg_hide" d="M8,24 Q 24,8 40,24 Q24,40 8,24 M20,24 A1,1 0 0,0 28,24 A1,1 0 0,0 20,24 M32.5,12.5 35.5,15.5 15.5,35.5 12.5,32.5"></path>
<!-- Animated buffering spin loader -->
<circle id="svg_bufferingCircle" cx="24" cy="24" r="20" fill="none" stroke-width="3" stroke-linecap="round"/>
<circle id="svg_loadCircle" cx="24" cy="24" r="20" fill="none" stroke-width="3" stroke-linecap="round"/>
<!-- #ProgrammerArt -->
<g id="svg_logo">
<path d="M2,2 38,2 46,16 38,30 2,30 10,16 Z" fill="#f00"> </path>
<path d="M18,9 21,9 25,16 21,23 18,23 22,16 Z
M24,9 27,9 31,16 27,23 24,23 28,16 Z" fill="#fff"> </path>
</g>
<g id="svg_logo_flag">
<path d="M4,4 6,4 6,48 4,48 Z" fill="#000"> </path>
<path d="M2,2 38,2 46,16 38,30 2,30 10,16 Z"> </path>
<path d="M18,9 21,9 25,16 21,23 18,23 22,16 Z
M24,9 27,9 31,16 27,23 24,23 28,16 Z" fill="#fff"> </path>
<path d="M5,1 6,3 4,3 Z M4,29 6,29 6,48 4,48 Z" fill="#000"> </path>
</g>
<g id="svg_logo_flag_dark">
<path d="M4,4 6,4 6,48 4,48 Z" fill="#fff"> </path>
<path d="M2,2 38,2 46,16 38,30 2,30 10,16 Z"> </path>
<path d="M18,9 21,9 25,16 21,23 18,23 22,16 Z
M24,9 27,9 31,16 27,23 24,23 28,16 Z" fill="#fff"> </path>
<path d="M5,1 6,3 4,3 Z M4,29 6,29 6,48 4,48 Z" fill="#fff"> </path>
</g>
</defs>
</svg>
<script type="text/javascript" src="page.js"></script>
</body>
</html>