From 97ac20441c4187d70d70f5372362d76903546886 Mon Sep 17 00:00:00 2001 From: Dave Kiss <1256071+davekiss@users.noreply.github.com> Date: Thu, 19 Sep 2024 15:04:59 -0400 Subject: [PATCH 01/13] feat: implement Mux badge --- .../vanilla-ts-esm/public/mux-player.html | 6 + packages/mux-player/src/index.ts | 18 +++ packages/mux-player/src/template.ts | 1 + .../mux-player/src/themes/gerwig/gerwig.html | 107 ++++++++++++++++++ packages/mux-player/src/types.d.ts | 1 + 5 files changed, 133 insertions(+) diff --git a/examples/vanilla-ts-esm/public/mux-player.html b/examples/vanilla-ts-esm/public/mux-player.html index 11c97b2a9..c3dc4e06c 100644 --- a/examples/vanilla-ts-esm/public/mux-player.html +++ b/examples/vanilla-ts-esm/public/mux-player.html @@ -50,6 +50,12 @@

Elements

title="My amazing video" > + + Browse Elements diff --git a/packages/mux-player/src/index.ts b/packages/mux-player/src/index.ts index 279c31c23..513d58704 100644 --- a/packages/mux-player/src/index.ts +++ b/packages/mux-player/src/index.ts @@ -84,6 +84,7 @@ const PlayerAttributes = { NO_VOLUME_PREF: 'no-volume-pref', CAST_RECEIVER: 'cast-receiver', NO_TOOLTIPS: 'no-tooltips', + PROUDLY_DISPLAY_MUX_BADGE: 'proudly-display-mux-badge', }; const ThemeAttributeNames = [ @@ -168,6 +169,7 @@ function getProps(el: MuxPlayerElement, state?: any): MuxTemplateProps { title: el.getAttribute(PlayerAttributes.TITLE), novolumepref: el.hasAttribute(PlayerAttributes.NO_VOLUME_PREF), castReceiver: el.castReceiver, + proudlyDisplayMuxBadge: el.hasAttribute(PlayerAttributes.PROUDLY_DISPLAY_MUX_BADGE), ...state, // NOTE: since the attribute value is used as the "source of truth" for the property getter, // moving this below the `...state` spread so it resolves to the default value when unset (CJP) @@ -691,6 +693,10 @@ class MuxPlayerElement extends VideoApiElement implements MuxPlayerElement { } break; } + case PlayerAttributes.PROUDLY_DISPLAY_MUX_BADGE: { + this.#render({ proudlyDisplayMuxBadge: newValue !== null }); + break; + } case MuxVideoAttributes.STREAM_TYPE: { if (newValue && ![StreamTypes.LIVE, StreamTypes.ON_DEMAND, StreamTypes.UNKNOWN].includes(newValue as any)) { // Handle deprecated values by translating to new properties for the time being. @@ -1743,6 +1749,18 @@ class MuxPlayerElement extends VideoApiElement implements MuxPlayerElement { } this.setAttribute(PlayerAttributes.NO_TOOLTIPS, ''); } + + get proudlyDisplayMuxBadge() { + return this.hasAttribute(PlayerAttributes.PROUDLY_DISPLAY_MUX_BADGE); + } + + set proudlyDisplayMuxBadge(val: boolean) { + if (!val) { + this.removeAttribute(PlayerAttributes.PROUDLY_DISPLAY_MUX_BADGE); + } else { + this.setAttribute(PlayerAttributes.PROUDLY_DISPLAY_MUX_BADGE, ''); + } + } } export function getVideoAttribute(el: MuxPlayerElement, name: string) { diff --git a/packages/mux-player/src/template.ts b/packages/mux-player/src/template.ts index beddf68da..55323e563 100644 --- a/packages/mux-player/src/template.ts +++ b/packages/mux-player/src/template.ts @@ -103,6 +103,7 @@ export const content = (props: MuxTemplateProps) => html` defaultduration="${props.defaultDuration ?? false}" hideduration="${props.hideDuration ?? false}" title="${props.title ?? false}" + proudlydisplaymuxbadge="${props.proudlyDisplayMuxBadge ?? false}" exportparts="${partsListStr}" > + + @@ -918,6 +1022,9 @@ + + +