-
Notifications
You must be signed in to change notification settings - Fork 51
/
gerwig.html
1007 lines (902 loc) · 41.8 KB
/
gerwig.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
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<template id="media-theme-gerwig">
<style>
@keyframes pre-play-hide {
0% {
transform: scale(1);
opacity: 1;
}
30% {
transform: scale(0.7);
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
:host {
--_primary-color: var(--media-primary-color, #fff);
--_secondary-color: var(--media-secondary-color, transparent);
--_accent-color: var(--media-accent-color, #fa50b5);
--_text-color: var(--media-text-color, #000);
--media-icon-color: var(--_primary-color);
--media-control-background: var(--_secondary-color);
--media-control-hover-background: var(--_accent-color);
--media-time-buffered-color: rgba(255, 255, 255, 0.4);
--media-preview-time-text-shadow: none;
--media-control-height: 14px;
--media-control-padding: 6px;
--media-tooltip-container-margin: 6px;
--media-tooltip-distance: 18px;
color: var(--_primary-color);
display: inline-block;
width: 100%;
height: 100%;
}
:host([audio]) {
--_secondary-color: var(--media-secondary-color, black);
--media-preview-time-text-shadow: none;
}
:host([audio]) ::slotted([slot='media']) {
height: 0px;
}
:host([audio]) media-loading-indicator {
display: none;
}
:host([audio]) media-controller {
background: transparent;
}
:host([audio]) media-controller::part(vertical-layer) {
background: transparent;
}
:host([audio]) media-control-bar {
width: 100%;
background-color: var(--media-control-background);
}
/*
* 0.433s is the transition duration for VTT Regions.
* Borrowed here, so the captions don't move too fast.
*/
media-controller {
--media-webkit-text-track-transform: translateY(0) scale(0.98);
--media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
}
media-controller:is([mediapaused], :not([userinactive])) {
--media-webkit-text-track-transform: translateY(-50px) scale(0.98);
--media-webkit-text-track-transition: transform 0.15s ease;
}
/*
* CSS specific to iOS devices.
* See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
*/
@supports (-webkit-touch-callout: none) {
/* Disable subtitle adjusting for iOS Safari */
media-controller[mediaisfullscreen] {
--media-webkit-text-track-transform: unset;
--media-webkit-text-track-transition: unset;
}
}
media-time-range {
--media-box-padding-left: 6px;
--media-box-padding-right: 6px;
--media-range-bar-color: var(--_accent-color);
--media-time-range-buffered-color: var(--_primary-color);
--media-range-track-color: transparent;
--media-range-track-background: rgba(255, 255, 255, 0.4);
--media-range-thumb-background: radial-gradient(
circle,
#000 0%,
#000 25%,
var(--_accent-color) 25%,
var(--_accent-color)
);
--media-range-thumb-width: 12px;
--media-range-thumb-height: 12px;
--media-range-thumb-transform: scale(0);
--media-range-thumb-transition: transform 0.3s;
--media-range-thumb-opacity: 1;
--media-preview-background: var(--_primary-color);
--media-box-arrow-background: var(--_primary-color);
--media-preview-thumbnail-border: 5px solid var(--_primary-color);
--media-preview-border-radius: 5px;
--media-text-color: var(--_text-color);
--media-control-hover-background: transparent;
--media-preview-chapter-text-shadow: none;
color: var(--_accent-color);
padding: 0 6px;
}
:host([audio]) media-time-range {
--media-preview-time-padding: 1.5px 6px;
--media-preview-box-margin: 0 0 -5px;
}
media-time-range:hover {
--media-range-thumb-transform: scale(1);
}
media-preview-thumbnail {
border-bottom-width: 0;
}
[part~='menu'] {
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.1);
bottom: 50px;
padding: 2.5px 10px;
}
[part~='menu']::part(indicator) {
fill: var(--_accent-color);
}
[part~='menu']::part(menu-item) {
box-sizing: border-box;
display: flex;
align-items: center;
padding: 6px 10px;
min-height: 34px;
}
[part~='menu']::part(checked) {
font-weight: 700;
}
media-captions-menu,
media-rendition-menu,
media-audio-track-menu,
media-playback-rate-menu {
position: absolute; /* ensure they don't take up space in DOM on load */
--media-menu-background: var(--_primary-color);
--media-menu-item-checked-background: transparent;
--media-text-color: var(--_text-color);
--media-menu-item-hover-background: transparent;
--media-menu-item-hover-outline: var(--_accent-color) solid 1px;
}
/* The icon is a circle so make it 16px high instead of 14px for more balance. */
media-audio-track-menu-button {
--media-control-padding: 5px;
--media-control-height: 16px;
}
media-playback-rate-menu-button {
--media-control-padding: 6px 3px;
min-width: 4.4ch;
}
media-playback-rate-menu {
--media-menu-flex-direction: row;
--media-menu-item-checked-background: var(--_accent-color);
--media-menu-item-checked-indicator-display: none;
margin-right: 6px;
padding: 0;
--media-menu-gap: 0.25em;
}
media-playback-rate-menu[part~='menu']::part(menu-item) {
padding: 6px 6px 6px 8px;
}
media-playback-rate-menu[part~='menu']::part(checked) {
color: #fff;
}
:host(:not([audio])) media-time-range {
/* Adding px is required here for calc() */
--media-range-padding: 0px;
background: transparent;
z-index: 10;
height: 10px;
bottom: -3px;
width: 100%;
}
media-control-bar :is([role='button'], [role='switch'], button) {
line-height: 0;
}
media-control-bar :is([part*='button'], [part*='range'], [part*='display']) {
border-radius: 3px;
}
.spacer {
flex-grow: 1;
background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
}
media-control-bar[slot~='top-chrome'] {
min-height: 42px;
pointer-events: none;
}
media-control-bar {
--gradient-steps: hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%,
hsl(0 0% 0% / 0.104) 22.5%, hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%, hsl(0 0% 0% / 0.352) 41.2%,
hsl(0 0% 0% / 0.45) 47.1%, hsl(0 0% 0% / 0.55) 52.9%, hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%,
hsl(0 0% 0% / 0.825) 71%, hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%,
hsl(0 0% 0%) 100%;
}
:host([title]:not([audio])) media-control-bar[slot='top-chrome']::before {
content: '';
position: absolute;
width: 100%;
padding-bottom: min(100px, 25%);
background: linear-gradient(to top, var(--gradient-steps));
opacity: 0.8;
pointer-events: none;
}
:host(:not([audio])) media-control-bar[part~='bottom']::before {
content: '';
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding-bottom: min(100px, 25%);
background: linear-gradient(to bottom, var(--gradient-steps));
opacity: 0.8;
z-index: 1;
pointer-events: none;
}
media-control-bar[part~='bottom'] > * {
z-index: 20;
}
media-control-bar[part~='bottom'] {
padding: 6px 6px;
}
media-control-bar[slot~='top-chrome'] > * {
--media-control-background: transparent;
--media-control-hover-background: transparent;
position: relative;
}
media-controller::part(vertical-layer) {
transition: background-color 1s;
}
media-controller:is([mediapaused], :not([userinactive]))::part(vertical-layer) {
background-color: var(--controls-backdrop-color, var(--controls, transparent));
transition: background-color 0.25s;
}
.center-controls {
--media-button-icon-width: 100%;
--media-button-icon-height: auto;
--media-tooltip-display: none;
pointer-events: none;
width: 100%;
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
paint-order: stroke;
stroke: rgba(102, 102, 102, 1);
stroke-width: 0.3px;
text-shadow:
0 0 2px rgb(0 0 0 / 0.25),
0 0 6px rgb(0 0 0 / 0.25);
}
.center-controls media-play-button {
--media-control-background: transparent;
--media-control-hover-background: transparent;
--media-control-padding: 0;
width: 40px;
}
[breakpointsm] .center-controls media-play-button {
width: 90px;
height: 90px;
border-radius: 50%;
transition: background 0.4s;
padding: 24px;
--media-control-background: #000;
--media-control-hover-background: var(--_accent-color);
}
.center-controls media-seek-backward-button,
.center-controls media-seek-forward-button {
--media-control-background: transparent;
--media-control-hover-background: transparent;
padding: 0;
margin: 0 20px;
width: max(33px, min(8%, 40px));
}
[breakpointsm]:not([audio]) .center-controls.pre-playback {
display: grid;
align-items: initial;
justify-content: initial;
height: 100%;
overflow: hidden;
}
[breakpointsm]:not([audio]) .center-controls.pre-playback media-play-button {
place-self: var(--_pre-playback-place, center);
grid-area: 1 / 1;
margin: 16px;
}
/* Show and hide controls or pre-playback state */
[breakpointsm]:is([mediahasplayed], :not([mediapaused])):not([audio])
.center-controls.pre-playback
media-play-button {
/* Using `forwards` would lead to a laggy UI after the animation got in the end state */
animation: 0.3s linear pre-play-hide;
opacity: 0;
pointer-events: none;
}
.autoplay-unmute {
--media-control-hover-background: transparent;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
}
.autoplay-unmute-btn {
--media-control-height: 16px;
border-radius: 8px;
background: #000;
color: var(--_primary-color);
display: flex;
align-items: center;
padding: 8px 16px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
}
.autoplay-unmute-btn:hover {
background: var(--_accent-color);
}
[breakpointsm] .autoplay-unmute-btn {
--media-control-height: 30px;
padding: 14px 24px;
font-size: 26px;
}
.autoplay-unmute-btn svg {
margin: 0 6px 0 0;
}
[breakpointsm] .autoplay-unmute-btn svg {
margin: 0 10px 0 0;
}
media-controller:not([audio]):not([mediahasplayed]) *:is(media-control-bar, media-time-range) {
display: none;
}
media-loading-indicator {
--media-loading-icon-width: 100%;
--media-button-icon-height: auto;
display: var(--media-control-display, var(--media-loading-indicator-display, flex));
pointer-events: none;
position: absolute;
width: min(15%, 150px);
flex-flow: row;
align-items: center;
justify-content: center;
}
/* Intentionally don't target the div for transition but the children
of the div. Prevents messing with media-chrome's autohide feature. */
media-loading-indicator + div * {
transition: opacity 0.15s;
opacity: 1;
}
media-loading-indicator[medialoading]:not([mediapaused]) ~ div > * {
opacity: 0;
transition-delay: 400ms;
}
media-volume-range {
width: min(100%, 100px);
--media-range-padding-left: 10px;
--media-range-padding-right: 10px;
--media-range-thumb-width: 12px;
--media-range-thumb-height: 12px;
--media-range-thumb-background: radial-gradient(
circle,
#000 0%,
#000 25%,
var(--_primary-color) 25%,
var(--_primary-color)
);
--media-control-hover-background: none;
}
media-time-display {
white-space: nowrap;
}
/* Generic style for explicitly disabled controls */
media-control-bar[part~='bottom'] [disabled],
media-control-bar[part~='bottom'] [aria-disabled='true'] {
opacity: 60%;
cursor: not-allowed;
}
media-text-display {
--media-font-size: 16px;
--media-control-padding: 14px;
font-weight: 500;
}
media-play-button.animated *:is(g, path) {
transition: all 0.3s;
}
media-play-button.animated[mediapaused] .pause-icon-pt1 {
opacity: 0;
}
media-play-button.animated[mediapaused] .pause-icon-pt2 {
transform-origin: center center;
transform: scaleY(0);
}
media-play-button.animated[mediapaused] .play-icon {
clip-path: inset(0 0 0 0);
}
media-play-button.animated:not([mediapaused]) .play-icon {
clip-path: inset(0 0 0 100%);
}
media-seek-forward-button,
media-seek-backward-button {
--media-font-weight: 400;
}
.mute-icon {
display: inline-block;
}
.mute-icon :is(path, g) {
transition: opacity 0.5s;
}
.muted {
opacity: 0;
}
media-mute-button[mediavolumelevel='low'] :is(.volume-medium, .volume-high),
media-mute-button[mediavolumelevel='medium'] :is(.volume-high) {
opacity: 0;
}
media-mute-button[mediavolumelevel='off'] .unmuted {
opacity: 0;
}
media-mute-button[mediavolumelevel='off'] .muted {
opacity: 1;
}
/**
* Our defaults for these buttons are to hide them at small sizes
* users can override this with CSS
*/
media-controller:not([breakpointsm]):not([audio]) {
--bottom-play-button: none;
--bottom-seek-backward-button: none;
--bottom-seek-forward-button: none;
--bottom-time-display: none;
--bottom-playback-rate-menu-button: none;
--bottom-pip-button: none;
}
</style>
<template partial="TitleDisplay">
<template if="title">
<media-text-display part="top title display" class="title-display">{{title}}</media-text-display>
</template>
</template>
<template partial="PlayButton">
<media-play-button
part="{{section ?? 'bottom'}} play button"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
class="animated"
>
<svg aria-hidden="true" viewBox="0 0 18 14" slot="icon">
<g class="play-icon">
<path
d="M15.5987 6.2911L3.45577 0.110898C2.83667 -0.204202 2.06287 0.189698 2.06287 0.819798V13.1802C2.06287 13.8103 2.83667 14.2042 3.45577 13.8891L15.5987 7.7089C16.2178 7.3938 16.2178 6.6061 15.5987 6.2911Z"
/>
</g>
<g class="pause-icon">
<path
class="pause-icon-pt1"
d="M5.90709 0H2.96889C2.46857 0 2.06299 0.405585 2.06299 0.9059V13.0941C2.06299 13.5944 2.46857 14 2.96889 14H5.90709C6.4074 14 6.81299 13.5944 6.81299 13.0941V0.9059C6.81299 0.405585 6.4074 0 5.90709 0Z"
/>
<path
class="pause-icon-pt2"
d="M15.1571 0H12.2189C11.7186 0 11.313 0.405585 11.313 0.9059V13.0941C11.313 13.5944 11.7186 14 12.2189 14H15.1571C15.6574 14 16.063 13.5944 16.063 13.0941V0.9059C16.063 0.405585 15.6574 0 15.1571 0Z"
/>
</g>
</svg>
</media-play-button>
</template>
<template partial="PrePlayButton">
<media-play-button
part="{{section ?? 'center'}} play button pre-play"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<svg aria-hidden="true" viewBox="0 0 18 14" slot="icon" style="transform: translate(3px, 0)">
<path
d="M15.5987 6.2911L3.45577 0.110898C2.83667 -0.204202 2.06287 0.189698 2.06287 0.819798V13.1802C2.06287 13.8103 2.83667 14.2042 3.45577 13.8891L15.5987 7.7089C16.2178 7.3938 16.2178 6.6061 15.5987 6.2911Z"
/>
</svg>
</media-play-button>
</template>
<template partial="SeekBackwardButton">
<media-seek-backward-button
seekoffset="{{backwardseekoffset}}"
part="{{section ?? 'bottom'}} seek-backward button"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<svg viewBox="0 0 22 14" aria-hidden="true" slot="icon">
<path
d="M3.65 2.07888L0.0864 6.7279C-0.0288 6.87812 -0.0288 7.12188 0.0864 7.2721L3.65 11.9211C3.7792 12.0896 4 11.9703 4 11.7321V2.26787C4 2.02968 3.7792 1.9104 3.65 2.07888Z"
/>
<text transform="translate(6 12)" style="font-size: 14px; font-family: 'ArialMT', 'Arial'">
{{backwardseekoffset}}
</text>
</svg>
</media-seek-backward-button>
</template>
<template partial="SeekForwardButton">
<media-seek-forward-button
seekoffset="{{forwardseekoffset}}"
part="{{section ?? 'bottom'}} seek-forward button"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<svg viewBox="0 0 22 14" aria-hidden="true" slot="icon">
<g>
<text transform="translate(-1 12)" style="font-size: 14px; font-family: 'ArialMT', 'Arial'">
{{forwardseekoffset}}
</text>
<path
d="M18.35 11.9211L21.9136 7.2721C22.0288 7.12188 22.0288 6.87812 21.9136 6.7279L18.35 2.07888C18.2208 1.91041 18 2.02968 18 2.26787V11.7321C18 11.9703 18.2208 12.0896 18.35 11.9211Z"
/>
</g>
</svg>
</media-seek-forward-button>
</template>
<template partial="MuteButton">
<media-mute-button part="bottom mute button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg viewBox="0 0 18 14" slot="icon" class="mute-icon" aria-hidden="true">
<g class="unmuted">
<path
d="M6.76786 1.21233L3.98606 3.98924H1.19937C0.593146 3.98924 0.101743 4.51375 0.101743 5.1607V6.96412L0 6.99998L0.101743 7.03583V8.83926C0.101743 9.48633 0.593146 10.0108 1.19937 10.0108H3.98606L6.76773 12.7877C7.23561 13.2547 8 12.9007 8 12.2171V1.78301C8 1.09925 7.23574 0.745258 6.76786 1.21233Z"
/>
<path
class="volume-low"
d="M10 3.54781C10.7452 4.55141 11.1393 5.74511 11.1393 6.99991C11.1393 8.25471 10.7453 9.44791 10 10.4515L10.7988 11.0496C11.6734 9.87201 12.1356 8.47161 12.1356 6.99991C12.1356 5.52821 11.6735 4.12731 10.7988 2.94971L10 3.54781Z"
/>
<path
class="volume-medium"
d="M12.3778 2.40086C13.2709 3.76756 13.7428 5.35806 13.7428 7.00026C13.7428 8.64246 13.2709 10.233 12.3778 11.5992L13.2106 12.1484C14.2107 10.6185 14.739 8.83796 14.739 7.00016C14.739 5.16236 14.2107 3.38236 13.2106 1.85156L12.3778 2.40086Z"
/>
<path
class="volume-high"
d="M15.5981 0.75L14.7478 1.2719C15.7937 2.9919 16.3468 4.9723 16.3468 7C16.3468 9.0277 15.7937 11.0082 14.7478 12.7281L15.5981 13.25C16.7398 11.3722 17.343 9.211 17.343 7C17.343 4.789 16.7398 2.6268 15.5981 0.75Z"
/>
</g>
<g class="muted">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.39976 4.98924H1.19937C1.19429 4.98924 1.17777 4.98961 1.15296 5.01609C1.1271 5.04369 1.10174 5.09245 1.10174 5.1607V8.83926C1.10174 8.90761 1.12714 8.95641 1.15299 8.984C1.17779 9.01047 1.1943 9.01084 1.19937 9.01084H4.39977L7 11.6066V2.39357L4.39976 4.98924ZM7.47434 1.92006C7.4743 1.9201 7.47439 1.92002 7.47434 1.92006V1.92006ZM6.76773 12.7877L3.98606 10.0108H1.19937C0.593146 10.0108 0.101743 9.48633 0.101743 8.83926V7.03583L0 6.99998L0.101743 6.96412V5.1607C0.101743 4.51375 0.593146 3.98924 1.19937 3.98924H3.98606L6.76786 1.21233C7.23574 0.745258 8 1.09925 8 1.78301V12.2171C8 12.9007 7.23561 13.2547 6.76773 12.7877Z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.2677 9.30323C15.463 9.49849 15.7796 9.49849 15.9749 9.30323C16.1701 9.10796 16.1701 8.79138 15.9749 8.59612L14.2071 6.82841L15.9749 5.06066C16.1702 4.8654 16.1702 4.54882 15.9749 4.35355C15.7796 4.15829 15.4631 4.15829 15.2678 4.35355L13.5 6.1213L11.7322 4.35348C11.537 4.15822 11.2204 4.15822 11.0251 4.35348C10.8298 4.54874 10.8298 4.86532 11.0251 5.06058L12.7929 6.82841L11.0251 8.59619C10.8299 8.79146 10.8299 9.10804 11.0251 9.3033C11.2204 9.49856 11.537 9.49856 11.7323 9.3033L13.5 7.53552L15.2677 9.30323Z"
/>
</g>
</svg>
</media-mute-button>
</template>
<template partial="PipButton">
<media-pip-button part="bottom pip button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg viewBox="0 0 18 14" aria-hidden="true" slot="icon">
<path
d="M15.9891 0H2.011C0.9004 0 0 0.9003 0 2.0109V11.989C0 13.0996 0.9004 14 2.011 14H15.9891C17.0997 14 18 13.0997 18 11.9891V2.0109C18 0.9003 17.0997 0 15.9891 0ZM17 11.9891C17 12.5465 16.5465 13 15.9891 13H2.011C1.4536 13 1.0001 12.5465 1.0001 11.9891V2.0109C1.0001 1.4535 1.4536 0.9999 2.011 0.9999H15.9891C16.5465 0.9999 17 1.4535 17 2.0109V11.9891Z"
/>
<path
d="M15.356 5.67822H8.19523C8.03253 5.67822 7.90063 5.81012 7.90063 5.97282V11.3836C7.90063 11.5463 8.03253 11.6782 8.19523 11.6782H15.356C15.5187 11.6782 15.6506 11.5463 15.6506 11.3836V5.97282C15.6506 5.81012 15.5187 5.67822 15.356 5.67822Z"
/>
</svg>
</media-pip-button>
</template>
<template partial="CaptionsMenu">
<media-captions-menu-button part="bottom captions button">
<svg aria-hidden="true" viewBox="0 0 18 14" slot="on">
<path
d="M15.989 0H2.011C0.9004 0 0 0.9003 0 2.0109V11.9891C0 13.0997 0.9004 14 2.011 14H15.989C17.0997 14 18 13.0997 18 11.9891V2.0109C18 0.9003 17.0997 0 15.989 0ZM4.2292 8.7639C4.5954 9.1902 5.0935 9.4031 5.7233 9.4031C6.1852 9.4031 6.5544 9.301 6.8302 9.0969C7.1061 8.8933 7.2863 8.614 7.3702 8.26H8.4322C8.3062 8.884 8.0093 9.3733 7.5411 9.7273C7.0733 10.0813 6.4703 10.2581 5.732 10.2581C5.108 10.2581 4.5699 10.1219 4.1168 9.8489C3.6637 9.5759 3.3141 9.1946 3.0685 8.7058C2.8224 8.2165 2.6994 7.6511 2.6994 7.009C2.6994 6.3611 2.8224 5.7927 3.0685 5.3034C3.3141 4.8146 3.6637 4.4323 4.1168 4.1559C4.5699 3.88 5.108 3.7418 5.732 3.7418C6.4703 3.7418 7.0733 3.922 7.5411 4.2818C8.0094 4.6422 8.3062 5.1461 8.4322 5.794H7.3702C7.2862 5.4283 7.106 5.1368 6.8302 4.921C6.5544 4.7052 6.1852 4.5968 5.7233 4.5968C5.0934 4.5968 4.5954 4.8116 4.2292 5.2404C3.8635 5.6696 3.6804 6.259 3.6804 7.009C3.6804 7.7531 3.8635 8.3381 4.2292 8.7639ZM11.0974 8.7639C11.4636 9.1902 11.9617 9.4031 12.5915 9.4031C13.0534 9.4031 13.4226 9.301 13.6984 9.0969C13.9743 8.8933 14.1545 8.614 14.2384 8.26H15.3004C15.1744 8.884 14.8775 9.3733 14.4093 9.7273C13.9415 10.0813 13.3385 10.2581 12.6002 10.2581C11.9762 10.2581 11.4381 10.1219 10.985 9.8489C10.5319 9.5759 10.1823 9.1946 9.9367 8.7058C9.6906 8.2165 9.5676 7.6511 9.5676 7.009C9.5676 6.3611 9.6906 5.7927 9.9367 5.3034C10.1823 4.8146 10.5319 4.4323 10.985 4.1559C11.4381 3.88 11.9762 3.7418 12.6002 3.7418C13.3385 3.7418 13.9415 3.922 14.4093 4.2818C14.8776 4.6422 15.1744 5.1461 15.3004 5.794H14.2384C14.1544 5.4283 13.9742 5.1368 13.6984 4.921C13.4226 4.7052 13.0534 4.5968 12.5915 4.5968C11.9616 4.5968 11.4636 4.8116 11.0974 5.2404C10.7317 5.6696 10.5486 6.259 10.5486 7.009C10.5486 7.7531 10.7317 8.3381 11.0974 8.7639Z"
/>
</svg>
<svg aria-hidden="true" viewBox="0 0 18 14" slot="off">
<path
d="M5.73219 10.258C5.10819 10.258 4.57009 10.1218 4.11699 9.8488C3.66389 9.5758 3.31429 9.1945 3.06869 8.7057C2.82259 8.2164 2.69958 7.651 2.69958 7.0089C2.69958 6.361 2.82259 5.7926 3.06869 5.3033C3.31429 4.8145 3.66389 4.4322 4.11699 4.1558C4.57009 3.8799 5.10819 3.7417 5.73219 3.7417C6.47049 3.7417 7.07348 3.9219 7.54128 4.2817C8.00958 4.6421 8.30638 5.146 8.43238 5.7939H7.37039C7.28639 5.4282 7.10618 5.1367 6.83039 4.9209C6.55459 4.7051 6.18538 4.5967 5.72348 4.5967C5.09358 4.5967 4.59559 4.8115 4.22939 5.2403C3.86369 5.6695 3.68058 6.2589 3.68058 7.0089C3.68058 7.753 3.86369 8.338 4.22939 8.7638C4.59559 9.1901 5.09368 9.403 5.72348 9.403C6.18538 9.403 6.55459 9.3009 6.83039 9.0968C7.10629 8.8932 7.28649 8.6139 7.37039 8.2599H8.43238C8.30638 8.8839 8.00948 9.3732 7.54128 9.7272C7.07348 10.0812 6.47049 10.258 5.73219 10.258Z"
/>
<path
d="M12.6003 10.258C11.9763 10.258 11.4382 10.1218 10.9851 9.8488C10.532 9.5758 10.1824 9.1945 9.93685 8.7057C9.69075 8.2164 9.56775 7.651 9.56775 7.0089C9.56775 6.361 9.69075 5.7926 9.93685 5.3033C10.1824 4.8145 10.532 4.4322 10.9851 4.1558C11.4382 3.8799 11.9763 3.7417 12.6003 3.7417C13.3386 3.7417 13.9416 3.9219 14.4094 4.2817C14.8777 4.6421 15.1745 5.146 15.3005 5.7939H14.2385C14.1545 5.4282 13.9743 5.1367 13.6985 4.9209C13.4227 4.7051 13.0535 4.5967 12.5916 4.5967C11.9617 4.5967 11.4637 4.8115 11.0975 5.2403C10.7318 5.6695 10.5487 6.2589 10.5487 7.0089C10.5487 7.753 10.7318 8.338 11.0975 8.7638C11.4637 9.1901 11.9618 9.403 12.5916 9.403C13.0535 9.403 13.4227 9.3009 13.6985 9.0968C13.9744 8.8932 14.1546 8.6139 14.2385 8.2599H15.3005C15.1745 8.8839 14.8776 9.3732 14.4094 9.7272C13.9416 10.0812 13.3386 10.258 12.6003 10.258Z"
/>
<path
d="M15.9891 1C16.5465 1 17 1.4535 17 2.011V11.9891C17 12.5465 16.5465 13 15.9891 13H2.0109C1.4535 13 1 12.5465 1 11.9891V2.0109C1 1.4535 1.4535 0.9999 2.0109 0.9999L15.9891 1ZM15.9891 0H2.0109C0.9003 0 0 0.9003 0 2.0109V11.9891C0 13.0997 0.9003 14 2.0109 14H15.9891C17.0997 14 18 13.0997 18 11.9891V2.0109C18 0.9003 17.0997 0 15.9891 0Z"
/>
</svg>
</media-captions-menu-button>
<media-captions-menu
hidden
anchor="auto"
part="bottom captions menu"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
exportparts="menu-item"
>
<div slot="checked-indicator">
<style>
.indicator {
position: relative;
top: 1px;
width: 0.9em;
height: auto;
fill: var(--_accent-color);
margin-right: 5px;
}
[aria-checked='false'] .indicator {
display: none;
}
</style>
<svg viewBox="0 0 14 18" class="indicator">
<path
d="M12.252 3.48c-.115.033-.301.161-.425.291-.059.063-1.407 1.815-2.995 3.894s-2.897 3.79-2.908 3.802c-.013.014-.661-.616-1.672-1.624-.908-.905-1.702-1.681-1.765-1.723-.401-.27-.783-.211-1.176.183a1.285 1.285 0 0 0-.261.342.582.582 0 0 0-.082.35c0 .165.01.205.08.35.075.153.213.296 2.182 2.271 1.156 1.159 2.17 2.159 2.253 2.222.189.143.338.196.539.194.203-.003.412-.104.618-.299.205-.193 6.7-8.693 6.804-8.903a.716.716 0 0 0 .085-.345c.01-.179.005-.203-.062-.339-.124-.252-.45-.531-.746-.639a.784.784 0 0 0-.469-.027"
fill-rule="evenodd"
/>
</svg></div
></media-captions-menu>
</template>
<template partial="AirplayButton">
<media-airplay-button part="bottom airplay button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg viewBox="0 0 18 14" aria-hidden="true" slot="icon">
<path
d="M16.1383 0H1.8618C0.8335 0 0 0.8335 0 1.8617V10.1382C0 11.1664 0.8335 12 1.8618 12H3.076C3.1204 11.9433 3.1503 11.8785 3.2012 11.826L4.004 11H1.8618C1.3866 11 1 10.6134 1 10.1382V1.8617C1 1.3865 1.3866 0.9999 1.8618 0.9999H16.1383C16.6135 0.9999 17.0001 1.3865 17.0001 1.8617V10.1382C17.0001 10.6134 16.6135 11 16.1383 11H13.9961L14.7989 11.826C14.8499 11.8785 14.8798 11.9432 14.9241 12H16.1383C17.1665 12 18.0001 11.1664 18.0001 10.1382V1.8617C18 0.8335 17.1665 0 16.1383 0Z"
/>
<path
d="M9.55061 8.21903C9.39981 8.06383 9.20001 7.98633 9.00011 7.98633C8.80021 7.98633 8.60031 8.06383 8.44951 8.21903L4.09771 12.697C3.62471 13.1838 3.96961 13.9998 4.64831 13.9998H13.3518C14.0304 13.9998 14.3754 13.1838 13.9023 12.697L9.55061 8.21903Z"
/>
</svg>
</media-airplay-button>
</template>
<template partial="FullscreenButton">
<media-fullscreen-button part="bottom fullscreen button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg viewBox="0 0 18 14" aria-hidden="true" slot="enter">
<path
d="M1.00745 4.39539L1.01445 1.98789C1.01605 1.43049 1.47085 0.978289 2.02835 0.979989L6.39375 0.992589L6.39665 -0.007411L2.03125 -0.020011C0.920646 -0.023211 0.0176463 0.874489 0.0144463 1.98509L0.00744629 4.39539H1.00745Z"
/>
<path
d="M17.0144 2.03431L17.0076 4.39541H18.0076L18.0144 2.03721C18.0176 0.926712 17.1199 0.0237125 16.0093 0.0205125L11.6439 0.0078125L11.641 1.00781L16.0064 1.02041C16.5638 1.02201 17.016 1.47681 17.0144 2.03431Z"
/>
<path
d="M16.9925 9.60498L16.9855 12.0124C16.9839 12.5698 16.5291 13.022 15.9717 13.0204L11.6063 13.0078L11.6034 14.0078L15.9688 14.0204C17.0794 14.0236 17.9823 13.1259 17.9855 12.0153L17.9925 9.60498H16.9925Z"
/>
<path
d="M0.985626 11.9661L0.992426 9.60498H-0.0074737L-0.0142737 11.9632C-0.0174737 13.0738 0.880226 13.9767 1.99083 13.98L6.35623 13.9926L6.35913 12.9926L1.99373 12.98C1.43633 12.9784 0.983926 12.5236 0.985626 11.9661Z"
/>
</svg>
<svg viewBox="0 0 18 14" aria-hidden="true" slot="exit">
<path
d="M5.39655 -0.0200195L5.38955 2.38748C5.38795 2.94488 4.93315 3.39708 4.37565 3.39538L0.0103463 3.38278L0.00744629 4.38278L4.37285 4.39538C5.48345 4.39858 6.38635 3.50088 6.38965 2.39028L6.39665 -0.0200195H5.39655Z"
/>
<path
d="M12.6411 2.36891L12.6479 0.0078125H11.6479L11.6411 2.36601C11.6379 3.47651 12.5356 4.37951 13.6462 4.38271L18.0116 4.39531L18.0145 3.39531L13.6491 3.38271C13.0917 3.38111 12.6395 2.92641 12.6411 2.36891Z"
/>
<path
d="M12.6034 14.0204L12.6104 11.613C12.612 11.0556 13.0668 10.6034 13.6242 10.605L17.9896 10.6176L17.9925 9.61759L13.6271 9.60499C12.5165 9.60179 11.6136 10.4995 11.6104 11.6101L11.6034 14.0204H12.6034Z"
/>
<path
d="M5.359 11.6315L5.3522 13.9926H6.3522L6.359 11.6344C6.3622 10.5238 5.4645 9.62088 4.3539 9.61758L-0.0115043 9.60498L-0.0144043 10.605L4.351 10.6176C4.9084 10.6192 5.3607 11.074 5.359 11.6315Z"
/>
</svg>
</media-fullscreen-button>
</template>
<template partial="CastButton">
<media-cast-button part="bottom cast button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg viewBox="0 0 18 14" aria-hidden="true" slot="enter">
<path
d="M16.0072 0H2.0291C0.9185 0 0.0181 0.9003 0.0181 2.011V5.5009C0.357 5.5016 0.6895 5.5275 1.0181 5.5669V2.011C1.0181 1.4536 1.4716 1 2.029 1H16.0072C16.5646 1 17.0181 1.4536 17.0181 2.011V11.9891C17.0181 12.5465 16.5646 13 16.0072 13H8.4358C8.4746 13.3286 8.4999 13.6611 8.4999 13.9999H16.0071C17.1177 13.9999 18.018 13.0996 18.018 11.989V2.011C18.0181 0.9003 17.1178 0 16.0072 0ZM0 6.4999V7.4999C3.584 7.4999 6.5 10.4159 6.5 13.9999H7.5C7.5 9.8642 4.1357 6.4999 0 6.4999ZM0 8.7499V9.7499C2.3433 9.7499 4.25 11.6566 4.25 13.9999H5.25C5.25 11.1049 2.895 8.7499 0 8.7499ZM0.0181 11V14H3.0181C3.0181 12.3431 1.675 11 0.0181 11Z"
/>
</svg>
<svg viewBox="0 0 18 14" aria-hidden="true" slot="exit">
<path
d="M15.9891 0H2.01103C0.900434 0 3.35947e-05 0.9003 3.35947e-05 2.011V5.5009C0.338934 5.5016 0.671434 5.5275 1.00003 5.5669V2.011C1.00003 1.4536 1.45353 1 2.01093 1H15.9891C16.5465 1 17 1.4536 17 2.011V11.9891C17 12.5465 16.5465 13 15.9891 13H8.41773C8.45653 13.3286 8.48183 13.6611 8.48183 13.9999H15.989C17.0996 13.9999 17.9999 13.0996 17.9999 11.989V2.011C18 0.9003 17.0997 0 15.9891 0ZM-0.0180664 6.4999V7.4999C3.56593 7.4999 6.48193 10.4159 6.48193 13.9999H7.48193C7.48193 9.8642 4.11763 6.4999 -0.0180664 6.4999ZM-0.0180664 8.7499V9.7499C2.32523 9.7499 4.23193 11.6566 4.23193 13.9999H5.23193C5.23193 11.1049 2.87693 8.7499 -0.0180664 8.7499ZM3.35947e-05 11V14H3.00003C3.00003 12.3431 1.65693 11 3.35947e-05 11Z"
/>
<path d="M2.15002 5.634C5.18352 6.4207 7.57252 8.8151 8.35282 11.8499H15.8501V2.1499H2.15002V5.634Z" />
</svg>
</media-cast-button>
</template>
<template partial="LiveButton">
<media-live-button part="{{section ?? 'top'}} live button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<span slot="text">Live</span>
</media-live-button>
</template>
<template partial="PlaybackRateMenu">
<media-playback-rate-menu-button part="bottom playback-rate button"></media-playback-rate-menu-button>
<media-playback-rate-menu
hidden
anchor="auto"
rates="{{playbackrates}}"
exportparts="menu-item"
part="bottom playback-rate menu"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
></media-playback-rate-menu>
</template>
<template partial="VolumeRange">
<media-volume-range
part="bottom volume range"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
></media-volume-range>
</template>
<template partial="TimeDisplay">
<media-time-display
remaining="{{defaultshowremainingtime}}"
showduration="{{!hideduration}}"
part="bottom time display"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
></media-time-display>
</template>
<template partial="TimeRange">
<media-time-range part="bottom time range" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<media-preview-thumbnail slot="preview"></media-preview-thumbnail>
<media-preview-chapter-display slot="preview"></media-preview-chapter-display>
<media-preview-time-display slot="preview"></media-preview-time-display>
<div slot="preview" part="arrow"></div>
</media-time-range>
</template>
<template partial="AudioTrackMenu">
<media-audio-track-menu-button part="bottom audio-track button">
<svg aria-hidden="true" slot="icon" viewBox="0 0 18 16">
<path d="M9 15A7 7 0 1 1 9 1a7 7 0 0 1 0 14Zm0 1A8 8 0 1 0 9 0a8 8 0 0 0 0 16Z" />
<path
d="M5.2 6.3a.5.5 0 0 1 .5.5v2.4a.5.5 0 1 1-1 0V6.8a.5.5 0 0 1 .5-.5Zm2.4-2.4a.5.5 0 0 1 .5.5v7.2a.5.5 0 0 1-1 0V4.4a.5.5 0 0 1 .5-.5ZM10 5.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.4-.8a.5.5 0 0 1 .5.5v5.6a.5.5 0 0 1-1 0V5.2a.5.5 0 0 1 .5-.5Z"
/>
</svg>
</media-audio-track-menu-button>
<media-audio-track-menu
hidden
anchor="auto"
part="bottom audio-track menu"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
exportparts="menu-item"
>
<div slot="checked-indicator">
<style>
.indicator {
position: relative;
top: 1px;
width: 0.9em;
height: auto;
fill: var(--_accent-color);
margin-right: 5px;
}
[aria-checked='false'] .indicator {
display: none;
}
</style>
<svg viewBox="0 0 14 18" class="indicator">
<path
d="M12.252 3.48c-.115.033-.301.161-.425.291-.059.063-1.407 1.815-2.995 3.894s-2.897 3.79-2.908 3.802c-.013.014-.661-.616-1.672-1.624-.908-.905-1.702-1.681-1.765-1.723-.401-.27-.783-.211-1.176.183a1.285 1.285 0 0 0-.261.342.582.582 0 0 0-.082.35c0 .165.01.205.08.35.075.153.213.296 2.182 2.271 1.156 1.159 2.17 2.159 2.253 2.222.189.143.338.196.539.194.203-.003.412-.104.618-.299.205-.193 6.7-8.693 6.804-8.903a.716.716 0 0 0 .085-.345c.01-.179.005-.203-.062-.339-.124-.252-.45-.531-.746-.639a.784.784 0 0 0-.469-.027"
fill-rule="evenodd"
/>
</svg>
</div>
</media-audio-track-menu>
</template>
<template partial="RenditionMenu">
<media-rendition-menu-button part="bottom rendition button">
<svg aria-hidden="true" slot="icon" viewBox="0 0 18 14">
<path
d="M2.25 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM9 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
/>
</svg>
</media-rendition-menu-button>
<media-rendition-menu
hidden
anchor="auto"
part="bottom rendition menu"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<div slot="checked-indicator">
<style>
.indicator {
position: relative;
top: 1px;
width: 0.9em;
height: auto;
fill: var(--_accent-color);
margin-right: 5px;
}
[aria-checked='false'] .indicator {
display: none;
}
</style>
<svg viewBox="0 0 14 18" class="indicator">
<path
d="M12.252 3.48c-.115.033-.301.161-.425.291-.059.063-1.407 1.815-2.995 3.894s-2.897 3.79-2.908 3.802c-.013.014-.661-.616-1.672-1.624-.908-.905-1.702-1.681-1.765-1.723-.401-.27-.783-.211-1.176.183a1.285 1.285 0 0 0-.261.342.582.582 0 0 0-.082.35c0 .165.01.205.08.35.075.153.213.296 2.182 2.271 1.156 1.159 2.17 2.159 2.253 2.222.189.143.338.196.539.194.203-.003.412-.104.618-.299.205-.193 6.7-8.693 6.804-8.903a.716.716 0 0 0 .085-.345c.01-.179.005-.203-.062-.339-.124-.252-.45-.531-.746-.639a.784.784 0 0 0-.469-.027"
fill-rule="evenodd"
/>
</svg>
</div>
</media-rendition-menu>
</template>
<media-controller
part="controller"
defaultstreamtype="{{defaultstreamtype ?? 'on-demand'}}"
breakpoints="sm:470"
gesturesdisabled="{{disabled}}"
hotkeys="{{hotkeys}}"
nohotkeys="{{nohotkeys}}"
novolumepref="{{novolumepref}}"
audio="{{audio}}"
noautoseektolive="{{noautoseektolive}}"
defaultsubtitles="{{defaultsubtitles}}"
defaultduration="{{defaultduration ?? false}}"
keyboardforwardseekoffset="{{forwardseekoffset}}"
keyboardbackwardseekoffset="{{backwardseekoffset}}"
exportparts="layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer"
style="--_pre-playback-place:{{preplaybackplace ?? 'center'}}"
>
<slot name="media" slot="media"></slot>
<slot name="poster" slot="poster"></slot>
<media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
<media-error-dialog slot="dialog" noautohide></media-error-dialog>
<template if="!audio">
<!-- Pre-playback UI -->
<!-- same for both on-demand and live -->
<div slot="centered-chrome" class="center-controls pre-playback">
<template if="!breakpointsm">{{>PlayButton section="center"}}</template>
<template if="breakpointsm">{{>PrePlayButton section="center"}}</template>
</div>
<!-- Autoplay centered unmute button -->
<!--
todo: figure out how show this with available state variables
needs to show when:
- autoplay is enabled
- playback has been successful
- audio is muted
- in place / instead of the pre-plaback play button
- not to show again after user has interacted with this button
- OR user has interacted with the mute button in the control bar
-->
<!--
There should be a >MuteButton to the left of the "Unmute" text, but a templating bug
makes it appear even if commented out in the markup, add it back when code is un-commented
-->
<!-- <div slot="centered-chrome" class="autoplay-unmute">
<div role="button" class="autoplay-unmute-btn">Unmute</div>
</div> -->
<template if="streamtype == 'on-demand'">
<template if="breakpointsm">
<media-control-bar part="control-bar top" slot="top-chrome">{{>TitleDisplay}} </media-control-bar>
</template>
{{>TimeRange}}
<media-control-bar part="control-bar bottom">
{{>PlayButton}} {{>SeekBackwardButton}} {{>SeekForwardButton}} {{>TimeDisplay}} {{>MuteButton}}
{{>VolumeRange}}
<div class="spacer"></div>
{{>RenditionMenu}} {{>PlaybackRateMenu}} {{>AudioTrackMenu}} {{>CaptionsMenu}} {{>AirplayButton}}
{{>CastButton}} {{>PipButton}} {{>FullscreenButton}}
</media-control-bar>
</template>
<template if="streamtype == 'live'">
<media-control-bar part="control-bar top" slot="top-chrome">
{{>LiveButton}}
<template if="breakpointsm"> {{>TitleDisplay}} </template>
</media-control-bar>
<template if="targetlivewindow > 0">{{>TimeRange}}</template>
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
<template if="targetlivewindow > 0">{{>SeekBackwardButton}} {{>SeekForwardButton}}</template>
{{>MuteButton}} {{>VolumeRange}}
<div class="spacer"></div>
{{>RenditionMenu}} {{>AudioTrackMenu}} {{>CaptionsMenu}} {{>AirplayButton}} {{>CastButton}} {{>PipButton}}
{{>FullscreenButton}}
</media-control-bar>
</template>
</template>
<template if="audio">
<template if="streamtype == 'on-demand'">
<template if="title">
<media-control-bar part="control-bar top">{{>TitleDisplay}}</media-control-bar>
</template>
<media-control-bar part="control-bar bottom">
{{>PlayButton}}
<template if="breakpointsm"> {{>SeekBackwardButton}} {{>SeekForwardButton}} </template>
{{>MuteButton}}
<template if="breakpointsm">{{>VolumeRange}}</template>
{{>TimeDisplay}} {{>TimeRange}}
<template if="breakpointsm">{{>PlaybackRateMenu}}</template>
{{>AirplayButton}} {{>CastButton}}
</media-control-bar>
</template>
<template if="streamtype == 'live'">
<template if="title">
<media-control-bar part="control-bar top">{{>TitleDisplay}}</media-control-bar>
</template>
<media-control-bar part="control-bar bottom">
{{>PlayButton}} {{>LiveButton section="bottom"}} {{>MuteButton}}
<template if="breakpointsm">
{{>VolumeRange}}
<template if="targetlivewindow > 0"> {{>SeekBackwardButton}} {{>SeekForwardButton}} </template>
</template>
<template if="targetlivewindow > 0"> {{>TimeDisplay}} {{>TimeRange}} </template>
<template if="!targetlivewindow"><div class="spacer"></div></template>
{{>AirplayButton}} {{>CastButton}}