Skip to content

Commit de12839

Browse files
luwesluwes
committed
feat: rename ad events to match mux-embed, cleanup
1 parent a1005fb commit de12839

File tree

4 files changed

+60
-97
lines changed

4 files changed

+60
-97
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import React, { useRef, useState } from 'react';
44
import '@mux/mux-video/ads';
55
import type { MuxPlayerProps } from '@mux/mux-player-react';
6-
import '@mux/mux-video-ads';
76
import MuxPlayer from '@mux/mux-player-react';
87
import NewsTheme from '../themes/news-theme';
98
import PlaylistEndScreen from './playlist-end-screen';

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -455,11 +455,9 @@ class MuxPlayerElement extends VideoApiElement implements MuxPlayerElement {
455455
connectedCallback() {
456456
const muxVideo = this.media;
457457
if (muxVideo) {
458-
this.media?.addEventListener('adbreakchange', () => {
459-
// MediaUIEvents.MEDIA_EXIT_PIP_REQUEST
460-
// this.mediaController?.dispatchEvent(new CustomEvent('mediaexitpiprequest'));
461-
this.#render();
462-
});
458+
this.media?.addEventListener('adbreakstart', () => this.#render());
459+
this.media?.addEventListener('adended', () => this.#render());
460+
463461
muxVideo.metadata = getMetadataFromAttrs(this);
464462
}
465463
}

‎packages/mux-video/src/ads/google-ima-ads-provider.ts‎

Lines changed: 50 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ export class GoogleImaAdsProvider {
4444
setupAdsManager() {
4545
if (!this.#adDisplayContainer) {
4646
this.#adDisplayContainer = new google.ima.AdDisplayContainer(this.#adContainer, this.#videoElement);
47-
4847
this.#adsLoader = new google.ima.AdsLoader(this.#adDisplayContainer);
4948

5049
this.#adsLoader.addEventListener(
@@ -53,17 +52,14 @@ export class GoogleImaAdsProvider {
5352
const adsRenderingSettings = new google.ima.AdsRenderingSettings();
5453
this.#adsManager = adsManagerLoadedEvent.getAdsManager(this.#videoElement, adsRenderingSettings);
5554
this.#startAdsManager();
56-
},
57-
false
55+
}
5856
);
5957

6058
this.#adsLoader.addEventListener(
6159
google.ima.AdErrorEvent.Type.AD_ERROR,
62-
(adErrorEvent: google.ima.AdErrorEvent) => {
63-
console.log('AD_ERROR Loader', adErrorEvent);
64-
this.#customVideoElement.dispatchEvent(new Event('onAdsCompleted'));
65-
},
66-
false
60+
(_adErrorEvent: google.ima.AdErrorEvent) => {
61+
this.#customVideoElement.dispatchEvent(new Event('adbreakend'));
62+
}
6763
);
6864
}
6965
}
@@ -94,63 +90,45 @@ export class GoogleImaAdsProvider {
9490
}
9591
});
9692

97-
this.#adsManager?.addEventListener(
98-
google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
99-
() => {
100-
if (this.#videoBackup && this.isUsingSameVideoElement()) {
101-
this.#customVideoElement.muxDataKeepSession = true;
102-
this.#customVideoElement.load();
103-
this.#customVideoElement.muxDataKeepSession = false;
104-
105-
// Restore content position
106-
if (this.#videoBackup?.contentTime) {
107-
this.#customVideoElement.currentTime = this.#videoBackup.contentTime;
108-
}
109-
} else {
110-
// Show the video element again
111-
this.#videoElement.style.display = '';
93+
this.#adsManager?.addEventListener(google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, () => {
94+
if (this.#videoBackup && this.isUsingSameVideoElement()) {
95+
this.#customVideoElement.muxDataKeepSession = true;
96+
this.#customVideoElement.load();
97+
this.#customVideoElement.muxDataKeepSession = false;
98+
99+
// Restore content position
100+
if (this.#videoBackup?.contentTime) {
101+
this.#customVideoElement.currentTime = this.#videoBackup.contentTime;
112102
}
103+
} else {
104+
// Show the video element again
105+
this.#videoElement.style.display = '';
106+
}
113107

114-
this.#videoBackup = null;
108+
this.#videoBackup = null;
115109

116-
this.#adProgressData = undefined;
117-
this.#ad = undefined;
118-
this.#customVideoElement.dispatchEvent(new Event('durationchange'));
119-
this.#customVideoElement.dispatchEvent(new Event('onAdsCompleted'));
120-
},
121-
false
122-
);
110+
this.#adProgressData = undefined;
111+
this.#ad = undefined;
112+
this.#customVideoElement.dispatchEvent(new Event('durationchange'));
113+
this.#customVideoElement.dispatchEvent(new Event('adbreakend'));
114+
});
123115

124116
this.#adsManager?.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, console.error, false);
125117

