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
|
@@ -327,11 +327,12 @@ function createImaController(video, options) {
|
|
|
327
327
|
container.style.top = "0";
|
|
328
328
|
container.style.right = "0";
|
|
329
329
|
container.style.bottom = "0";
|
|
330
|
-
container.style.display = "
|
|
330
|
+
container.style.display = "none";
|
|
331
331
|
container.style.alignItems = "center";
|
|
332
332
|
container.style.justifyContent = "center";
|
|
333
333
|
container.style.pointerEvents = "none";
|
|
334
|
-
container.style.zIndex = "
|
|
334
|
+
container.style.zIndex = "10";
|
|
335
|
+
container.style.backgroundColor = "#000";
|
|
335
336
|
(_a = video.parentElement) == null ? void 0 : _a.appendChild(container);
|
|
336
337
|
adContainerEl = container;
|
|
337
338
|
adDisplayContainer = new google.ima.AdDisplayContainer(
|
|
@@ -401,7 +402,8 @@ function createImaController(video, options) {
|
|
|
401
402
|
container.style.alignItems = "center";
|
|
402
403
|
container.style.justifyContent = "center";
|
|
403
404
|
container.style.pointerEvents = "none";
|
|
404
|
-
container.style.zIndex = "
|
|
405
|
+
container.style.zIndex = "10";
|
|
406
|
+
container.style.backgroundColor = "#000";
|
|
405
407
|
if (!video.parentElement) {
|
|
406
408
|
throw new Error("Video element has no parent for ad container");
|
|
407
409
|
}
|
|
@@ -532,63 +534,12 @@ function createImaController(video, options) {
|
|
|
532
534
|
adPlaying = false;
|
|
533
535
|
setAdPlayingFlag(false);
|
|
534
536
|
emit("content_resume");
|
|
535
|
-
setTimeout(() => {
|
|
536
|
-
var _a;
|
|
537
|
-
const stillInAdPod = video.dataset.stormcloudAdPlaying === "true";
|
|
538
|
-
if (stillInAdPod) {
|
|
539
|
-
console.log(
|
|
540
|
-
"[IMA] Next ad started - keeping content muted/paused and ad container visible"
|
|
541
|
-
);
|
|
542
|
-
if (adContainerEl) {
|
|
543
|
-
adContainerEl.style.display = "flex";
|
|
544
|
-
adContainerEl.style.pointerEvents = "auto";
|
|
545
|
-
}
|
|
546
|
-
return;
|
|
547
|
-
}
|
|
548
|
-
console.log("[IMA] No next ad - resuming content");
|
|
549
|
-
video.muted = originalMutedState;
|
|
550
|
-
if (adContainerEl) {
|
|
551
|
-
adContainerEl.style.pointerEvents = "none";
|
|
552
|
-
adContainerEl.style.display = "none";
|
|
553
|
-
console.log(
|
|
554
|
-
"[IMA] Ad container hidden - pointer events disabled"
|
|
555
|
-
);
|
|
556
|
-
}
|
|
557
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
558
|
-
(_a = video.play()) == null ? void 0 : _a.catch(() => {
|
|
559
|
-
});
|
|
560
|
-
console.log("[IMA] Video resumed (VOD mode)");
|
|
561
|
-
} else {
|
|
562
|
-
console.log(
|
|
563
|
-
"[IMA] Video unmuted (Live mode - was never paused)"
|
|
564
|
-
);
|
|
565
|
-
}
|
|
566
|
-
}, 100);
|
|
567
537
|
}
|
|
568
538
|
);
|
|
569
539
|
adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
|
|
570
|
-
console.log("[IMA] All ads completed");
|
|
540
|
+
console.log("[IMA] All ads completed - notifying parent");
|
|
571
541
|
adPlaying = false;
|
|
572
|
-
video.muted = originalMutedState;
|
|
573
542
|
setAdPlayingFlag(false);
|
|
574
|
-
if (adContainerEl) {
|
|
575
|
-
adContainerEl.style.pointerEvents = "none";
|
|
576
|
-
adContainerEl.style.display = "none";
|
|
577
|
-
console.log(
|
|
578
|
-
"[IMA] Ad container hidden after all ads completed"
|
|
579
|
-
);
|
|
580
|
-
}
|
|
581
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
582
|
-
video.play().catch(() => {
|
|
583
|
-
});
|
|
584
|
-
console.log(
|
|
585
|
-
"[IMA] Video resumed after all ads completed (VOD mode)"
|
|
586
|
-
);
|
|
587
|
-
} else {
|
|
588
|
-
console.log(
|
|
589
|
-
"[IMA] Video unmuted after all ads completed (Live mode)"
|
|
590
|
-
);
|
|
591
|
-
}
|
|
592
543
|
emit("all_ads_completed");
|
|
593
544
|
});
|
|
594
545
|
console.log("[IMA] Ads manager event listeners attached");
|
|
@@ -711,8 +662,8 @@ function createImaController(video, options) {
|
|
|
711
662
|
},
|
|
712
663
|
async stop() {
|
|
713
664
|
var _a;
|
|
665
|
+
console.log("[IMA] Stopping ad playback");
|
|
714
666
|
adPlaying = false;
|
|
715
|
-
video.muted = originalMutedState;
|
|
716
667
|
setAdPlayingFlag(false);
|
|
717
668
|
if (adContainerEl) {
|
|
718
669
|
adContainerEl.style.pointerEvents = "none";
|
|
@@ -724,13 +675,6 @@ function createImaController(video, options) {
|
|
|
724
675
|
} catch {
|
|
725
676
|
}
|
|
726
677
|
destroyAdsManager();
|
|
727
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
728
|
-
video.play().catch(() => {
|
|
729
|
-
});
|
|
730
|
-
console.log("[IMA] Video resumed after stop (VOD mode)");
|
|
731
|
-
} else {
|
|
732
|
-
console.log("[IMA] Video unmuted after stop (Live mode)");
|
|
733
|
-
}
|
|
734
678
|
},
|
|
735
679
|
destroy() {
|
|
736
680
|
var _a;
|
|
@@ -1139,37 +1083,6 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1139
1083
|
adPlaying = false;
|
|
1140
1084
|
setAdPlayingFlag(false);
|
|
1141
1085
|
emit("content_resume");
|
|
1142
|
-
emit("all_ads_completed");
|
|
1143
|
-
setTimeout(() => {
|
|
1144
|
-
const stillInAdPod = contentVideo.dataset.stormcloudAdPlaying === "true";
|
|
1145
|
-
if (stillInAdPod) {
|
|
1146
|
-
console.log(
|
|
1147
|
-
"[HlsAdPlayer] Next ad started - keeping content muted/paused and ad container visible"
|
|
1148
|
-
);
|
|
1149
|
-
if (adContainerEl) {
|
|
1150
|
-
adContainerEl.style.display = "flex";
|
|
1151
|
-
adContainerEl.style.pointerEvents = "auto";
|
|
1152
|
-
}
|
|
1153
|
-
return;
|
|
1154
|
-
}
|
|
1155
|
-
console.log("[HlsAdPlayer] No next ad - resuming content");
|
|
1156
|
-
const previousMutedState = contentVideo.muted;
|
|
1157
|
-
contentVideo.muted = originalMutedState;
|
|
1158
|
-
console.log(
|
|
1159
|
-
`[HlsAdPlayer] Restored mute state: ${previousMutedState} -> ${originalMutedState}`
|
|
1160
|
-
);
|
|
1161
|
-
if (adContainerEl) {
|
|
1162
|
-
adContainerEl.style.display = "none";
|
|
1163
|
-
adContainerEl.style.pointerEvents = "none";
|
|
1164
|
-
}
|
|
1165
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
1166
|
-
contentVideo.play().catch(() => {
|
|
1167
|
-
});
|
|
1168
|
-
console.log("[HlsAdPlayer] Content resumed (VOD mode)");
|
|
1169
|
-
} else {
|
|
1170
|
-
console.log("[HlsAdPlayer] Content unmuted (Live mode)");
|
|
1171
|
-
}
|
|
1172
|
-
}, 100);
|
|
1173
1086
|
}
|
|
1174
1087
|
function handleAdError() {
|
|
1175
1088
|
console.log("[HlsAdPlayer] Handling ad error");
|
|
@@ -1207,7 +1120,7 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1207
1120
|
container.style.alignItems = "center";
|
|
1208
1121
|
container.style.justifyContent = "center";
|
|
1209
1122
|
container.style.pointerEvents = "none";
|
|
1210
|
-
container.style.zIndex = "
|
|
1123
|
+
container.style.zIndex = "10";
|
|
1211
1124
|
container.style.backgroundColor = "#000";
|
|
1212
1125
|
(_a = contentVideo.parentElement) == null ? void 0 : _a.appendChild(container);
|
|
1213
1126
|
adContainerEl = container;
|
|
@@ -1345,7 +1258,6 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1345
1258
|
console.log("[HlsAdPlayer] Stopping ad");
|
|
1346
1259
|
adPlaying = false;
|
|
1347
1260
|
setAdPlayingFlag(false);
|
|
1348
|
-
contentVideo.muted = originalMutedState;
|
|
1349
1261
|
if (adContainerEl) {
|
|
1350
1262
|
adContainerEl.style.display = "none";
|
|
1351
1263
|
adContainerEl.style.pointerEvents = "none";
|
|
@@ -1358,10 +1270,6 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1358
1270
|
adVideoElement.pause();
|
|
1359
1271
|
adVideoElement.src = "";
|
|
1360
1272
|
}
|
|
1361
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
1362
|
-
contentVideo.play().catch(() => {
|
|
1363
|
-
});
|
|
1364
|
-
}
|
|
1365
1273
|
currentAd = void 0;
|
|
1366
1274
|
},
|
|
1367
1275
|
destroy() {
|
|
@@ -1907,7 +1815,6 @@ var StormcloudVideoPlayer = class {
|
|
|
1907
1815
|
this.bufferedSegmentsCount = 0;
|
|
1908
1816
|
this.shouldAutoplayAfterBuffering = false;
|
|
1909
1817
|
this.hasInitialBufferCompleted = false;
|
|
1910
|
-
this.isTransitioningBetweenAds = false;
|
|
1911
1818
|
initializePolyfills();
|
|
1912
1819
|
const browserOverrides = getBrowserConfigOverrides();
|
|
1913
1820
|
this.config = { ...config, ...browserOverrides };
|
|
@@ -2171,9 +2078,12 @@ var StormcloudVideoPlayer = class {
|
|
|
2171
2078
|
this.ima.on("all_ads_completed", () => {
|
|
2172
2079
|
if (this.config.debugAdTiming) {
|
|
2173
2080
|
console.log(
|
|
2174
|
-
"[StormcloudVideoPlayer] IMA all_ads_completed event received"
|
|
2081
|
+
"[StormcloudVideoPlayer] IMA all_ads_completed event received - ending ad break"
|
|
2175
2082
|
);
|
|
2176
2083
|
}
|
|
2084
|
+
if (this.inAdBreak) {
|
|
2085
|
+
this.handleAdPodComplete();
|
|
2086
|
+
}
|
|
2177
2087
|
});
|
|
2178
2088
|
this.ima.on("ad_error", () => {
|
|
2179
2089
|
if (this.config.debugAdTiming) {
|
|
@@ -2212,57 +2122,43 @@ var StormcloudVideoPlayer = class {
|
|
|
2212
2122
|
"[StormcloudVideoPlayer] IMA content_resume event received",
|
|
2213
2123
|
{
|
|
2214
2124
|
inAdBreak: this.inAdBreak,
|
|
2215
|
-
isTransitioningBetweenAds: this.isTransitioningBetweenAds,
|
|
2216
2125
|
pendingAds: this.adPodQueue.length
|
|
2217
2126
|
}
|
|
2218
2127
|
);
|
|
2219
2128
|
}
|
|
2220
2129
|
this.clearAdFailsafeTimer();
|
|
2221
|
-
if (this.isTransitioningBetweenAds) {
|
|
2222
|
-
if (this.config.debugAdTiming) {
|
|
2223
|
-
console.log(
|
|
2224
|
-
"[StormcloudVideoPlayer] Transitioning between ads - keeping content muted/paused"
|
|
2225
|
-
);
|
|
2226
|
-
}
|
|
2227
|
-
return;
|
|
2228
|
-
}
|
|
2229
2130
|
if (!this.inAdBreak) {
|
|
2230
2131
|
if (this.config.debugAdTiming) {
|
|
2231
2132
|
console.log(
|
|
2232
|
-
"[StormcloudVideoPlayer] Not in ad break
|
|
2133
|
+
"[StormcloudVideoPlayer] Not in ad break - this shouldn't happen during pod"
|
|
2233
2134
|
);
|
|
2234
2135
|
}
|
|
2235
2136
|
return;
|
|
2236
2137
|
}
|
|
2237
2138
|
const remaining = this.getRemainingAdMs();
|
|
2238
2139
|
if (remaining > 500 && this.adPodQueue.length > 0) {
|
|
2239
|
-
this.isTransitioningBetweenAds = true;
|
|
2240
|
-
this.video.muted = true;
|
|
2241
|
-
if (!this.shouldContinueLiveStreamDuringAds()) {
|
|
2242
|
-
this.video.pause();
|
|
2243
|
-
}
|
|
2244
2140
|
const next = this.adPodQueue.shift();
|
|
2245
2141
|
this.currentAdIndex++;
|
|
2246
2142
|
if (this.config.debugAdTiming) {
|
|
2247
2143
|
console.log(
|
|
2248
|
-
`[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) -
|
|
2144
|
+
`[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) - main video stays muted, ad layer stays visible`
|
|
2249
2145
|
);
|
|
2250
2146
|
}
|
|
2251
2147
|
this.playSingleAd(next).catch(() => {
|
|
2252
|
-
|
|
2253
|
-
|
|
2148
|
+
if (this.config.debugAdTiming) {
|
|
2149
|
+
console.error(
|
|
2150
|
+
"[StormcloudVideoPlayer] Failed to play next ad in pod"
|
|
2151
|
+
);
|
|
2152
|
+
}
|
|
2153
|
+
this.handleAdPodComplete();
|
|
2254
2154
|
});
|
|
2255
2155
|
} else {
|
|
2256
2156
|
if (this.config.debugAdTiming) {
|
|
2257
|
-
console.log(
|
|
2157
|
+
console.log(
|
|
2158
|
+
"[StormcloudVideoPlayer] No more ads in pod - completing ad break"
|
|
2159
|
+
);
|
|
2258
2160
|
}
|
|
2259
|
-
this.
|
|
2260
|
-
this.expectedAdBreakDurationMs = void 0;
|
|
2261
|
-
this.currentAdBreakStartWallClockMs = void 0;
|
|
2262
|
-
this.currentAdIndex = 0;
|
|
2263
|
-
this.totalAdsInBreak = 0;
|
|
2264
|
-
this.showAds = false;
|
|
2265
|
-
this.clearAdStopTimer();
|
|
2161
|
+
this.handleAdPodComplete();
|
|
2266
2162
|
}
|
|
2267
2163
|
});
|
|
2268
2164
|
this.video.addEventListener("timeupdate", () => {
|
|
@@ -2980,23 +2876,11 @@ var StormcloudVideoPlayer = class {
|
|
|
2980
2876
|
maxExtensionMs
|
|
2981
2877
|
});
|
|
2982
2878
|
}
|
|
2983
|
-
this.inAdBreak = false;
|
|
2984
|
-
this.expectedAdBreakDurationMs = void 0;
|
|
2985
|
-
this.currentAdBreakStartWallClockMs = void 0;
|
|
2986
|
-
this.showAds = false;
|
|
2987
|
-
this.adPodQueue = [];
|
|
2988
|
-
this.currentAdIndex = 0;
|
|
2989
|
-
this.totalAdsInBreak = 0;
|
|
2990
|
-
this.clearAdFailsafeTimer();
|
|
2991
2879
|
if (adPlaying) {
|
|
2992
2880
|
this.ima.stop().catch(() => {
|
|
2993
2881
|
});
|
|
2994
|
-
return;
|
|
2995
|
-
}
|
|
2996
|
-
const originalMutedState = this.ima.getOriginalMutedState();
|
|
2997
|
-
if (this.video.muted !== originalMutedState) {
|
|
2998
|
-
this.video.muted = originalMutedState;
|
|
2999
2882
|
}
|
|
2883
|
+
this.handleAdPodComplete();
|
|
3000
2884
|
}
|
|
3001
2885
|
scheduleAdStartIn(delayMs) {
|
|
3002
2886
|
this.clearAdStartTimer();
|
|
@@ -3083,17 +2967,11 @@ var StormcloudVideoPlayer = class {
|
|
|
3083
2967
|
this.handleAdFailure();
|
|
3084
2968
|
}
|
|
3085
2969
|
}
|
|
3086
|
-
|
|
2970
|
+
handleAdPodComplete() {
|
|
3087
2971
|
var _a;
|
|
3088
2972
|
if (this.config.debugAdTiming) {
|
|
3089
2973
|
console.log(
|
|
3090
|
-
"[StormcloudVideoPlayer] Handling ad
|
|
3091
|
-
{
|
|
3092
|
-
inAdBreak: this.inAdBreak,
|
|
3093
|
-
showAds: this.showAds,
|
|
3094
|
-
videoPaused: this.video.paused,
|
|
3095
|
-
adPlaying: this.ima.isAdPlaying()
|
|
3096
|
-
}
|
|
2974
|
+
"[StormcloudVideoPlayer] Handling ad pod completion - resuming content"
|
|
3097
2975
|
);
|
|
3098
2976
|
}
|
|
3099
2977
|
this.inAdBreak = false;
|
|
@@ -3106,34 +2984,41 @@ var StormcloudVideoPlayer = class {
|
|
|
3106
2984
|
this.showAds = false;
|
|
3107
2985
|
this.currentAdIndex = 0;
|
|
3108
2986
|
this.totalAdsInBreak = 0;
|
|
3109
|
-
const currentMutedState = this.video.muted;
|
|
3110
2987
|
const originalMutedState = this.ima.getOriginalMutedState();
|
|
3111
2988
|
this.video.muted = originalMutedState;
|
|
3112
2989
|
if (this.config.debugAdTiming) {
|
|
3113
2990
|
console.log(
|
|
3114
|
-
`[StormcloudVideoPlayer] Restored mute state: ${
|
|
2991
|
+
`[StormcloudVideoPlayer] Restored main video mute state to: ${originalMutedState}`
|
|
3115
2992
|
);
|
|
3116
2993
|
}
|
|
3117
|
-
if (this.video.paused) {
|
|
2994
|
+
if (!this.shouldContinueLiveStreamDuringAds() && this.video.paused) {
|
|
3118
2995
|
if (this.config.debugAdTiming) {
|
|
3119
2996
|
console.log("[StormcloudVideoPlayer] Resuming paused video");
|
|
3120
2997
|
}
|
|
3121
2998
|
(_a = this.video.play()) == null ? void 0 : _a.catch((error) => {
|
|
3122
2999
|
if (this.config.debugAdTiming) {
|
|
3123
3000
|
console.error(
|
|
3124
|
-
"[StormcloudVideoPlayer] Failed to resume video
|
|
3001
|
+
"[StormcloudVideoPlayer] Failed to resume video:",
|
|
3125
3002
|
error
|
|
3126
3003
|
);
|
|
3127
3004
|
}
|
|
3128
3005
|
});
|
|
3129
|
-
} else {
|
|
3130
|
-
if (this.config.debugAdTiming) {
|
|
3131
|
-
console.log(
|
|
3132
|
-
"[StormcloudVideoPlayer] Video is already playing, no resume needed"
|
|
3133
|
-
);
|
|
3134
|
-
}
|
|
3135
3006
|
}
|
|
3136
3007
|
}
|
|
3008
|
+
handleAdFailure() {
|
|
3009
|
+
if (this.config.debugAdTiming) {
|
|
3010
|
+
console.log(
|
|
3011
|
+
"[StormcloudVideoPlayer] Handling ad failure - resuming content",
|
|
3012
|
+
{
|
|
3013
|
+
inAdBreak: this.inAdBreak,
|
|
3014
|
+
showAds: this.showAds,
|
|
3015
|
+
videoPaused: this.video.paused,
|
|
3016
|
+
adPlaying: this.ima.isAdPlaying()
|
|
3017
|
+
}
|
|
3018
|
+
);
|
|
3019
|
+
}
|
|
3020
|
+
this.handleAdPodComplete();
|
|
3021
|
+
}
|
|
3137
3022
|
startAdFailsafeTimer() {
|
|
3138
3023
|
var _a;
|
|
3139
3024
|
this.clearAdFailsafeTimer();
|