@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
package/coverage/lcov-report/src/media-theme-mux/media-theme-mux.ts.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">79.24% </span>
26
+ <span class="strong">80.44% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>313/395</span>
28
+ <span class='fraction'>362/450</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">88% </span>
33
+ <span class="strong">89.28% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>22/25</span>
35
+ <span class='fraction'>25/28</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">79.16% </span>
40
+ <span class="strong">81.48% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>19/24</span>
42
+ <span class='fraction'>22/27</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">79.24% </span>
47
+ <span class="strong">80.44% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>313/395</span>
49
+ <span class='fraction'>362/450</span>
50
50
  </div>
51
51
 
52
52
 
@@ -61,7 +61,7 @@
61
61
  </div>
62
62
  </template>
63
63
  </div>
64
- <div class='status-line medium'></div>
64
+ <div class='status-line high'></div>
65
65
  <pre><table class="coverage">
66
66
  <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
67
  <a name='L2'></a><a href='#L2'>2</a>
@@ -458,7 +458,62 @@
458
458
  <a name='L393'></a><a href='#L393'>393</a>
459
459
  <a name='L394'></a><a href='#L394'>394</a>
460
460
  <a name='L395'></a><a href='#L395'>395</a>
461
- <a name='L396'></a><a href='#L396'>396</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">3x</span>
461
+ <a name='L396'></a><a href='#L396'>396</a>
462
+ <a name='L397'></a><a href='#L397'>397</a>
463
+ <a name='L398'></a><a href='#L398'>398</a>
464
+ <a name='L399'></a><a href='#L399'>399</a>
465
+ <a name='L400'></a><a href='#L400'>400</a>
466
+ <a name='L401'></a><a href='#L401'>401</a>
467
+ <a name='L402'></a><a href='#L402'>402</a>
468
+ <a name='L403'></a><a href='#L403'>403</a>
469
+ <a name='L404'></a><a href='#L404'>404</a>
470
+ <a name='L405'></a><a href='#L405'>405</a>
471
+ <a name='L406'></a><a href='#L406'>406</a>
472
+ <a name='L407'></a><a href='#L407'>407</a>
473
+ <a name='L408'></a><a href='#L408'>408</a>
474
+ <a name='L409'></a><a href='#L409'>409</a>
475
+ <a name='L410'></a><a href='#L410'>410</a>
476
+ <a name='L411'></a><a href='#L411'>411</a>
477
+ <a name='L412'></a><a href='#L412'>412</a>
478
+ <a name='L413'></a><a href='#L413'>413</a>
479
+ <a name='L414'></a><a href='#L414'>414</a>
480
+ <a name='L415'></a><a href='#L415'>415</a>
481
+ <a name='L416'></a><a href='#L416'>416</a>
482
+ <a name='L417'></a><a href='#L417'>417</a>
483
+ <a name='L418'></a><a href='#L418'>418</a>
484
+ <a name='L419'></a><a href='#L419'>419</a>
485
+ <a name='L420'></a><a href='#L420'>420</a>
486
+ <a name='L421'></a><a href='#L421'>421</a>
487
+ <a name='L422'></a><a href='#L422'>422</a>
488
+ <a name='L423'></a><a href='#L423'>423</a>
489
+ <a name='L424'></a><a href='#L424'>424</a>
490
+ <a name='L425'></a><a href='#L425'>425</a>
491
+ <a name='L426'></a><a href='#L426'>426</a>
492
+ <a name='L427'></a><a href='#L427'>427</a>
493
+ <a name='L428'></a><a href='#L428'>428</a>
494
+ <a name='L429'></a><a href='#L429'>429</a>
495
+ <a name='L430'></a><a href='#L430'>430</a>
496
+ <a name='L431'></a><a href='#L431'>431</a>
497
+ <a name='L432'></a><a href='#L432'>432</a>
498
+ <a name='L433'></a><a href='#L433'>433</a>
499
+ <a name='L434'></a><a href='#L434'>434</a>
500
+ <a name='L435'></a><a href='#L435'>435</a>
501
+ <a name='L436'></a><a href='#L436'>436</a>
502
+ <a name='L437'></a><a href='#L437'>437</a>
503
+ <a name='L438'></a><a href='#L438'>438</a>
504
+ <a name='L439'></a><a href='#L439'>439</a>
505
+ <a name='L440'></a><a href='#L440'>440</a>
506
+ <a name='L441'></a><a href='#L441'>441</a>
507
+ <a name='L442'></a><a href='#L442'>442</a>
508
+ <a name='L443'></a><a href='#L443'>443</a>
509
+ <a name='L444'></a><a href='#L444'>444</a>
510
+ <a name='L445'></a><a href='#L445'>445</a>
511
+ <a name='L446'></a><a href='#L446'>446</a>
512
+ <a name='L447'></a><a href='#L447'>447</a>
513
+ <a name='L448'></a><a href='#L448'>448</a>
514
+ <a name='L449'></a><a href='#L449'>449</a>
515
+ <a name='L450'></a><a href='#L450'>450</a>
516
+ <a name='L451'></a><a href='#L451'>451</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">3x</span>
462
517
  <span class="cline-any cline-yes">3x</span>
463
518
  <span class="cline-any cline-yes">3x</span>
464
519
  <span class="cline-any cline-yes">3x</span>
@@ -483,6 +538,59 @@
483
538
  <span class="cline-any cline-yes">3x</span>
484
539
  <span class="cline-any cline-yes">3x</span>
485
540
  <span class="cline-any cline-yes">3x</span>
