@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.
Files changed (73) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/README.md +38 -36
  3. package/coverage/lcov-report/index.html +31 -31
  4. package/coverage/lcov-report/src/dialog.ts.html +1 -1
  5. package/coverage/lcov-report/src/errors.ts.html +1 -1
  6. package/coverage/lcov-report/src/helpers.ts.html +30 -9
  7. package/coverage/lcov-report/src/html.ts.html +159 -9
  8. package/coverage/lcov-report/src/index.html +52 -52
  9. package/coverage/lcov-report/src/index.ts.html +156 -27
  10. package/coverage/lcov-report/src/logger.ts.html +1 -1
  11. package/coverage/lcov-report/src/media-chrome/dialog.ts.html +1 -1
  12. package/coverage/lcov-report/src/media-chrome/index.html +1 -1
  13. package/coverage/lcov-report/src/media-chrome/time-display.ts.html +1 -1
  14. package/coverage/lcov-report/src/media-theme-mux/icons/airplay.svg.html +1 -1
  15. package/coverage/lcov-report/src/media-theme-mux/icons/captions-off.svg.html +1 -1
  16. package/coverage/lcov-report/src/media-theme-mux/icons/captions-on.svg.html +1 -1
  17. package/coverage/lcov-report/src/media-theme-mux/icons/cast-enter.svg.html +103 -0
  18. package/coverage/lcov-report/src/media-theme-mux/icons/cast-exit.svg.html +106 -0
  19. package/coverage/lcov-report/src/media-theme-mux/icons/fullscreen-enter.svg.html +1 -1
  20. package/coverage/lcov-report/src/media-theme-mux/icons/fullscreen-exit.svg.html +1 -1
  21. package/coverage/lcov-report/src/media-theme-mux/icons/index.html +33 -3
  22. package/coverage/lcov-report/src/media-theme-mux/icons/pause.svg.html +1 -1
  23. package/coverage/lcov-report/src/media-theme-mux/icons/pip-enter.svg.html +1 -1
  24. package/coverage/lcov-report/src/media-theme-mux/icons/pip-exit.svg.html +1 -1
  25. package/coverage/lcov-report/src/media-theme-mux/icons/play.svg.html +1 -1
  26. package/coverage/lcov-report/src/media-theme-mux/icons/seek-backward.svg.html +1 -1
  27. package/coverage/lcov-report/src/media-theme-mux/icons/seek-forward.svg.html +1 -1
  28. package/coverage/lcov-report/src/media-theme-mux/icons/volume-high.svg.html +1 -1
  29. package/coverage/lcov-report/src/media-theme-mux/icons/volume-low.svg.html +1 -1
  30. package/coverage/lcov-report/src/media-theme-mux/icons/volume-medium.svg.html +1 -1
  31. package/coverage/lcov-report/src/media-theme-mux/icons/volume-off.svg.html +1 -1
  32. package/coverage/lcov-report/src/media-theme-mux/icons.ts.html +18 -6
  33. package/coverage/lcov-report/src/media-theme-mux/index.html +26 -26
  34. package/coverage/lcov-report/src/media-theme-mux/media-theme-mux.ts.html +342 -177
  35. package/coverage/lcov-report/src/media-theme-mux/styles.css.html +117 -18
  36. package/coverage/lcov-report/src/styles.css.html +1 -1
  37. package/coverage/lcov-report/src/template.ts.html +128 -65
  38. package/coverage/lcov-report/src/utils.ts.html +1 -1
  39. package/coverage/lcov-report/src/video-api.ts.html +91 -13
  40. package/coverage/lcov.info +1595 -1273
  41. package/dist/index.cjs.js +503 -343
  42. package/dist/index.mjs +296 -228
  43. package/dist/mux-player.js +556 -396
  44. package/dist/mux-player.mjs +556 -396
  45. package/dist/tsconfig.tsbuildinfo +1 -1
  46. package/dist/types/helpers.d.ts +1 -0
  47. package/dist/types/html.d.ts +5 -0
  48. package/dist/types/index.d.ts +5 -3
  49. package/dist/types/media-theme-mux/icons.d.ts +2 -0
  50. package/dist/types/media-theme-mux/media-theme-mux.d.ts +32 -12
  51. package/dist/types/template.d.ts +0 -1
  52. package/dist/types/video-api.d.ts +4 -0
  53. package/dist/types-ts3.4/helpers.d.ts +1 -0
  54. package/dist/types-ts3.4/html.d.ts +5 -0
  55. package/dist/types-ts3.4/index.d.ts +4 -3
  56. package/dist/types-ts3.4/media-theme-mux/icons.d.ts +2 -0
  57. package/dist/types-ts3.4/media-theme-mux/media-theme-mux.d.ts +32 -12
  58. package/dist/types-ts3.4/template.d.ts +0 -1
  59. package/dist/types-ts3.4/video-api.d.ts +2 -0
  60. package/package.json +5 -5
  61. package/src/helpers.ts +7 -0
  62. package/src/html.ts +50 -0
  63. package/src/index.ts +58 -15
  64. package/src/media-theme-mux/icons/cast-enter.svg +6 -0
  65. package/src/media-theme-mux/icons/cast-exit.svg +7 -0
  66. package/src/media-theme-mux/icons.ts +4 -0
  67. package/src/media-theme-mux/media-theme-mux.ts +179 -124
  68. package/src/media-theme-mux/styles.css +47 -14
  69. package/src/template.ts +78 -57
  70. package/src/types.d.ts +3 -0
  71. package/src/video-api.ts +27 -1
  72. package/test/player.test.js +34 -0
  73. 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'>168/168</span>
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'>168/168</span>
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></td><td class="line-coverage quiet"><span class="cline-any cline-yes">3x</span>
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
  &nbsp;
