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.
@@ -324,11 +324,12 @@ function createImaController(video, options) {
324
324
  container.style.top = "0";
325
325
  container.style.right = "0";
326
326
  container.style.bottom = "0";
327
- container.style.display = "flex";
327
+ container.style.display = "none";
328
328
  container.style.alignItems = "center";
329
329
  container.style.justifyContent = "center";
330
330
  container.style.pointerEvents = "none";
331
- container.style.zIndex = "2";
331
+ container.style.zIndex = "10";
332
+ container.style.backgroundColor = "#000";
332
333
  (_a = video.parentElement) == null ? void 0 : _a.appendChild(container);
333
334
  adContainerEl = container;
334
335
  adDisplayContainer = new google.ima.AdDisplayContainer(
@@ -398,7 +399,8 @@ function createImaController(video, options) {
398
399
  container.style.alignItems = "center";
399
400
  container.style.justifyContent = "center";
400
401
  container.style.pointerEvents = "none";
401
- container.style.zIndex = "2";
402
+ container.style.zIndex = "10";
403
+ container.style.backgroundColor = "#000";
402
404
  if (!video.parentElement) {
403
405
  throw new Error("Video element has no parent for ad container");
404
406
  }
@@ -529,63 +531,12 @@ function createImaController(video, options) {
529
531
  adPlaying = false;
530
532
  setAdPlayingFlag(false);
531
533
  emit("content_resume");
532
- setTimeout(() => {
533
- var _a;
534
- const stillInAdPod = video.dataset.stormcloudAdPlaying === "true";
535
- if (stillInAdPod) {
536
- console.log(
537
- "[IMA] Next ad started - keeping content muted/paused and ad container visible"
538
- );
539
- if (adContainerEl) {
540
- adContainerEl.style.display = "flex";
541
- adContainerEl.style.pointerEvents = "auto";
542
- }
543
- return;
544
- }
545
- console.log("[IMA] No next ad - resuming content");
546
- video.muted = originalMutedState;
547
- if (adContainerEl) {
548
- adContainerEl.style.pointerEvents = "none";
549
- adContainerEl.style.display = "none";
550
- console.log(
551
- "[IMA] Ad container hidden - pointer events disabled"
552
- );
553
- }
554
- if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
555
- (_a = video.play()) == null ? void 0 : _a.catch(() => {
556
- });
557
- console.log("[IMA] Video resumed (VOD mode)");
558
- } else {
559
- console.log(
560
- "[IMA] Video unmuted (Live mode - was never paused)"
561
- );
562
- }
563
- }, 100);
564
534
  }
565
535
  );
566
536
  adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
567
- console.log("[IMA] All ads completed");
537
+ console.log("[IMA] All ads completed - notifying parent");
568
538
  adPlaying = false;
569
- video.muted = originalMutedState;
570
539
  setAdPlayingFlag(false);
571
- if (adContainerEl) {
572
- adContainerEl.style.pointerEvents = "none";
573
- adContainerEl.style.display = "none";
574
- console.log(
575
- "[IMA] Ad container hidden after all ads completed"
576
- );
577
- }
578
- if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
579
- video.play().catch(() => {
580
- });
581
- console.log(
582
- "[IMA] Video resumed after all ads completed (VOD mode)"
583
- );
584
- } else {
585
- console.log(
586
- "[IMA] Video unmuted after all ads completed (Live mode)"
587
- );
588
- }
589
540
  emit("all_ads_completed");
590
541
  });
591
542
  console.log("[IMA] Ads manager event listeners attached");
@@ -708,8 +659,8 @@ function createImaController(video, options) {
708
659
  },
709
660
  async stop() {
710
661
  var _a;
662
+ console.log("[IMA] Stopping ad playback");
711
663
  adPlaying = false;
712
- video.muted = originalMutedState;
713
664
  setAdPlayingFlag(false);
714
665
  if (adContainerEl) {
715
666
  adContainerEl.style.pointerEvents = "none";
@@ -721,13 +672,6 @@ function createImaController(video, options) {
721
672
  } catch {
722
673
  }
723
674
  destroyAdsManager();
724
- if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
725
- video.play().catch(() => {
726
- });
727
- console.log("[IMA] Video resumed after stop (VOD mode)");
728
- } else {
729
- console.log("[IMA] Video unmuted after stop (Live mode)");
730
- }
731
675
  },