541
+ <span class="cline-any cline-yes">3x</span>
542
+ <span class="cline-any cline-yes">3x</span>
543
+ <span class="cline-any cline-yes">3x</span>
544
+ <span class="cline-any cline-yes">3x</span>
545
+ <span class="cline-any cline-yes">3x</span>
546
+ <span class="cline-any cline-yes">3x</span>
547
+ <span class="cline-any cline-yes">3x</span>
548
+ <span class="cline-any cline-yes">3x</span>
549
+ <span class="cline-any cline-yes">3x</span>
550
+ <span class="cline-any cline-yes">3x</span>
551
+ <span class="cline-any cline-yes">3x</span>
552
+ <span class="cline-any cline-yes">3x</span>
553
+ <span class="cline-any cline-yes">3x</span>
554
+ <span class="cline-any cline-yes">3x</span>
555
+ <span class="cline-any cline-yes">3x</span>
556
+ <span class="cline-any cline-yes">3x</span>
557
+ <span class="cline-any cline-yes">3x</span>
558
+ <span class="cline-any cline-yes">3x</span>
559
+ <span class="cline-any cline-yes">3x</span>
560
+ <span class="cline-any cline-yes">3x</span>
561
+ <span class="cline-any cline-yes">3x</span>
562
+ <span class="cline-any cline-yes">3x</span>
563
+ <span class="cline-any cline-yes">3x</span>
564
+ <span class="cline-any cline-yes">3x</span>
565
+ <span class="cline-any cline-yes">3x</span>
566
+ <span class="cline-any cline-yes">3x</span>
567
+ <span class="cline-any cline-yes">3x</span>
568
+ <span class="cline-any cline-yes">3x</span>
569
+ <span class="cline-any cline-yes">3x</span>
570
+ <span class="cline-any cline-yes">3x</span>
571
+ <span class="cline-any cline-yes">3x</span>
572
+ <span class="cline-any cline-yes">3x</span>
573
+ <span class="cline-any cline-yes">3x</span>
574
+ <span class="cline-any cline-yes">3x</span>
575
+ <span class="cline-any cline-yes">2x</span>
576
+ <span class="cline-any cline-yes">3x</span>
577
+ <span class="cline-any cline-yes">3x</span>
578
+ <span class="cline-any cline-yes">3x</span>
579
+ <span class="cline-any cline-yes">2x</span>
580
+ <span class="cline-any cline-yes">2x</span>
581
+ <span class="cline-any cline-yes">2x</span>
582
+ <span class="cline-any cline-yes">2x</span>
583
+ <span class="cline-any cline-yes">2x</span>
584
+ <span class="cline-any cline-yes">2x</span>
585
+ <span class="cline-any cline-yes">2x</span>
586
+ <span class="cline-any cline-yes">2x</span>
587
+ <span class="cline-any cline-yes">2x</span>
588
+ <span class="cline-any cline-yes">2x</span>
589
+ <span class="cline-any cline-yes">2x</span>
590
+ <span class="cline-any cline-yes">2x</span>
591
+ <span class="cline-any cline-yes">2x</span>
592
+ <span class="cline-any cline-yes">2x</span>
593
+ <span class="cline-any cline-yes">2x</span>
486
594
  <span class="cline-any cline-yes">2x</span>
487
595
  <span class="cline-any cline-yes">2x</span>
488
596
  <span class="cline-any cline-yes">2x</span>
@@ -491,6 +599,15 @@
491
599
  <span class="cline-any cline-yes">2x</span>
492
600
  <span class="cline-any cline-yes">2x</span>
493
601
  <span class="cline-any cline-yes">2x</span>
602
+ <span class="cline-any cline-yes">2x</span>
603
+ <span class="cline-any cline-yes">2x</span>
604
+ <span class="cline-any cline-yes">2x</span>
605
+ <span class="cline-any cline-yes">2x</span>
606
+ <span class="cline-any cline-yes">2x</span>
607
+ <span class="cline-any cline-yes">3x</span>
608
+ <span class="cline-any cline-yes">3x</span>
609
+ <span class="cline-any cline-yes">3x</span>
610
+ <span class="cline-any cline-yes">3x</span>
494
611
  <span class="cline-any cline-yes">3x</span>
495
612
  <span class="cline-any cline-yes">3x</span>
496
613
  <span class="cline-any cline-yes">3x</span>
@@ -562,6 +679,7 @@
562
679
  <span class="cline-any cline-yes">3x</span>
563
680
  <span class="cline-any cline-yes">3x</span>
564
681
  <span class="cline-any cline-yes">3x</span>
682
+ <span class="cline-any cline-yes">3x</span>
565
683
  <span class="cline-any cline-yes">2x</span>
566
684
  <span class="cline-any cline-yes">2x</span>
567
685
  <span class="cline-any cline-yes">3x</span>
@@ -569,6 +687,7 @@
569
687
  <span class="cline-any cline-yes">3x</span>
570
688
  <span class="cline-any cline-yes">3x</span>
571
689
  <span class="cline-any cline-yes">3x</span>
690
+ <span class="cline-any cline-yes">3x</span>
572
691
  <span class="cline-any cline-yes">2x</span>
573
692
  <span class="cline-any cline-yes">2x</span>
574
693
  <span class="cline-any cline-yes">3x</span>
@@ -612,6 +731,37 @@
612
731
  <span class="cline-any cline-yes">3x</span>
613
732
  <span class="cline-any cline-yes">3x</span>
614
733
  <span class="cline-any cline-yes">3x</span>
734
+ <span class="cline-any cline-yes">3x</span>
735
+ <span class="cline-any cline-yes">2x</span>
736
+ <span class="cline-any cline-yes">2x</span>
737
+ <span class="cline-any cline-yes">2x</span>
738
+ <span class="cline-any cline-yes">3x</span>
739
+ <span class="cline-any cline-yes">3x</span>
740
+ <span class="cline-any cline-yes">3x</span>
741
+ <span class="cline-any cline-yes">3x</span>
742
+ <span class="cline-any cline-yes">2x</span>
743
+ <span class="cline-any cline-yes">3x</span>
744
+ <span class="cline-any cline-yes">3x</span>
745
+ <span class="cline-any cline-yes">3x</span>
746
+ <span class="cline-any cline-yes">3x</span>
747
+ <span class="cline-any cline-yes">2x</span>
748
+ <span class="cline-any cline-yes">3x</span>
749
+ <span class="cline-any cline-yes">3x</span>
750
+ <span class="cline-any cline-yes">3x</span>
751
+ <span class="cline-any cline-yes">3x</span>
752
+ <span class="cline-any cline-yes">2x</span>
753
+ <span class="cline-any cline-yes">3x</span>
754
+ <span class="cline-any cline-yes">3x</span>
755
+ <span class="cline-any cline-yes">3x</span>
756
+ <span class="cline-any cline-yes">3x</span>
757
+ <span class="cline-any cline-yes">2x</span>
758
+ <span class="cline-any cline-yes">3x</span>
759
+ <span class="cline-any cline-yes">3x</span>
760
+ <span class="cline-any cline-yes">3x</span>
761
+ <span class="cline-any cline-yes">3x</span>
762
+ <span class="cline-any cline-no">&nbsp;</span>
763
+ <span class="cline-any cline-no">&nbsp;</span>
764
+ <span class="cline-any cline-no">&nbsp;</span>
615
765
  <span class="cline-any cline-no">&nbsp;</span>
