feat(mux-player): Add prefer cmcd attr and prop.

muxinc · Nov 2, 2022 · 308e9a7 · 308e9a7
1 parent 25f0fb7
commit 308e9a7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/packages/mux-player/src/index.ts b/packages/mux-player/src/index.ts
@@ -10,6 +10,8 @@ import {
   PlaybackEngine,
   addTextTrack,
   removeTextTrack,
+  CmcdTypes,
+  CmcdTypeValues,
 } from '@mux/playback-core';
 import VideoApiElement, { initVideoApi } from './video-api';
 import {
@@ -104,6 +106,7 @@ function getProps(el: MuxPlayerElement, state?: any): MuxTemplateProps {
     preload: el.preload,
     envKey: el.envKey,
     experimentalCmcd: el.experimentalCmcd,
+    preferCmcd: el.preferCmcd,
     debug: el.debug,
     disableCookies: el.disableCookies,
     tokens: el.tokens,
@@ -607,6 +610,21 @@ class MuxPlayerElement extends VideoApiElement {
     }
   }
 
+  get preferCmcd() {
+    return (this.getAttribute(MuxVideoAttributes.PREFER_CMCD) as ValueOf<CmcdTypes>) ?? undefined;
+  }
+
+  set preferCmcd(value: ValueOf<CmcdTypes> | undefined) {
+    if (value === this.preferCmcd) return;
+    if (!value) {
+      this.removeAttribute(MuxVideoAttributes.PREFER_CMCD);
+    } else if (CmcdTypeValues.includes(value)) {
+      this.setAttribute(MuxVideoAttributes.PREFER_CMCD, value);
+    } else {
+      console.warn(`Invalid value for preferCmcd. Must be one of ${CmcdTypeValues.join()}`);
+    }
+  }
+
   get hasPlayed() {
     return this.mediaController?.hasAttribute('media-has-played') ?? false;
   }

diff --git a/packages/mux-player/src/template.ts b/packages/mux-player/src/template.ts
@@ -57,6 +57,7 @@ export const content = (props: MuxTemplateProps) => html`
       preload="${props.preload ?? false}"
       debug="${props.debug ?? false}"
       experimental-cmcd="${props.experimentalCmcd ?? false}"
+      prefer-cmcd="${props.preferCmcd ?? false}"
       disable-cookies="${props.disableCookies ?? false}"
       prefer-playback="${props.preferPlayback ?? false}"
       start-time="${props.startTime != null ? props.startTime : false}"