126-
this.#adsManager?.addEventListener(
127-
google.ima.AdEvent.Type.CLICK,
128-
(_adEvent: google.ima.AdEvent) => {
129-
this.updateViewMode(false);
130-
},
131-
false
132-
);
133-
134-
this.#adsManager?.addEventListener(
135-
google.ima.AdEvent.Type.LOADED,
136-
(adEvent: google.ima.AdEvent) => {
137-
this.#ad = adEvent.getAd();
138-
this.#customVideoElement.dispatchEvent(new Event('durationchange'));
139-
this.#customVideoElement.dispatchEvent(new Event('timeupdate'));
140-
this.#customVideoElement.dispatchEvent(new Event('adbreaktotaladschange'));
141-
},
142-
false
143-
);
144-
145-
this.#adsManager?.addEventListener(
146-
google.ima.AdEvent.Type.STARTED,
147-
(adEvent: google.ima.AdEvent) => {
148-
this.#ad = adEvent.getAd();
149-
this.#customVideoElement.dispatchEvent(new Event('playing'));
150-
this.#customVideoElement.dispatchEvent(new Event('adbreakadpositionchange'));
151-
},
152-
false
153-
);
118+
this.#adsManager?.addEventListener(google.ima.AdEvent.Type.CLICK, (_adEvent: google.ima.AdEvent) => {
119+
this.updateViewMode(false);
120+
});
121+
122+
this.#adsManager?.addEventListener(google.ima.AdEvent.Type.LOADED, (adEvent: google.ima.AdEvent) => {
123+
this.#ad = adEvent.getAd();
124+
this.#customVideoElement.dispatchEvent(new Event('durationchange'));
125+
this.#customVideoElement.dispatchEvent(new Event('timeupdate'));
126+
});
127+
128+
this.#adsManager?.addEventListener(google.ima.AdEvent.Type.STARTED, (adEvent: google.ima.AdEvent) => {
129+
this.#ad = adEvent.getAd();
130+
this.#customVideoElement.dispatchEvent(new Event('playing'));
131+
});
154132

155133
this.#adsManager?.addEventListener(google.ima.AdEvent.Type.PAUSED, () => {
156134
this.#adPaused = true;
@@ -161,26 +139,19 @@ export class GoogleImaAdsProvider {
161139
this.#adPaused = false;
162140
});
163141

164-
this.#adsManager?.addEventListener(
165-
google.ima.AdEvent.Type.AD_PROGRESS,
166-
(adProgressEvent: google.ima.AdEvent) => {
167-
const prevDuration = this.#customVideoElement.duration;
168-
this.#adProgressData = adProgressEvent.getAdData() as google.ima.AdProgressData;
169-
if (prevDuration !== this.#customVideoElement.duration) {
170-
this.#customVideoElement.dispatchEvent(new Event('durationchange'));
171-
}
172-
this.#customVideoElement.dispatchEvent(new Event('timeupdate'));
173-
},
174-
false
175-
);
176-
177-
this.#adsManager?.addEventListener(
178-
google.ima.AdEvent.Type.VOLUME_CHANGED,
179-
() => {
180-
this.#customVideoElement.dispatchEvent(new Event('volumechange'));
181-
},
182-
false
183-
);
142+
this.#adsManager?.addEventListener(google.ima.AdEvent.Type.AD_PROGRESS, (adProgressEvent: google.ima.AdEvent) => {
143+
const prevDuration = this.#customVideoElement.duration;
144+
this.#adProgressData = adProgressEvent.getAdData() as google.ima.AdProgressData;
145+
146+
if (prevDuration !== this.#customVideoElement.duration) {
147+
this.#customVideoElement.dispatchEvent(new Event('durationchange'));
148+
}
149+
this.#customVideoElement.dispatchEvent(new Event('timeupdate'));
150+
});
151+
152+
this.#adsManager?.addEventListener(google.ima.AdEvent.Type.VOLUME_CHANGED, () => {
153+
this.#customVideoElement.dispatchEvent(new Event('volumechange'));
154+
});
184155

185156
this.#adsManager?.init(this.#originalSize.width, this.#originalSize.height, this.#viewMode);
186157
this.#adsManager?.start();

‎packages/mux-video/src/ads/mixin.ts‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -192,12 +192,12 @@ export function AdsVideoMixin<T extends CustomVideoElement>(superclass: T): Cons
192192
}
193193
});
194194

195-
this.addEventListener('onAdsCompleted', () => {
195+
this.addEventListener('adbreakend', () => {
196196
this.#adBreak = false;
197197
this.dispatchEvent(new Event('durationchange'));
198198
this.adTagUrl = undefined;
199199
this.#setAdContainerPlaying(false);
200-
this.#dispatchAdBreakChange(false);
200+
201201
this.addEventListener('ended', this.onEnded, { once: true });
202202
setTimeout(() => {
203203
this.play();
@@ -239,17 +239,12 @@ export function AdsVideoMixin<T extends CustomVideoElement>(superclass: T): Cons
239239
set #adBreak(val: boolean) {
240240
if (val === this.adBreak) return;
241241
this.toggleAttribute(Attributes.AD_BREAK, !!val);
242-
this.#dispatchAdBreakChange(val);
243-
}
244242

245-
#dispatchAdBreakChange(isAdBreak: boolean): void {
246-
this.dispatchEvent(
247-
new CustomEvent('adbreakchange', {
248-
detail: { isAdBreak },
249-
composed: true,
250-
bubbles: true,
251-
})
252-
);
243+
if (!!val) {
244+
this.dispatchEvent(new Event('adbreakstart'));
245+
} else {
246+
this.dispatchEvent(new Event('adended'));
247+
}
253248
}
254249

255250
onEnded() {

0 commit comments

Comments
 (0)