616
766
  <span class="cline-any cline-no">&nbsp;</span>
617
767
  <span class="cline-any cline-no">&nbsp;</span>
@@ -635,6 +785,8 @@
635
785
  <span class="cline-any cline-no">&nbsp;</span>
636
786
  <span class="cline-any cline-no">&nbsp;</span>
637
787
  <span class="cline-any cline-no">&nbsp;</span>
788
+ <span class="cline-any cline-no">&nbsp;</span>
789
+ <span class="cline-any cline-no">&nbsp;</span>
638
790
  <span class="cline-any cline-yes">3x</span>
639
791
  <span class="cline-any cline-yes">3x</span>
640
792
  <span class="cline-any cline-yes">3x</span>
@@ -646,7 +798,7 @@
646
798
  <span class="cline-any cline-no">&nbsp;</span>
647
799
  <span class="cline-any cline-no">&nbsp;</span>
648
800
  <span class="cline-any cline-no">&nbsp;</span>
649
- <span class="cline-any cline-yes">3x</span>
801
+ <span class="cline-any cline-no">&nbsp;</span>
650
802
  <span class="cline-any cline-yes">3x</span>
651
803
  <span class="cline-any cline-yes">3x</span>
652
804
  <span class="cline-any cline-yes">3x</span>
@@ -811,49 +963,7 @@
811
963
  <span class="cline-any cline-yes">3x</span>
812
964
  <span class="cline-any cline-yes">3x</span>
813
965
  <span class="cline-any cline-yes">3x</span>
814
- <span class="cline-any cline-yes">3x</span>
815
- <span class="cline-any cline-yes">2x</span>
816
- <span class="cline-any cline-yes">2x</span>
817
- <span class="cline-any cline-yes">2x</span>
818
- <span class="cline-any cline-yes">2x</span>
819
- <span class="cline-any cline-yes">2x</span>
820
- <span class="cline-any cline-yes">2x</span>
821
- <span class="cline-any cline-yes">2x</span>
822
- <span class="cline-any cline-yes">2x</span>
823
- <span class="cline-any cline-yes">2x</span>
824
- <span class="cline-any cline-yes">3x</span>
825
- <span class="cline-any cline-yes">3x</span>
826
- <span class="cline-any cline-yes">3x</span>
827
- <span class="cline-any cline-yes">3x</span>
828
- <span class="cline-any cline-yes">3x</span>
829
- <span class="cline-any cline-yes">3x</span>
830
- <span class="cline-any cline-yes">3x</span>
831
- <span class="cline-any cline-yes">3x</span>
832
- <span class="cline-any cline-yes">3x</span>
833
- <span class="cline-any cline-yes">3x</span>
834
- <span class="cline-any cline-yes">3x</span>
835
- <span class="cline-any cline-yes">3x</span>
836
- <span class="cline-any cline-yes">3x</span>
837
- <span class="cline-any cline-yes">3x</span>
838
- <span class="cline-any cline-yes">3x</span>
839
- <span class="cline-any cline-yes">3x</span>
840
- <span class="cline-any cline-yes">2x</span>
841
- <span class="cline-any cline-yes">2x</span>
842
- <span class="cline-any cline-yes">2x</span>
843
- <span class="cline-any cline-yes">2x</span>
844
- <span class="cline-any cline-yes">3x</span>
845
- <span class="cline-any cline-yes">3x</span>
846
- <span class="cline-any cline-yes">3x</span>
847
- <span class="cline-any cline-yes">2x</span>
848
- <span class="cline-any cline-yes">3x</span>
849
- <span class="cline-any cline-yes">3x</span>
850
- <span class="cline-any cline-yes">3x</span>
851
- <span class="cline-any cline-yes">3x</span>
852
- <span class="cline-any cline-yes">3x</span>
853
- <span class="cline-any cline-yes">3x</span>
854
- <span class="cline-any cline-yes">3x</span>
855
- <span class="cline-any cline-yes">3x</span>
856
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import 'media-chrome';
966
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { MediaTheme } from 'media-chrome';
857
967
  import { html, render } from '../html';
858
968
  import '../media-chrome/time-display';
859
969
  &nbsp;
@@ -869,26 +979,88 @@ const MediaChromeSizes = {
869
979
  };
870
980
  &nbsp;
871
981
  type ThemeMuxTemplateProps = {
872
- streamType: string;
982
+ streamType: string | null;
983
+ nohotkeys?: boolean;
873
984
  audio: boolean;
874
- playerSize: string;
985
+ playerSize: string | null;
875
986
  defaultHiddenCaptions: boolean;
876
- forwardSeekOffset: number;
877
- backwardSeekOffset: number;
987
+ forwardSeekOffset: string | null;
988
+ backwardSeekOffset: string | null;
878
989
  };
879
990
  &nbsp;
