Skip to content

Commit 2b1a363

Browse files
luwesluwes
committed
fix: cleanup, add missing ad methods
1 parent de12839 commit 2b1a363

File tree

9 files changed

+47
-307
lines changed

9 files changed

+47
-307
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@ function MuxPlayerAdsPage() {
6666
video_title: "Elephants Dream",
6767
viewer_user_id: "user-id-6789",
6868
}}
69-
// allow playback with ad blocker
7069
allowAdBlocker={true}
7170
streamType="on-demand"
7271
// envKey="mux-data-env-key"

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

Lines changed: 14 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,36 @@
11
import Head from 'next/head';
2-
import { useRef, useState, useEffect } from "react";
2+
import Script from "next/script";
3+
import { useRef, useState } from "react";
34
import MuxVideoAds from "@mux/mux-video/ads/react";
4-
import '../post-video.css'
5-
6-
const INITIAL_AUTOPLAY = false;
7-
const INITIAL_MUTED = false;
85

96
function MuxVideoPage() {
107
const mediaElRef = useRef(null);
11-
const [autoplay, setAutoplay] = useState<"muted" | boolean>(INITIAL_AUTOPLAY);
12-
const [muted, setMuted] = useState(INITIAL_MUTED);
13-
const [paused, setPaused] = useState<boolean | undefined>(true);
14-
const [sdkLoaded, setSdkLoaded] = useState(false);
15-
16-
const mainVideo = {
17-
imageUrl: "https://d.newsweek.com/en/full/2616049/picture-video.jpg?w=480&h=270&q=75&f=234a33201b1c5adb080a1bec0cb4a4a0",
18-
title: "US Official Cars Seen Leaving Greenland Capital After Vance Scales Back Visit",
19-
idx: 2
20-
};
21-
22-
const relatedVideos = [
23-
{
24-
imageUrl: "https://d.newsweek.com/en/full/2614934/picture-video.jpg?w=480&h=270&q=75&f=8dbdcf86a118c0f5afb2cba69bd4af24",
25-
title: "JD Vance Announces He Will Join His Wife On Visit To Greenland",
26-
idx: 0
27-
},
28-
{
29-
imageUrl: "https://d.newsweek.com/en/full/2616059/reason-why-woman-trains-specific-arm.jpg?w=480&h=270&q=75&f=5000e727dbcc4e9e9d1ca21b1215c993",
30-
title: "Reason Why Woman Trains Specific Arm",
31-
idx: 1
32-
},
33-
{
34-
imageUrl: "https://d.newsweek.com/en/full/2616049/picture-video.jpg?w=480&h=270&q=75&f=234a33201b1c5adb080a1bec0cb4a4a0",
35-
title: "US Official Cars Seen Leaving Greenland Capital After Vance Scales Back Visit",
36-
idx: 2
37-
}
38-
];
39-
40-
useEffect(() => {
41-
// Dynamically load the IMA SDK
42-
const loadImaSdk = () => {
43-
const script = document.createElement("script");
44-
script.src = "https://imasdk.googleapis.com/js/sdkloader/ima3.js";
45-
script.async = true;
46-
script.onload = () => {
47-
setSdkLoaded(true); // Mark SDK as loaded
48-
console.log("Google IMA SDK loaded");
49-
};
50-
script.onerror = () => {
51-
setSdkLoaded(true);
52-
};
53-
document.head.appendChild(script);
54-
};
55-
56-
if (!window.google || !window.google.ima) {
57-
loadImaSdk();
58-
} else {
59-
setSdkLoaded(true);
60-
}
61-
62-
return () => {
63-
// Cleanup by removing the script
64-
const scriptElement = document.querySelector('script[src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"]');
65-
if (scriptElement) {
66-
scriptElement.remove();
67-
}
68-
};
69-
}, []);
8+
const [sdkLoaded, setSdkLoaded] = useState(false);
709

7110
return (
7211
<>
7312
<Head>
7413
<title>&lt;MuxVideoAds/&gt; Demo</title>
7514
</Head>
7615

16+
<Script
17+
src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"
18+
onLoad={() => {
19+
setSdkLoaded(true);
20+
console.log("Google IMA SDK loaded");
21+
}}
22+
strategy="afterInteractive"
23+
/>
24+
7725
{sdkLoaded && <MuxVideoAds
7826
ref={mediaElRef}
7927
playbackId="23s11nz72DsoN657h4314PjKKjsF2JG33eBQQt6B95I"
8028
controls
81-
// allow playback with ad blocker
82-
allowAdBlocker={true}
83-
autoplay={autoplay}
84-
muted={muted}
8529
playsInline={true}
86-
maxResolution="2160p"
87-
minResolution="540p"
88-
renditionOrder="desc"
8930
preferPlayback="mse"
31+
allowAdBlocker={true}
9032
adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
91-
onPlay={() => {
92-
setPaused(false);
93-
}}
94-
onPause={() => {
95-
setPaused(true);
96-
}}
97-
onEnded={() => {
98-
99-
}}
100-
>
101-
</MuxVideoAds>}
33+
/>}
10234
</>
10335
);
10436
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,7 @@ function MuxVideoPage() {
6565
</Head>
6666

6767
{sdkLoaded &&
68-
<MuxNewsPlayer
69-
// allow playback with ad blocker
68+
<MuxNewsPlayer
7069
allowAdBlocker={true}
7170
videoList={relatedVideos}
7271
/>}

‎examples/nextjs-with-typescript/post-video.css‎

Lines changed: 0 additions & 216 deletions
This file was deleted.

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ type MuxMediaPropTypes = {
7171
};
7272

7373
export type MuxPlayerProps = {
74-
allowAdBlocker?: boolean;
7574
className?: string;
7675
hotkeys?: string;
7776
nohotkeys?: boolean;
@@ -89,6 +88,8 @@ export type MuxPlayerProps = {
8988
programStartTime?: number;
9089
programEndTime?: number;
9190
proudlyDisplayMuxBadge?: boolean;
91+
/** Allow playback with ad blocker */
92+
allowAdBlocker?: boolean;
9293
adTagUrl?: string;
9394
assetStartTime?: number;
9495
assetEndTime?: number;

0 commit comments

Comments
 (0)