732
676
  destroy() {
733
677
  var _a;
@@ -1136,37 +1080,6 @@ function createHlsAdPlayer(contentVideo, options) {
1136
1080
  adPlaying = false;
1137
1081
  setAdPlayingFlag(false);
1138
1082
  emit("content_resume");
1139
- emit("all_ads_completed");
1140
- setTimeout(() => {
1141
- const stillInAdPod = contentVideo.dataset.stormcloudAdPlaying === "true";
1142
- if (stillInAdPod) {
1143
- console.log(
1144
- "[HlsAdPlayer] Next ad started - keeping content muted/paused and ad container visible"
1145
- );
1146
- if (adContainerEl) {
1147
- adContainerEl.style.display = "flex";
1148
- adContainerEl.style.pointerEvents = "auto";
1149
- }
1150
- return;
1151
- }
1152
- console.log("[HlsAdPlayer] No next ad - resuming content");
1153
- const previousMutedState = contentVideo.muted;
1154
- contentVideo.muted = originalMutedState;
1155
- console.log(
1156
- `[HlsAdPlayer] Restored mute state: ${previousMutedState} -> ${originalMutedState}`
1157
- );
1158
- if (adContainerEl) {
1159
- adContainerEl.style.display = "none";
1160
- adContainerEl.style.pointerEvents = "none";
1161
- }
1162
- if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
1163
- contentVideo.play().catch(() => {
1164
- });
1165
- console.log("[HlsAdPlayer] Content resumed (VOD mode)");
1166
- } else {
1167
- console.log("[HlsAdPlayer] Content unmuted (Live mode)");
1168
- }
1169
- }, 100);
1170
1083
  }
