Skip to content

Commit 4f1ae3f

Browse files
ronalduQualabsronalduQualabs
authored
feat: add adblocker bypass option, expose player props, and conditional captions menu (#1127)
This PR introduces the following improvements: • New `allowPlaybackWithAdBlocker` prop Allows the player to continue playback even when an adblocker is detected. • If false (default): shows a blocking popup when an adblocker is present. • If true: bypasses the restriction and allows normal playback. • Exposes underlying player props on MuxNewsPlayer Enables more granular configuration and control over the embedded player through MuxNewsPlayer. • Conditional captions menu Adds a captions menu that appears only when text tracks are available. • Allows users to disable captions if they prefer not to see them.
1 parent 4396b32 commit 4f1ae3f

File tree

12 files changed

+70
-19
lines changed

12 files changed

+70
-19
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ function MuxPlayerAdsPage() {
6666
video_title: "Elephants Dream",
6767
viewer_user_id: "user-id-6789",
6868
}}
69+
// allow playback with ad blocker
70+
allowAdBlocker={true}
6971
streamType="on-demand"
7072
// envKey="mux-data-env-key"
7173
autoPlay={autoplay}

‎examples/nextjs-with-typescript/pages/mux-video-ads-react.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@ function MuxVideoPage() {
4747
setSdkLoaded(true); // Mark SDK as loaded
4848
console.log("Google IMA SDK loaded");
4949
};
50+
script.onerror = () => {
51+
setSdkLoaded(true);
52+
};
5053
document.head.appendChild(script);
5154
};
5255

@@ -75,6 +78,8 @@ function MuxVideoPage() {
7578
ref={mediaElRef}
7679
playbackId="23s11nz72DsoN657h4314PjKKjsF2JG33eBQQt6B95I"
7780
controls
81+
// allow playback with ad blocker
82+
allowAdBlocker={true}
7883
autoplay={autoplay}
7984
muted={muted}
8085
playsInline={true}

‎examples/nextjs-with-typescript/pages/playlist-page.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ function MuxVideoPage() {
1616
setSdkLoaded(true); // Mark SDK as loaded
1717
console.log("Google IMA SDK loaded");
1818
};
19+
script.onerror = () => {
20+
setSdkLoaded(true);
21+
};
1922
document.head.appendChild(script);
2023
};
2124

@@ -58,11 +61,15 @@ function MuxVideoPage() {
5861
return (
5962
<>
6063
<Head>
61-
<title>&lt;Playlist/&gt; Demo</title>
64+
<title>&lt;Playlist/&gt; Demo 3</title>
6265
</Head>
6366

64-
{sdkLoaded && <MuxNewsPlayer videoList={relatedVideos} />}
65-
67+
{sdkLoaded &&
68+
<MuxNewsPlayer
69+
// allow playback with ad blocker
70+
allowAdBlocker={true}
71+
videoList={relatedVideos}
72+
/>}
6673
</>
6774
);
6875
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,9 @@ export default function YourComponent() {
6363
setSdkLoaded(true);
6464
console.log("Google IMA SDK loaded");
6565
};
66+
script.onerror = () => {
67+
setSdkLoaded(true);
68+
};
6669
document.head.appendChild(script);
6770
};
6871

@@ -142,6 +145,9 @@ export default function VideoMuxNewsPlayerPage() {
142145
setSdkLoaded(true);
143146
console.log("Google IMA SDK loaded");
144147
};
148+
script.onerror = () => {
149+
setSdkLoaded(true);
150+
};
145151
document.head.appendChild(script);
146152
};
147153

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ type MuxMediaPropTypes = {
7474
};
7575

