stormcloud-video-player 0.2.20 → 0.2.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/stormcloud-vp.min.js +2 -2
- package/lib/index.cjs +44 -159
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.js +44 -159
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +44 -159
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/player/StormcloudVideoPlayer.d.cts +1 -1
- package/lib/players/HlsPlayer.cjs +44 -159
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/index.cjs +44 -159
- package/lib/players/index.cjs.map +1 -1
- package/lib/sdk/hlsAdPlayer.cjs +1 -37
- package/lib/sdk/hlsAdPlayer.cjs.map +1 -1
- package/lib/sdk/ima.cjs +7 -63
- package/lib/sdk/ima.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.cjs +44 -159
- package/lib/ui/StormcloudVideoPlayer.cjs.map +1 -1
- package/package.json +1 -1
|
@@ -324,11 +324,12 @@ function createImaController(video, options) {
|
|
|
324
324
|
container.style.top = "0";
|
|
325
325
|
container.style.right = "0";
|
|
326
326
|
container.style.bottom = "0";
|
|
327
|
-
container.style.display = "
|
|
327
|
+
container.style.display = "none";
|
|
328
328
|
container.style.alignItems = "center";
|
|
329
329
|
container.style.justifyContent = "center";
|
|
330
330
|
container.style.pointerEvents = "none";
|
|
331
|
-
container.style.zIndex = "
|
|
331
|
+
container.style.zIndex = "10";
|
|
332
|
+
container.style.backgroundColor = "#000";
|
|
332
333
|
(_a = video.parentElement) == null ? void 0 : _a.appendChild(container);
|
|
333
334
|
adContainerEl = container;
|
|
334
335
|
adDisplayContainer = new google.ima.AdDisplayContainer(
|
|
@@ -398,7 +399,8 @@ function createImaController(video, options) {
|
|
|
398
399
|
container.style.alignItems = "center";
|
|
399
400
|
container.style.justifyContent = "center";
|
|
400
401
|
container.style.pointerEvents = "none";
|
|
401
|
-
container.style.zIndex = "
|
|
402
|
+
container.style.zIndex = "10";
|
|
403
|
+
container.style.backgroundColor = "#000";
|
|
402
404
|
if (!video.parentElement) {
|
|
403
405
|
throw new Error("Video element has no parent for ad container");
|
|
404
406
|
}
|
|
@@ -529,63 +531,12 @@ function createImaController(video, options) {
|
|
|
529
531
|
adPlaying = false;
|
|
530
532
|
setAdPlayingFlag(false);
|
|
531
533
|
emit("content_resume");
|
|
532
|
-
setTimeout(() => {
|
|
533
|
-
var _a;
|
|
534
|
-
const stillInAdPod = video.dataset.stormcloudAdPlaying === "true";
|
|
535
|
-
if (stillInAdPod) {
|
|
536
|
-
console.log(
|
|
537
|
-
"[IMA] Next ad started - keeping content muted/paused and ad container visible"
|
|
538
|
-
);
|
|
539
|
-
if (adContainerEl) {
|
|
540
|
-
adContainerEl.style.display = "flex";
|
|
541
|
-
adContainerEl.style.pointerEvents = "auto";
|
|
542
|
-
}
|
|
543
|
-
return;
|
|
544
|
-
}
|
|
545
|
-
console.log("[IMA] No next ad - resuming content");
|
|
546
|
-
video.muted = originalMutedState;
|
|
547
|
-
if (adContainerEl) {
|
|
548
|
-
adContainerEl.style.pointerEvents = "none";
|
|
549
|
-
adContainerEl.style.display = "none";
|
|
550
|
-
console.log(
|
|
551
|
-
"[IMA] Ad container hidden - pointer events disabled"
|
|
552
|
-
);
|
|
553
|
-
}
|
|
554
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
555
|
-
(_a = video.play()) == null ? void 0 : _a.catch(() => {
|
|
556
|
-
});
|
|
557
|
-
console.log("[IMA] Video resumed (VOD mode)");
|
|
558
|
-
} else {
|
|
559
|
-
console.log(
|
|
560
|
-
"[IMA] Video unmuted (Live mode - was never paused)"
|
|
561
|
-
);
|
|
562
|
-
}
|
|
563
|
-
}, 100);
|
|
564
534
|
}
|
|
565
535
|
);
|
|
566
536
|
adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
|
|
567
|
-
console.log("[IMA] All ads completed");
|
|
537
|
+
console.log("[IMA] All ads completed - notifying parent");
|
|
568
538
|
adPlaying = false;
|
|
569
|
-
video.muted = originalMutedState;
|
|
570
539
|
setAdPlayingFlag(false);
|
|
571
|
-
if (adContainerEl) {
|
|
572
|
-
adContainerEl.style.pointerEvents = "none";
|
|
573
|
-
adContainerEl.style.display = "none";
|
|
574
|
-
console.log(
|
|
575
|
-
"[IMA] Ad container hidden after all ads completed"
|
|
576
|
-
);
|
|
577
|
-
}
|
|
578
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
579
|
-
video.play().catch(() => {
|
|
580
|
-
});
|
|
581
|
-
console.log(
|
|
582
|
-
"[IMA] Video resumed after all ads completed (VOD mode)"
|
|
583
|
-
);
|
|
584
|
-
} else {
|
|
585
|
-
console.log(
|
|
586
|
-
"[IMA] Video unmuted after all ads completed (Live mode)"
|
|
587
|
-
);
|
|
588
|
-
}
|
|
589
540
|
emit("all_ads_completed");
|
|
590
541
|
});
|
|
591
542
|
console.log("[IMA] Ads manager event listeners attached");
|
|
@@ -708,8 +659,8 @@ function createImaController(video, options) {
|
|
|
708
659
|
},
|
|
709
660
|
async stop() {
|
|
710
661
|
var _a;
|
|
662
|
+
console.log("[IMA] Stopping ad playback");
|
|
711
663
|
adPlaying = false;
|
|
712
|
-
video.muted = originalMutedState;
|
|
713
664
|
setAdPlayingFlag(false);
|
|
714
665
|
if (adContainerEl) {
|
|
715
666
|
adContainerEl.style.pointerEvents = "none";
|
|
@@ -721,13 +672,6 @@ function createImaController(video, options) {
|
|
|
721
672
|
} catch {
|
|
722
673
|
}
|
|
723
674
|
destroyAdsManager();
|
|
724
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
725
|
-
video.play().catch(() => {
|
|
726
|
-
});
|
|
727
|
-
console.log("[IMA] Video resumed after stop (VOD mode)");
|
|
728
|
-
} else {
|
|
729
|
-
console.log("[IMA] Video unmuted after stop (Live mode)");
|
|
730
|
-
}
|
|
731
675
|
},
|
|
732
676
|
destroy() {
|
|
733
677
|
var _a;
|
|
@@ -1136,37 +1080,6 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1136
1080
|
adPlaying = false;
|
|
1137
1081
|
setAdPlayingFlag(false);
|
|
1138
1082
|
emit("content_resume");
|
|
1139
|
-
emit("all_ads_completed");
|
|
1140
|
-
setTimeout(() => {
|
|
1141
|
-
const stillInAdPod = contentVideo.dataset.stormcloudAdPlaying === "true";
|
|
1142
|
-
if (stillInAdPod) {
|
|
1143
|
-
console.log(
|
|
1144
|
-
"[HlsAdPlayer] Next ad started - keeping content muted/paused and ad container visible"
|
|
1145
|
-
);
|
|
1146
|
-
if (adContainerEl) {
|
|
1147
|
-
adContainerEl.style.display = "flex";
|
|
1148
|
-
adContainerEl.style.pointerEvents = "auto";
|
|
1149
|
-
}
|
|
1150
|
-
return;
|
|
1151
|
-
}
|
|
1152
|
-
console.log("[HlsAdPlayer] No next ad - resuming content");
|
|
1153
|
-
const previousMutedState = contentVideo.muted;
|
|
1154
|
-
contentVideo.muted = originalMutedState;
|
|
1155
|
-
console.log(
|
|
1156
|
-
`[HlsAdPlayer] Restored mute state: ${previousMutedState} -> ${originalMutedState}`
|
|
1157
|
-
);
|
|
1158
|
-
if (adContainerEl) {
|
|
1159
|
-
adContainerEl.style.display = "none";
|
|
1160
|
-
adContainerEl.style.pointerEvents = "none";
|
|
1161
|
-
}
|
|
1162
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
1163
|
-
contentVideo.play().catch(() => {
|
|
1164
|
-
});
|
|
1165
|
-
console.log("[HlsAdPlayer] Content resumed (VOD mode)");
|
|
1166
|
-
} else {
|
|
1167
|
-
console.log("[HlsAdPlayer] Content unmuted (Live mode)");
|
|
1168
|
-
}
|
|
1169
|
-
}, 100);
|
|
1170
1083
|
}
|
|
1171
1084
|
function handleAdError() {
|
|
1172
1085
|
console.log("[HlsAdPlayer] Handling ad error");
|
|
@@ -1204,7 +1117,7 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1204
1117
|
container.style.alignItems = "center";
|
|
1205
1118
|
container.style.justifyContent = "center";
|
|
1206
1119
|
container.style.pointerEvents = "none";
|
|
1207
|
-
container.style.zIndex = "
|
|
1120
|
+
container.style.zIndex = "10";
|
|
1208
1121
|
container.style.backgroundColor = "#000";
|
|
1209
1122
|
(_a = contentVideo.parentElement) == null ? void 0 : _a.appendChild(container);
|
|
1210
1123
|
adContainerEl = container;
|
|
@@ -1342,7 +1255,6 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1342
1255
|
console.log("[HlsAdPlayer] Stopping ad");
|
|
1343
1256
|
adPlaying = false;
|
|
1344
1257
|
setAdPlayingFlag(false);
|
|
1345
|
-
contentVideo.muted = originalMutedState;
|
|
1346
1258
|
if (adContainerEl) {
|
|
1347
1259
|
adContainerEl.style.display = "none";
|
|
1348
1260
|
adContainerEl.style.pointerEvents = "none";
|
|
@@ -1355,10 +1267,6 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1355
1267
|
adVideoElement.pause();
|
|
1356
1268
|
adVideoElement.src = "";
|
|
1357
1269
|
}
|
|
1358
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
1359
|
-
contentVideo.play().catch(() => {
|
|
1360
|
-
});
|
|
1361
|
-
}
|
|
1362
1270
|
currentAd = void 0;
|
|
1363
1271
|
},
|
|
1364
1272
|
destroy() {
|
|
@@ -1904,7 +1812,6 @@ var StormcloudVideoPlayer = class {
|
|
|
1904
1812
|
this.bufferedSegmentsCount = 0;
|
|
1905
1813
|
this.shouldAutoplayAfterBuffering = false;
|
|
1906
1814
|
this.hasInitialBufferCompleted = false;
|
|
1907
|
-
this.isTransitioningBetweenAds = false;
|
|
1908
1815
|
initializePolyfills();
|
|
1909
1816
|
const browserOverrides = getBrowserConfigOverrides();
|
|
1910
1817
|
this.config = { ...config, ...browserOverrides };
|
|
@@ -2168,9 +2075,12 @@ var StormcloudVideoPlayer = class {
|
|
|
2168
2075
|
this.ima.on("all_ads_completed", () => {
|
|
2169
2076
|
if (this.config.debugAdTiming) {
|
|
2170
2077
|
console.log(
|
|
2171
|
-
"[StormcloudVideoPlayer] IMA all_ads_completed event received"
|
|
2078
|
+
"[StormcloudVideoPlayer] IMA all_ads_completed event received - ending ad break"
|
|
2172
2079
|
);
|
|
2173
2080
|
}
|
|
2081
|
+
if (this.inAdBreak) {
|
|
2082
|
+
this.handleAdPodComplete();
|
|
2083
|
+
}
|
|
2174
2084
|
});
|
|
2175
2085
|
this.ima.on("ad_error", () => {
|
|
2176
2086
|
if (this.config.debugAdTiming) {
|
|
@@ -2209,57 +2119,43 @@ var StormcloudVideoPlayer = class {
|
|
|
2209
2119
|
"[StormcloudVideoPlayer] IMA content_resume event received",
|
|
2210
2120
|
{
|
|
2211
2121
|
inAdBreak: this.inAdBreak,
|
|
2212
|
-
isTransitioningBetweenAds: this.isTransitioningBetweenAds,
|
|
2213
2122
|
pendingAds: this.adPodQueue.length
|
|
2214
2123
|
}
|
|
2215
2124
|
);
|
|
2216
2125
|
}
|
|
2217
2126
|
this.clearAdFailsafeTimer();
|
|
2218
|
-
if (this.isTransitioningBetweenAds) {
|
|
2219
|
-
if (this.config.debugAdTiming) {
|
|
2220
|
-
console.log(
|
|
2221
|
-
"[StormcloudVideoPlayer] Transitioning between ads - keeping content muted/paused"
|
|
2222
|
-
);
|
|
2223
|
-
}
|
|
2224
|
-
return;
|
|
2225
|
-
}
|
|
2226
2127
|
if (!this.inAdBreak) {
|
|
2227
2128
|
if (this.config.debugAdTiming) {
|
|
2228
2129
|
console.log(
|
|
2229
|
-
"[StormcloudVideoPlayer] Not in ad break
|
|
2130
|
+
"[StormcloudVideoPlayer] Not in ad break - this shouldn't happen during pod"
|
|
2230
2131
|
);
|
|
2231
2132
|
}
|
|
2232
2133
|
return;
|
|
2233
2134
|
}
|
|
2234
2135
|
const remaining = this.getRemainingAdMs();
|
|
2235
2136
|
if (remaining > 500 && this.adPodQueue.length > 0) {
|
|
2236
|
-
this.isTransitioningBetweenAds = true;
|
|
2237
|
-
this.video.muted = true;
|
|
2238
|
-
if (!this.shouldContinueLiveStreamDuringAds()) {
|
|
2239
|
-
this.video.pause();
|
|
2240
|
-
}
|
|
2241
2137
|
const next = this.adPodQueue.shift();
|
|
2242
2138
|
this.currentAdIndex++;
|
|
2243
2139
|
if (this.config.debugAdTiming) {
|
|
2244
2140
|
console.log(
|
|
2245
|
-
`[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) -
|
|
2141
|
+
`[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) - main video stays muted, ad layer stays visible`
|
|
2246
2142
|
);
|
|
2247
2143
|
}
|
|
2248
2144
|
this.playSingleAd(next).catch(() => {
|
|
2249
|
-
|
|
2250
|
-
|
|
2145
|
+
if (this.config.debugAdTiming) {
|
|
2146
|
+
console.error(
|
|
2147
|
+
"[StormcloudVideoPlayer] Failed to play next ad in pod"
|
|
2148
|
+
);
|
|
2149
|
+
}
|
|
2150
|
+
this.handleAdPodComplete();
|
|
2251
2151
|
});
|
|
2252
2152
|
} else {
|
|
2253
2153
|
if (this.config.debugAdTiming) {
|
|
2254
|
-
console.log(
|
|
2154
|
+
console.log(
|
|
2155
|
+
"[StormcloudVideoPlayer] No more ads in pod - completing ad break"
|
|
2156
|
+
);
|
|
2255
2157
|
}
|
|
2256
|
-
this.
|
|
2257
|
-
this.expectedAdBreakDurationMs = void 0;
|
|
2258
|
-
this.currentAdBreakStartWallClockMs = void 0;
|
|
2259
|
-
this.currentAdIndex = 0;
|
|
2260
|
-
this.totalAdsInBreak = 0;
|
|
2261
|
-
this.showAds = false;
|
|
2262
|
-
this.clearAdStopTimer();
|
|
2158
|
+
this.handleAdPodComplete();
|
|
2263
2159
|
}
|
|
2264
2160
|
});
|
|
2265
2161
|
this.video.addEventListener("timeupdate", () => {
|
|
@@ -2977,23 +2873,11 @@ var StormcloudVideoPlayer = class {
|
|
|
2977
2873
|
maxExtensionMs
|
|
2978
2874
|
});
|
|
2979
2875
|
}
|
|
2980
|
-
this.inAdBreak = false;
|
|
2981
|
-
this.expectedAdBreakDurationMs = void 0;
|
|
2982
|
-
this.currentAdBreakStartWallClockMs = void 0;
|
|
2983
|
-
this.showAds = false;
|
|
2984
|
-
this.adPodQueue = [];
|
|
2985
|
-
this.currentAdIndex = 0;
|
|
2986
|
-
this.totalAdsInBreak = 0;
|
|
2987
|
-
this.clearAdFailsafeTimer();
|
|
2988
2876
|
if (adPlaying) {
|
|
2989
2877
|
this.ima.stop().catch(() => {
|
|
2990
2878
|
});
|
|
2991
|
-
return;
|
|
2992
|
-
}
|
|
2993
|
-
const originalMutedState = this.ima.getOriginalMutedState();
|
|
2994
|
-
if (this.video.muted !== originalMutedState) {
|
|
2995
|
-
this.video.muted = originalMutedState;
|
|
2996
2879
|
}
|
|
2880
|
+
this.handleAdPodComplete();
|
|
2997
2881
|
}
|
|
2998
2882
|
scheduleAdStartIn(delayMs) {
|
|
2999
2883
|
this.clearAdStartTimer();
|
|
@@ -3080,17 +2964,11 @@ var StormcloudVideoPlayer = class {
|
|
|
3080
2964
|
this.handleAdFailure();
|
|
3081
2965
|
}
|
|
3082
2966
|
}
|
|
3083
|
-
|
|
2967
|
+
handleAdPodComplete() {
|
|
3084
2968
|
var _a;
|
|
3085
2969
|
if (this.config.debugAdTiming) {
|
|
3086
2970
|
console.log(
|
|
3087
|
-
"[StormcloudVideoPlayer] Handling ad
|
|
3088
|
-
{
|
|
3089
|
-
inAdBreak: this.inAdBreak,
|
|
3090
|
-
showAds: this.showAds,
|
|
3091
|
-
videoPaused: this.video.paused,
|
|
3092
|
-
adPlaying: this.ima.isAdPlaying()
|
|
3093
|
-
}
|
|
2971
|
+
"[StormcloudVideoPlayer] Handling ad pod completion - resuming content"
|
|
3094
2972
|
);
|
|
3095
2973
|
}
|
|
3096
2974
|
this.inAdBreak = false;
|
|
@@ -3103,34 +2981,41 @@ var StormcloudVideoPlayer = class {
|
|
|
3103
2981
|
this.showAds = false;
|
|
3104
2982
|
this.currentAdIndex = 0;
|
|
3105
2983
|
this.totalAdsInBreak = 0;
|
|
3106
|
-
const currentMutedState = this.video.muted;
|
|
3107
2984
|
const originalMutedState = this.ima.getOriginalMutedState();
|
|
3108
2985
|
this.video.muted = originalMutedState;
|
|
3109
2986
|
if (this.config.debugAdTiming) {
|
|
3110
2987
|
console.log(
|
|
3111
|
-
`[StormcloudVideoPlayer] Restored mute state: ${
|
|
2988
|
+
`[StormcloudVideoPlayer] Restored main video mute state to: ${originalMutedState}`
|
|
3112
2989
|
);
|
|
3113
2990
|
}
|
|
3114
|
-
if (this.video.paused) {
|
|
2991
|
+
if (!this.shouldContinueLiveStreamDuringAds() && this.video.paused) {
|
|
3115
2992
|
if (this.config.debugAdTiming) {
|
|
3116
2993
|
console.log("[StormcloudVideoPlayer] Resuming paused video");
|
|
3117
2994
|
}
|
|
3118
2995
|
(_a = this.video.play()) == null ? void 0 : _a.catch((error) => {
|
|
3119
2996
|
if (this.config.debugAdTiming) {
|
|
3120
2997
|
console.error(
|
|
3121
|
-
"[StormcloudVideoPlayer] Failed to resume video
|
|
2998
|
+
"[StormcloudVideoPlayer] Failed to resume video:",
|
|
3122
2999
|
error
|
|
3123
3000
|
);
|
|
3124
3001
|
}
|
|
3125
3002
|
});
|
|
3126
|
-
} else {
|
|
3127
|
-
if (this.config.debugAdTiming) {
|
|
3128
|
-
console.log(
|
|
3129
|
-
"[StormcloudVideoPlayer] Video is already playing, no resume needed"
|
|
3130
|
-
);
|
|
3131
|
-
}
|
|
3132
3003
|
}
|
|
3133
3004
|
}
|
|
3005
|
+
handleAdFailure() {
|
|
3006
|
+
if (this.config.debugAdTiming) {
|
|
3007
|
+
console.log(
|
|
3008
|
+
"[StormcloudVideoPlayer] Handling ad failure - resuming content",
|
|
3009
|
+
{
|
|
3010
|
+
inAdBreak: this.inAdBreak,
|
|
3011
|
+
showAds: this.showAds,
|
|
3012
|
+
videoPaused: this.video.paused,
|
|
3013
|
+
adPlaying: this.ima.isAdPlaying()
|
|
3014
|
+
}
|
|
3015
|
+
);
|
|
3016
|
+
}
|
|
3017
|
+
this.handleAdPodComplete();
|
|
3018
|
+
}
|
|
3134
3019
|
startAdFailsafeTimer() {
|
|
3135
3020
|
var _a;
|
|
3136
3021
|
this.clearAdFailsafeTimer();
|