406
472
  :host {
407
- color: var(--primary-color);
408
- --media-icon-color: var(--primary-color);
409
- --media-range-thumb-background: var(--primary-color);
410
- --media-range-bar-color: var(--primary-color);
473
+ --_primary-color: var(--primary-color, #fff);
474
+ &nbsp;
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.7);
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
  &nbsp;
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
+ &nbsp;
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
+ &nbsp;
507
+ :host(.two-tone:not([audio])) media-time-range {
508
+ --media-range-track-border-radius: 0;
509
+ }
510
+ &nbsp;
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
  &nbsp;
548
+ :host media-time-range {
549
+ color: var(--_primary-color);
550
+ }
551
+ &nbsp;
458
552
  :host(:not([audio])) media-time-range {
459
- padding: var(--mux-time-range-padding, 0 10px);
460
- z-index: 10;
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
- height: 22px;
463
- --media-range-track-translate-y: 6px;
464
- background: linear-gradient(180deg, transparent, transparent 15px, var(--media-control-background) 15px);
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
  &nbsp;
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
  &nbsp;
475
- media-cast-button {
476
- width: 40px;
477
- }
478
- &nbsp;
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 Mon Jul 11 2022 16:36:07 GMT+0000 (Coordinated Universal Time)
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 Mon Jul 11 2022 16:36:07 GMT+0000 (Coordinated Universal Time)
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.2% </span>
26
+ <span class="strong">95.89% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>119/125</span>
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">90.32% </span>
33
+ <span class="strong">93.1% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>28/31</span>
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.2% </span>
47
+ <span class="strong">95.89% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>119/125</span>
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></td><td class="line-coverage quiet"><span class="cline-any cline-yes">3x</span>
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-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import './media-theme-mux/media-theme-mux';
357
+ <span class="cline-any cline-yes">3x</span>
358
+ <span class="cline-any cline-neutral">&nbsp;</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 { getSrcFromPlaybackId, getPosterURLFromPlaybackId, getStoryboardURLFromPlaybackId } from './helpers';
319
- import { html } from './html';
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) =&gt; html`
331
378
  ${content(props)}
332
379
  `;
333
380
  &nbsp;
381
+ const flatCSSParts = Object.values(parts).flatMap((group) =&gt; group.split(' '));
382
+ const forwardUniqueCSSParts = [...new Set(flatCSSParts)].join(', ');
383
+ &nbsp;
334
384
  export const content = (props: MuxTemplateProps) =&gt; html`
335
- &lt;media-theme-mux
385
+ &lt;${unsafeStatic(castThemeName(props.theme) ?? 'media-theme-mux')}
386
+ nohotkeys="${props.noHotKeys ?? false}"
336
387
  audio="${props.audio || false}"
337
- style="${stylePropsToString({
338
- '--primary-color': props.primaryColor,
339
- '--secondary-color': props.secondaryColor,
340
- '--mux-time-range-padding': props.<span class="branch-0 cbranch-no" title="branch not covered" >secondaryColor ? '0' : n</span>ull,
341
- '--media-range-track-border-radius': props.<span class="branch-0 cbranch-no" title="branch not covered" >secondaryColor ? '0' : n</span>ull,
342
- }) ?? false}"
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
  &gt;
350
402
  &lt;mux-video
351
403
  slot="media"
@@ -358,52 +410,62 @@ export const content = (props: MuxTemplateProps) =&gt; 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 ?? props.metadata?.video_id ?? false}"
362
- metadata-video-title="${props.metadataVideoTitle ?? props.metadata?.video_title ?? false}"
363
- metadata-viewer-user-id="${props.metadataViewerUserId ?? props.metadata?.viewer_user_id ?? false}"
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="${!!props.src
371
- ? props.src
372
- : props.playbackId
373
- ? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
374
- : false}"
375
- poster="${!!props.poster
376
- ? props.poster
377
- : props.playbackId &amp;&amp; !props.audio
378
- ? getPosterURLFromPlaybackId(props.playbackId, {
379
- domain: props.customDomain,
380
- thumbnailTime: props.thumbnailTime ?? props.startTime,
381
- token: props.tokens.thumbnail,
382
- })
383
- : false}"
384
- cast-src="${!!props.src
385
- ? props.src
386
- : props.playbackId
387
- ? getSrcFromPlaybackId(props.playbackId, { domain: props.customDomain, token: props.tokens.playback })
388
- : false}"
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 &amp;&amp; !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
  &gt;
391
- ${props.playbackId &amp;&amp;
392
- !props.audio &amp;&amp;
393
- ![StreamTypes.LIVE, StreamTypes.LL_LIVE, StreamTypes.DVR, StreamTypes.LL_DVR].includes(props.streamType as any)
394
- ? html`&lt;track
395
- label="thumbnails"
396
- default
397
- kind="metadata"
398
- src="${getStoryboardURLFromPlaybackId(props.playbackId, {
399
- domain: props.customDomain,
400
- token: props.tokens.storyboard,
401
- })}"
402
- /&gt;`
403
- : html``}
449
+ ${
450
+ props.playbackId &amp;&amp;
451
+ !props.audio &amp;&amp;
452
+ ![StreamTypes.LIVE, StreamTypes.LL_LIVE, StreamTypes.DVR, StreamTypes.LL_DVR].includes(props.streamType as any)
453
+ ? html`&lt;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
+ /&gt;`
462
+ : html``
463
+ }
404
464
  &lt;/mux-video&gt;
405
465
  &lt;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) =&gt; html`
