fix(mux-player): Add additional parts for export. Use constants. Upda… (

#813) …te tests.
muxinc · Nov 9, 2023 · 4ad76a3 · 4ad76a3 · vercel · Nov 9, 2023
1 parent 4a8da62
commit 4ad76a3
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 15 deletions.
diff --git a/packages/mux-player/src/template.ts b/packages/mux-player/src/template.ts
@@ -27,6 +27,51 @@ const getHotKeys = (props: MuxTemplateProps) => {
 // Warning: remember to update `ThemeAttributeNames` in index.ts
 // if you add or remove attributes in <media-theme>.
 
+// NOTE: Make sure to add/update internal parts here so they're available for Mux Player users for advanced CSS customization!
+export const Parts = {
+  // media container regions
+  TOP: 'top',
+  CENTER: 'center',
+  BOTTOM: 'bottom',
+  // media container layers
+  LAYER: 'layer', // Generic
+  MEDIA_LAYER: 'media-layer',
+  POSTER_LAYER: 'poster-layer',
+  VERTICAL_LAYER: 'vertical-layer',
+  CENTERED_LAYER: 'centered-layer',
+  GESTURE_LAYER: 'gesture-layer',
+  CONTROLLER_LAYER: 'controller',
+  // component/subcomponent types
+  BUTTON: 'button',
+  RANGE: 'range',
+  DISPLAY: 'display',
+  CONTROL_BAR: 'control-bar',
+  SELECTMENU: 'selectmenu',
+  LISTBOX: 'listbox',
+  OPTION: 'option',
+  // component/subcomponent purposes
+  POSTER: 'poster',
+  LIVE: 'live',
+  PLAY: 'play',
+  PRE_PLAY: 'pre-play',
+  SEEK_BACKWARD: 'seek-backward',
+  SEEK_FORWARD: 'seek-forward',
+  MUTE: 'mute',
+  CAPTIONS: 'captions',
+  AIRPLAY: 'airplay',
+  PIP: 'pip',
+  FULLSCREEN: 'fullscreen',
+  CAST: 'cast',
+  PLAYBACK_RATE: 'playback-rate',
+  VOLUME: 'volume',
+  TIME: 'time',
+  TITLE: 'title',
+  AUDIO_TRACK: 'audio-track',
+  RENDITION: 'rendition',
+};
+
+export const partsListStr = Object.values(Parts).join(', ');
+
 export const content = (props: MuxTemplateProps) => html`
   <media-theme
     template="${props.themeTemplate || false}"
@@ -49,7 +94,7 @@ export const content = (props: MuxTemplateProps) => html`
     defaultshowremainingtime="${props.defaultShowRemainingTime ?? false}"
     hideduration="${props.hideDuration ?? false}"
     title="${props.title ?? false}"
-    exportparts="top, center, bottom, layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer, controller, poster, live, play, button, seek-backward, seek-forward, mute, captions, airplay, pip, fullscreen, cast, playback-rate, volume, range, time, display, control-bar"
+    exportparts="${partsListStr}"
   >
     <mux-video
       slot="media"

diff --git a/packages/mux-player/src/themes/classic/classic.html b/packages/mux-player/src/themes/classic/classic.html
@@ -332,7 +332,7 @@
           <path d="M2.25 14.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm6.75 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
         </svg>
       </media-rendition-button>
-      <media-rendition-listbox slot="listbox" part="bottom rendition listbox">
+      <media-rendition-listbox slot="listbox" exportparts="option" part="bottom rendition listbox">
         <div slot="header">Quality</div>
       </media-rendition-listbox>
     </media-rendition-selectmenu>
@@ -346,7 +346,7 @@
           <path d="M7.25 9.75a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 .75-.75Zm3-3a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 .75-.75Zm3 2a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0v-5a.75.75 0 0 1 .75-.75Zm3-1a.75.75 0 0 1 .75.75v7a.75.75 0 0 1-1.5 0v-7a.75.75 0 0 1 .75-.75Z"/>
         </svg>
       </media-audio-track-button>
-      <media-audio-track-listbox slot="listbox" part="bottom audio-track listbox">
+      <media-audio-track-listbox slot="listbox" exportparts="option" part="bottom audio-track listbox">
         <div slot="header">Audio</div>
       </media-audio-track-listbox>
     </media-audio-track-selectmenu>
@@ -362,7 +362,7 @@
           <path d="M22.832 5.68a2.58 2.58 0 0 0-2.3-2.5c-1.81-.12-4.67-.18-7.53-.18-2.86 0-5.72.06-7.53.18a2.58 2.58 0 0 0-2.3 2.5c-.23 4.21-.23 8.43 0 12.64a2.58 2.58 0 0 0 2.3 2.5c1.81.12 4.67.18 7.53.18 2.86 0 5.72-.06 7.53-.18a2.58 2.58 0 0 0 2.3-2.5c.23-4.21.23-8.43 0-12.64Zm-1.49 12.53a1.11 1.11 0 0 1-.91 1.11c-1.67.11-4.45.18-7.43.18-2.98 0-5.76-.07-7.43-.18a1.11 1.11 0 0 1-.91-1.11c-.21-4.137-.21-8.283 0-12.42a1.11 1.11 0 0 1 .91-1.11c1.67-.11 4.43-.18 7.43-.18s5.76.07 7.43.18a1.11 1.11 0 0 1 .91 1.11c.21 4.137.21 8.283 0 12.42ZM10.843 14a1.55 1.55 0 0 1-.76.18 1.57 1.57 0 0 1-.71-.18 1.69 1.69 0 0 1-.57-.42 2.099 2.099 0 0 1-.38-.58 2.47 2.47 0 0 1 0-1.64 2 2 0 0 1 .39-.66 1.73 1.73 0 0 1 .58-.42c.23-.103.479-.158.73-.16.241-.004.48.044.7.14.199.088.373.222.51.39l1.08-.89a2.179 2.179 0 0 0-.47-.44 2.81 2.81 0 0 0-.54-.32 2.91 2.91 0 0 0-.58-.15 2.71 2.71 0 0 0-.56 0 4.08 4.08 0 0 0-1.38.15 3.27 3.27 0 0 0-1.09.67 3.14 3.14 0 0 0-.71 1.06 3.62 3.62 0 0 0-.26 1.39 3.57 3.57 0 0 0 .26 1.38 3 3 0 0 0 .71 1.06c.316.293.687.52 1.09.67.443.16.91.238 1.38.23a3.2 3.2 0 0 0 1.28-.27c.401-.183.747-.47 1-.83l-1.17-.88a1.42 1.42 0 0 1-.53.52Zm6.62 0a1.58 1.58 0 0 1-.76.18 1.54 1.54 0 0 1-.7-.18 1.69 1.69 0 0 1-.57-.42 2.12 2.12 0 0 1-.43-.58 2.29 2.29 0 0 1 .39-2.3 1.84 1.84 0 0 1 1.32-.58c.241-.003.48.045.7.14.199.088.373.222.51.39l1.08-.92a2.43 2.43 0 0 0-.47-.44 3.22 3.22 0 0 0-.53-.29 2.999 2.999 0 0 0-.57-.15 2.87 2.87 0 0 0-.57 0 4.06 4.06 0 0 0-1.36.15 3.17 3.17 0 0 0-1.09.67 3 3 0 0 0-.72 1.06 3.62 3.62 0 0 0-.25 1.39 3.57 3.57 0 0 0 .25 1.38c.16.402.405.764.72 1.06a3.17 3.17 0 0 0 1.09.67c.44.16.904.237 1.37.23.441 0 .877-.092 1.28-.27a2.45 2.45 0 0 0 1-.83l-1.15-.85a1.49 1.49 0 0 1-.54.49Z"/>
         </svg>
       </media-captions-button>
-      <media-captions-listbox slot="listbox" part="bottom captions listbox"></media-captions-listbox>
+      <media-captions-listbox slot="listbox" exportparts="option" part="bottom captions listbox"></media-captions-listbox>
     </media-captions-selectmenu>
   </template>
 

diff --git a/packages/mux-player/src/themes/gerwig/gerwig.html b/packages/mux-player/src/themes/gerwig/gerwig.html
@@ -642,7 +642,7 @@
           />
         </svg>
       </media-captions-button>
-      <media-captions-listbox slot="listbox" part="bottom captions listbox">
+      <media-captions-listbox slot="listbox" exportparts="option" part="bottom captions listbox">
         <div slot="select-indicator">
           <style>
             .listbox-indicator {
@@ -744,7 +744,11 @@
       aria-disabled="{{disabled}}"
     >
       <media-playback-rate-button slot="button" part="bottom playback-rate button"></media-playback-rate-button>
-      <media-playback-rate-listbox slot="listbox" part="bottom playback-rate listbox"></media-playback-rate-listbox>
+      <media-playback-rate-listbox
+        slot="listbox"
+        exportparts="option"
+        part="bottom playback-rate listbox"
+      ></media-playback-rate-listbox>
     </media-playback-rate-selectmenu>
   </template>
 
@@ -784,7 +788,7 @@
           />
         </svg>
       </media-audio-track-button>
-      <media-audio-track-listbox slot="listbox" part="bottom audio-track listbox">
+      <media-audio-track-listbox slot="listbox" exportparts="option" part="bottom audio-track listbox">
         <div slot="select-indicator">
           <style>
             .listbox-indicator {
@@ -819,7 +823,7 @@
           />
         </svg>
       </media-rendition-button>
-      <media-rendition-listbox slot="listbox" part="bottom rendition listbox">
+      <media-rendition-listbox slot="listbox" exportparts="option" part="bottom rendition listbox">
         <div slot="select-indicator">
           <style>
             .listbox-indicator {

diff --git a/packages/mux-player/test/template.test.js b/packages/mux-player/test/template.test.js
@@ -1,20 +1,18 @@
 import { assert } from '@open-wc/testing';
-import { content } from '../src/template.ts';
+import { content, partsListStr } from '../src/template.ts';
 import { render } from '../src/html.ts';
 
 const minify = (html) => html.trim().replace(/>\s+</g, '><');
 
 describe('<mux-player> template render', () => {
   const div = document.createElement('div');
 
-  const exportParts = `top, center, bottom, layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer, controller, poster, live, play, button, seek-backward, seek-forward, mute, captions, airplay, pip, fullscreen, cast, playback-rate, volume, range, time, display, control-bar`;
-
   it('default template without props', function () {
     render(content({}), div);
     assert.equal(
       normalizeAttributes(minify(div.innerHTML)),
       normalizeAttributes(
-        `<media-theme defaultsubtitles="" disabled="" exportparts="${exportParts}" nohotkeys=""><mux-video crossorigin="" exportparts="video" playsinline="" slot="media"></mux-video><slot name="poster" slot="poster"><media-poster-image exportparts="poster, img" part="poster"></media-poster-image></slot><mxp-dialog no-auto-hide=""><p></p></mxp-dialog></media-theme>`
+        `<media-theme defaultsubtitles="" disabled="" exportparts="${partsListStr}" nohotkeys=""><mux-video crossorigin="" exportparts="video" playsinline="" slot="media"></mux-video><slot name="poster" slot="poster"><media-poster-image exportparts="poster, img" part="poster"></media-poster-image></slot><mxp-dialog no-auto-hide=""><p></p></mxp-dialog></media-theme>`
       )
     );
   });
@@ -36,7 +34,7 @@ describe('<mux-player> template render', () => {
     assert.equal(
       normalizeAttributes(minify(div.innerHTML)),
       normalizeAttributes(
-        `<media-theme defaultsubtitles="" disabled="" exportparts="${exportParts}" hotkeys=" noarrowleft noarrowright" nohotkeys=""><mux-video crossorigin="" exportparts="video" playsinline="" slot="media" stream-type="live" target-live-window="0"></mux-video><slot name="poster" slot="poster"><media-poster-image exportparts="poster, img" part="poster"></media-poster-image></slot><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme>`
+        `<media-theme defaultsubtitles="" disabled="" exportparts="${partsListStr}" hotkeys=" noarrowleft noarrowright" nohotkeys=""><mux-video crossorigin="" exportparts="video" playsinline="" slot="media" stream-type="live" target-live-window="0"></mux-video><slot name="poster" slot="poster"><media-poster-image exportparts="poster, img" part="poster"></media-poster-image></slot><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme>`
       )
     );
   });
@@ -53,7 +51,7 @@ describe('<mux-player> template render', () => {
     assert.equal(
       normalizeAttributes(minify(div.innerHTML)),
       normalizeAttributes(
-        `<media-theme defaultsubtitles="" disabled="" exportparts="${exportParts}" nohotkeys=""><mux-video crossorigin="" exportparts="video" playsinline="" slot="media" stream-type="on-demand"></mux-video><slot name="poster" slot="poster"><media-poster-image exportparts="poster, img" part="poster"></media-poster-image></slot><mxp-dialog no-auto-hide=""><p></p></mxp-dialog></media-theme>`
+        `<media-theme defaultsubtitles="" disabled="" exportparts="${partsListStr}" nohotkeys=""><mux-video crossorigin="" exportparts="video" playsinline="" slot="media" stream-type="on-demand"></mux-video><slot name="poster" slot="poster"><media-poster-image exportparts="poster, img" part="poster"></media-poster-image></slot><mxp-dialog no-auto-hide=""><p></p></mxp-dialog></media-theme>`
       )
     );
   });
@@ -74,7 +72,7 @@ describe('<mux-player> template render', () => {
     assert.equal(
       normalizeAttributes(minify(div.innerHTML)),
       normalizeAttributes(
-        `<media-theme defaultsubtitles="" disabled="" exportparts="${exportParts}" nohotkeys=""><mux-video crossorigin="" exportparts="video" playsinline="" slot="media" stream-type="on-demand"></mux-video><slot name="poster" slot="poster"><media-poster-image exportparts="poster, img" part="poster"></media-poster-image></slot><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme>`
+        `<media-theme defaultsubtitles="" disabled="" exportparts="${partsListStr}" nohotkeys=""><mux-video crossorigin="" exportparts="video" playsinline="" slot="media" stream-type="on-demand"></mux-video><slot name="poster" slot="poster"><media-poster-image exportparts="poster, img" part="poster"></media-poster-image></slot><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme>`
       )
     );
   });