Skip to content

Commit

Permalink
feat: implement Mux badge (#988)
Browse files Browse the repository at this point in the history 
Adds `proudly-display-mux-badge` attribute to render a linkback to Mux

Video demo: https://cln.sh/wjpPRNXD

See the bottom player in the example deployment:
https://elements-demo-vanilla-git-fork-davekiss-dk-powered-by-mux.vercel.app/mux-player.html

---------

Co-authored-by: Wesley Luyten <me@wesleyluyten.com>
  • Loading branch information
@davekiss @luwes
davekiss and luwes authored Jan 13, 2025
1 parent 380ded2 commit 2343df8
Show file tree
Hide file tree
Showing 11 changed files with 183 additions and 3 deletions.
3 changes: 3 additions & 0 deletions examples/nextjs-with-typescript/pages/MuxPlayer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ const DEFAULT_INITIAL_STATE: Partial<MuxPlayerProps> = Object.freeze({
streamType: undefined,
storyboardSrc: undefined,
theme: undefined,
proudlyDisplayMuxBadge: undefined,
});

const SMALL_BREAKPOINT = 700;
Expand Down Expand Up @@ -329,6 +330,7 @@ function MuxPlayerPage({ location }: Props) {
defaultDuration={state.defaultDuration}
playbackRate={state.playbackRate}
playbackRates={state.playbackRates}
proudlyDisplayMuxBadge={state.proudlyDisplayMuxBadge}
onPlay={(evt: Event) => {
onPlay(evt);
// dispatch(updateProps({ paused: false }));
Expand Down Expand Up @@ -471,6 +473,7 @@ function MuxPlayerPage({ location }: Props) {
/>
<TextRenderer value={state.title} name="title" onChange={genericOnChange} />
<BooleanRenderer value={state.paused} name="paused" onChange={genericOnChange} />
<BooleanRenderer value={state.proudlyDisplayMuxBadge} name="proudlyDisplayMuxBadge" onChange={genericOnChange} />
<EnumRenderer
value={state.autoPlay}
name="autoPlay"
Expand Down
2 changes: 2 additions & 0 deletions examples/nextjs-with-typescript/pages/MuxPlayerLazy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ const DEFAULT_INITIAL_STATE: Partial<MuxPlayerProps> = Object.freeze({
tokens: undefined,
playbackId: undefined,
streamType: undefined,
proudlyDisplayMuxBadge: undefined,
});

const reducer = (state: Partial<{ [k: string]: any }>, action): Partial<{ [k: string]: any }> => {
Expand Down Expand Up @@ -348,6 +349,7 @@ function MuxPlayerPage({ location }: Props) {
audio={state.audio}
primaryColor={state.primaryColor}
secondaryColor={state.secondaryColor}
proudlyDisplayMuxBadge={state.proudlyDisplayMuxBadge}
defaultShowRemainingTime={state.defaultShowRemainingTime}
defaultHiddenCaptions={state.defaultHiddenCaptions}
/** @TODO This doesn't appear to work? (CJP) */
Expand Down
6 changes: 6 additions & 0 deletions examples/vanilla-ts-esm/public/mux-player.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,12 @@ <h2>Live</h2>
title="My amazing video"
></mux-player>

<mux-player
stream-type="on-demand"
playback-id="Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008"
proudly-display-mux-badge
></mux-player>

<a href="../">Browse Elements</a>
</body>
</html>
1 change: 1 addition & 0 deletions packages/mux-player-react/REFERENCE.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
| `castCustomData` | `object` (JSON-serializable) | [Custom Data](https://developers.google.com/cast/docs/reference/web_sender/chrome.cast.media.MediaInfo#customData) to send to your Google cast receiver on initial load. If none is provided, various Mux key/value pairs will be sent. | Mux-specific object |
| `playerInitTime` | `number` (timestamp) | Overrides the default [player initialization time](https://docs.mux.com/guides/make-your-data-actionable-with-metadata#optional-configurable-metadata), used by Mux Data for time-based [quality-of-experience (QOE) metrics](https://docs.mux.com/guides/understand-metric-definitions). It will be inferred from instantiation time by default. | Varies |
| `ref` | [React `ref`](https://reactjs.org/docs/refs-and-the-dom.html) | A [React `ref`](https://reactjs.org/docs/refs-and-the-dom.html) to the underlying [`MuxPlayerElement`](../mux-player/REFERENCE.md) web component | `undefined` |
| `proudlyDisplayMuxBadge`| `boolean` | Controls whether to show the Mux badge in the player UI | `false` |

<!-- UNDOCUMENTED
// NEW STREAM TYPE VALUES
Expand Down
1 change: 1 addition & 0 deletions packages/mux-player-react/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ export type MuxPlayerProps = {
renditionOrder?: RenditionOrderValue;
programStartTime?: number;
programEndTime?: number;
proudlyDisplayMuxBadge?: boolean;
assetStartTime?: number;
assetEndTime?: number;
metadataVideoId?: string;
Expand Down
7 changes: 4 additions & 3 deletions packages/mux-player/REFERENCE.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
| `no-volume-pref` | `boolean` | Disables storing the selected volume in localStorage. | `false` |
| `disable-tracking` | `boolean` | Disables Mux Data tracking. For more, check out the [Mux Docs](https://docs.mux.com/guides/data/monitor-html5-video-element#features) | `false` |
| `disable-cookies` | `boolean` | Disables cookies used by Mux Data. For more, check out the [Mux Docs](https://docs.mux.com/guides/data/monitor-html5-video-element#disable-cookies). | `false` |
| `playback-id` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A |
| `playback-id` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and [thumbnail previews](https://docs.mux.com/guides/video/create-timeline-hover-previews). For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | N/A |
| `prefer-playback` | `"mse" \| "native"` | Specify if Mux Player should try to use Media Source Extension or native playback (if available). If no value is provided, Mux Player will choose based on what's deemed optimal for content and playback environment. | Varies |
| `max-resolution` | `"720p" \| "1080p" \| "1440p" \| "2160p"` | Specify the maximum resolution you want delivered for this video. | N/A |
| `min-resolution` | `"480p" \| "540p" \| "720p" \| "1080p" \| "1440p" \| "2160p"` | Specify the minimum resolution you want delivered for this video. | N/A |
Expand Down Expand Up @@ -57,6 +57,7 @@
| `cast-receiver` | `string` (Receiver ID) | The app ID to use for a custom [Google cast receiver](https://developers.google.com/cast/docs/web_receiver/basic). If none is provided, the default receiver app will be used. | N/A |
| `no-tooltips` | `boolean` | Toggles disabling tooltips in the UI | `false` |
| `player-init-time` | `number` (timestamp) | Overrides the default [player initialization time](https://docs.mux.com/guides/make-your-data-actionable-with-metadata#optional-configurable-metadata), used by Mux Data for time-based [quality-of-experience (QOE) metrics](https://docs.mux.com/guides/understand-metric-definitions). It will be inferred from instantiation time by default. | Varies |
| `proudly-display-mux-badge` | `boolean` | Display the Mux badge in the player UI. | `false` |

<!-- UNDOCUMENTED
// NEW STREAM TYPE VALUES
Expand All @@ -74,7 +75,6 @@
| `addCuePoints()` | Add an array of CuePoints with the shape `{ startTime: number; endTime?: number, value: any; }` to the Mux Player instance |
| `addChapters()` | Add an array of chapters with the shape `{ startTime: number; endTime?: number, value: string; }` to the Mux Player instance |
| `getStartDate()` | Will return a Date that matches the earliest PDT in your stream. Identical to [native `getStartDate()` method](https://html.spec.whatwg.org/multipage/media.html#dom-media-getstartdate), if exists. |
|

<!-- UNDOCUMENTED
| `addTextTrack()` | Identical to the [native `addTextTrack()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#methods). |
Expand Down Expand Up @@ -125,7 +125,7 @@
| `defaultHiddenCaptions` | `boolean` | Hide captions by default instead of showing them on initial load (when available) | `false` |
| `defaultDuration` | `number` (seconds) | Applies a duration value before the media has loaded. Useful when used in conjunction with `preload="none"` | N/A |
| `beaconCollectionDomain` | `string` (domain name) | Assigns a custom domain to be used for [Mux Data](https://docs.mux.com/guides/data/monitor-html5-video-element#features) collection. NOTE: Must be set before `playbackId` to apply to Mux Data monitoring. | `undefined` (`"litix.io"`) |
| `playbackId` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and (thumbnail previews)[https://docs.mux.com/guides/video/create-timeline-hover-previews]. For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | `undefined` |
| `playbackId` | `string` | The playback ID for your Mux Asset or Mux Live Stream. This will also be used for automatically assigning a [poster image](https://docs.mux.com/guides/video/get-images-from-a-video) and [thumbnail previews](https://docs.mux.com/guides/video/create-timeline-hover-previews). For more, check out the [Mux Docs](https://docs.mux.com/guides/video/play-your-videos#1-get-your-playback-id). | `undefined` |
| `customDomain` | `string` (domain name) | Assigns a custom domain to be used for [Mux Video](https://docs.mux.com/guides/video/use-a-custom-domain-for-streaming#use-your-own-domain-for-delivering-videos-and-images). | `undefined` (`"mux.com"`) |
| `envKey` | `string` | Your Mux Data environment key. Note that this is different than your API Key. Get your env key from the "Mux Data" part of your [Mux Environments Dashboard](https://dashboard.mux.com/environments). If `undefined`, the environment will be inferred based on your Mux Video asset. | `undefined` (inferred) |
| `debug` | `boolean` | Enables debug mode for the underlying playback engine (currently hls.js) and mux-embed, providing additional information in the console. NOTE: Must be set before `playbackId` to fully apply to debug logging contexts. | `false` |
Expand All @@ -137,6 +137,7 @@
| `liveEdgeOffset` <sub><sup>Read only</sup></sub> | `number` | the earliest playback time that will be treated as playing "at the live edge" for live content. | (inferred from `playback-id` and/or `stream-type`, otherwise `NaN`) |
| `startTime` | `number` (seconds) | Specify where in the media's timeline you want playback to start. | `0` |
| `preferPlayback` | `"mse" \| "native"` | Specify if Mux Player should try to use Media Source Extension or native playback (if available). If no value is provided, Mux Player will choose based on what's deemed optimal for content and playback environment. | Varies |
| `proudlyDisplayMuxBadge` | `boolean` | Display the Mux badge in the player UI. | `false` |
| `maxResolution` | `"720p" \| "1080p" \| "1440p" \| "2160p"` | Specify the maximum resolution you want delivered for this video. | N/A |
| `minResolution` | `"480p" \| "540p" \| "720p" \| "1080p" \| "1440p" \| "2160p"` | Specify the minimum resolution you want delivered for this video. | N/A |
| `renditionOrder` | `"desc"` | Change the order in which renditions are provided in the src playlist. Can impact initial segment loads. Currently only support `"desc"` for descending order | N/A |
Expand Down
15 changes: 15 additions & 0 deletions packages/mux-player/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,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 = [
Expand All @@ -108,6 +109,7 @@ const ThemeAttributeNames = [
'template',
'title',
'novolumepref',
'proudlydisplaymuxbadge',
];

function getProps(el: MuxPlayerElement, state?: any): MuxTemplateProps {
Expand Down Expand Up @@ -172,6 +174,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)
Expand Down Expand Up @@ -1847,6 +1850,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) {
Expand Down
1 change: 1 addition & 0 deletions packages/mux-player/src/template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,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}"
onclose="${props.onCloseErrorDialog}"
onfocusin="${props.onFocusInErrorDialog}"
Expand Down
Loading

0 comments on commit 2343df8

Please sign in to comment.