Merge branch 'main' into feat/new-default-theme

muxinc · Aug 10, 2023 · 6a1b341 · 6a1b341
2 parents 0c81993 + b3191d7
commit 6a1b341
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "clean": "turbo run clean",
     "lint": "turbo run lint --filter '!./examples/*'",
     "test": "turbo run test --filter '!./examples/*'",
-    "dev": "turbo run dev --filter '!./examples/*'",
+    "dev": "turbo run dev --concurrency=20 --filter '!./examples/*'",
     "build:packages": "turbo run build --filter '!./examples/*'",
     "build": "turbo run build",
     "i18n": "turbo run i18n",

diff --git a/packages/mux-active-viewer-count/package.json b/packages/mux-active-viewer-count/package.json
@@ -68,6 +68,8 @@
     "downlevel-dts": "^0.11.0",
     "esbuild": "^0.15.7",
     "eslint": "^8.24.0",
+    "hls.js": "^1.4.8",
+    "mux-embed": "^4.24.0",
     "npm-run-all": "^4.1.5",
     "replace": "^1.2.1",
     "shx": "^0.3.4",

diff --git a/packages/mux-audio/package.json b/packages/mux-audio/package.json
@@ -74,6 +74,8 @@
     "downlevel-dts": "^0.11.0",
     "esbuild": "^0.15.7",
     "eslint": "^8.24.0",
+    "hls.js": "^1.4.8",
+    "mux-embed": "^4.24.0",
     "npm-run-all": "^4.1.5",
     "replace": "^1.2.1",
     "shx": "^0.3.4",

diff --git a/packages/mux-player/package.json b/packages/mux-player/package.json
@@ -104,6 +104,8 @@
     "downlevel-dts": "^0.11.0",
     "esbuild": "^0.15.7",
     "eslint": "^8.24.0",
+    "hls.js": "^1.4.8",
+    "mux-embed": "^4.24.0",
     "npm-run-all": "^4.1.5",
     "replace": "^1.2.1",
     "shx": "^0.3.4",

diff --git a/packages/mux-player/src/index.ts b/packages/mux-player/src/index.ts
@@ -154,7 +154,10 @@ function getThemeTemplate(el: MuxPlayerElement) {
   if (themeName) {
     // @ts-ignore
     const templateElement = el.getRootNode()?.getElementById?.(themeName);
-    if (templateElement) return templateElement;
+    // NOTE: Since folks may unknowingly use matching ids for elements other than their theme
+    // (intending to use path two for template identification, below), make sure the matching
+    // element is, in fact, an HTMLTemplateElement (CJP)
+    if (templateElement && templateElement instanceof HTMLTemplateElement) return templateElement;
 
     if (!themeName.startsWith('media-theme-')) {
       themeName = `media-theme-${themeName}`;

diff --git a/packages/mux-player/src/template.ts b/packages/mux-player/src/template.ts
@@ -48,7 +48,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, poster, live, play, button, seek-backward, seek-forward, mute, captions, airplay, pip, fullscreen, cast, playback-rate, volume, range, time, display"
+    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"
   >
     <mux-video
       slot="media"
@@ -97,6 +97,7 @@ export const content = (props: MuxTemplateProps) => html`
     <media-poster-image
       slot="poster"
       part="poster"
+      exportparts="poster, img"
       src="${props.poster === '' ? false : props.poster ?? false}"
       placeholder-src="${props.placeholder ?? false}"
     ></media-poster-image>

diff --git a/packages/mux-player/src/themes/classic/classic.html b/packages/mux-player/src/themes/classic/classic.html
@@ -481,6 +481,7 @@
   </template>
 
   <media-controller
+    part="controller"
     defaultstreamtype="{{defaultstreamtype ?? 'on-demand'}}"
     breakpoints="sm:300 md:700"
     gesturesdisabled="{{disabled}}"

diff --git a/packages/mux-player/test/template.test.js b/packages/mux-player/test/template.test.js
@@ -7,14 +7,14 @@ 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, poster, live, play, button, seek-backward, seek-forward, mute, captions, airplay, pip, fullscreen, cast, playback-rate, volume, range, time, display`;
+  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`;
 
   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><media-poster-image part="poster" slot="poster"></media-poster-image><mxp-dialog no-auto-hide=""><p></p></mxp-dialog></media-theme>`
+        `<media-theme defaultsubtitles="" disabled="" exportparts="${exportParts}" nohotkeys=""><mux-video crossorigin="" exportparts="video" playsinline="" slot="media"></mux-video><media-poster-image part="poster" exportparts="poster, img" slot="poster"></media-poster-image><mxp-dialog no-auto-hide=""><p></p></mxp-dialog></media-theme>`
       )
     );
   });
@@ -36,7 +36,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><media-poster-image part="poster" slot="poster"></media-poster-image><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme>`
+        `<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><media-poster-image part="poster" exportparts="poster, img" slot="poster"></media-poster-image><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme>`
       )
     );
   });
@@ -53,7 +53,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><media-poster-image part="poster" slot="poster"></media-poster-image><mxp-dialog no-auto-hide=""><p></p></mxp-dialog></media-theme>`
+        `<media-theme defaultsubtitles="" disabled="" exportparts="${exportParts}" nohotkeys=""><mux-video crossorigin="" exportparts="video" playsinline="" slot="media" stream-type="on-demand"></mux-video><media-poster-image part="poster" exportparts="poster, img" slot="poster"></media-poster-image><mxp-dialog no-auto-hide=""><p></p></mxp-dialog></media-theme>`
       )
     );
   });
@@ -74,7 +74,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><media-poster-image part="poster" slot="poster"></media-poster-image><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme>`
+        `<media-theme defaultsubtitles="" disabled="" exportparts="${exportParts}" nohotkeys=""><mux-video crossorigin="" exportparts="video" playsinline="" slot="media" stream-type="on-demand"></mux-video><media-poster-image part="poster" exportparts="poster, img" slot="poster"></media-poster-image><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme>`
       )
     );
   });

diff --git a/packages/mux-uploader/package.json b/packages/mux-uploader/package.json
@@ -68,6 +68,8 @@
     "copyfiles": "^2.4.1",
     "downlevel-dts": "^0.11.0",
     "esbuild": "^0.15.7",
+    "hls.js": "^1.4.8",
+    "mux-embed": "^4.24.0",
     "npm-run-all": "^4.1.5",
     "replace": "^1.2.1",
     "shx": "^0.3.4",

diff --git a/packages/mux-video/package.json b/packages/mux-video/package.json
@@ -76,6 +76,8 @@
     "downlevel-dts": "^0.11.0",
     "esbuild": "^0.15.7",
     "eslint": "^8.24.0",
+    "hls.js": "^1.4.8",
+    "mux-embed": "^4.24.0",
     "npm-run-all": "^4.1.5",
     "replace": "^1.2.1",
     "shx": "^0.3.4",

diff --git a/shared/test-esm-exports/package.json b/shared/test-esm-exports/package.json
@@ -14,6 +14,8 @@
     "mux-embed": "*"
   },
   "devDependencies": {
-    "esbuild": "^0.15.7"
+    "esbuild": "^0.15.7",
+    "hls.js": "^1.4.8",
+    "mux-embed": "^4.24.0"
   }
 }