7676
export type MuxPlayerProps = {
77+
allowAdBlocker?: boolean;
7778
className?: string;
7879
hotkeys?: string;
7980
nohotkeys?: boolean;

‎packages/mux-player-react/src/mux-news-player.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint @typescript-eslint/triple-slash-reference: "off" */
22
/// <reference types="google_interactive_media_ads_types" preserve="true"/>
33
import React, { useRef, useState } from 'react';
4+
import type { MuxPlayerProps } from '@mux/mux-player-react'; // ✅ import prop types
45
import PlaylistEndScreen from './playlist-end-screen';
56
import '@mux/mux-video-ads';
67
import MuxPlayer from '@mux/mux-player-react';
@@ -18,16 +19,16 @@ export interface VideoItem {
1819

1920
export type PlaylistVideos = VideoItem[];
2021

21-
export interface PlaylistProps {
22+
export interface PlaylistProps extends Omit<MuxPlayerProps, 'playbackId' | 'adTagUrl'> {
2223
videoList: PlaylistVideos;
24+
allowAdBlocker?: boolean;
2325
}
2426

25-
export const MuxNewsPlayer = ({ videoList }: PlaylistProps) => {
27+
export const MuxNewsPlayer = ({ videoList, allowAdBlocker: allowAdBlocker, ...muxPlayerProps }: PlaylistProps) => {
2628
const mediaElRef = useRef<any>(null);
2729
const [autoplay, setAutoplay] = useState<'muted' | boolean>(INITIAL_AUTOPLAY);
2830
const [muted, setMuted] = useState(INITIAL_MUTED);
2931
const [paused, setPaused] = useState<boolean | undefined>(true);
30-
const [sdkLoaded, setSdkLoaded] = useState(false);
3132
const [currentIndex, setCurrentIndex] = useState(0);
3233
const [isEndScreenVisible, setIsEndScreenVisible] = useState(false);
3334
const [playerKey, setPlayerKey] = useState(0);
@@ -52,6 +53,8 @@ export const MuxNewsPlayer = ({ videoList }: PlaylistProps) => {
5253
<div>
5354
<NewsTheme />
5455
<MuxPlayer
56+
{...muxPlayerProps}
57+
allowAdBlocker={allowAdBlocker}
5558
ref={mediaElRef}
5659
theme="news-theme"
5760
themeProps={{ controlBarVertical: true, controlBarPlace: 'start start' }}

‎packages/mux-player-react/src/themes/news-theme.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export default function NewsTheme() {
102102
103103
<!-- Rendition Menu -->
104104
<style>
105-
media-rendition-menu {
105+
media-rendition-menu, media-captions-menu {
106106
position: absolute;
107107
border-radius: 0.3rem;
108108
right: 12px;
@@ -149,7 +149,7 @@ export default function NewsTheme() {
149149
150150
<media-rendition-menu anchor="auto" hidden>
151151
</media-rendition-menu>
152-
152+
<media-captions-menu hidden anchor="auto"></media-captions-menu>
153153
<!-- Time Range / Progress Bar -->
154154
155155
<style>
@@ -496,6 +496,7 @@ export default function NewsTheme() {
496496
</svg>
497497
498498
</media-rendition-menu-button>
499+
<media-captions-menu-button></media-captions-menu-button>
499500
</template>
500501
501502
<!-- Fullscreen Button -->
@@ -584,7 +585,6 @@ export default function NewsTheme() {
584585
</g>
585586
</svg>
586587
</media-fullscreen-button>
587-
588588
</media-control-bar>`,
589589
}}
590590
/>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,7 @@ function getProps(el: MuxPlayerElement, state?: any): MuxTemplateProps {
187187
// NOTE: since the attribute value is used as the "source of truth" for the property getter,
188188
// moving this below the `...state` spread so it resolves to the default value when unset (CJP)
189189
extraSourceParams: el.extraSourceParams,
190+
allowAdBlocker: el.getAttribute('allow-ad-blocker'),
190191
};
191192

192193
return props;
@@ -343,6 +344,7 @@ class MuxPlayerElement extends VideoApiElement implements MuxPlayerElement {
343344
if (!isFocusedElementInPlayer) event.preventDefault();
344345
},
345346
};
347+
allowAdBlocker: any;
346348

347349
static get NAME() {
348350
return playerSoftwareName;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ const getTagSpecificProps = (tag: string, props: MuxTemplateProps) => {
105105
'cast-src': !!props.src ? props.src : props.playbackId ? toMuxVideoURL(props) : false,
106106
'cast-receiver': props.castReceiver ?? false,
107107
'drm-token': props.tokens?.drm ?? false,
108+
'allow-ad-blocker': props.allowAdBlocker ?? false,
108109
exportparts: 'video',
109110
};
110111

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export type MuxTemplateProps = Partial<MuxPlayerProps> & {
6060
muxVideoElement: string;
6161
adTagUrl: string | undefined;
6262
adBreak: boolean;
63+
allowAdBlocker?: boolean;
6364
};
6465

6566
export type DialogOptions = {

0 commit comments

Comments
 (0)