Skip to content

feat: implement Mux badge #988

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
davekiss merged 19 commits into from
Jan 13, 2025
Merged

feat: implement Mux badge #988

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
97ac204
feat: implement Mux badge
davekiss Sep 19, 2024
eadc94c
Merge branch 'main' into dk/powered-by
davekiss Sep 21, 2024
b1e950c
Merge branch 'main' into dk/powered-by
davekiss Oct 1, 2024
247a97b
Add a test for rendering
davekiss Oct 2, 2024
7e5dd56
Merge branch 'main' into dk/powered-by
davekiss Oct 10, 2024
9eb60ed
Merge branch 'main' into dk/powered-by
davekiss Dec 19, 2024
ee83fc1
Merge branch 'main' into dk/powered-by
davekiss Jan 7, 2025
3ad071a
feat: add proudlyDisplayMuxBadge prop for React
davekiss Jan 7, 2025
36aa9c6
chore: document use and example
davekiss Jan 7, 2025
9fa4ffe
Add bool toggle
davekiss Jan 8, 2025
99b369b
Add attribute
davekiss Jan 8, 2025
bae8f59
Remove stray pipe
davekiss Jan 8, 2025
e03ac2d
Fix markdown
davekiss Jan 9, 2025
7097905
Undo accidental change
davekiss Jan 9, 2025
5cf3f9b
Remove case
davekiss Jan 13, 2025
052055d
Merge branch 'main' into dk/powered-by
davekiss Jan 13, 2025
f486f1d
Add to ThemeAttributeNames
davekiss Jan 13, 2025
e5814c7
Remove from media controller
davekiss Jan 13, 2025
3b10d26
Prefer aTimeout
davekiss Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions examples/nextjs-with-typescript/pages/MuxPlayer.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
18 changes: 18 additions & 0 deletions packages/mux-player/src/index.ts
View file
Open in desktop
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 Down Expand Up @@ -172,6 +173,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 @@ -755,6 +757,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.
Expand Down Expand Up @@ -1847,6 +1853,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
Open in desktop
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
Loading