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
package/lib/index.d.cts
CHANGED
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -322,11 +322,12 @@ function createImaController(video, options) {
|
|
|
322
322
|
container.style.top = "0";
|
|
323
323
|
container.style.right = "0";
|
|
324
324
|
container.style.bottom = "0";
|
|
325
|
-
container.style.display = "
|
|
325
|
+
container.style.display = "none";
|
|
326
326
|
container.style.alignItems = "center";
|
|
327
327
|
container.style.justifyContent = "center";
|
|
328
328
|
container.style.pointerEvents = "none";
|
|
329
|
-
container.style.zIndex = "
|
|
329
|
+
container.style.zIndex = "10";
|
|
330
|
+
container.style.backgroundColor = "#000";
|
|
330
331
|
(_a = video.parentElement) == null ? void 0 : _a.appendChild(container);
|
|
331
332
|
adContainerEl = container;
|
|
332
333
|
adDisplayContainer = new google.ima.AdDisplayContainer(
|
|
@@ -396,7 +397,8 @@ function createImaController(video, options) {
|
|
|
396
397
|
container.style.alignItems = "center";
|
|
397
398
|
container.style.justifyContent = "center";
|
|
398
399
|
container.style.pointerEvents = "none";
|
|
399
|
-
container.style.zIndex = "
|
|
400
|
+
container.style.zIndex = "10";
|
|
401
|
+
container.style.backgroundColor = "#000";
|
|
400
402
|
if (!video.parentElement) {
|
|
401
403
|
throw new Error("Video element has no parent for ad container");
|
|
402
404
|
}
|
|
@@ -523,53 +525,16 @@ function createImaController(video, options) {
|
|
|
523
525
|
adsManager.addEventListener(
|
|
524
526
|
AdEvent.CONTENT_RESUME_REQUESTED,
|
|
525
527
|
() => {
|
|
526
|
-
var _a;
|
|
527
528
|
console.log("[IMA] Content resume requested");
|
|
528
529
|
adPlaying = false;
|
|
529
|
-
video.muted = originalMutedState;
|
|
530
530
|
setAdPlayingFlag(false);
|
|
531
|
-
if (adContainerEl) {
|
|
532
|
-
adContainerEl.style.pointerEvents = "none";
|
|
533
|
-
adContainerEl.style.display = "none";
|
|
534
|
-
console.log(
|
|
535
|
-
"[IMA] Ad container hidden - pointer events disabled"
|
|
536
|
-
);
|
|
537
|
-
}
|
|
538
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
539
|
-
(_a = video.play()) == null ? void 0 : _a.catch(() => {
|
|
540
|
-
});
|
|
541
|
-
console.log("[IMA] Video resumed (VOD mode)");
|
|
542
|
-
} else {
|
|
543
|
-
console.log(
|
|
544
|
-
"[IMA] Video unmuted (Live mode - was never paused)"
|
|
545
|
-
);
|
|
546
|
-
}
|
|
547
531
|
emit("content_resume");
|
|
548
532
|
}
|
|
549
533
|
);
|
|
550
534
|
adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
|
|
551
|
-
console.log("[IMA] All ads completed");
|
|
535
|
+
console.log("[IMA] All ads completed - notifying parent");
|
|
552
536
|
adPlaying = false;
|
|
553
|
-
video.muted = originalMutedState;
|
|
554
537
|
setAdPlayingFlag(false);
|
|
555
|
-
if (adContainerEl) {
|
|
556
|
-
adContainerEl.style.pointerEvents = "none";
|
|
557
|
-
adContainerEl.style.display = "none";
|
|
558
|
-
console.log(
|
|
559
|
-
"[IMA] Ad container hidden after all ads completed"
|
|
560
|
-
);
|
|
561
|
-
}
|
|
562
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
563
|
-
video.play().catch(() => {
|
|
564
|
-
});
|
|
565
|
-
console.log(
|
|
566
|
-
"[IMA] Video resumed after all ads completed (VOD mode)"
|
|
567
|
-
);
|
|
568
|
-
} else {
|
|
569
|
-
console.log(
|
|
570
|
-
"[IMA] Video unmuted after all ads completed (Live mode)"
|
|
571
|
-
);
|
|
572
|
-
}
|
|
573
538
|
emit("all_ads_completed");
|
|
574
539
|
});
|
|
575
540
|
console.log("[IMA] Ads manager event listeners attached");
|
|
@@ -692,8 +657,8 @@ function createImaController(video, options) {
|
|
|
692
657
|
},
|
|
693
658
|
async stop() {
|
|
694
659
|
var _a;
|
|
660
|
+
console.log("[IMA] Stopping ad playback");
|
|
695
661
|
adPlaying = false;
|
|
696
|
-
video.muted = originalMutedState;
|
|
697
662
|
setAdPlayingFlag(false);
|
|
698
663
|
if (adContainerEl) {
|
|
699
664
|
adContainerEl.style.pointerEvents = "none";
|
|
@@ -705,13 +670,6 @@ function createImaController(video, options) {
|
|
|
705
670
|
} catch {
|
|
706
671
|
}
|
|
707
672
|
destroyAdsManager();
|
|
708
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
709
|
-
video.play().catch(() => {
|
|
710
|
-
});
|
|
711
|
-
console.log("[IMA] Video resumed after stop (VOD mode)");
|
|
712
|
-
} else {
|
|
713
|
-
console.log("[IMA] Video unmuted after stop (Live mode)");
|
|
714
|
-
}
|
|
715
673
|
},
|
|
716
674
|
destroy() {
|
|
717
675
|
var _a;
|
|
@@ -1119,24 +1077,7 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1119
1077
|
console.log("[HlsAdPlayer] Handling ad completion");
|
|
1120
1078
|
adPlaying = false;
|
|
1121
1079
|
setAdPlayingFlag(false);
|
|
1122
|
-
const previousMutedState = contentVideo.muted;
|
|
1123
|
-
contentVideo.muted = originalMutedState;
|
|
1124
|
-
console.log(
|
|
1125
|
-
`[HlsAdPlayer] Restored mute state: ${previousMutedState} -> ${originalMutedState}`
|
|
1126
|
-
);
|
|
1127
|
-
if (adContainerEl) {
|
|
1128
|
-
adContainerEl.style.display = "none";
|
|
1129
|
-
adContainerEl.style.pointerEvents = "none";
|
|
1130
|
-
}
|
|
1131
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
1132
|
-
contentVideo.play().catch(() => {
|
|
1133
|
-
});
|
|
1134
|
-
console.log("[HlsAdPlayer] Content resumed (VOD mode)");
|
|
1135
|
-
} else {
|
|
1136
|
-
console.log("[HlsAdPlayer] Content unmuted (Live mode)");
|
|
1137
|
-
}
|
|
1138
1080
|
emit("content_resume");
|
|
1139
|
-
emit("all_ads_completed");
|
|
1140
1081
|
}
|
|
1141
1082
|
function handleAdError() {
|
|
1142
1083
|
console.log("[HlsAdPlayer] Handling ad error");
|
|
@@ -1174,7 +1115,7 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1174
1115
|
container.style.alignItems = "center";
|
|
1175
1116
|
container.style.justifyContent = "center";
|
|
1176
1117
|
container.style.pointerEvents = "none";
|
|
1177
|
-
container.style.zIndex = "
|
|
1118
|
+
container.style.zIndex = "10";
|
|
1178
1119
|
container.style.backgroundColor = "#000";
|
|
1179
1120
|
(_a = contentVideo.parentElement) == null ? void 0 : _a.appendChild(container);
|
|
1180
1121
|
adContainerEl = container;
|
|
@@ -1312,7 +1253,6 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1312
1253
|
console.log("[HlsAdPlayer] Stopping ad");
|
|
1313
1254
|
adPlaying = false;
|
|
1314
1255
|
setAdPlayingFlag(false);
|
|
1315
|
-
contentVideo.muted = originalMutedState;
|
|
1316
1256
|
if (adContainerEl) {
|
|
1317
1257
|
adContainerEl.style.display = "none";
|
|
1318
1258
|
adContainerEl.style.pointerEvents = "none";
|
|
@@ -1325,10 +1265,6 @@ function createHlsAdPlayer(contentVideo, options) {
|
|
|
1325
1265
|
adVideoElement.pause();
|
|
1326
1266
|
adVideoElement.src = "";
|
|
1327
1267
|
}
|
|
1328
|
-
if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
|
|
1329
|
-
contentVideo.play().catch(() => {
|
|
1330
|
-
});
|
|
1331
|
-
}
|
|
1332
1268
|
currentAd = void 0;
|
|
1333
1269
|
},
|
|
1334
1270
|
destroy() {
|
|
@@ -2137,9 +2073,12 @@ var StormcloudVideoPlayer = class {
|
|
|
2137
2073
|
this.ima.on("all_ads_completed", () => {
|
|
2138
2074
|
if (this.config.debugAdTiming) {
|
|
2139
2075
|
console.log(
|
|
2140
|
-
"[StormcloudVideoPlayer] IMA all_ads_completed event received"
|
|
2076
|
+
"[StormcloudVideoPlayer] IMA all_ads_completed event received - ending ad break"
|
|
2141
2077
|
);
|
|
2142
2078
|
}
|
|
2079
|
+
if (this.inAdBreak) {
|
|
2080
|
+
this.handleAdPodComplete();
|
|
2081
|
+
}
|
|
2143
2082
|
});
|
|
2144
2083
|
this.ima.on("ad_error", () => {
|
|
2145
2084
|
if (this.config.debugAdTiming) {
|
|
@@ -2175,29 +2114,46 @@ var StormcloudVideoPlayer = class {
|
|
|
2175
2114
|
this.ima.on("content_resume", () => {
|
|
2176
2115
|
if (this.config.debugAdTiming) {
|
|
2177
2116
|
console.log(
|
|
2178
|
-
"[StormcloudVideoPlayer] IMA content_resume event received"
|
|
2117
|
+
"[StormcloudVideoPlayer] IMA content_resume event received",
|
|
2118
|
+
{
|
|
2119
|
+
inAdBreak: this.inAdBreak,
|
|
2120
|
+
pendingAds: this.adPodQueue.length
|
|
2121
|
+
}
|
|
2179
2122
|
);
|
|
2180
2123
|
}
|
|
2181
2124
|
this.clearAdFailsafeTimer();
|
|
2182
|
-
if (!this.inAdBreak)
|
|
2125
|
+
if (!this.inAdBreak) {
|
|
2126
|
+
if (this.config.debugAdTiming) {
|
|
2127
|
+
console.log(
|
|
2128
|
+
"[StormcloudVideoPlayer] Not in ad break - this shouldn't happen during pod"
|
|
2129
|
+
);
|
|
2130
|
+
}
|
|
2131
|
+
return;
|
|
2132
|
+
}
|
|
2183
2133
|
const remaining = this.getRemainingAdMs();
|
|
2184
2134
|
if (remaining > 500 && this.adPodQueue.length > 0) {
|
|
2185
2135
|
const next = this.adPodQueue.shift();
|
|
2186
2136
|
this.currentAdIndex++;
|
|
2187
2137
|
if (this.config.debugAdTiming) {
|
|
2188
2138
|
console.log(
|
|
2189
|
-
`[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak})`
|
|
2139
|
+
`[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) - main video stays muted, ad layer stays visible`
|
|
2190
2140
|
);
|
|
2191
2141
|
}
|
|
2192
2142
|
this.playSingleAd(next).catch(() => {
|
|
2143
|
+
if (this.config.debugAdTiming) {
|
|
2144
|
+
console.error(
|
|
2145
|
+
"[StormcloudVideoPlayer] Failed to play next ad in pod"
|
|
2146
|
+
);
|
|
2147
|
+
}
|
|
2148
|
+
this.handleAdPodComplete();
|
|
2193
2149
|
});
|
|
2194
2150
|
} else {
|
|
2195
2151
|
if (this.config.debugAdTiming) {
|
|
2196
|
-
console.log(
|
|
2152
|
+
console.log(
|
|
2153
|
+
"[StormcloudVideoPlayer] No more ads in pod - completing ad break"
|
|
2154
|
+
);
|
|
2197
2155
|
}
|
|
2198
|
-
this.
|
|
2199
|
-
this.totalAdsInBreak = 0;
|
|
2200
|
-
this.showAds = false;
|
|
2156
|
+
this.handleAdPodComplete();
|
|
2201
2157
|
}
|
|
2202
2158
|
});
|
|
2203
2159
|
this.video.addEventListener("timeupdate", () => {
|
|
@@ -2915,23 +2871,11 @@ var StormcloudVideoPlayer = class {
|
|
|
2915
2871
|
maxExtensionMs
|
|
2916
2872
|
});
|
|
2917
2873
|
}
|
|
2918
|
-
this.inAdBreak = false;
|
|
2919
|
-
this.expectedAdBreakDurationMs = void 0;
|
|
2920
|
-
this.currentAdBreakStartWallClockMs = void 0;
|
|
2921
|
-
this.showAds = false;
|
|
2922
|
-
this.adPodQueue = [];
|
|
2923
|
-
this.currentAdIndex = 0;
|
|
2924
|
-
this.totalAdsInBreak = 0;
|
|
2925
|
-
this.clearAdFailsafeTimer();
|
|
2926
2874
|
if (adPlaying) {
|
|
2927
2875
|
this.ima.stop().catch(() => {
|
|
2928
2876
|
});
|
|
2929
|
-
return;
|
|
2930
|
-
}
|
|
2931
|
-
const originalMutedState = this.ima.getOriginalMutedState();
|
|
2932
|
-
if (this.video.muted !== originalMutedState) {
|
|
2933
|
-
this.video.muted = originalMutedState;
|
|
2934
2877
|
}
|
|
2878
|
+
this.handleAdPodComplete();
|
|
2935
2879
|
}
|
|
2936
2880
|
scheduleAdStartIn(delayMs) {
|
|
2937
2881
|
this.clearAdStartTimer();
|
|
@@ -3018,17 +2962,11 @@ var StormcloudVideoPlayer = class {
|
|
|
3018
2962
|
this.handleAdFailure();
|
|
3019
2963
|
}
|
|
3020
2964
|
}
|
|
3021
|
-
|
|
2965
|
+
handleAdPodComplete() {
|
|
3022
2966
|
var _a;
|
|
3023
2967
|
if (this.config.debugAdTiming) {
|
|
3024
2968
|
console.log(
|
|
3025
|
-
"[StormcloudVideoPlayer] Handling ad
|
|
3026
|
-
{
|
|
3027
|
-
inAdBreak: this.inAdBreak,
|
|
3028
|
-
showAds: this.showAds,
|
|
3029
|
-
videoPaused: this.video.paused,
|
|
3030
|
-
adPlaying: this.ima.isAdPlaying()
|
|
3031
|
-
}
|
|
2969
|
+
"[StormcloudVideoPlayer] Handling ad pod completion - resuming content"
|
|
3032
2970
|
);
|
|
3033
2971
|
}
|
|
3034
2972
|
this.inAdBreak = false;
|
|
@@ -3041,34 +2979,41 @@ var StormcloudVideoPlayer = class {
|
|
|
3041
2979
|
this.showAds = false;
|
|
3042
2980
|
this.currentAdIndex = 0;
|
|
3043
2981
|
this.totalAdsInBreak = 0;
|
|
3044
|
-
const currentMutedState = this.video.muted;
|
|
3045
2982
|
const originalMutedState = this.ima.getOriginalMutedState();
|
|
3046
2983
|
this.video.muted = originalMutedState;
|
|
3047
2984
|
if (this.config.debugAdTiming) {
|
|
3048
2985
|
console.log(
|
|
3049
|
-
`[StormcloudVideoPlayer] Restored mute state: ${
|
|
2986
|
+
`[StormcloudVideoPlayer] Restored main video mute state to: ${originalMutedState}`
|
|
3050
2987
|
);
|
|
3051
2988
|
}
|
|
3052
|
-
if (this.video.paused) {
|
|
2989
|
+
if (!this.shouldContinueLiveStreamDuringAds() && this.video.paused) {
|
|
3053
2990
|
if (this.config.debugAdTiming) {
|
|
3054
2991
|
console.log("[StormcloudVideoPlayer] Resuming paused video");
|
|
3055
2992
|
}
|
|
3056
2993
|
(_a = this.video.play()) == null ? void 0 : _a.catch((error) => {
|
|
3057
2994
|
if (this.config.debugAdTiming) {
|
|
3058
2995
|
console.error(
|
|
3059
|
-
"[StormcloudVideoPlayer] Failed to resume video
|
|
2996
|
+
"[StormcloudVideoPlayer] Failed to resume video:",
|
|
3060
2997
|
error
|
|
3061
2998
|
);
|
|
3062
2999
|
}
|
|
3063
3000
|
});
|
|
3064
|
-
} else {
|
|
3065
|
-
if (this.config.debugAdTiming) {
|
|
3066
|
-
console.log(
|
|
3067
|
-
"[StormcloudVideoPlayer] Video is already playing, no resume needed"
|
|
3068
|
-
);
|
|
3069
|
-
}
|
|
3070
3001
|
}
|
|
3071
3002
|
}
|
|
3003
|
+
handleAdFailure() {
|
|
3004
|
+
if (this.config.debugAdTiming) {
|
|
3005
|
+
console.log(
|
|
3006
|
+
"[StormcloudVideoPlayer] Handling ad failure - resuming content",
|
|
3007
|
+
{
|
|
3008
|
+
inAdBreak: this.inAdBreak,
|
|
3009
|
+
showAds: this.showAds,
|
|
3010
|
+
videoPaused: this.video.paused,
|
|
3011
|
+
adPlaying: this.ima.isAdPlaying()
|
|
3012
|
+
}
|
|
3013
|
+
);
|
|
3014
|
+
}
|
|
3015
|
+
this.handleAdPodComplete();
|
|
3016
|
+
}
|
|
3072
3017
|
startAdFailsafeTimer() {
|
|
3073
3018
|
var _a;
|
|
3074
3019
|
this.clearAdFailsafeTimer();
|