Merge pull request #523 from luwes/template-prop

fix: allow setting theme template via property

packages/mux-player/src/html.ts

@@ -74,6 +74,19 @@ export function processPropertyIdentity(part: Part, value: unknown): boolean {
   return true;
 }
 
+export function processElementAttribute(part: Part, value: unknown): boolean {
+  // This allows us to set the media-theme template property directly.
+  if (part instanceof AttrPart && value instanceof Element) {
+    const element = part.element as any;
+    if (element[part.attributeName] !== value) {
+      part.element.removeAttributeNS(part.attributeNamespace, part.attributeName);
+      element[part.attributeName] = value;
+    }
+    return true;
+  }
+  return false;
+}
+
 export function processBooleanAttribute(part: Part, value: unknown): boolean {
   if (
     typeof value === 'boolean' &&
@@ -100,7 +113,8 @@ export function processBooleanNode(part: Part, value: unknown): boolean {
 }
 
 export function processPart(part: Part, value: unknown): void {
-  processBooleanAttribute(part, value) ||
+  processElementAttribute(part, value) ||
+    processBooleanAttribute(part, value) ||
     processEvent(part, value) ||
     processBooleanNode(part, value) ||
     processSubTemplate(part, value) ||

packages/mux-player/src/template.ts

@@ -21,7 +21,6 @@ export const template = (props: MuxTemplateProps) => html`
   <style>
     ${cssStr}
   </style>
-  ${muxTemplate.content.cloneNode(true)}
   ${content(props)}
 `;
 
@@ -50,7 +49,7 @@ const getHotKeys = (props: MuxTemplateProps) => {
 
 export const content = (props: MuxTemplateProps) => html`
   <media-theme
-    template="${props.theme ?? 'media-theme-mux'}"
+    template="${props.theme ?? muxTemplate.content.children[0]}"
     class="size-${props.playerSize}${props.secondaryColor ? ' two-tone' : ''}"
     player-size="${props.playerSize ?? false}"
     layout="${getLayout(props)}"

packages/mux-player/test/template.test.js

@@ -14,7 +14,7 @@ describe('<mux-player> template render', () => {
     assert.equal(
       normalizeAttributes(minify(div.innerHTML)),
       normalizeAttributes(
-        `<media-theme template="media-theme-mux" class="size-" default-showing-captions="" disabled="" nohotkeys="" layout="on-demand" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" exportparts="video"></mux-video><mxp-dialog no-auto-hide=""><p></p></mxp-dialog></media-theme>`
+        `<media-theme class="size-" default-showing-captions="" disabled="" nohotkeys="" layout="on-demand" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" exportparts="video"></mux-video><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 hotkeys=" noarrowleft noarrowright" template="media-theme-mux" class="size-extra-small" layout="live extra-small" player-size="extra-small" default-showing-captions="" disabled="" nohotkeys="" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" stream-type="live" cast-stream-type="live" exportparts="video"></mux-video><button aria-disabled="true" disabled="" slot="seek-live" part="top seek-live button">\n          \n          Live\n        </button><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme>`
+        `<media-theme hotkeys=" noarrowleft noarrowright" class="size-extra-small" layout="live extra-small" player-size="extra-small" default-showing-captions="" disabled="" nohotkeys="" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" stream-type="live" cast-stream-type="live" exportparts="video"></mux-video><button aria-disabled="true" disabled="" slot="seek-live" part="top seek-live button">\n          \n          Live\n        </button><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme>`
       )
     );
   });
@@ -54,7 +54,7 @@ describe('<mux-player> template render', () => {
     assert.equal(
       normalizeAttributes(minify(div.innerHTML)),
       normalizeAttributes(
-        `<media-theme template="media-theme-mux" class="size-large" default-showing-captions="" disabled="" nohotkeys="" layout="on-demand large" player-size="large" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" stream-type="on-demand" exportparts="video"></mux-video><mxp-dialog no-auto-hide=""><p></p></mxp-dialog></media-theme>`
+        `<media-theme class="size-large" default-showing-captions="" disabled="" nohotkeys="" layout="on-demand large" player-size="large" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" stream-type="on-demand" exportparts="video"></mux-video><mxp-dialog no-auto-hide=""><p></p></mxp-dialog></media-theme>`
       )
     );
   });
@@ -76,7 +76,7 @@ describe('<mux-player> template render', () => {
     assert.equal(
       normalizeAttributes(minify(div.innerHTML)),
       normalizeAttributes(
-        `<media-theme template="media-theme-mux" class="size-large" layout="on-demand large" player-size="large" default-showing-captions="" disabled="" nohotkeys="" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" stream-type="on-demand" exportparts="video"></mux-video><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme>`
+        `<media-theme class="size-large" layout="on-demand large" player-size="large" default-showing-captions="" disabled="" nohotkeys="" exportparts="${exportParts}"><mux-video slot="media" crossorigin="" playsinline="" stream-type="on-demand" exportparts="video"></mux-video><mxp-dialog no-auto-hide="" open=""><h3>Errr</h3><p></p></mxp-dialog></media-theme>`
       )
     );
   });