1171
1084
  function handleAdError() {
1172
1085
  console.log("[HlsAdPlayer] Handling ad error");
@@ -1204,7 +1117,7 @@ function createHlsAdPlayer(contentVideo, options) {
1204
1117
  container.style.alignItems = "center";
1205
1118
  container.style.justifyContent = "center";
1206
1119
  container.style.pointerEvents = "none";
1207
- container.style.zIndex = "2";
1120
+ container.style.zIndex = "10";
1208
1121
  container.style.backgroundColor = "#000";
1209
1122
  (_a = contentVideo.parentElement) == null ? void 0 : _a.appendChild(container);
1210
1123
  adContainerEl = container;
@@ -1342,7 +1255,6 @@ function createHlsAdPlayer(contentVideo, options) {
1342
1255
  console.log("[HlsAdPlayer] Stopping ad");
1343
1256
  adPlaying = false;
1344
1257
  setAdPlayingFlag(false);
1345
- contentVideo.muted = originalMutedState;
1346
1258
  if (adContainerEl) {
1347
1259
  adContainerEl.style.display = "none";
1348
1260
  adContainerEl.style.pointerEvents = "none";
@@ -1355,10 +1267,6 @@ function createHlsAdPlayer(contentVideo, options) {
1355
1267
  adVideoElement.pause();
1356
1268
  adVideoElement.src = "";
1357
1269
  }
1358
- if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
1359
- contentVideo.play().catch(() => {
1360
- });
1361
- }
1362
1270
  currentAd = void 0;
1363
1271
  },
1364
1272
  destroy() {
@@ -1904,7 +1812,6 @@ var StormcloudVideoPlayer = class {
1904
1812
  this.bufferedSegmentsCount = 0;
1905
1813
  this.shouldAutoplayAfterBuffering = false;
1906
1814
  this.hasInitialBufferCompleted = false;
1907
- this.isTransitioningBetweenAds = false;
1908
1815
  initializePolyfills();
1909
1816
  const browserOverrides = getBrowserConfigOverrides();
1910
1817
  this.config = { ...config, ...browserOverrides };
@@ -2168,9 +2075,12 @@ var StormcloudVideoPlayer = class {
2168
2075
  this.ima.on("all_ads_completed", () => {
2169
2076
  if (this.config.debugAdTiming) {
2170
2077
  console.log(
2171
- "[StormcloudVideoPlayer] IMA all_ads_completed event received"
2078
+ "[StormcloudVideoPlayer] IMA all_ads_completed event received - ending ad break"
2172
2079
  );
2173
2080
  }
2081
+ if (this.inAdBreak) {
2082
+ this.handleAdPodComplete();
2083
+ }
2174
2084
  });
2175
2085
  this.ima.on("ad_error", () => {
2176
2086
  if (this.config.debugAdTiming) {
@@ -2209,57 +2119,43 @@ var StormcloudVideoPlayer = class {
2209
2119
  "[StormcloudVideoPlayer] IMA content_resume event received",
2210
2120
  {
2211
2121
  inAdBreak: this.inAdBreak,
2212
- isTransitioningBetweenAds: this.isTransitioningBetweenAds,
2213
2122
  pendingAds: this.adPodQueue.length
2214
2123
  }
2215
2124
  );
2216
2125
  }
2217
2126
  this.clearAdFailsafeTimer();
2218
- if (this.isTransitioningBetweenAds) {
2219
- if (this.config.debugAdTiming) {
2220
- console.log(
2221
- "[StormcloudVideoPlayer] Transitioning between ads - keeping content muted/paused"
2222
- );
2223
- }
2224
- return;
2225
- }
2226
2127
  if (!this.inAdBreak) {
2227
2128
  if (this.config.debugAdTiming) {
2228
2129
  console.log(
2229
- "[StormcloudVideoPlayer] Not in ad break, allowing normal content resume"
2130
+ "[StormcloudVideoPlayer] Not in ad break - this shouldn't happen during pod"
2230
2131
  );
2231
2132
  }
2232
2133
  return;
2233
2134
  }
2234
2135
  const remaining = this.getRemainingAdMs();
2235
2136
  if (remaining > 500 && this.adPodQueue.length > 0) {
2236
- this.isTransitioningBetweenAds = true;
2237
- this.video.muted = true;
2238
- if (!this.shouldContinueLiveStreamDuringAds()) {
2239
- this.video.pause();
2240
- }
2241
2137
  const next = this.adPodQueue.shift();
2242
2138
  this.currentAdIndex++;
2243
2139
  if (this.config.debugAdTiming) {
2244
2140
  console.log(
2245
- `[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) - keeping content muted/paused`
2141
+ `[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) - main video stays muted, ad layer stays visible`
2246
2142
  );
2247
2143
  }
2248
2144
  this.playSingleAd(next).catch(() => {
2249
- }).finally(() => {
2250
- this.isTransitioningBetweenAds = false;
2145
+ if (this.config.debugAdTiming) {
2146
+ console.error(
2147
+ "[StormcloudVideoPlayer] Failed to play next ad in pod"
2148
+ );
2149
+ }
2150
+ this.handleAdPodComplete();
2251
2151
  });
2252
2152
  } else {
2253
2153
  if (this.config.debugAdTiming) {
2254
- console.log("[StormcloudVideoPlayer] Ad pod completed");
2154
+ console.log(
2155
+ "[StormcloudVideoPlayer] No more ads in pod - completing ad break"
2156
+ );
2255
2157
  }
2256
- this.inAdBreak = false;
2257
- this.expectedAdBreakDurationMs = void 0;
2258
- this.currentAdBreakStartWallClockMs = void 0;
2259
- this.currentAdIndex = 0;
2260
- this.totalAdsInBreak = 0;
2261
- this.showAds = false;
2262
- this.clearAdStopTimer();
2158
+ this.handleAdPodComplete();
2263
2159
  }
2264
2160
  });
2265
2161
  this.video.addEventListener("timeupdate", () => {
@@ -2977,23 +2873,11 @@ var StormcloudVideoPlayer = class {
2977
2873
  maxExtensionMs
2978
2874
  });
2979
2875
  }
2980
- this.inAdBreak = false;
2981
- this.expectedAdBreakDurationMs = void 0;
2982
- this.currentAdBreakStartWallClockMs = void 0;
2983
- this.showAds = false;
2984
- this.adPodQueue = [];
2985
- this.currentAdIndex = 0;
2986
- this.totalAdsInBreak = 0;
2987
- this.clearAdFailsafeTimer();
2988
2876
  if (adPlaying) {
2989
2877
  this.ima.stop().catch(() => {
2990
2878
  });
2991
- return;
2992
- }
2993
- const originalMutedState = this.ima.getOriginalMutedState();
2994
- if (this.video.muted !== originalMutedState) {
2995
- this.video.muted = originalMutedState;
2996
2879
  }
2880
+ this.handleAdPodComplete();
2997
2881
  }
2998
2882
  scheduleAdStartIn(delayMs) {
2999
2883
  this.clearAdStartTimer();
@@ -3080,17 +2964,11 @@ var StormcloudVideoPlayer = class {
3080
2964
  this.handleAdFailure();
3081
2965
  }
3082
2966
  }
3083
- handleAdFailure() {
2967
+ handleAdPodComplete() {
3084
2968
  var _a;
3085
2969
  if (this.config.debugAdTiming) {
3086
2970
  console.log(
3087
- "[StormcloudVideoPlayer] Handling ad failure - resuming content",
3088
- {
3089
- inAdBreak: this.inAdBreak,
3090
- showAds: this.showAds,
3091
- videoPaused: this.video.paused,
3092
- adPlaying: this.ima.isAdPlaying()
3093
- }
2971
+ "[StormcloudVideoPlayer] Handling ad pod completion - resuming content"
3094
2972
  );
3095
2973
  }
3096
2974
  this.inAdBreak = false;
@@ -3103,34 +2981,41 @@ var StormcloudVideoPlayer = class {
3103
2981
  this.showAds = false;
3104
2982
  this.currentAdIndex = 0;
3105
2983
  this.totalAdsInBreak = 0;
3106
- const currentMutedState = this.video.muted;
3107
2984
  const originalMutedState = this.ima.getOriginalMutedState();
3108
2985
  this.video.muted = originalMutedState;
3109
2986
  if (this.config.debugAdTiming) {
3110
2987
  console.log(
3111
- `[StormcloudVideoPlayer] Restored mute state: ${currentMutedState} -> ${originalMutedState}`
2988
+ `[StormcloudVideoPlayer] Restored main video mute state to: ${originalMutedState}`
3112
2989
  );
3113
2990
  }
3114
- if (this.video.paused) {
2991
+ if (!this.shouldContinueLiveStreamDuringAds() && this.video.paused) {
3115
2992
  if (this.config.debugAdTiming) {
3116
2993
  console.log("[StormcloudVideoPlayer] Resuming paused video");
3117
2994
  }
3118
2995
  (_a = this.video.play()) == null ? void 0 : _a.catch((error) => {
3119
2996
  if (this.config.debugAdTiming) {
3120
2997
  console.error(
3121
- "[StormcloudVideoPlayer] Failed to resume video after ad failure:",
2998
+ "[StormcloudVideoPlayer] Failed to resume video:",
3122
2999
  error
3123
3000
  );
3124
3001
  }
3125
3002
  });
3126
- } else {
3127
- if (this.config.debugAdTiming) {
3128
- console.log(
3129
- "[StormcloudVideoPlayer] Video is already playing, no resume needed"
3130
- );
3131
- }
3132
3003
  }
3133
3004
  }
3005
+ handleAdFailure() {
3006
+ if (this.config.debugAdTiming) {
3007
+ console.log(
3008
+ "[StormcloudVideoPlayer] Handling ad failure - resuming content",
3009
+ {
3010
+ inAdBreak: this.inAdBreak,
3011
+ showAds: this.showAds,
3012
+ videoPaused: this.video.paused,
3013
+ adPlaying: this.ima.isAdPlaying()
3014
+ }
3015
+ );
3016
+ }
3017
+ this.handleAdPodComplete();
3018
+ }
3134
3019
  startAdFailsafeTimer() {
3135
3020
  var _a;
3136
3021
  this.clearAdFailsafeTimer();