feat: implement Mux badge

examples/nextjs-with-typescript/pages/MuxPlayer.tsx

@@ -124,6 +124,7 @@ const DEFAULT_INITIAL_STATE: Partial<MuxPlayerProps> = Object.freeze({
   streamType: undefined,
   storyboardSrc: undefined,
   theme: undefined,
+  proudlyDisplayMuxBadge: undefined,
 });
 
 const SMALL_BREAKPOINT = 700;
@@ -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 }));
@@ -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"

examples/nextjs-with-typescript/pages/MuxPlayerLazy.tsx

@@ -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 }> => {
@@ -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) */

examples/vanilla-ts-esm/public/mux-player.html

@@ -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>

packages/mux-player-react/REFERENCE.md

@@ -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

packages/mux-player-react/src/index.tsx

@@ -87,6 +87,7 @@ export type MuxPlayerProps = {
   renditionOrder?: RenditionOrderValue;
   programStartTime?: number;
   programEndTime?: number;
+  proudlyDisplayMuxBadge?: boolean;
   assetStartTime?: number;
   assetEndTime?: number;
   metadataVideoId?: string;

packages/mux-player/REFERENCE.md

@@ -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        |
@@ -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
@@ -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). |
@@ -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`                          |
@@ -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        |

packages/mux-player/src/index.ts

@@ -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 = [
@@ -108,6 +109,7 @@ const ThemeAttributeNames = [
   'template',
   'title',
   'novolumepref',
+  'proudlydisplaymuxbadge',
 ];
 
 function getProps(el: MuxPlayerElement, state?: any): MuxTemplateProps {
@@ -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)
@@ -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) {

packages/mux-player/src/template.ts

@@ -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}"