@mux/mux-player 0.1.0-beta.23 → 0.1.0-beta.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/README.md +38 -36
- package/coverage/lcov-report/index.html +31 -31
- package/coverage/lcov-report/src/dialog.ts.html +1 -1
- package/coverage/lcov-report/src/errors.ts.html +1 -1
- package/coverage/lcov-report/src/helpers.ts.html +30 -9
- package/coverage/lcov-report/src/html.ts.html +159 -9
- package/coverage/lcov-report/src/index.html +52 -52
- package/coverage/lcov-report/src/index.ts.html +156 -27
- package/coverage/lcov-report/src/logger.ts.html +1 -1
- package/coverage/lcov-report/src/media-chrome/dialog.ts.html +1 -1
- package/coverage/lcov-report/src/media-chrome/index.html +1 -1
- package/coverage/lcov-report/src/media-chrome/time-display.ts.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/airplay.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/captions-off.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/captions-on.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/cast-enter.svg.html +103 -0
- package/coverage/lcov-report/src/media-theme-mux/icons/cast-exit.svg.html +106 -0
- package/coverage/lcov-report/src/media-theme-mux/icons/fullscreen-enter.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/fullscreen-exit.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/index.html +33 -3
- package/coverage/lcov-report/src/media-theme-mux/icons/pause.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/pip-enter.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/pip-exit.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/play.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/seek-backward.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/seek-forward.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/volume-high.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/volume-low.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/volume-medium.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons/volume-off.svg.html +1 -1
- package/coverage/lcov-report/src/media-theme-mux/icons.ts.html +18 -6
- package/coverage/lcov-report/src/media-theme-mux/index.html +26 -26
- package/coverage/lcov-report/src/media-theme-mux/media-theme-mux.ts.html +342 -177
- package/coverage/lcov-report/src/media-theme-mux/styles.css.html +117 -18
- package/coverage/lcov-report/src/styles.css.html +1 -1
- package/coverage/lcov-report/src/template.ts.html +128 -65
- package/coverage/lcov-report/src/utils.ts.html +1 -1
- package/coverage/lcov-report/src/video-api.ts.html +91 -13
- package/coverage/lcov.info +1595 -1273
- package/dist/index.cjs.js +503 -343
- package/dist/index.mjs +296 -228
- package/dist/mux-player.js +556 -396
- package/dist/mux-player.mjs +556 -396
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/helpers.d.ts +1 -0
- package/dist/types/html.d.ts +5 -0
- package/dist/types/index.d.ts +5 -3
- package/dist/types/media-theme-mux/icons.d.ts +2 -0
- package/dist/types/media-theme-mux/media-theme-mux.d.ts +32 -12
- package/dist/types/template.d.ts +0 -1
- package/dist/types/video-api.d.ts +4 -0
- package/dist/types-ts3.4/helpers.d.ts +1 -0
- package/dist/types-ts3.4/html.d.ts +5 -0
- package/dist/types-ts3.4/index.d.ts +4 -3
- package/dist/types-ts3.4/media-theme-mux/icons.d.ts +2 -0
- package/dist/types-ts3.4/media-theme-mux/media-theme-mux.d.ts +32 -12
- package/dist/types-ts3.4/template.d.ts +0 -1
- package/dist/types-ts3.4/video-api.d.ts +2 -0
- package/package.json +5 -5
- package/src/helpers.ts +7 -0
- package/src/html.ts +50 -0
- package/src/index.ts +58 -15
- package/src/media-theme-mux/icons/cast-enter.svg +6 -0
- package/src/media-theme-mux/icons/cast-exit.svg +7 -0
- package/src/media-theme-mux/icons.ts +4 -0
- package/src/media-theme-mux/media-theme-mux.ts +179 -124
- package/src/media-theme-mux/styles.css +47 -14
- package/src/template.ts +78 -57
- package/src/types.d.ts +3 -0
- package/src/video-api.ts +27 -1
- package/test/player.test.js +34 -0
- package/test/template.test.js +6 -4
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
<div class='fl pad1y space-right2'>
|
|
26
26
|
<span class="strong">100% </span>
|
|
27
27
|
<span class="quiet">Statements</span>
|
|
28
|
-
<span class='fraction'>
|
|
28
|
+
<span class='fraction'>201/201</span>
|
|
29
29
|
</div>
|
|
30
30
|
|
|
31
31
|
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
<div class='fl pad1y space-right2'>
|
|
47
47
|
<span class="strong">100% </span>
|
|
48
48
|
<span class="quiet">Lines</span>
|
|
49
|
-
<span class='fraction'>
|
|
49
|
+
<span class='fraction'>201/201</span>
|
|
50
50
|
</div>
|
|
51
51
|
|
|
52
52
|
|
|
@@ -231,7 +231,73 @@
|
|
|
231
231
|
<a name='L166'></a><a href='#L166'>166</a>
|
|
232
232
|
<a name='L167'></a><a href='#L167'>167</a>
|
|
233
233
|
<a name='L168'></a><a href='#L168'>168</a>
|
|
234
|
-
<a name='L169'></a><a href='#L169'>169</a
|
|
234
|
+
<a name='L169'></a><a href='#L169'>169</a>
|
|
235
|
+
<a name='L170'></a><a href='#L170'>170</a>
|
|
236
|
+
<a name='L171'></a><a href='#L171'>171</a>
|
|
237
|
+
<a name='L172'></a><a href='#L172'>172</a>
|
|
238
|
+
<a name='L173'></a><a href='#L173'>173</a>
|
|
239
|
+
<a name='L174'></a><a href='#L174'>174</a>
|
|
240
|
+
<a name='L175'></a><a href='#L175'>175</a>
|
|
241
|
+
<a name='L176'></a><a href='#L176'>176</a>
|
|
242
|
+
<a name='L177'></a><a href='#L177'>177</a>
|
|
243
|
+
<a name='L178'></a><a href='#L178'>178</a>
|
|
244
|
+
<a name='L179'></a><a href='#L179'>179</a>
|
|
245
|
+
<a name='L180'></a><a href='#L180'>180</a>
|
|
246
|
+
<a name='L181'></a><a href='#L181'>181</a>
|
|
247
|
+
<a name='L182'></a><a href='#L182'>182</a>
|
|
248
|
+
<a name='L183'></a><a href='#L183'>183</a>
|
|
249
|
+
<a name='L184'></a><a href='#L184'>184</a>
|
|
250
|
+
<a name='L185'></a><a href='#L185'>185</a>
|
|
251
|
+
<a name='L186'></a><a href='#L186'>186</a>
|
|
252
|
+
<a name='L187'></a><a href='#L187'>187</a>
|
|
253
|
+
<a name='L188'></a><a href='#L188'>188</a>
|
|
254
|
+
<a name='L189'></a><a href='#L189'>189</a>
|
|
255
|
+
<a name='L190'></a><a href='#L190'>190</a>
|
|
256
|
+
<a name='L191'></a><a href='#L191'>191</a>
|
|
257
|
+
<a name='L192'></a><a href='#L192'>192</a>
|
|
258
|
+
<a name='L193'></a><a href='#L193'>193</a>
|
|
259
|
+
<a name='L194'></a><a href='#L194'>194</a>
|
|
260
|
+
<a name='L195'></a><a href='#L195'>195</a>
|
|
261
|
+
<a name='L196'></a><a href='#L196'>196</a>
|
|
262
|
+
<a name='L197'></a><a href='#L197'>197</a>
|
|
263
|
+
<a name='L198'></a><a href='#L198'>198</a>
|
|
264
|
+
<a name='L199'></a><a href='#L199'>199</a>
|
|
265
|
+
<a name='L200'></a><a href='#L200'>200</a>
|
|
266
|
+
<a name='L201'></a><a href='#L201'>201</a>
|
|
267
|
+
<a name='L202'></a><a href='#L202'>202</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">3x</span>
|
|
268
|
+
<span class="cline-any cline-yes">3x</span>
|
|
269
|
+
<span class="cline-any cline-yes">3x</span>
|
|
270
|
+
<span class="cline-any cline-yes">3x</span>
|
|
271
|
+
<span class="cline-any cline-yes">3x</span>
|
|
272
|
+
<span class="cline-any cline-yes">3x</span>
|
|
273
|
+
<span class="cline-any cline-yes">3x</span>
|
|
274
|
+
<span class="cline-any cline-yes">3x</span>
|
|
275
|
+
<span class="cline-any cline-yes">3x</span>
|
|
276
|
+
<span class="cline-any cline-yes">3x</span>
|
|
277
|
+
<span class="cline-any cline-yes">3x</span>
|
|
278
|
+
<span class="cline-any cline-yes">3x</span>
|
|
279
|
+
<span class="cline-any cline-yes">3x</span>
|
|
280
|
+
<span class="cline-any cline-yes">3x</span>
|
|
281
|
+
<span class="cline-any cline-yes">3x</span>
|
|
282
|
+
<span class="cline-any cline-yes">3x</span>
|
|
283
|
+
<span class="cline-any cline-yes">3x</span>
|
|
284
|
+
<span class="cline-any cline-yes">3x</span>
|
|
285
|
+
<span class="cline-any cline-yes">3x</span>
|
|
286
|
+
<span class="cline-any cline-yes">3x</span>
|
|
287
|
+
<span class="cline-any cline-yes">3x</span>
|
|
288
|
+
<span class="cline-any cline-yes">3x</span>
|
|
289
|
+
<span class="cline-any cline-yes">3x</span>
|
|
290
|
+
<span class="cline-any cline-yes">3x</span>
|
|
291
|
+
<span class="cline-any cline-yes">3x</span>
|
|
292
|
+
<span class="cline-any cline-yes">3x</span>
|
|
293
|
+
<span class="cline-any cline-yes">3x</span>
|
|
294
|
+
<span class="cline-any cline-yes">3x</span>
|
|
295
|
+
<span class="cline-any cline-yes">3x</span>
|
|
296
|
+
<span class="cline-any cline-yes">3x</span>
|
|
297
|
+
<span class="cline-any cline-yes">3x</span>
|
|
298
|
+
<span class="cline-any cline-yes">3x</span>
|
|
299
|
+
<span class="cline-any cline-yes">3x</span>
|
|
300
|
+
<span class="cline-any cline-yes">3x</span>
|
|
235
301
|
<span class="cline-any cline-yes">3x</span>
|
|
236
302
|
<span class="cline-any cline-yes">3x</span>
|
|
237
303
|
<span class="cline-any cline-yes">3x</span>
|
|
@@ -404,20 +470,44 @@
|
|
|
404
470
|
}
|
|
405
471
|
|
|
406
472
|
:host {
|
|
407
|
-
color: var(--primary-color);
|
|
408
|
-
|
|
409
|
-
--media-
|
|
410
|
-
--media-range-
|
|
473
|
+
--_primary-color: var(--primary-color, #fff);
|
|
474
|
+
|
|
475
|
+
--media-icon-color: var(--_primary-color);
|
|
476
|
+
--media-range-thumb-background: var(--_primary-color);
|
|
477
|
+
--media-range-bar-color: var(--_primary-color);
|
|
411
478
|
--media-control-background: var(--secondary-color);
|
|
412
479
|
--media-control-hover-background: var(--secondary-color);
|
|
413
|
-
--media-time-buffered-color: rgba(255, 255, 255, 0.
|
|
480
|
+
--media-time-buffered-color: rgba(255, 255, 255, 0.4);
|
|
414
481
|
--media-range-track-background: rgba(255, 255, 255, 0.5);
|
|
415
482
|
--media-range-track-border-radius: 3px;
|
|
483
|
+
--media-preview-thumbnail-border: 1px solid #fff;
|
|
484
|
+
--media-preview-thumbnail-border-radius: 2px;
|
|
485
|
+
--media-preview-time-margin: 5px 0 2px;
|
|
486
|
+
color: var(--_primary-color);
|
|
416
487
|
display: inline-block;
|
|
417
488
|
width: 100%;
|
|
418
489
|
height: 100%;
|
|
419
490
|
}
|
|
420
491
|
|
|
492
|
+
:host(.two-tone:not([audio])) {
|
|
493
|
+
--mux-time-range-padding: 0px; /* px is needed in calc() */
|
|
494
|
+
--media-preview-thumbnail-border: 0;
|
|
495
|
+
--media-preview-thumbnail-border-radius: 2px 2px 0 0;
|
|
496
|
+
--media-preview-time-border-radius: 0 0 2px 2px;
|
|
497
|
+
--media-preview-time-margin: 0 0 8px;
|
|
498
|
+
--media-preview-time-text-shadow: none;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
:host([audio]) {
|
|
502
|
+
--media-preview-time-border-radius: 3px;
|
|
503
|
+
--media-preview-time-margin: 0 0 5px;
|
|
504
|
+
--media-preview-time-text-shadow: none;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
:host(.two-tone:not([audio])) media-time-range {
|
|
508
|
+
--media-range-track-border-radius: 0;
|
|
509
|
+
}
|
|
510
|
+
|
|
421
511
|
:host([audio]) ::slotted([slot='media']) {
|
|
422
512
|
height: 0px;
|
|
423
513
|
}
|
|
@@ -455,13 +545,26 @@ media-controller {
|
|
|
455
545
|
height: 100%;
|
|
456
546
|
}
|
|
457
547
|
|
|
548
|
+
:host media-time-range {
|
|
549
|
+
color: var(--_primary-color);
|
|
550
|
+
}
|
|
551
|
+
|
|
458
552
|
:host(:not([audio])) media-time-range {
|
|
459
|
-
padding: var(--mux-time-range-padding,
|
|
460
|
-
|
|
553
|
+
--media-range-padding-left: var(--mux-time-range-padding, 10px);
|
|
554
|
+
--media-range-padding-right: var(--mux-time-range-padding, 10px);
|
|
461
555
|
width: 100%;
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
556
|
+
z-index: 10;
|
|
557
|
+
height: 10px;
|
|
558
|
+
bottom: -2px;
|
|
559
|
+
background: linear-gradient(
|
|
560
|
+
180deg,
|
|
561
|
+
transparent,
|
|
562
|
+
transparent 3px,
|
|
563
|
+
var(--media-control-background) 3px,
|
|
564
|
+
var(--media-control-background) 8px,
|
|
565
|
+
transparent 8px,
|
|
566
|
+
transparent
|
|
567
|
+
);
|
|
465
568
|
}
|
|
466
569
|
|
|
467
570
|
media-control-bar {
|
|
@@ -472,10 +575,6 @@ media-control-bar :is([role='button'], [role='switch'], button) {
|
|
|
472
575
|
height: 44px;
|
|
473
576
|
}
|
|
474
577
|
|
|
475
|
-
media-cast-button {
|
|
476
|
-
width: 40px;
|
|
477
|
-
}
|
|
478
|
-
|
|
479
578
|
.size-extra-small media-control-bar [role='button'],
|
|
480
579
|
.size-extra-small media-control-bar [role='switch'] {
|
|
481
580
|
height: auto;
|
|
@@ -574,7 +673,7 @@ media-time-display {
|
|
|
574
673
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
575
674
|
Code coverage generated by
|
|
576
675
|
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
577
|
-
at
|
|
676
|
+
at Wed Aug 03 2022 19:24:53 GMT+0000 (Coordinated Universal Time)
|
|
578
677
|
</div>
|
|
579
678
|
<script src="../../prettify.js"></script>
|
|
580
679
|
<script>
|
|
@@ -196,7 +196,7 @@ media-controller {
|
|
|
196
196
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
197
197
|
Code coverage generated by
|
|
198
198
|
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
199
|
-
at
|
|
199
|
+
at Wed Aug 03 2022 19:24:53 GMT+0000 (Coordinated Universal Time)
|
|
200
200
|
</div>
|
|
201
201
|
<script src="../prettify.js"></script>
|
|
202
202
|
<script>
|
|
@@ -23,16 +23,16 @@
|
|
|
23
23
|
<div class='clearfix'>
|
|
24
24
|
|
|
25
25
|
<div class='fl pad1y space-right2'>
|
|
26
|
-
<span class="strong">95.
|
|
26
|
+
<span class="strong">95.89% </span>
|
|
27
27
|
<span class="quiet">Statements</span>
|
|
28
|
-
<span class='fraction'>
|
|
28
|
+
<span class='fraction'>140/146</span>
|
|
29
29
|
</div>
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
<div class='fl pad1y space-right2'>
|
|
33
|
-
<span class="strong">
|
|
33
|
+
<span class="strong">93.1% </span>
|
|
34
34
|
<span class="quiet">Branches</span>
|
|
35
|
-
<span class='fraction'>
|
|
35
|
+
<span class='fraction'>27/29</span>
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
38
|
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
<div class='fl pad1y space-right2'>
|
|
47
|
-
<span class="strong">95.
|
|
47
|
+
<span class="strong">95.89% </span>
|
|
48
48
|
<span class="quiet">Lines</span>
|
|
49
|
-
<span class='fraction'>
|
|
49
|
+
<span class='fraction'>140/146</span>
|
|
50
50
|
</div>
|
|
51
51
|
|
|
52
52
|
|
|
@@ -188,7 +188,33 @@
|
|
|
188
188
|
<a name='L123'></a><a href='#L123'>123</a>
|
|
189
189
|
<a name='L124'></a><a href='#L124'>124</a>
|
|
190
190
|
<a name='L125'></a><a href='#L125'>125</a>
|
|
191
|
-
<a name='L126'></a><a href='#L126'>126</a
|
|
191
|
+
<a name='L126'></a><a href='#L126'>126</a>
|
|
192
|
+
<a name='L127'></a><a href='#L127'>127</a>
|
|
193
|
+
<a name='L128'></a><a href='#L128'>128</a>
|
|
194
|
+
<a name='L129'></a><a href='#L129'>129</a>
|
|
195
|
+
<a name='L130'></a><a href='#L130'>130</a>
|
|
196
|
+
<a name='L131'></a><a href='#L131'>131</a>
|
|
197
|
+
<a name='L132'></a><a href='#L132'>132</a>
|
|
198
|
+
<a name='L133'></a><a href='#L133'>133</a>
|
|
199
|
+
<a name='L134'></a><a href='#L134'>134</a>
|
|
200
|
+
<a name='L135'></a><a href='#L135'>135</a>
|
|
201
|
+
<a name='L136'></a><a href='#L136'>136</a>
|
|
202
|
+
<a name='L137'></a><a href='#L137'>137</a>
|
|
203
|
+
<a name='L138'></a><a href='#L138'>138</a>
|
|
204
|
+
<a name='L139'></a><a href='#L139'>139</a>
|
|
205
|
+
<a name='L140'></a><a href='#L140'>140</a>
|
|
206
|
+
<a name='L141'></a><a href='#L141'>141</a>
|
|
207
|
+
<a name='L142'></a><a href='#L142'>142</a>
|
|
208
|
+
<a name='L143'></a><a href='#L143'>143</a>
|
|
209
|
+
<a name='L144'></a><a href='#L144'>144</a>
|
|
210
|
+
<a name='L145'></a><a href='#L145'>145</a>
|
|
211
|
+
<a name='L146'></a><a href='#L146'>146</a>
|
|
212
|
+
<a name='L147'></a><a href='#L147'>147</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">3x</span>
|
|
213
|
+
<span class="cline-any cline-yes">3x</span>
|
|
214
|
+
<span class="cline-any cline-yes">3x</span>
|
|
215
|
+
<span class="cline-any cline-yes">3x</span>
|
|
216
|
+
<span class="cline-any cline-yes">3x</span>
|
|
217
|
+
<span class="cline-any cline-yes">3x</span>
|
|
192
218
|
<span class="cline-any cline-yes">3x</span>
|
|
193
219
|
<span class="cline-any cline-yes">3x</span>
|
|
194
220
|
<span class="cline-any cline-yes">3x</span>
|
|
@@ -243,11 +269,19 @@
|
|
|
243
269
|
<span class="cline-any cline-yes">3x</span>
|
|
244
270
|
<span class="cline-any cline-yes">3x</span>
|
|
245
271
|
<span class="cline-any cline-yes">3x</span>
|
|
272
|
+
<span class="cline-any cline-yes">3x</span>
|
|
273
|
+
<span class="cline-any cline-yes">3x</span>
|
|
274
|
+
<span class="cline-any cline-yes">3x</span>
|
|
275
|
+
<span class="cline-any cline-yes">3x</span>
|
|
276
|
+
<span class="cline-any cline-yes">3x</span>
|
|
277
|
+
<span class="cline-any cline-yes">3x</span>
|
|
246
278
|
<span class="cline-any cline-yes">1x</span>
|
|
247
279
|
<span class="cline-any cline-yes">3x</span>
|
|
248
280
|
<span class="cline-any cline-yes">2x</span>
|
|
249
281
|
<span class="cline-any cline-yes">2x</span>
|
|
250
282
|
<span class="cline-any cline-yes">3x</span>
|
|
283
|
+
<span class="cline-any cline-yes">3x</span>
|
|
284
|
+
<span class="cline-any cline-yes">3x</span>
|
|
251
285
|
<span class="cline-any cline-yes">1x</span>
|
|
252
286
|
<span class="cline-any cline-yes">3x</span>
|
|
253
287
|
<span class="cline-any cline-yes">2x</span>
|
|
@@ -257,6 +291,8 @@
|
|
|
257
291
|
<span class="cline-any cline-yes">2x</span>
|
|
258
292
|
<span class="cline-any cline-yes">2x</span>
|
|
259
293
|
<span class="cline-any cline-yes">3x</span>
|
|
294
|
+
<span class="cline-any cline-yes">3x</span>
|
|
295
|
+
<span class="cline-any cline-yes">3x</span>
|
|
260
296
|
<span class="cline-any cline-yes">1x</span>
|
|
261
297
|
<span class="cline-any cline-yes">3x</span>
|
|
262
298
|
<span class="cline-any cline-yes">2x</span>
|
|
@@ -264,6 +300,8 @@
|
|
|
264
300
|
<span class="cline-any cline-yes">3x</span>
|
|
265
301
|
<span class="cline-any cline-yes">3x</span>
|
|
266
302
|
<span class="cline-any cline-yes">3x</span>
|
|
303
|
+
<span class="cline-any cline-yes">3x</span>
|
|
304
|
+
<span class="cline-any cline-yes">3x</span>
|
|
267
305
|
<span class="cline-any cline-yes">2x</span>
|
|
268
306
|
<span class="cline-any cline-yes">2x</span>
|
|
269
307
|
<span class="cline-any cline-yes">2x</span>
|
|
@@ -281,6 +319,9 @@
|
|
|
281
319
|
<span class="cline-any cline-yes">3x</span>
|
|
282
320
|
<span class="cline-any cline-yes">3x</span>
|
|
283
321
|
<span class="cline-any cline-yes">3x</span>
|
|
322
|
+
<span class="cline-any cline-yes">3x</span>
|
|
323
|
+
<span class="cline-any cline-yes">3x</span>
|
|
324
|
+
<span class="cline-any cline-yes">3x</span>
|
|
284
325
|
<span class="cline-any cline-yes">1x</span>
|
|
285
326
|
<span class="cline-any cline-yes">1x</span>
|
|
286
327
|
<span class="cline-any cline-yes">1x</span>
|
|
@@ -313,10 +354,16 @@
|
|
|
313
354
|
<span class="cline-any cline-yes">3x</span>
|
|
314
355
|
<span class="cline-any cline-yes">3x</span>
|
|
315
356
|
<span class="cline-any cline-yes">3x</span>
|
|
316
|
-
<span class="cline-any cline-
|
|
357
|
+
<span class="cline-any cline-yes">3x</span>
|
|
358
|
+
<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">import { parts } from './media-theme-mux/media-theme-mux';
|
|
317
359
|
import './dialog';
|
|
318
|
-
import {
|
|
319
|
-
|
|
360
|
+
import {
|
|
361
|
+
castThemeName,
|
|
362
|
+
getSrcFromPlaybackId,
|
|
363
|
+
getPosterURLFromPlaybackId,
|
|
364
|
+
getStoryboardURLFromPlaybackId,
|
|
365
|
+
} from './helpers';
|
|
366
|
+
import { html, unsafeStatic } from './html';
|
|
320
367
|
// @ts-ignore
|
|
321
368
|
import cssStr from './styles.css';
|
|
322
369
|
import { i18n, stylePropsToString } from './utils';
|
|
@@ -331,21 +378,26 @@ export const template = (props: MuxTemplateProps) => html`
|
|
|
331
378
|
${content(props)}
|
|
332
379
|
`;
|
|
333
380
|
|
|
381
|
+
const flatCSSParts = Object.values(parts).flatMap((group) => group.split(' '));
|
|
382
|
+
const forwardUniqueCSSParts = [...new Set(flatCSSParts)].join(', ');
|
|
383
|
+
|
|
334
384
|
export const content = (props: MuxTemplateProps) => html`
|
|
335
|
-
<
|
|
385
|
+
<${unsafeStatic(castThemeName(props.theme) ?? 'media-theme-mux')}
|
|
386
|
+
nohotkeys="${props.noHotKeys ?? false}"
|
|
336
387
|
audio="${props.audio || false}"
|
|
337
|
-
style="${
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
}
|
|
343
|
-
class="size-${props.playerSize}"
|
|
388
|
+
style="${
|
|
389
|
+
stylePropsToString({
|
|
390
|
+
'--primary-color': props.primaryColor,
|
|
391
|
+
'--secondary-color': props.secondaryColor,
|
|
392
|
+
}) ?? false
|
|
393
|
+
}"
|
|
394
|
+
class="size-${props.playerSize}${props.<span class="branch-0 cbranch-no" title="branch not covered" >secondaryColor ? ' two-tone' : '</span>'}"
|
|
344
395
|
stream-type="${props.streamType}"
|
|
345
396
|
player-size="${props.playerSize}"
|
|
346
397
|
default-hidden-captions="${props.defaultHiddenCaptions}"
|
|
347
398
|
forward-seek-offset="${props.forwardSeekOffset}"
|
|
348
399
|
backward-seek-offset="${props.backwardSeekOffset}"
|
|
400
|
+
exportparts="seek-live, ${forwardUniqueCSSParts}"
|
|
349
401
|
>
|
|
350
402
|
<mux-video
|
|
351
403
|
slot="media"
|
|
@@ -358,52 +410,62 @@ export const content = (props: MuxTemplateProps) => html`
|
|
|
358
410
|
debug="${props.debug ?? false}"
|
|
359
411
|
prefer-mse="${props.preferMse ?? false}"
|
|
360
412
|
start-time="${props.startTime != null ? props.startTime : false}"
|
|
361
|
-
metadata-video-id="${props.metadataVideoId ??
|
|
362
|
-
metadata-video-title="${props.metadataVideoTitle ??
|
|
363
|
-
metadata-viewer-user-id="${props.metadataViewerUserId ??
|
|
413
|
+
metadata-video-id="${props.metadataVideoId ?? false}"
|
|
414
|
+
metadata-video-title="${props.metadataVideoTitle ?? false}"
|
|
415
|
+
metadata-viewer-user-id="${props.metadataViewerUserId ?? false}"
|
|
364
416
|
beacon-collection-domain="${props.beaconCollectionDomain ?? false}"
|
|
365
417
|
player-software-name="${props.playerSoftwareName}"
|
|
366
418
|
player-software-version="${props.playerSoftwareVersion}"
|
|
367
419
|
env-key="${props.envKey ?? false}"
|
|
368
420
|
stream-type="${props.streamType ?? false}"
|
|
369
421
|
custom-domain="${props.customDomain ?? false}"
|
|
370
|
-
src="${
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
422
|
+
src="${
|
|
423
|
+
!!props.src
|
|
424
|
+
? props.src
|
|
425
|
+
: props.playbackId
|
|
426
|
+
? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
|
|
427
|
+
: false
|
|
428
|
+
}"
|
|
429
|
+
poster="${
|
|
430
|
+
!!props.poster
|
|
431
|
+
? props.poster
|
|
432
|
+
: props.playbackId && !props.audio
|
|
433
|
+
? getPosterURLFromPlaybackId(props.playbackId, {
|
|
434
|
+
domain: props.customDomain,
|
|
435
|
+
thumbnailTime: props.thumbnailTime ?? props.startTime,
|
|
436
|
+
token: props.tokens.thumbnail,
|
|
437
|
+
})
|
|
438
|
+
: false
|
|
439
|
+
}"
|
|
440
|
+
cast-src="${
|
|
441
|
+
!!props.src
|
|
442
|
+
? props.src
|
|
443
|
+
: props.playbackId
|
|
444
|
+
? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
|
|
445
|
+
: false
|
|
446
|
+
}"
|
|
389
447
|
cast-stream-type="${[StreamTypes.LIVE, StreamTypes.LL_LIVE].includes(props.streamType as any) ? 'live' : false}"
|
|
390
448
|
>
|
|
391
|
-
${
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
449
|
+
${
|
|
450
|
+
props.playbackId &&
|
|
451
|
+
!props.audio &&
|
|
452
|
+
![StreamTypes.LIVE, StreamTypes.LL_LIVE, StreamTypes.DVR, StreamTypes.LL_DVR].includes(props.streamType as any)
|
|
453
|
+
? html`<track
|
|
454
|
+
label="thumbnails"
|
|
455
|
+
default
|
|
456
|
+
kind="metadata"
|
|
457
|
+
src="${getStoryboardURLFromPlaybackId(props.playbackId, {
|
|
458
|
+
domain: props.customDomain,
|
|
459
|
+
token: props.tokens.storyboard,
|
|
460
|
+
})}"
|
|
461
|
+
/>`
|
|
462
|
+
: html``
|
|
463
|
+
}
|
|
404
464
|
</mux-video>
|
|
405
465
|
<button
|
|
406
466
|
slot="seek-to-live-button"
|
|
467
|
+
part="seek-live button"
|
|
468
|
+
class="mxp-seek-to-live-button"
|
|
407
469
|
aria-disabled="${props.inLiveWindow}"
|
|
408
470
|
onclick="${function (this: HTMLButtonElement, evt: Event) {
|
|
409
471
|
props.onSeekToLive?.(evt);
|
|
@@ -412,7 +474,6 @@ export const content = (props: MuxTemplateProps) => html`
|
|
|
412
474
|
(this as HTMLButtonElement).dispatchEvent(playRequestEvt);
|
|
413
475
|
}
|
|
414
476
|
}}"
|
|
415
|
-
class="mxp-seek-to-live-button"
|
|
416
477
|
>
|
|
417
478
|
Live
|
|
418
479
|
</button>
|
|
@@ -425,18 +486,20 @@ export const content = (props: MuxTemplateProps) => html`
|
|
|
425
486
|
${props.dialog?.title ? html`<h3>${props.dialog.title}</h3>` : html``}
|
|
426
487
|
<p>
|
|
427
488
|
${props.dialog?.message}
|
|
428
|
-
${
|
|
429
|
-
|
|
430
|
-
<span class="cstat-no" title="statement not covered" >
|
|
431
|
-
<span class="cstat-no" title="statement not covered" >
|
|
432
|
-
<span class="cstat-no" title="statement not covered" >
|
|
433
|
-
<span class="cstat-no" title="statement not covered" >
|
|
434
|
-
<span class="cstat-no" title="statement not covered" >
|
|
435
|
-
|
|
436
|
-
|
|
489
|
+
${
|
|
490
|
+
props.dialog?.<span class="branch-0 cbranch-no" title="branch not covered" >linkUrl</span>
|
|
491
|
+
<span class="cstat-no" title="statement not covered" > ? html`<a</span>
|
|
492
|
+
<span class="cstat-no" title="statement not covered" > href="${props.dialog.linkUrl}"</span>
|
|
493
|
+
<span class="cstat-no" title="statement not covered" > target="_blank"</span>
|
|
494
|
+
<span class="cstat-no" title="statement not covered" > rel="external noopener"</span>
|
|
495
|
+
<span class="cstat-no" title="statement not covered" > aria-label="${props.dialog.linkText ?? ''} ${i18n(`(opens in a new window)`)}"</span>
|
|
496
|
+
<span class="cstat-no" title="statement not covered" > >${props.dialog.linkText ?? props.dialog.linkUrl}</a</span>
|
|
497
|
+
>`
|
|
498
|
+
: html``
|
|
499
|
+
}
|
|
437
500
|
</p>
|
|
438
501
|
</mxp-dialog>
|
|
439
|
-
<
|
|
502
|
+
</${unsafeStatic(castThemeName(props.theme) ?? 'media-theme-mux')}>
|
|
440
503
|
`;
|
|
441
504
|
</pre></td></tr></table></pre>
|
|
442
505
|
|
|
@@ -445,7 +508,7 @@ export const content = (props: MuxTemplateProps) => html`
|
|
|
445
508
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
446
509
|
Code coverage generated by
|
|
447
510
|
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
448
|
-
at
|
|
511
|
+
at Wed Aug 03 2022 19:24:53 GMT+0000 (Coordinated Universal Time)
|
|
449
512
|
</div>
|
|
450
513
|
<script src="../prettify.js"></script>
|
|
451
514
|
<script>
|
|
@@ -370,7 +370,7 @@ export const containsComposedNode = (rootNode: Node, childNode?: Node | Element
|
|
|
370
370
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
371
371
|
Code coverage generated by
|
|
372
372
|
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
373
|
-
at
|
|
373
|
+
at Wed Aug 03 2022 19:24:53 GMT+0000 (Coordinated Universal Time)
|
|
374
374
|
</div>
|
|
375
375
|
<script src="../prettify.js"></script>
|
|
376
376
|
<script>
|