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
package/lib/players/index.cjs
CHANGED
|
@@ -366,11 +366,12 @@ function createImaController(video, options) {
|
|
|
366
366
|
container.style.top = "0";
|
|
367
367
|
container.style.right = "0";
|
|
368
368
|
container.style.bottom = "0";
|
|
369
|
-
container.style.display = "
|
|
369
|
+
container.style.display = "none";
|
|
370
370
|
container.style.alignItems = "center";
|
|
371
371
|
container.style.justifyContent = "center";
|
|
372
372
|
container.style.pointerEvents = "none";
|
|
373
|
-
container.style.zIndex = "
|
|
373
|
+
container.style.zIndex = "10";
|
|
374
|
+
container.style.backgroundColor = "#000";
|
|
374
375
|
(_a = video.parentElement) == null ? void 0 : _a.appendChild(container);
|
|
375
376
|
adContainerEl = container;
|
|
376
377
|
adDisplayContainer = new google.ima.AdDisplayContainer(
|
|
@@ -440,7 +441,8 @@ function createImaController(video, options) {
|
|
|
440
441
|
container.style.alignItems = "center";
|
|
441
442
|
container.style.justifyContent = "center";
|
|
442
443
|
container.style.pointerEvents = "none";
|
|
443
|
-
container.style.zIndex = "
|
|
444
|
+
container.style.zIndex = "10";
|
|
445
|
+
container.style.backgroundColor = "#000";
|
|
444
446
|
if (!video.parentElement) {
|
|
445
447
|
throw new Error("Video element has no parent for ad container");
|
|
446
448
|
}
|
|
@@ -571,63 +573,12 @@ function createImaController(video, options) {
|
|
|
571
573
|
adPlaying = false;
|
|
572
574
|
setAdPlayingFlag(false);
|
|
573
575
|
emit("content_resume");
|
|
574
|
-
setTimeout(() => {
|
|
575
|
-
var _a;
|
|
576
|
-
const stillInAdPod = video.dataset.stormcloudAdPlaying === "true";
|
|
577
|
-
if (stillInAdPod) {
|
|
578
|
-
console.log(
|
|
579
|
-
"[IMA] Next ad started - keeping content muted/paused and ad container visible"
|
|
580
|
-
);
|
|
581
|
-
if (adContainerEl) {
|
|
582
|
-
adContainerEl.style.display = "flex";
|
|
583
|
-
adContainerEl.style.pointerEvents = "auto";
|
|
584
|
-
}
|
|
585
|
-
return;
|
|
586
|
-
}
|
|
587
|
-
console.log("[IMA] No next ad - resuming content");
|
|
588
|
-
video.muted = originalMutedState;
|
|
589
|
-
if (adContainerEl) {
|
|
590
|
-
adContainerEl.style.pointerEvents = "none";
|
|
591
|
-
adContainerEl.style.display = "none";
|
|
592
|
-
console.log(
|
|
593
|
-
"[IMA] Ad container hidden - pointer events disabled"
|
|
594
|
-
);
|
|
595
|
-
}
|
|
596
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
597
|
-
(_a = video.play()) == null ? void 0 : _a.catch(() => {
|
|
598
|
-
});
|
|
599
|
-
console.log("[IMA] Video resumed (VOD mode)");
|
|
600
|
-
} else {
|
|
601
|
-
console.log(
|
|
602
|
-
"[IMA] Video unmuted (Live mode - was never paused)"
|
|
603
|
-
);
|
|
604
|
-
}
|
|
605
|
-
}, 100);
|
|
606
576
|
}
|
|
607
577
|
);
|
|
608
578
|
adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
|
|
609
|
-
console.log("[IMA] All ads completed");
|
|
579
|
+
console.log("[IMA] All ads completed - notifying parent");
|
|
610
580
|
adPlaying = false;
|
|
611
|
-
video.muted = originalMutedState;
|
|
612
581
|
setAdPlayingFlag(false);
|
|
613
|
-
if (adContainerEl) {
|
|
614
|
-
adContainerEl.style.pointerEvents = "none";
|
|
615
|
-
adContainerEl.style.display = "none";
|
|
616
|
-
console.log(
|
|
617
|
-
"[IMA] Ad container hidden after all ads completed"
|
|
618
|
-
);
|
|
619
|
-
}
|
|
620
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
621
|
-
video.play().catch(() => {
|
|
622
|
-
});
|
|
623
|
-
console.log(
|
|
624
|
-
"[IMA] Video resumed after all ads completed (VOD mode)"
|
|
625
|
-
);
|
|
626
|
-
} else {
|
|
627
|
-
console.log(
|
|
628
|
-
"[IMA] Video unmuted after all ads completed (Live mode)"
|
|
629
|
-
);
|
|
630
|
-
}
|
|
631
582
|
emit("all_ads_completed");
|
|
632
583
|
});
|
|
633
584
|
console.log("[IMA] Ads manager event listeners attached");
|
|
@@ -750,8 +701,8 @@ function createImaController(video, options) {
|
|
|
750
701
|
},
|
|
751
702
|
async stop() {
|
|
752
703
|
var _a;
|
|
704
|
+
console.log("[IMA] Stopping ad playback");
|
|
753
705
|
adPlaying = false;
|
|
754
|
-
video.muted = originalMutedState;
|
|
755
706
|
setAdPlayingFlag(false);
|
|
756
707
|
if (adContainerEl) {
|
|
757
708
|
adContainerEl.style.pointerEvents = "none";
|
|
@@ -763,13 +714,6 @@ function createImaController(video, options) {
|
|
|
763
714
|
} catch {
|
|
764
715
|
}
|
|
765
716
|
destroyAdsManager();
|
|
766
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
767
|
-
video.play().catch(() => {
|
|
768
|
-
});
|
|
769
|
-
console.log("[IMA] Video resumed after stop (VOD mode)");
|
|
770
|
-
} else {
|
|
771
|
-
console.log("[IMA] Video unmuted after stop (Live mode)");
|
|
772
|
-
}
|
|
773
717
|
},
|
|
774
718
|
destroy() {
|
|
775
719
|
var _a;
|
|
@@ -1178,37 +1122,6 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1178
1122
|
adPlaying = false;
|
|
1179
1123
|
setAdPlayingFlag(false);
|
|
1180
1124
|
emit("content_resume");
|
|
1181
|
-
emit("all_ads_completed");
|
|
1182
|
-
setTimeout(() => {
|
|
1183
|
-
const stillInAdPod = contentVideo.dataset.stormcloudAdPlaying === "true";
|
|
1184
|
-
if (stillInAdPod) {
|
|
1185
|
-
console.log(
|
|
1186
|
-
"[HlsAdPlayer] Next ad started - keeping content muted/paused and ad container visible"
|
|
1187
|
-
);
|
|
1188
|
-
if (adContainerEl) {
|
|
1189
|
-
adContainerEl.style.display = "flex";
|
|
1190
|
-
adContainerEl.style.pointerEvents = "auto";
|
|
1191
|
-
}
|
|
1192
|
-
return;
|
|
1193
|
-
}
|
|
1194
|
-
console.log("[HlsAdPlayer] No next ad - resuming content");
|
|
1195
|
-
const previousMutedState = contentVideo.muted;
|
|
1196
|
-
contentVideo.muted = originalMutedState;
|
|
1197
|
-
console.log(
|
|
1198
|
-
`[HlsAdPlayer] Restored mute state: ${previousMutedState} -> ${originalMutedState}`
|
|
1199
|
-
);
|
|
1200
|
-
if (adContainerEl) {
|
|
1201
|
-
adContainerEl.style.display = "none";
|
|
1202
|
-
adContainerEl.style.pointerEvents = "none";
|
|
1203
|
-
}
|
|
1204
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
1205
|
-
contentVideo.play().catch(() => {
|
|
1206
|
-
});
|
|
1207
|
-
console.log("[HlsAdPlayer] Content resumed (VOD mode)");
|
|
1208
|
-
} else {
|
|
1209
|
-
console.log("[HlsAdPlayer] Content unmuted (Live mode)");
|
|
1210
|
-
}
|
|
1211
|
-
}, 100);
|
|
1212
1125
|
}
|
|
1213
1126
|
function handleAdError() {
|
|
1214
1127
|
console.log("[HlsAdPlayer] Handling ad error");
|
|
@@ -1246,7 +1159,7 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1246
1159
|
container.style.alignItems = "center";
|
|
1247
1160
|
container.style.justifyContent = "center";
|
|
1248
1161
|
container.style.pointerEvents = "none";
|
|
1249
|
-
container.style.zIndex = "
|
|
1162
|
+
container.style.zIndex = "10";
|
|
1250
1163
|
container.style.backgroundColor = "#000";
|
|
1251
1164
|
(_a = contentVideo.parentElement) == null ? void 0 : _a.appendChild(container);
|
|
1252
1165
|
adContainerEl = container;
|
|
@@ -1384,7 +1297,6 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1384
1297
|
console.log("[HlsAdPlayer] Stopping ad");
|
|
1385
1298
|
adPlaying = false;
|
|
1386
1299
|
setAdPlayingFlag(false);
|
|
1387
|
-
contentVideo.muted = originalMutedState;
|
|
1388
1300
|
if (adContainerEl) {
|
|
1389
1301
|
adContainerEl.style.display = "none";
|
|
1390
1302
|
adContainerEl.style.pointerEvents = "none";
|
|
@@ -1397,10 +1309,6 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1397
1309
|
adVideoElement.pause();
|
|
1398
1310
|
adVideoElement.src = "";
|
|
1399
1311
|
}
|
|
1400
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
1401
|
-
contentVideo.play().catch(() => {
|
|
1402
|
-
});
|
|
1403
|
-
}
|
|
1404
1312
|
currentAd = void 0;
|
|
1405
1313
|
},
|
|
1406
1314
|
destroy() {
|
|
@@ -1946,7 +1854,6 @@ var StormcloudVideoPlayer = class {
|
|
|
1946
1854
|
this.bufferedSegmentsCount = 0;
|
|
1947
1855
|
this.shouldAutoplayAfterBuffering = false;
|
|
1948
1856
|
this.hasInitialBufferCompleted = false;
|
|
1949
|
-
this.isTransitioningBetweenAds = false;
|
|
1950
1857
|
initializePolyfills();
|
|
1951
1858
|
const browserOverrides = getBrowserConfigOverrides();
|
|
1952
1859
|
this.config = { ...config, ...browserOverrides };
|
|
@@ -2210,9 +2117,12 @@ var StormcloudVideoPlayer = class {
|
|
|
2210
2117
|
this.ima.on("all_ads_completed", () => {
|
|
2211
2118
|
if (this.config.debugAdTiming) {
|
|
2212
2119
|
console.log(
|
|
2213
|
-
"[StormcloudVideoPlayer] IMA all_ads_completed event received"
|
|
2120
|
+
"[StormcloudVideoPlayer] IMA all_ads_completed event received - ending ad break"
|
|
2214
2121
|
);
|
|
2215
2122
|
}
|
|
2123
|
+
if (this.inAdBreak) {
|
|
2124
|
+
this.handleAdPodComplete();
|
|
2125
|
+
}
|
|
2216
2126
|
});
|
|
2217
2127
|
this.ima.on("ad_error", () => {
|
|
2218
2128
|
if (this.config.debugAdTiming) {
|
|
@@ -2251,57 +2161,43 @@ var StormcloudVideoPlayer = class {
|
|
|
2251
2161
|
"[StormcloudVideoPlayer] IMA content_resume event received",
|
|
2252
2162
|
{
|
|
2253
2163
|
inAdBreak: this.inAdBreak,
|
|
2254
|
-
isTransitioningBetweenAds: this.isTransitioningBetweenAds,
|
|
2255
2164
|
pendingAds: this.adPodQueue.length
|
|
2256
2165
|
}
|
|
2257
2166
|
);
|
|
2258
2167
|
}
|
|
2259
2168
|
this.clearAdFailsafeTimer();
|
|
2260
|
-
if (this.isTransitioningBetweenAds) {
|
|
2261
|
-
if (this.config.debugAdTiming) {
|
|
2262
|
-
console.log(
|
|
2263
|
-
"[StormcloudVideoPlayer] Transitioning between ads - keeping content muted/paused"
|
|
2264
|
-
);
|
|
2265
|
-
}
|
|
2266
|
-
return;
|
|
2267
|
-
}
|
|
2268
2169
|
if (!this.inAdBreak) {
|
|
2269
2170
|
if (this.config.debugAdTiming) {
|
|
2270
2171
|
console.log(
|
|
2271
|
-
"[StormcloudVideoPlayer] Not in ad break
|
|
2172
|
+
"[StormcloudVideoPlayer] Not in ad break - this shouldn't happen during pod"
|
|
2272
2173
|
);
|
|
2273
2174
|
}
|
|
2274
2175
|
return;
|
|
2275
2176
|
}
|
|
2276
2177
|
const remaining = this.getRemainingAdMs();
|
|
2277
2178
|
if (remaining > 500 && this.adPodQueue.length > 0) {
|
|
2278
|
-
this.isTransitioningBetweenAds = true;
|
|
2279
|
-
this.video.muted = true;
|
|
2280
|
-
if (!this.shouldContinueLiveStreamDuringAds()) {
|
|
2281
|
-
this.video.pause();
|
|
2282
|
-
}
|
|
2283
2179
|
const next = this.adPodQueue.shift();
|
|
2284
2180
|
this.currentAdIndex++;
|
|
2285
2181
|
if (this.config.debugAdTiming) {
|
|
2286
2182
|
console.log(
|
|
2287
|
-
`[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) -
|
|
2183
|
+
`[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) - main video stays muted, ad layer stays visible`
|
|
2288
2184
|
);
|
|
2289
2185
|
}
|
|
2290
2186
|
this.playSingleAd(next).catch(() => {
|
|
2291
|
-
|
|
2292
|
-
|
|
2187
|
+
if (this.config.debugAdTiming) {
|
|
2188
|
+
console.error(
|
|
2189
|
+
"[StormcloudVideoPlayer] Failed to play next ad in pod"
|
|
2190
|
+
);
|
|
2191
|
+
}
|
|
2192
|
+
this.handleAdPodComplete();
|
|
2293
2193
|
});
|
|
2294
2194
|
} else {
|
|
2295
2195
|
if (this.config.debugAdTiming) {
|
|
2296
|
-
console.log(
|
|
2196
|
+
console.log(
|
|
2197
|
+
"[StormcloudVideoPlayer] No more ads in pod - completing ad break"
|
|
2198
|
+
);
|
|
2297
2199
|
}
|
|
2298
|
-
this.
|
|
2299
|
-
this.expectedAdBreakDurationMs = void 0;
|
|
2300
|
-
this.currentAdBreakStartWallClockMs = void 0;
|
|
2301
|
-
this.currentAdIndex = 0;
|
|
2302
|
-
this.totalAdsInBreak = 0;
|
|
2303
|
-
this.showAds = false;
|
|
2304
|
-
this.clearAdStopTimer();
|
|
2200
|
+
this.handleAdPodComplete();
|
|
2305
2201
|
}
|
|
2306
2202
|
});
|
|
2307
2203
|
this.video.addEventListener("timeupdate", () => {
|
|
@@ -3019,23 +2915,11 @@ var StormcloudVideoPlayer = class {
|
|
|
3019
2915
|
maxExtensionMs
|
|
3020
2916
|
});
|
|
3021
2917
|
}
|
|
3022
|
-
this.inAdBreak = false;
|
|
3023
|
-
this.expectedAdBreakDurationMs = void 0;
|
|
3024
|
-
this.currentAdBreakStartWallClockMs = void 0;
|
|
3025
|
-
this.showAds = false;
|
|
3026
|
-
this.adPodQueue = [];
|
|
3027
|
-
this.currentAdIndex = 0;
|
|
3028
|
-
this.totalAdsInBreak = 0;
|
|
3029
|
-
this.clearAdFailsafeTimer();
|
|
3030
2918
|
if (adPlaying) {
|
|
3031
2919
|
this.ima.stop().catch(() => {
|
|
3032
2920
|
});
|
|
3033
|
-
return;
|
|
3034
|
-
}
|
|
3035
|
-
const originalMutedState = this.ima.getOriginalMutedState();
|
|
3036
|
-
if (this.video.muted !== originalMutedState) {
|
|
3037
|
-
this.video.muted = originalMutedState;
|
|
3038
2921
|
}
|
|
2922
|
+
this.handleAdPodComplete();
|
|
3039
2923
|
}
|
|
3040
2924
|
scheduleAdStartIn(delayMs) {
|
|
3041
2925
|
this.clearAdStartTimer();
|
|
@@ -3122,17 +3006,11 @@ var StormcloudVideoPlayer = class {
|
|
|
3122
3006
|
this.handleAdFailure();
|
|
3123
3007
|
}
|
|
3124
3008
|
}
|
|
3125
|
-
|
|
3009
|
+
handleAdPodComplete() {
|
|
3126
3010
|
var _a;
|
|
3127
3011
|
if (this.config.debugAdTiming) {
|
|
3128
3012
|
console.log(
|
|
3129
|
-
"[StormcloudVideoPlayer] Handling ad
|
|
3130
|
-
{
|
|
3131
|
-
inAdBreak: this.inAdBreak,
|
|
3132
|
-
showAds: this.showAds,
|
|
3133
|
-
videoPaused: this.video.paused,
|
|
3134
|
-
adPlaying: this.ima.isAdPlaying()
|
|
3135
|
-
}
|
|
3013
|
+
"[StormcloudVideoPlayer] Handling ad pod completion - resuming content"
|
|
3136
3014
|
);
|
|
3137
3015
|
}
|
|
3138
3016
|
this.inAdBreak = false;
|
|
@@ -3145,34 +3023,41 @@ var StormcloudVideoPlayer = class {
|
|
|
3145
3023
|
this.showAds = false;
|
|
3146
3024
|
this.currentAdIndex = 0;
|
|
3147
3025
|
this.totalAdsInBreak = 0;
|
|
3148
|
-
const currentMutedState = this.video.muted;
|
|
3149
3026
|
const originalMutedState = this.ima.getOriginalMutedState();
|
|
3150
3027
|
this.video.muted = originalMutedState;
|
|
3151
3028
|
if (this.config.debugAdTiming) {
|
|
3152
3029
|
console.log(
|
|
3153
|
-
`[StormcloudVideoPlayer] Restored mute state: ${
|
|
3030
|
+
`[StormcloudVideoPlayer] Restored main video mute state to: ${originalMutedState}`
|
|
3154
3031
|
);
|
|
3155
3032
|
}
|
|
3156
|
-
if (this.video.paused) {
|
|
3033
|
+
if (!this.shouldContinueLiveStreamDuringAds() && this.video.paused) {
|
|
3157
3034
|
if (this.config.debugAdTiming) {
|
|
3158
3035
|
console.log("[StormcloudVideoPlayer] Resuming paused video");
|
|
3159
3036
|
}
|
|
3160
3037
|
(_a = this.video.play()) == null ? void 0 : _a.catch((error) => {
|
|
3161
3038
|
if (this.config.debugAdTiming) {
|
|
3162
3039
|
console.error(
|
|
3163
|
-
"[StormcloudVideoPlayer] Failed to resume video
|
|
3040
|
+
"[StormcloudVideoPlayer] Failed to resume video:",
|
|
3164
3041
|
error
|
|
3165
3042
|
);
|
|
3166
3043
|
}
|
|
3167
3044
|
});
|
|
3168
|
-
} else {
|
|
3169
|
-
if (this.config.debugAdTiming) {
|
|
3170
|
-
console.log(
|
|
3171
|
-
"[StormcloudVideoPlayer] Video is already playing, no resume needed"
|
|
3172
|
-
);
|
|
3173
|
-
}
|
|
3174
3045
|
}
|
|
3175
3046
|
}
|
|
3047
|
+
handleAdFailure() {
|
|
3048
|
+
if (this.config.debugAdTiming) {
|
|
3049
|
+
console.log(
|
|
3050
|
+
"[StormcloudVideoPlayer] Handling ad failure - resuming content",
|
|
3051
|
+
{
|
|
3052
|
+
inAdBreak: this.inAdBreak,
|
|
3053
|
+
showAds: this.showAds,
|
|
3054
|
+
videoPaused: this.video.paused,
|
|
3055
|
+
adPlaying: this.ima.isAdPlaying()
|
|
3056
|
+
}
|
|
3057
|
+
);
|
|
3058
|
+
}
|
|
3059
|
+
this.handleAdPodComplete();
|
|
3060
|
+
}
|
|
3176
3061
|
startAdFailsafeTimer() {
|
|
3177
3062
|
var _a;
|
|
3178
3063
|
this.clearAdFailsafeTimer();
|