stormcloud-video-player 0.2.19 → 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 +56 -111
- package/lib/index.cjs.map +1 -1
- package/lib/index.d.cts +1 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +56 -111
- package/lib/index.js.map +1 -1
- package/lib/player/StormcloudVideoPlayer.cjs +56 -111
- package/lib/player/StormcloudVideoPlayer.cjs.map +1 -1
- package/lib/player/StormcloudVideoPlayer.d.cts +1 -0
- package/lib/players/HlsPlayer.cjs +56 -111
- package/lib/players/HlsPlayer.cjs.map +1 -1
- package/lib/players/index.cjs +56 -111
- package/lib/players/index.cjs.map +1 -1
- package/lib/sdk/hlsAdPlayer.cjs +1 -23
- package/lib/sdk/hlsAdPlayer.cjs.map +1 -1
- package/lib/sdk/ima.cjs +7 -49
- package/lib/sdk/ima.cjs.map +1 -1
- package/lib/ui/StormcloudVideoPlayer.cjs +56 -111
- 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
|
}
|
|
@@ -528,53 +530,16 @@ function createImaController(video, options) {
|
|
|
528
530
|
adsManager.addEventListener(
|
|
529
531
|
AdEvent.CONTENT_RESUME_REQUESTED,
|
|
530
532
|
() => {
|
|
531
|
-
var _a;
|
|
532
533
|
console.log("[IMA] Content resume requested");
|
|
533
534
|
adPlaying = false;
|
|
534
|
-
video.muted = originalMutedState;
|
|
535
535
|
setAdPlayingFlag(false);
|
|
536
|
-
if (adContainerEl) {
|
|
537
|
-
adContainerEl.style.pointerEvents = "none";
|
|
538
|
-
adContainerEl.style.display = "none";
|
|
539
|
-
console.log(
|
|
540
|
-
"[IMA] Ad container hidden - pointer events disabled"
|
|
541
|
-
);
|
|
542
|
-
}
|
|
543
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
544
|
-
(_a = video.play()) == null ? void 0 : _a.catch(() => {
|
|
545
|
-
});
|
|
546
|
-
console.log("[IMA] Video resumed (VOD mode)");
|
|
547
|
-
} else {
|
|
548
|
-
console.log(
|
|
549
|
-
"[IMA] Video unmuted (Live mode - was never paused)"
|
|
550
|
-
);
|
|
551
|
-
}
|
|
552
536
|
emit("content_resume");
|
|
553
537
|
}
|
|
554
538
|
);
|
|
555
539
|
adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
|
|
556
|
-
console.log("[IMA] All ads completed");
|
|
540
|
+
console.log("[IMA] All ads completed - notifying parent");
|
|
557
541
|
adPlaying = false;
|
|
558
|
-
video.muted = originalMutedState;
|
|
559
542
|
setAdPlayingFlag(false);
|
|
560
|
-
if (adContainerEl) {
|
|
561
|
-
adContainerEl.style.pointerEvents = "none";
|
|
562
|
-
adContainerEl.style.display = "none";
|
|
563
|
-
console.log(
|
|
564
|
-
"[IMA] Ad container hidden after all ads completed"
|
|
565
|
-
);
|
|
566
|
-
}
|
|
567
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
568
|
-
video.play().catch(() => {
|
|
569
|
-
});
|
|
570
|
-
console.log(
|
|
571
|
-
"[IMA] Video resumed after all ads completed (VOD mode)"
|
|
572
|
-
);
|
|
573
|
-
} else {
|
|
574
|
-
console.log(
|
|
575
|
-
"[IMA] Video unmuted after all ads completed (Live mode)"
|
|
576
|
-
);
|
|
577
|
-
}
|
|
578
543
|
emit("all_ads_completed");
|
|
579
544
|
});
|
|
580
545
|
console.log("[IMA] Ads manager event listeners attached");
|
|
@@ -697,8 +662,8 @@ function createImaController(video, options) {
|
|
|
697
662
|
},
|
|
698
663
|
async stop() {
|
|
699
664
|
var _a;
|
|
665
|
+
console.log("[IMA] Stopping ad playback");
|
|
700
666
|
adPlaying = false;
|
|
701
|
-
video.muted = originalMutedState;
|
|
702
667
|
setAdPlayingFlag(false);
|
|
703
668
|
if (adContainerEl) {
|
|
704
669
|
adContainerEl.style.pointerEvents = "none";
|
|
@@ -710,13 +675,6 @@ function createImaController(video, options) {
|
|
|
710
675
|
} catch {
|
|
711
676
|
}
|
|
712
677
|
destroyAdsManager();
|
|
713
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
714
|
-
video.play().catch(() => {
|
|
715
|
-
});
|
|
716
|
-
console.log("[IMA] Video resumed after stop (VOD mode)");
|
|
717
|
-
} else {
|
|
718
|
-
console.log("[IMA] Video unmuted after stop (Live mode)");
|
|
719
|
-
}
|
|
720
678
|
},
|
|
721
679
|
destroy() {
|
|
722
680
|
var _a;
|
|
@@ -1124,24 +1082,7 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1124
1082
|
console.log("[HlsAdPlayer] Handling ad completion");
|
|
1125
1083
|
adPlaying = false;
|
|
1126
1084
|
setAdPlayingFlag(false);
|
|
1127
|
-
const previousMutedState = contentVideo.muted;
|
|
1128
|
-
contentVideo.muted = originalMutedState;
|
|
1129
|
-
console.log(
|
|
1130
|
-
`[HlsAdPlayer] Restored mute state: ${previousMutedState} -> ${originalMutedState}`
|
|
1131
|
-
);
|
|
1132
|
-
if (adContainerEl) {
|
|
1133
|
-
adContainerEl.style.display = "none";
|
|
1134
|
-
adContainerEl.style.pointerEvents = "none";
|
|
1135
|
-
}
|
|
1136
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
1137
|
-
contentVideo.play().catch(() => {
|
|
1138
|
-
});
|
|
1139
|
-
console.log("[HlsAdPlayer] Content resumed (VOD mode)");
|
|
1140
|
-
} else {
|
|
1141
|
-
console.log("[HlsAdPlayer] Content unmuted (Live mode)");
|
|
1142
|
-
}
|
|
1143
1085
|
emit("content_resume");
|
|
1144
|
-
emit("all_ads_completed");
|
|
1145
1086
|
}
|
|
1146
1087
|
function handleAdError() {
|
|
1147
1088
|
console.log("[HlsAdPlayer] Handling ad error");
|
|
@@ -1179,7 +1120,7 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1179
1120
|
container.style.alignItems = "center";
|
|
1180
1121
|
container.style.justifyContent = "center";
|
|
1181
1122
|
container.style.pointerEvents = "none";
|
|
1182
|
-
container.style.zIndex = "
|
|
1123
|
+
container.style.zIndex = "10";
|
|
1183
1124
|
container.style.backgroundColor = "#000";
|
|
1184
1125
|
(_a = contentVideo.parentElement) == null ? void 0 : _a.appendChild(container);
|
|
1185
1126
|
adContainerEl = container;
|
|
@@ -1317,7 +1258,6 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1317
1258
|
console.log("[HlsAdPlayer] Stopping ad");
|
|
1318
1259
|
adPlaying = false;
|
|
1319
1260
|
setAdPlayingFlag(false);
|
|
1320
|
-
contentVideo.muted = originalMutedState;
|
|
1321
1261
|
if (adContainerEl) {
|
|
1322
1262
|
adContainerEl.style.display = "none";
|
|
1323
1263
|
adContainerEl.style.pointerEvents = "none";
|
|
@@ -1330,10 +1270,6 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1330
1270
|
adVideoElement.pause();
|
|
1331
1271
|
adVideoElement.src = "";
|
|
1332
1272
|
}
|
|
1333
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
1334
|
-
contentVideo.play().catch(() => {
|
|
1335
|
-
});
|
|
1336
|
-
}
|
|
1337
1273
|
currentAd = void 0;
|
|
1338
1274
|
},
|
|
1339
1275
|
destroy() {
|
|
@@ -2142,9 +2078,12 @@ var StormcloudVideoPlayer = class {
|
|
|
2142
2078
|
this.ima.on("all_ads_completed", () => {
|
|
2143
2079
|
if (this.config.debugAdTiming) {
|
|
2144
2080
|
console.log(
|
|
2145
|
-
"[StormcloudVideoPlayer] IMA all_ads_completed event received"
|
|
2081
|
+
"[StormcloudVideoPlayer] IMA all_ads_completed event received - ending ad break"
|
|
2146
2082
|
);
|
|
2147
2083
|
}
|
|
2084
|
+
if (this.inAdBreak) {
|
|
2085
|
+
this.handleAdPodComplete();
|
|
2086
|
+
}
|
|
2148
2087
|
});
|
|
2149
2088
|
this.ima.on("ad_error", () => {
|
|
2150
2089
|
if (this.config.debugAdTiming) {
|
|
@@ -2180,29 +2119,46 @@ var StormcloudVideoPlayer = class {
|
|
|
2180
2119
|
this.ima.on("content_resume", () => {
|
|
2181
2120
|
if (this.config.debugAdTiming) {
|
|
2182
2121
|
console.log(
|
|
2183
|
-
"[StormcloudVideoPlayer] IMA content_resume event received"
|
|
2122
|
+
"[StormcloudVideoPlayer] IMA content_resume event received",
|
|
2123
|
+
{
|
|
2124
|
+
inAdBreak: this.inAdBreak,
|
|
2125
|
+
pendingAds: this.adPodQueue.length
|
|
2126
|
+
}
|
|
2184
2127
|
);
|
|
2185
2128
|
}
|
|
2186
2129
|
this.clearAdFailsafeTimer();
|
|
2187
|
-
if (!this.inAdBreak)
|
|
2130
|
+
if (!this.inAdBreak) {
|
|
2131
|
+
if (this.config.debugAdTiming) {
|
|
2132
|
+
console.log(
|
|
2133
|
+
"[StormcloudVideoPlayer] Not in ad break - this shouldn't happen during pod"
|
|
2134
|
+
);
|
|
2135
|
+
}
|
|
2136
|
+
return;
|
|
2137
|
+
}
|
|
2188
2138
|
const remaining = this.getRemainingAdMs();
|
|
2189
2139
|
if (remaining > 500 && this.adPodQueue.length > 0) {
|
|
2190
2140
|
const next = this.adPodQueue.shift();
|
|
2191
2141
|
this.currentAdIndex++;
|
|
2192
2142
|
if (this.config.debugAdTiming) {
|
|
2193
2143
|
console.log(
|
|
2194
|
-
`[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`
|
|
2195
2145
|
);
|
|
2196
2146
|
}
|
|
2197
2147
|
this.playSingleAd(next).catch(() => {
|
|
2148
|
+
if (this.config.debugAdTiming) {
|
|
2149
|
+
console.error(
|
|
2150
|
+
"[StormcloudVideoPlayer] Failed to play next ad in pod"
|
|
2151
|
+
);
|
|
2152
|
+
}
|
|
2153
|
+
this.handleAdPodComplete();
|
|
2198
2154
|
});
|
|
2199
2155
|
} else {
|
|
2200
2156
|
if (this.config.debugAdTiming) {
|
|
2201
|
-
console.log(
|
|
2157
|
+
console.log(
|
|
2158
|
+
"[StormcloudVideoPlayer] No more ads in pod - completing ad break"
|
|
2159
|
+
);
|
|
2202
2160
|
}
|
|
2203
|
-
this.
|
|
2204
|
-
this.totalAdsInBreak = 0;
|
|
2205
|
-
this.showAds = false;
|
|
2161
|
+
this.handleAdPodComplete();
|
|
2206
2162
|
}
|
|
2207
2163
|
});
|
|
2208
2164
|
this.video.addEventListener("timeupdate", () => {
|
|
@@ -2920,23 +2876,11 @@ var StormcloudVideoPlayer = class {
|
|
|
2920
2876
|
maxExtensionMs
|
|
2921
2877
|
});
|
|
2922
2878
|
}
|
|
2923
|
-
this.inAdBreak = false;
|
|
2924
|
-
this.expectedAdBreakDurationMs = void 0;
|
|
2925
|
-
this.currentAdBreakStartWallClockMs = void 0;
|
|
2926
|
-
this.showAds = false;
|
|
2927
|
-
this.adPodQueue = [];
|
|
2928
|
-
this.currentAdIndex = 0;
|
|
2929
|
-
this.totalAdsInBreak = 0;
|
|
2930
|
-
this.clearAdFailsafeTimer();
|
|
2931
2879
|
if (adPlaying) {
|
|
2932
2880
|
this.ima.stop().catch(() => {
|
|
2933
2881
|
});
|
|
2934
|
-
return;
|
|
2935
|
-
}
|
|
2936
|
-
const originalMutedState = this.ima.getOriginalMutedState();
|
|
2937
|
-
if (this.video.muted !== originalMutedState) {
|
|
2938
|
-
this.video.muted = originalMutedState;
|
|
2939
2882
|
}
|
|
2883
|
+
this.handleAdPodComplete();
|
|
2940
2884
|
}
|
|
2941
2885
|
scheduleAdStartIn(delayMs) {
|
|
2942
2886
|
this.clearAdStartTimer();
|
|
@@ -3023,17 +2967,11 @@ var StormcloudVideoPlayer = class {
|
|
|
3023
2967
|
this.handleAdFailure();
|
|
3024
2968
|
}
|
|
3025
2969
|
}
|
|
3026
|
-
|
|
2970
|
+
handleAdPodComplete() {
|
|
3027
2971
|
var _a;
|
|
3028
2972
|
if (this.config.debugAdTiming) {
|
|
3029
2973
|
console.log(
|
|
3030
|
-
"[StormcloudVideoPlayer] Handling ad
|
|
3031
|
-
{
|
|
3032
|
-
inAdBreak: this.inAdBreak,
|
|
3033
|
-
showAds: this.showAds,
|
|
3034
|
-
videoPaused: this.video.paused,
|
|
3035
|
-
adPlaying: this.ima.isAdPlaying()
|
|
3036
|
-
}
|
|
2974
|
+
"[StormcloudVideoPlayer] Handling ad pod completion - resuming content"
|
|
3037
2975
|
);
|
|
3038
2976
|
}
|
|
3039
2977
|
this.inAdBreak = false;
|
|
@@ -3046,34 +2984,41 @@ var StormcloudVideoPlayer = class {
|
|
|
3046
2984
|
this.showAds = false;
|
|
3047
2985
|
this.currentAdIndex = 0;
|
|
3048
2986
|
this.totalAdsInBreak = 0;
|
|
3049
|
-
const currentMutedState = this.video.muted;
|
|
3050
2987
|
const originalMutedState = this.ima.getOriginalMutedState();
|
|
3051
2988
|
this.video.muted = originalMutedState;
|
|
3052
2989
|
if (this.config.debugAdTiming) {
|
|
3053
2990
|
console.log(
|
|
3054
|
-
`[StormcloudVideoPlayer] Restored mute state: ${
|
|
2991
|
+
`[StormcloudVideoPlayer] Restored main video mute state to: ${originalMutedState}`
|
|
3055
2992
|
);
|
|
3056
2993
|
}
|
|
3057
|
-
if (this.video.paused) {
|
|
2994
|
+
if (!this.shouldContinueLiveStreamDuringAds() && this.video.paused) {
|
|
3058
2995
|
if (this.config.debugAdTiming) {
|
|
3059
2996
|
console.log("[StormcloudVideoPlayer] Resuming paused video");
|
|
3060
2997
|
}
|
|
3061
2998
|
(_a = this.video.play()) == null ? void 0 : _a.catch((error) => {
|
|
3062
2999
|
if (this.config.debugAdTiming) {
|
|
3063
3000
|
console.error(
|
|
3064
|
-
"[StormcloudVideoPlayer] Failed to resume video
|
|
3001
|
+
"[StormcloudVideoPlayer] Failed to resume video:",
|
|
3065
3002
|
error
|
|
3066
3003
|
);
|
|
3067
3004
|
}
|
|
3068
3005
|
});
|
|
3069
|
-
} else {
|
|
3070
|
-
if (this.config.debugAdTiming) {
|
|
3071
|
-
console.log(
|
|
3072
|
-
"[StormcloudVideoPlayer] Video is already playing, no resume needed"
|
|
3073
|
-
);
|
|
3074
|
-
}
|
|
3075
3006
|
}
|
|
3076
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
|
+
}
|
|
3077
3022
|
startAdFailsafeTimer() {
|
|
3078
3023
|
var _a;
|
|
3079
3024
|
this.clearAdFailsafeTimer();
|