880
- const template = (props: ThemeMuxTemplateProps) =&gt; html`
881
- &lt;style&gt;
882
- ${cssStr}
883
- &lt;/style&gt;
991
+ export const parts = {
992
+ mediaChrome: 'layer media-layer poster-layer vertical-layer centered-layer',
993
+ centerPlay: 'center play button',
994
+ centerSeekBackward: 'center seek-backward button',
995
+ centerSeekForward: 'center seek-forward button',
996
+ play: 'play button',
997
+ seekBackward: 'seek-backward button',
998
+ seekForward: 'seek-forward button',
999
+ mute: 'mute button',
1000
+ captions: 'captions button',
1001
+ airplay: 'airplay button',
1002
+ pip: 'pip button',
1003
+ fullscreen: 'fullscreen button',
1004
+ cast: 'cast button',
1005
+ playbackRate: 'playbackrate button',
1006
+ volumeRange: 'volume range',
1007
+ timeRange: 'time range',
1008
+ timeDisplay: 'time display',
1009
+ };
884
1010
  &nbsp;
885
- &lt;media-controller audio="${props.audio || false}" class="size-${props.playerSize}"&gt;
886
- &lt;slot name="media" slot="media"&gt;&lt;/slot&gt;
887
- &lt;media-loading-indicator slot="centered-chrome" no-auto-hide&gt;&lt;/media-loading-indicator&gt;
888
- ${ChromeRenderer(props)}
889
- &lt;slot&gt;&lt;/slot&gt;
890
- &lt;/media-controller&gt;
891
- `;
1011
+ export default class MediaThemeMux extends MediaTheme {
1012
+ static get observedAttributes() {
1013
+ return [
1014
+ 'audio',
1015
+ 'nohotkeys',
1016
+ 'stream-type',
1017
+ 'player-size',
1018
+ 'default-hidden-captions',
1019
+ 'forward-seek-offset',
1020
+ 'backward-seek-offset',
1021
+ ];
1022
+ }
1023
+ &nbsp;
1024
+ attributeChangedCallback() {
1025
+ this.render();
1026
+ }
1027
+ &nbsp;
1028
+ render() {
1029
+ const props = {
1030
+ audio: this.hasAttribute('audio'),
1031
+ nohotkeys: this.hasAttribute('nohotkeys'),
1032
+ streamType: this.getAttribute('stream-type'),
1033
+ playerSize: this.getAttribute('player-size'),
1034
+ defaultHiddenCaptions: this.hasAttribute('default-hidden-captions'),
1035
+ forwardSeekOffset: this.getAttribute('forward-seek-offset'),
1036
+ backwardSeekOffset: this.getAttribute('backward-seek-offset'),
1037
+ };
1038
+ &nbsp;
1039
+ render(
1040
+ html`
1041
+ &lt;style&gt;
1042
+ ${cssStr}
1043
+ &lt;/style&gt;
1044
+ &lt;media-controller
1045
+ nohotkeys="${props.nohotkeys || false}"
1046
+ audio="${props.audio || false}"
1047
+ class="size-${props.playerSize}"
1048
+ exportparts="${parts.mediaChrome.split(' ').join(', ')}"
1049
+ &gt;
1050
+ &lt;slot name="media" slot="media"&gt;&lt;/slot&gt;
1051
+ &lt;media-loading-indicator slot="centered-chrome" no-auto-hide&gt;&lt;/media-loading-indicator&gt;
1052
+ ${ChromeRenderer(props)}
1053
+ &lt;slot&gt;&lt;/slot&gt;
1054
+ &lt;/media-controller&gt;
1055
+ `,
1056
+ this.shadowRoot as Node
1057
+ );
1058
+ }
1059
+ }
1060
+ &nbsp;
1061
+ if (!customElements.get('media-theme-mux')) {
1062
+ customElements.define('media-theme-mux', MediaThemeMux);
1063
+ }
892
1064
  &nbsp;
