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.
@@ -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 = "flex";
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 = "2";
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 = "2";
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 = "2";
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, allowing normal content resume"
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}) - keeping content muted/paused`
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
- }).finally(() => {
2292
- this.isTransitioningBetweenAds = false;
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("[StormcloudVideoPlayer] Ad pod completed");
2196
+ console.log(
2197
+ "[StormcloudVideoPlayer] No more ads in pod - completing ad break"
2198
+ );
2297
2199
  }
2298
- this.inAdBreak = false;
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
- handleAdFailure() {
3009
+ handleAdPodComplete() {
3126
3010
  var _a;
3127
3011
  if (this.config.debugAdTiming) {
3128
3012
  console.log(
3129
- "[StormcloudVideoPlayer] Handling ad failure - resuming content",
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: ${currentMutedState} -> ${originalMutedState}`
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 after ad failure:",
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();