412
474
  (this as HTMLButtonElement).dispatchEvent(playRequestEvt);
413
475
  }
414
476
  }}"
415
- class="mxp-seek-to-live-button"
416
477
  &gt;
417
478
  Live
418
479
  &lt;/button&gt;
@@ -425,18 +486,20 @@ export const content = (props: MuxTemplateProps) =&gt; html`
425
486
  ${props.dialog?.title ? html`&lt;h3&gt;${props.dialog.title}&lt;/h3&gt;` : html``}
426
487
  &lt;p&gt;
427
488
  ${props.dialog?.message}
428
- ${props.dialog?.<span class="branch-0 cbranch-no" title="branch not covered" >linkUrl</span>
429
- <span class="cstat-no" title="statement not covered" > ? html`&lt;a</span>
430
- <span class="cstat-no" title="statement not covered" > href="${props.dialog.linkUrl}"</span>
431
- <span class="cstat-no" title="statement not covered" > target="_blank"</span>
432
- <span class="cstat-no" title="statement not covered" > rel="external noopener"</span>
433
- <span class="cstat-no" title="statement not covered" > aria-label="${props.dialog.linkText ?? ''} ${i18n(`(opens in a new window)`)}"</span>
434
- <span class="cstat-no" title="statement not covered" > &gt;${props.dialog.linkText ?? props.dialog.linkUrl}&lt;/a</span>
435
- &gt;`
436
- : html``}
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`&lt;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" > &gt;${props.dialog.linkText ?? props.dialog.linkUrl}&lt;/a</span>
497
+ &gt;`
498
+ : html``
499
+ }
437
500
  &lt;/p&gt;
438
501
  &lt;/mxp-dialog&gt;
439
- &lt;/media-theme-mux&gt;
502
+ &lt;/${unsafeStatic(castThemeName(props.theme) ?? 'media-theme-mux')}&gt;
440
503
  `;
441
504
  &nbsp;</pre></td></tr></table></pre>
442
505
 
@@ -445,7 +508,7 @@ export const content = (props: MuxTemplateProps) =&gt; 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 Mon Jul 11 2022 16:36:07 GMT+0000 (Coordinated Universal Time)
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 Mon Jul 11 2022 16:36:07 GMT+0000 (Coordinated Universal Time)
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>