893
1065
  const ChromeRenderer = (props: ThemeMuxTemplateProps) =&gt; {
894
1066
  const { streamType, playerSize, audio } = props;
@@ -896,7 +1068,7 @@ const ChromeRenderer = (props: ThemeMuxTemplateProps) =&gt; {
896
1068
  <span class="cstat-no" title="statement not covered" > switch (streamType) {</span>
897
1069
  <span class="cstat-no" title="statement not covered" > case StreamTypes.LIVE:</span>
898
1070
  <span class="cstat-no" title="statement not covered" > case StreamTypes.LL_LIVE: {</span>
899
- <span class="cstat-no" title="statement not covered" > return AudioLiveChrome(props);</span>
1071
+ <span class="cstat-no" title="statement not covered" > return AudioLiveChrome();</span>
900
1072
  <span class="cstat-no" title="statement not covered" > }</span>
901
1073
  <span class="cstat-no" title="statement not covered" > case StreamTypes.DVR:</span>
902
1074
  <span class="cstat-no" title="statement not covered" > case StreamTypes.LL_DVR: {</span>
@@ -948,30 +1120,32 @@ const ChromeRenderer = (props: ThemeMuxTemplateProps) =&gt; {
948
1120
  };
949
1121
  &nbsp;
950
1122
  // prettier-ignore
951
- const MediaPlayButton = () =&gt; html`
952
- &lt;media-play-button&gt;
1123
+ const MediaPlayButton = ({ part = parts.play } = {}) =&gt; html`
1124
+ &lt;media-play-button part="${part}"&gt;
953
1125
  ${icons.Play()}
954
1126
  ${icons.Pause()}
955
1127
  &lt;/media-play-button&gt;
956
1128
  `;
957
1129
  &nbsp;
958
1130
  // prettier-ignore
959
- const MediaSeekBackwardButton = (props: Partial&lt;ThemeMuxTemplateProps&gt;) =&gt; html`
960
- &lt;media-seek-backward-button seek-offset="${props.backwardSeekOffset}"&gt;
961
- ${icons.SeekBackward({ value: props.backwardSeekOffset })}
1131
+ type SeekBackwardButtonProps = { backwardSeekOffset: string, part?: string };
1132
+ const MediaSeekBackwardButton = ({ backwardSeekOffset, part = parts.seekBackward }: SeekBackwardButtonProps) =&gt; html`
1133
+ &lt;media-seek-backward-button seek-offset="${backwardSeekOffset}" part="${part}"&gt;
1134
+ ${icons.SeekBackward({ value: backwardSeekOffset })}
962
1135
  &lt;/media-seek-backward-button&gt;
963
1136
  `;
964
1137
  &nbsp;
965
1138
  // prettier-ignore
966
- const MediaSeekForwardButton = (props: Partial&lt;ThemeMuxTemplateProps&gt;) =&gt; html`
967
- &lt;media-seek-forward-button seek-offset="${props.forwardSeekOffset}"&gt;
968
- ${icons.SeekForward({ value: props.forwardSeekOffset })}
1139
+ type SeekForwardButtonProps = { forwardSeekOffset: string, part?: string };
1140
+ const MediaSeekForwardButton = ({ forwardSeekOffset, part = parts.seekForward }: SeekForwardButtonProps) =&gt; html`
1141
+ &lt;media-seek-forward-button seek-offset="${forwardSeekOffset}" part="${part}"&gt;
1142
+ ${icons.SeekForward({ value: forwardSeekOffset })}
969
1143
  &lt;/media-seek-forward-button&gt;
970
1144
  `;
971
1145
  &nbsp;
972
1146
  // prettier-ignore
973
1147
  const MediaMuteButton = () =&gt; html`
974
- &lt;media-mute-button&gt;
1148
+ &lt;media-mute-button part="${parts.mute}"&gt;
975
1149
  ${icons.VolumeHigh()}
976
1150
  ${icons.VolumeMedium()}
977
1151
  ${icons.VolumeLow()}
@@ -981,67 +1155,100 @@ const MediaMuteButton = () =&gt; html`
981
1155
  &nbsp;
982
1156
  // prettier-ignore
983
1157
  const MediaCaptionsButton = (props: ThemeMuxTemplateProps) =&gt; html`
984
- &lt;media-captions-button default-showing="${!props.defaultHiddenCaptions}" &gt;
1158
+ &lt;media-captions-button default-showing="${!props.defaultHiddenCaptions}" part="${parts.captions}"&gt;
985
1159
  ${icons.CaptionsOff()}
986
1160
  ${icons.CaptionsOn()}
987
1161
  &lt;/media-captions-button&gt;`;
988
1162
  &nbsp;
989
1163
  // prettier-ignore
990
1164
  const MediaAirplayButton = () =&gt; html`
991
- &lt;media-airplay-button&gt;
1165
+ &lt;media-airplay-button part="${parts.airplay}"&gt;
992
1166
  ${icons.Airplay()}
993
1167
  &lt;/media-airplay-button&gt;`;
994
1168
  &nbsp;
995
1169
  // prettier-ignore
996
1170
  const MediaPipButton = () =&gt; html`
997
- &lt;media-pip-button&gt;
1171
+ &lt;media-pip-button part="${parts.pip}"&gt;
998
1172
  ${icons.PipEnter()}
999
1173
  ${icons.PipExit()}
1000
1174
  &lt;/media-pip-button&gt;`;
1001
1175
  &nbsp;
1002
1176
  // prettier-ignore
1003
1177
  const MediaFullscreenButton = () =&gt; html`
1004
- &lt;media-fullscreen-button&gt;
1178
+ &lt;media-fullscreen-button part="${parts.fullscreen}"&gt;
1005
1179
  ${icons.FullscreenEnter()}
1006
1180
  ${icons.FullscreenExit()}
1007
1181
  &lt;/media-fullscreen-button&gt;`;
1008
1182
  &nbsp;
1183
+ // prettier-ignore
1184
+ const MediaCastButton = () =&gt; html`
1185
+ &lt;media-cast-button part="${parts.cast}"&gt;
1186
+ ${icons.CastEnter()}
1187
+ ${icons.CastExit()}
1188
+ &lt;/media-cast-button&gt;`;
1189
+ &nbsp;
1190
+ // prettier-ignore
1191
+ const MediaPlaybackRateButton = () =&gt; html`
1192
+ &lt;media-playback-rate-button part="${parts.playbackRate}"&gt;
1193
+ &lt;/media-playback-rate-button&gt;`;
1194
+ &nbsp;
1195
+ // prettier-ignore
1196
+ const MediaVolumeRange = () =&gt; html`
1197
+ &lt;media-volume-range part="${parts.volumeRange}"&gt;
1198
+ &lt;/media-volume-range&gt;`;
1199
+ &nbsp;
1200
+ // prettier-ignore
1201
+ const MediaTimeRange = () =&gt; html`
1202
+ &lt;media-time-range part="${parts.timeRange}"&gt;
1203
+ &lt;/media-time-range&gt;`;
1204
+ &nbsp;
1205
+ // prettier-ignore
1206
+ const TimeDisplay = () =&gt; html`
1207
+ &lt;mxp-time-display part="${parts.timeDisplay}"&gt;
1208
+ &lt;/mxp-time-display&gt;`;
1209
+ &nbsp;
1210
+ // prettier-ignore
1009
1211
  export const AudioVodChrome = <span class="fstat-no" title="function not covered" >(props: ThemeMuxTemplateProps) =&gt; html`</span>
1010
1212
  <span class="cstat-no" title="statement not covered" > &lt;media-control-bar&gt;</span>
1011
- <span class="cstat-no" title="statement not covered" > ${MediaPlayButton()} ${MediaSeekBackwardButton(props)} ${MediaSeekForwardButton(props)}</span>
1012
- <span class="cstat-no" title="statement not covered" > &lt;mxp-time-display&gt;&lt;/mxp-time-display&gt;</span>
1013
- <span class="cstat-no" title="statement not covered" > &lt;media-time-range&gt;&lt;/media-time-range&gt;</span>
1213
+ <span class="cstat-no" title="statement not covered" > ${MediaPlayButton()}</span>
1214
+ <span class="cstat-no" title="statement not covered" > ${MediaSeekBackwardButton(props as SeekBackwardButtonProps)}</span>
1215
+ <span class="cstat-no" title="statement not covered" > ${MediaSeekForwardButton(props as SeekForwardButtonProps)}</span>
1216
+ <span class="cstat-no" title="statement not covered" > ${TimeDisplay()}</span>
1217
+ <span class="cstat-no" title="statement not covered" > ${MediaTimeRange()}</span>
1014
1218
  <span class="cstat-no" title="statement not covered" > ${MediaMuteButton()}</span>
1015
- <span class="cstat-no" title="statement not covered" > &lt;media-volume-range&gt;&lt;/media-volume-range&gt;</span>
1016
- <span class="cstat-no" title="statement not covered" > &lt;media-playback-rate-button&gt;&lt;/media-playback-rate-button&gt;</span>
1219
+ <span class="cstat-no" title="statement not covered" > ${MediaVolumeRange()}</span>
1220
+ <span class="cstat-no" title="statement not covered" > ${MediaPlaybackRateButton()}</span>
1017
1221
  <span class="cstat-no" title="statement not covered" > ${MediaAirplayButton()}</span>
1018
- &lt;media-cast-button&gt;&lt;/media-cast-button&gt;
1222
+ <span class="cstat-no" title="statement not covered" > ${MediaCastButton()}</span>
1019
1223
  &lt;/media-control-bar&gt;
1020
1224
  `;
1021
1225
  &nbsp;
1226
+ // prettier-ignore
1022
1227
  export const AudioDvrChrome = <span class="fstat-no" title="function not covered" >(props: ThemeMuxTemplateProps) =&gt; html`</span>
1023
1228
  <span class="cstat-no" title="statement not covered" > &lt;media-control-bar&gt;</span>
1024
1229
  <span class="cstat-no" title="statement not covered" > ${MediaPlayButton()}</span>
1025
1230
  <span class="cstat-no" title="statement not covered" > &lt;slot name="seek-to-live-button"&gt;&lt;/slot&gt;</span>
1026
- <span class="cstat-no" title="statement not covered" > ${MediaSeekBackwardButton(props)} ${MediaSeekForwardButton(props)}</span>
1027
- <span class="cstat-no" title="statement not covered" > &lt;mxp-time-display&gt;&lt;/mxp-time-display&gt;</span>
1028
- <span class="cstat-no" title="statement not covered" > &lt;media-time-range&gt;&lt;/media-time-range&gt;</span>
1231
+ <span class="cstat-no" title="statement not covered" > ${MediaSeekBackwardButton(props as SeekBackwardButtonProps)}</span>
1232
+ <span class="cstat-no" title="statement not covered" > ${MediaSeekForwardButton(props as SeekForwardButtonProps)}</span>
1233
+ <span class="cstat-no" title="statement not covered" > ${TimeDisplay()}</span>
1234
+ <span class="cstat-no" title="statement not covered" > ${MediaTimeRange()}</span>
1029
1235
  <span class="cstat-no" title="statement not covered" > ${MediaMuteButton()}</span>
1030
- <span class="cstat-no" title="statement not covered" > &lt;media-volume-range&gt;&lt;/media-volume-range&gt;</span>
1031
- <span class="cstat-no" title="statement not covered" > &lt;media-playback-rate-button&gt;&lt;/media-playback-rate-button&gt;</span>
1236
+ <span class="cstat-no" title="statement not covered" > ${MediaVolumeRange()}</span>
1237
+ <span class="cstat-no" title="statement not covered" > ${MediaPlaybackRateButton()}</span>
1032
1238
  <span class="cstat-no" title="statement not covered" > ${MediaAirplayButton()}</span>
1033
- &lt;media-cast-button&gt;&lt;/media-cast-button&gt;
1239
+ <span class="cstat-no" title="statement not covered" > ${MediaCastButton()}</span>
1034
1240
  &lt;/media-control-bar&gt;
1035
1241
  `;
1036
1242
  &nbsp;
1037
- export const AudioLiveChrome = <span class="fstat-no" title="function not covered" >(_props: ThemeMuxTemplateProps) =&gt; html`</span>
1243
+ // prettier-ignore
1244
+ export const AudioLiveChrome = <span class="fstat-no" title="function not covered" >() =&gt; html`</span>
1038
1245
  <span class="cstat-no" title="statement not covered" > &lt;media-control-bar&gt;</span>
1039
1246
  <span class="cstat-no" title="statement not covered" > ${MediaPlayButton()}</span>
1040
1247
  <span class="cstat-no" title="statement not covered" > &lt;slot name="seek-to-live-button"&gt;&lt;/slot&gt;</span>
1041
1248
  <span class="cstat-no" title="statement not covered" > ${MediaMuteButton()}</span>
1042
- <span class="cstat-no" title="statement not covered" > &lt;media-volume-range&gt;&lt;/media-volume-range&gt;</span>
1249
+ <span class="cstat-no" title="statement not covered" > ${MediaVolumeRange()}</span>
1043
1250
  <span class="cstat-no" title="statement not covered" > ${MediaAirplayButton()}</span>
1044
- &lt;media-cast-button&gt;&lt;/media-cast-button&gt;
1251
+ <span class="cstat-no" title="statement not covered" > ${MediaCastButton()}</span>
1045
1252
  &lt;/media-control-bar&gt;
1046
1253
  `;
1047
1254
  &nbsp;
@@ -1051,11 +1258,11 @@ export const VodChromeExtraSmall = (props: ThemeMuxTemplateProps) =&gt; html`
1051
1258
  ${MediaCaptionsButton(props)}
1052
1259
  &lt;div class="mxp-spacer"&gt;&lt;/div&gt;
1053
1260
  ${MediaAirplayButton()}
1054
- &lt;media-cast-button&gt;&lt;/media-cast-button&gt;
1261
+ ${MediaCastButton()}
1055
1262
  ${MediaPipButton()}
1056
1263
  &lt;/media-control-bar&gt;
1057
1264
  &lt;div slot="centered-chrome" class="mxp-center-controls"&gt;
1058
- ${MediaPlayButton()}
1265
+ ${MediaPlayButton({ part: parts.centerPlay })}
1059
1266
  &lt;/div&gt;
1060
1267
  &lt;media-control-bar&gt;
1061
1268
  ${MediaMuteButton()}
@@ -1069,21 +1276,21 @@ export const VodChromeSmall = (props: ThemeMuxTemplateProps) =&gt; html`
1069
1276
  &lt;media-control-bar slot="top-chrome" style="justify-content: flex-end;"&gt;
1070
1277
  ${MediaCaptionsButton(props)}
1071
1278
  ${MediaAirplayButton()}
1072
- &lt;media-cast-button&gt;&lt;/media-cast-button&gt;
1279
+ ${MediaCastButton()}
1073
1280
  ${MediaPipButton()}
1074
1281
  &lt;/media-control-bar&gt;
1075
1282
  &lt;div slot="centered-chrome" class="mxp-center-controls"&gt;
1076
- ${MediaSeekBackwardButton(props)}
1077
- ${MediaPlayButton()}
1078
- ${MediaSeekForwardButton(props)}
1283
+ ${MediaSeekBackwardButton({ ...props, part: parts.centerSeekBackward } as SeekBackwardButtonProps)}
1284
+ ${MediaPlayButton({ part: parts.centerPlay })}
1285
+ ${MediaSeekForwardButton({ ...props, part: parts.centerSeekForward } as SeekForwardButtonProps)}
1079
1286
  &lt;/div&gt;
1080
- &lt;media-time-range&gt;&lt;/media-time-range&gt;
1287
+ ${MediaTimeRange()}
1081
1288
  &lt;media-control-bar&gt;
1082
- &lt;mxp-time-display&gt;&lt;/mxp-time-display&gt;
1289
+ ${TimeDisplay()}
1083
1290
  ${MediaMuteButton()}
1084
- &lt;media-volume-range&gt;&lt;/media-volume-range&gt;
1291
+ ${MediaVolumeRange()}
1085
1292
  &lt;div class="mxp-spacer"&gt;&lt;/div&gt;
1086
- &lt;media-playback-rate-button&gt;&lt;/media-playback-rate-button&gt;
1293
+ ${MediaPlaybackRateButton()}
1087
1294
  ${MediaFullscreenButton()}
1088
1295
  &lt;div class="mxp-padding-2"&gt;&lt;/div&gt;
1089
1296
  &lt;/media-control-bar&gt;
@@ -1092,21 +1299,21 @@ export const VodChromeSmall = (props: ThemeMuxTemplateProps) =&gt; html`
1092
1299
  // prettier-ignore
1093
1300
  export const VodChromeLarge = (props: ThemeMuxTemplateProps) =&gt; html`
1094
1301
  &lt;div slot="centered-chrome" class="mxp-center-controls"&gt;
1095
- ${MediaPlayButton()}
1302
+ ${MediaPlayButton({ part: parts.centerPlay })}
1096
1303
  &lt;/div&gt;
1097
- &lt;media-time-range&gt;&lt;/media-time-range&gt;
1304
+ ${MediaTimeRange()}
1098
1305
  &lt;media-control-bar&gt;
1099
1306
  ${MediaPlayButton()}
1100
- ${MediaSeekBackwardButton(props)}
1101
- ${MediaSeekForwardButton(props)}
1102
- &lt;mxp-time-display&gt;&lt;/mxp-time-display&gt;
1307
+ ${MediaSeekBackwardButton(props as SeekBackwardButtonProps)}
1308
+ ${MediaSeekForwardButton(props as SeekForwardButtonProps)}
1309
+ ${TimeDisplay()}
1103
1310
  ${MediaMuteButton()}
1104
- &lt;media-volume-range&gt;&lt;/media-volume-range&gt;
1311
+ ${MediaVolumeRange()}
1105
1312
  &lt;div class="mxp-spacer"&gt;&lt;/div&gt;
1106
- &lt;media-playback-rate-button&gt;&lt;/media-playback-rate-button&gt;
1313
+ ${MediaPlaybackRateButton()}
1107
1314
  ${MediaCaptionsButton(props)}
1108
1315
  ${MediaAirplayButton()}
1109
- &lt;media-cast-button&gt;&lt;/media-cast-button&gt;
1316
+ ${MediaCastButton()}
1110
1317
  ${MediaPipButton()}
1111
1318
  ${MediaFullscreenButton()}
1112
1319
  &lt;div class="mxp-padding-2"&gt;&lt;/div&gt;
@@ -1123,15 +1330,15 @@ export const LiveChromeSmall = (props: ThemeMuxTemplateProps) =&gt; html`
1123
1330
  &lt;div class="mxp-spacer"&gt;&lt;/div&gt;
1124
1331
  ${MediaCaptionsButton(props)}
1125
1332
  ${MediaAirplayButton()}
1126
- &lt;media-cast-button&gt;&lt;/media-cast-button&gt;
1333
+ ${MediaCastButton()}
1127
1334
  ${MediaPipButton()}
1128
1335
  &lt;/media-control-bar&gt;
1129
1336
  &lt;div slot="centered-chrome" class="mxp-center-controls"&gt;
1130
- ${MediaPlayButton()}
1337
+ ${MediaPlayButton({ part: parts.centerPlay })}
1131
1338
  &lt;/div&gt;
1132
1339
  &lt;media-control-bar&gt;
1133
1340
  ${MediaMuteButton()}
1134
- &lt;media-volume-range&gt;&lt;/media-volume-range&gt;
1341
+ ${MediaVolumeRange()}
1135
1342
  &lt;div class="mxp-spacer"&gt;&lt;/div&gt;
1136
1343
  ${MediaFullscreenButton()}
1137
1344
  &lt;/media-control-bar&gt;
@@ -1143,15 +1350,15 @@ export const LiveChromeLarge = (props: ThemeMuxTemplateProps) =&gt; html`
1143
1350
  &lt;slot name="seek-to-live-button"&gt;&lt;/slot&gt;
1144
1351
  &lt;/media-control-bar&gt;
1145
1352
  &lt;div slot="centered-chrome" class="mxp-center-controls"&gt;
1146
- ${MediaPlayButton()}
1353
+ ${MediaPlayButton({ part: parts.centerPlay })}
1147
1354
  &lt;/div&gt;
1148
1355
  &lt;media-control-bar&gt;
1149
1356
  ${MediaMuteButton()}
1150
- &lt;media-volume-range&gt;&lt;/media-volume-range&gt;
1357
+ ${MediaVolumeRange()}
1151
1358
  &lt;div class="mxp-spacer"&gt;&lt;/div&gt;
1152
1359
  ${MediaCaptionsButton(props)}
1153
1360
  ${MediaAirplayButton()}
1154
- &lt;media-cast-button&gt;&lt;/media-cast-button&gt;
1361
+ ${MediaCastButton()}
1155
1362
  ${MediaPipButton()}
1156
1363
  ${MediaFullscreenButton()}
1157
1364
  &lt;/media-control-bar&gt;
@@ -1165,18 +1372,18 @@ export const DvrChromeSmall = <span class="fstat-no" title="function not covered
1165
1372
  <span class="cstat-no" title="statement not covered" > &lt;media-control-bar slot="top-chrome" style="justify-content: flex-end;"&gt;</span>
1166
1373
  <span class="cstat-no" title="statement not covered" > ${MediaCaptionsButton(props)}</span>
1167
1374
  <span class="cstat-no" title="statement not covered" > ${MediaAirplayButton()}</span>
1168
- <span class="cstat-no" title="statement not covered" > &lt;media-cast-button&gt;&lt;/media-cast-button&gt;</span>
1375
+ <span class="cstat-no" title="statement not covered" > ${MediaCastButton()}</span>
1169
1376
  <span class="cstat-no" title="statement not covered" > ${MediaPipButton()}</span>
1170
1377
  <span class="cstat-no" title="statement not covered" > &lt;/media-control-bar&gt;</span>
1171
1378
  <span class="cstat-no" title="statement not covered" > &lt;div slot="centered-chrome" class="mxp-center-controls"&gt;</span>
1172
- <span class="cstat-no" title="statement not covered" > ${MediaSeekBackwardButton(props)}</span>
1173
- <span class="cstat-no" title="statement not covered" > ${MediaPlayButton()}</span>
1174
- <span class="cstat-no" title="statement not covered" > ${MediaSeekForwardButton(props)}</span>
1379
+ <span class="cstat-no" title="statement not covered" > ${MediaSeekBackwardButton({ ...props, part: parts.centerSeekBackward } as SeekBackwardButtonProps)}</span>
1380
+ <span class="cstat-no" title="statement not covered" > ${MediaPlayButton({ part: parts.centerPlay })}</span>
1381
+ <span class="cstat-no" title="statement not covered" > ${MediaSeekForwardButton({ ...props, part: parts.centerSeekForward } as SeekForwardButtonProps)}</span>
1175
1382
  <span class="cstat-no" title="statement not covered" > &lt;/div&gt;</span>
1176
- <span class="cstat-no" title="statement not covered" > &lt;media-time-range&gt;&lt;/media-time-range&gt;</span>
1383
+ <span class="cstat-no" title="statement not covered" > ${MediaTimeRange()}</span>
1177
1384
  <span class="cstat-no" title="statement not covered" > &lt;media-control-bar&gt;</span>
1178
1385
  <span class="cstat-no" title="statement not covered" > ${MediaMuteButton()}</span>
1179
- <span class="cstat-no" title="statement not covered" > &lt;media-volume-range&gt;&lt;/media-volume-range&gt;</span>
1386
+ <span class="cstat-no" title="statement not covered" > ${MediaVolumeRange()}</span>
1180
1387
  <span class="cstat-no" title="statement not covered" > &lt;slot name="seek-to-live-button"&gt;&lt;/slot&gt;</span>
1181
1388
  <span class="cstat-no" title="statement not covered" > &lt;div class="mxp-spacer"&gt;&lt;/div&gt;</span>
1182
1389
  <span class="cstat-no" title="statement not covered" > ${MediaFullscreenButton()}</span>
@@ -1187,67 +1394,25 @@ export const DvrChromeSmall = <span class="fstat-no" title="function not covered
1187
1394
  // prettier-ignore
1188
1395
  export const DvrChromeLarge = <span class="fstat-no" title="function not covered" >(props: ThemeMuxTemplateProps) =&gt; html`</span>
1189
1396
  <span class="cstat-no" title="statement not covered" > &lt;div slot="centered-chrome" class="mxp-center-controls"&gt;</span>
1190
- <span class="cstat-no" title="statement not covered" > ${MediaPlayButton()}</span>
1397
+ <span class="cstat-no" title="statement not covered" > ${MediaPlayButton({ part: parts.centerPlay })}</span>
1191
1398
  <span class="cstat-no" title="statement not covered" > &lt;/div&gt;</span>
1192
- <span class="cstat-no" title="statement not covered" > &lt;media-time-range&gt;&lt;/media-time-range&gt;</span>
1399
+ <span class="cstat-no" title="statement not covered" > ${MediaTimeRange()}</span>
1193
1400
  <span class="cstat-no" title="statement not covered" > &lt;media-control-bar&gt;</span>
1194
1401
  <span class="cstat-no" title="statement not covered" > ${MediaPlayButton()}</span>
1195
- <span class="cstat-no" title="statement not covered" > ${MediaSeekBackwardButton(props)}</span>
1196
- <span class="cstat-no" title="statement not covered" > ${MediaSeekForwardButton(props)}</span>
1402
+ <span class="cstat-no" title="statement not covered" > ${MediaSeekBackwardButton(props as SeekBackwardButtonProps)}</span>
1403
+ <span class="cstat-no" title="statement not covered" > ${MediaSeekForwardButton(props as SeekForwardButtonProps)}</span>
1197
1404
  <span class="cstat-no" title="statement not covered" > ${MediaMuteButton()}</span>
1198
- <span class="cstat-no" title="statement not covered" > &lt;media-volume-range&gt;&lt;/media-volume-range&gt;</span>
1405
+ <span class="cstat-no" title="statement not covered" > ${MediaVolumeRange()}</span>
1199
1406
  <span class="cstat-no" title="statement not covered" > &lt;slot name="seek-to-live-button"&gt;&lt;/slot&gt;</span>
1200
1407
  <span class="cstat-no" title="statement not covered" > &lt;div class="mxp-spacer"&gt;&lt;/div&gt;</span>
1201
1408
  <span class="cstat-no" title="statement not covered" > ${MediaCaptionsButton(props)}</span>
1202
1409
  <span class="cstat-no" title="statement not covered" > ${MediaAirplayButton()}</span>
1203
- <span class="cstat-no" title="statement not covered" > &lt;media-cast-button&gt;&lt;/media-cast-button&gt;</span>
1410
+ <span class="cstat-no" title="statement not covered" > ${MediaCastButton()}</span>
1204
1411
  <span class="cstat-no" title="statement not covered" > ${MediaPipButton()}</span>
1205
1412
  <span class="cstat-no" title="statement not covered" > ${MediaFullscreenButton()}</span>
1206
1413
  &lt;div class="mxp-padding-2"&gt;&lt;/div&gt;
1207
1414
  &lt;/media-control-bar&gt;
1208
1415
  `;
1209
- &nbsp;
1210
- function getProps(el: MediaThemeMux, state?: any): ThemeMuxTemplateProps {
1211
- return {
1212
- audio: el.hasAttribute('audio'),
1213
- streamType: el.getAttribute('stream-type'),
1214
- playerSize: el.getAttribute('player-size'),
1215
- defaultHiddenCaptions: el.hasAttribute('default-hidden-captions'),
1216
- forwardSeekOffset: el.getAttribute('forward-seek-offset'),
1217
- backwardSeekOffset: el.getAttribute('backward-seek-offset'),
1218
- ...state,
1219
- };
1220
- }
1221
- &nbsp;
1222
- class MediaThemeMux extends HTMLElement {
1223
- static get observedAttributes() {
1224
- return [
1225
- 'audio',
1226
- 'stream-type',
1227
- 'player-size',
1228
- 'default-hidden-captions',
1229
- 'forward-seek-offset',
1230
- 'backward-seek-offset',
1231
- ];
1232
- }
1233
- &nbsp;
1234
- constructor() {
1235
- super();
1236
- &nbsp;
1237
- this.attachShadow({ mode: 'open' });
1238
- render(template(getProps(this)), this.shadowRoot as Node);
1239
- }
1240
- &nbsp;
1241
- attributeChangedCallback() {
1242
- render(template(getProps(this)), this.shadowRoot as Node);
1243
- }
1244
- }
1245
- &nbsp;
1246
- if (!customElements.get('media-theme-mux')) {
1247
- customElements.define('media-theme-mux', MediaThemeMux);
1248
- }
1249
- &nbsp;
1250
- export default MediaThemeMux;
1251
1416
  &nbsp;</pre></td></tr></table></pre>
1252
1417
 
1253
1418
  <div class='push'></div><!-- for sticky footer -->
@@ -1255,7 +1420,7 @@ export default MediaThemeMux;
1255
1420
  <div class='footer quiet pad2 space-top1 center small'>
1256
1421
  Code coverage generated by
1257
1422
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
1258
- at Mon Jul 11 2022 16:36:07 GMT+0000 (Coordinated Universal Time)
1423
+ at Wed Aug 03 2022 19:24:53 GMT+0000 (Coordinated Universal Time)
1259
1424
  </div>
1260
1425
  <script src="../../prettify.js"></script>
1261
1426
  <script>