Skip to content

Commit 3638325

Browse files
N1KnightPintorado
N1Knight
and
Pintorado
authored
feat: add support to define custom fullscreen element (muxinc#1217)
Resolves muxinc#575 by adding a new parameter to define a custom fullscreen element. Also, adding a check to ensure the fullscreen element contains at least one mux-player element. --------- Co-authored-by: Lucas Pintos <lpintos@mux.com>
1 parent ce091c9 commit 3638325

File tree

6 files changed

+29
-0
lines changed

6 files changed

+29
-0
lines changed

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ const DEFAULT_INITIAL_STATE: Partial<MuxPlayerProps> = Object.freeze({
124124
streamType: undefined,
125125
storyboardSrc: undefined,
126126
theme: undefined,
127+
fullscreenElement: undefined,
127128
proudlyDisplayMuxBadge: undefined,
128129
disablePseudoEnded: undefined,
129130
});
@@ -267,10 +268,12 @@ function MuxPlayerPage({ location }: Props) {
267268
<title>&lt;MuxPlayer/&gt; Demo</title>
268269
</Head>
269270
<main className="component-page">
271+
<div id="custom-fullscreen-element">
270272
<MuxPlayer
271273
// ref={mediaElRef}
272274
style={stylesState}
273275
theme={state.theme}
276+
fullscreenElement={state.fullscreenElement}
274277
envKey={state.envKey}
275278
metadata={state.metadata}
276279
// Test _hlsConfig for MuxPlayer (react) (Note: This also indirectly tests <mux-player> & <mux-video>)
@@ -350,6 +353,7 @@ function MuxPlayerPage({ location }: Props) {
350353
onEnded={onEnded}
351354
onWaiting={onWaiting}
352355
/>
356+
</div>
353357

354358
<div className="options">
355359
<ComponentCodeRenderer state={state} component="MuxPlayer" />
@@ -442,6 +446,13 @@ function MuxPlayerPage({ location }: Props) {
442446
onChange={genericOnChange}
443447
values={['classic', 'microvideo', 'minimal', 'gerwig']}
444448
/>
449+
<TextRenderer
450+
value={state.fullscreenElement}
451+
name="fullscreenElement"
452+
label="Fullscreen Element"
453+
onChange={genericOnChange}
454+
placeholder={`custom-fullscreen-element`}
455+
/>
445456
<TextRenderer
446457
value={state.envKey}
447458
name="envKey"

‎packages/mux-player-react/REFERENCE.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
| `metadata` | `object`\* | An object for configuring any metadata you'd like to send to [Mux Data](https://docs.mux.com/guides/data/make-your-data-actionable-with-metadata) | `undefined` |
5454
| `tokens` | `object`\* | An object for setting all signed URL tokens with the signature `{ playback?: string; thumbnail?: string; storyboard?: string; drm?: string; }` | `undefined` |
5555
| `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 |
56+
| `fullscreenElement` | `string` (Element ID) | The ID of a DOM element to use as the fullscreen container instead of the default player element. Provides more control over the fullscreen experience for complex layouts. | `undefined` |
5657
| `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 |
5758
| `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` |
5859
| `proudlyDisplayMuxBadge` | `boolean` | Controls whether to show the Mux badge in the player UI | `false` |

‎packages/mux-player-react/src/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ export type MuxPlayerProps = {
104104
tokens?: Tokens;
105105
theme?: string;
106106
themeProps?: { [k: string]: any };
107+
fullscreenElement?: string;
107108
onAbort?: GenericEventListener<MuxPlayerElementEventMap['abort']>;
108109
onCanPlay?: GenericEventListener<MuxPlayerElementEventMap['canplay']>;
109110
onCanPlayThrough?: GenericEventListener<MuxPlayerElementEventMap['canplaythrough']>;

‎packages/mux-player/REFERENCE.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
| `video-title` | `string` | Title text to show for your content in the Mux Player UI. | `""` |
5858
| `placeholder` | `string` (URI) | Image to show as various assets load. Typically a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) when used | N/A |
5959
| `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 |
60+
| `fullscreen-element` | `string` (Element ID) | The ID of a DOM element to use as the fullscreen container instead of the default player element. Provides more control over the fullscreen experience for complex layouts. | N/A |
6061
| `no-tooltips` | `boolean` | Toggles disabling tooltips in the UI | `false` |
6162
| `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 |
6263
| `proudly-display-mux-badge` | `boolean` | Display the Mux badge in the player UI. | `false` |
@@ -163,6 +164,7 @@
163164
| `activeCuePoint` <sub><sup>Read only</sup></sub> | `{ startTime: number; endTime?: number, value: any; }` | The current active CuePoint, determined based on the player's `currentTime`. | `undefined` |
164165
| `activeChapter` <sub><sup>Read only</sup></sub> | `{ startTime: number; endTime?: number, value: string; }` | The current active Chapter, determined based on the player's `currentTime`. | `undefined` |
165166
| `castReceiver` | `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. | `undefined` |
167+
| `fullscreenElement` | `string` (Element ID) | The ID of a DOM element to use as the fullscreen container instead of the default player element. Provides more control over the fullscreen experience for complex layouts. | `undefined` |
166168
| `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 |
167169
| `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 |
168170
| `preferCmcd` | `"query" \| "header" \| "none"` | Preference for how CMCD data is sent provided in Mux Video requests. Defaults to none for performance reasons. | `"none"` |

‎packages/mux-player/src/base.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ const PlayerAttributes = {
6868
PLAYBACK_TOKEN: 'playback-token',
6969
THUMBNAIL_TOKEN: 'thumbnail-token',
7070
STORYBOARD_TOKEN: 'storyboard-token',
71+
FULLSCREEN_ELEMENT: 'fullscreen-element',
7172
DRM_TOKEN: 'drm-token',
7273
STORYBOARD_SRC: 'storyboard-src',
7374
THUMBNAIL_TIME: 'thumbnail-time',
@@ -127,6 +128,7 @@ function getProps(el: MuxPlayerElement, state?: any): MuxTemplateProps {
127128
poster: el.poster,
128129
storyboard: el.storyboard,
129130
storyboardSrc: el.getAttribute(PlayerAttributes.STORYBOARD_SRC),
131+
fullscreenElement: el.getAttribute(PlayerAttributes.FULLSCREEN_ELEMENT),
130132
placeholder: el.getAttribute('placeholder'),
131133
themeTemplate: getThemeTemplate(el),
132134
thumbnailTime: !el.tokens.thumbnail && el.thumbnailTime,
@@ -738,6 +740,17 @@ class MuxPlayerElement extends VideoApiElement implements IMuxPlayerElement {
738740
this.targetLiveWindow = Number.NaN;
739741
}
740742
}
743+
break;
744+
}
745+
case PlayerAttributes.FULLSCREEN_ELEMENT: {
746+
if (newValue != null || newValue !== oldValue) {
747+
const e = document.getElementById(newValue);
748+
const muxVideo = e?.querySelector('mux-player');
749+
if (this.mediaController && e && muxVideo) {
750+
this.mediaController.fullscreenElement = e;
751+
}
752+
}
753+
break;
741754
}
742755
}
743756

‎packages/mux-player/src/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export type MuxPlayerProps = Partial<MuxVideoElement> & {
1616
hotkeys?: AttributeTokenList;
1717
preferPlayback?: 'mse' | 'native' | undefined;
1818
storyboard?: string;
19+
fullscreenElement?: string;
1920
};
2021

2122
export type MuxTemplateProps = Partial<MuxPlayerProps> & {

0 commit comments

Comments
 (0)