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.
@@ -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 = "flex";
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 = "2";
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 = "2";
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
  }
@@ -532,63 +534,12 @@ function createImaController(video, options) {
532
534
  adPlaying = false;
533
535
  setAdPlayingFlag(false);
534
536
  emit("content_resume");
535
- setTimeout(() => {
536
- var _a;
537
- const stillInAdPod = video.dataset.stormcloudAdPlaying === "true";
538
- if (stillInAdPod) {
539
- console.log(
540
- "[IMA] Next ad started - keeping content muted/paused and ad container visible"
541
- );
542
- if (adContainerEl) {
543
- adContainerEl.style.display = "flex";
544
- adContainerEl.style.pointerEvents = "auto";
545
- }
546
- return;
547
- }
548
- console.log("[IMA] No next ad - resuming content");
549
- video.muted = originalMutedState;
550
- if (adContainerEl) {
551
- adContainerEl.style.pointerEvents = "none";
552
- adContainerEl.style.display = "none";
553
- console.log(
554
- "[IMA] Ad container hidden - pointer events disabled"
555
- );
556
- }
557
- if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
558
- (_a = video.play()) == null ? void 0 : _a.catch(() => {
559
- });
560
- console.log("[IMA] Video resumed (VOD mode)");
561
- } else {
562
- console.log(
563
- "[IMA] Video unmuted (Live mode - was never paused)"
564
- );
565
- }
566
- }, 100);
567
537
  }
568
538
  );
569
539
  adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
570
- console.log("[IMA] All ads completed");
540
+ console.log("[IMA] All ads completed - notifying parent");
571
541
  adPlaying = false;
572
- video.muted = originalMutedState;
573
542
  setAdPlayingFlag(false);
574
- if (adContainerEl) {
575
- adContainerEl.style.pointerEvents = "none";
576
- adContainerEl.style.display = "none";
577
- console.log(
578
- "[IMA] Ad container hidden after all ads completed"
579
- );
580
- }
581
- if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
582
- video.play().catch(() => {
583
- });
584
- console.log(
585
- "[IMA] Video resumed after all ads completed (VOD mode)"
586
- );
587
- } else {
588
- console.log(
589
- "[IMA] Video unmuted after all ads completed (Live mode)"
590
- );
591
- }
592
543
  emit("all_ads_completed");
593
544
  });
594
545
  console.log("[IMA] Ads manager event listeners attached");
@@ -711,8 +662,8 @@ function createImaController(video, options) {
711
662
  },
712
663
  async stop() {
713
664
  var _a;
665
+ console.log("[IMA] Stopping ad playback");
714
666
  adPlaying = false;
715
- video.muted = originalMutedState;
716
667
  setAdPlayingFlag(false);
717
668
  if (adContainerEl) {
718
669
  adContainerEl.style.pointerEvents = "none";
@@ -724,13 +675,6 @@ function createImaController(video, options) {
724
675
  } catch {
725
676
  }
726
677
  destroyAdsManager();
727
- if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
728
- video.play().catch(() => {
729
- });
730
- console.log("[IMA] Video resumed after stop (VOD mode)");
731
- } else {
732
- console.log("[IMA] Video unmuted after stop (Live mode)");
733
- }
734
678
  },
735
679
  destroy() {
736
680
  var _a;
@@ -1139,37 +1083,6 @@ function createHlsAdPlayer(contentVideo, options) {
1139
1083
  adPlaying = false;
1140
1084
  setAdPlayingFlag(false);
1141
1085
  emit("content_resume");
1142
- emit("all_ads_completed");
1143
- setTimeout(() => {
1144
- const stillInAdPod = contentVideo.dataset.stormcloudAdPlaying === "true";
1145
- if (stillInAdPod) {
1146
- console.log(
1147
- "[HlsAdPlayer] Next ad started - keeping content muted/paused and ad container visible"
1148
- );
1149
- if (adContainerEl) {
1150
- adContainerEl.style.display = "flex";
1151
- adContainerEl.style.pointerEvents = "auto";
1152
- }
1153
- return;
1154
- }
1155
- console.log("[HlsAdPlayer] No next ad - resuming content");
1156
- const previousMutedState = contentVideo.muted;
1157
- contentVideo.muted = originalMutedState;
1158
- console.log(
1159
- `[HlsAdPlayer] Restored mute state: ${previousMutedState} -> ${originalMutedState}`
1160
- );
1161
- if (adContainerEl) {
1162
- adContainerEl.style.display = "none";
1163
- adContainerEl.style.pointerEvents = "none";
1164
- }
1165
- if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
1166
- contentVideo.play().catch(() => {
1167
- });
1168
- console.log("[HlsAdPlayer] Content resumed (VOD mode)");
1169
- } else {
1170
- console.log("[HlsAdPlayer] Content unmuted (Live mode)");
1171
- }
1172
- }, 100);
1173
1086
  }
1174
1087
  function handleAdError() {
1175
1088
  console.log("[HlsAdPlayer] Handling ad error");
@@ -1207,7 +1120,7 @@ function createHlsAdPlayer(contentVideo, options) {
1207
1120
  container.style.alignItems = "center";
1208
1121
  container.style.justifyContent = "center";
1209
1122
  container.style.pointerEvents = "none";
1210
- container.style.zIndex = "2";
1123
+ container.style.zIndex = "10";
1211
1124
  container.style.backgroundColor = "#000";
1212
1125
  (_a = contentVideo.parentElement) == null ? void 0 : _a.appendChild(container);
1213
1126
  adContainerEl = container;
@@ -1345,7 +1258,6 @@ function createHlsAdPlayer(contentVideo, options) {
1345
1258
  console.log("[HlsAdPlayer] Stopping ad");
1346
1259
  adPlaying = false;
1347
1260
  setAdPlayingFlag(false);
1348
- contentVideo.muted = originalMutedState;
1349
1261
  if (adContainerEl) {
1350
1262
  adContainerEl.style.display = "none";
1351
1263
  adContainerEl.style.pointerEvents = "none";
@@ -1358,10 +1270,6 @@ function createHlsAdPlayer(contentVideo, options) {
1358
1270
  adVideoElement.pause();
1359
1271
  adVideoElement.src = "";
1360
1272
  }
1361
- if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
1362
- contentVideo.play().catch(() => {
1363
- });
1364
- }
1365
1273
  currentAd = void 0;
1366
1274
  },
1367
1275
  destroy() {
@@ -1907,7 +1815,6 @@ var StormcloudVideoPlayer = class {
1907
1815
  this.bufferedSegmentsCount = 0;
1908
1816
  this.shouldAutoplayAfterBuffering = false;
1909
1817
  this.hasInitialBufferCompleted = false;
1910
- this.isTransitioningBetweenAds = false;
1911
1818
  initializePolyfills();
1912
1819
  const browserOverrides = getBrowserConfigOverrides();
1913
1820
  this.config = { ...config, ...browserOverrides };
@@ -2171,9 +2078,12 @@ var StormcloudVideoPlayer = class {
2171
2078
  this.ima.on("all_ads_completed", () => {
2172
2079
  if (this.config.debugAdTiming) {
2173
2080
  console.log(
2174
- "[StormcloudVideoPlayer] IMA all_ads_completed event received"
2081
+ "[StormcloudVideoPlayer] IMA all_ads_completed event received - ending ad break"
2175
2082
  );
2176
2083
  }
2084
+ if (this.inAdBreak) {
2085
+ this.handleAdPodComplete();
2086
+ }
2177
2087
  });
2178
2088
  this.ima.on("ad_error", () => {
2179
2089
  if (this.config.debugAdTiming) {
@@ -2212,57 +2122,43 @@ var StormcloudVideoPlayer = class {
2212
2122
  "[StormcloudVideoPlayer] IMA content_resume event received",
2213
2123
  {
2214
2124
  inAdBreak: this.inAdBreak,
2215
- isTransitioningBetweenAds: this.isTransitioningBetweenAds,
2216
2125
  pendingAds: this.adPodQueue.length
2217
2126
  }
2218
2127
  );
2219
2128
  }
2220
2129
  this.clearAdFailsafeTimer();
2221
- if (this.isTransitioningBetweenAds) {
2222
- if (this.config.debugAdTiming) {
2223
- console.log(
2224
- "[StormcloudVideoPlayer] Transitioning between ads - keeping content muted/paused"
2225
- );
2226
- }
2227
- return;
2228
- }
2229
2130
  if (!this.inAdBreak) {
2230
2131
  if (this.config.debugAdTiming) {
2231
2132
  console.log(
2232
- "[StormcloudVideoPlayer] Not in ad break, allowing normal content resume"
2133
+ "[StormcloudVideoPlayer] Not in ad break - this shouldn't happen during pod"
2233
2134
  );
2234
2135
  }
2235
2136
  return;
2236
2137
  }
2237
2138
  const remaining = this.getRemainingAdMs();
2238
2139
  if (remaining > 500 && this.adPodQueue.length > 0) {
2239
- this.isTransitioningBetweenAds = true;
2240
- this.video.muted = true;
2241
- if (!this.shouldContinueLiveStreamDuringAds()) {
2242
- this.video.pause();
2243
- }
2244
2140
  const next = this.adPodQueue.shift();
2245
2141
  this.currentAdIndex++;
2246
2142
  if (this.config.debugAdTiming) {
2247
2143
  console.log(
2248
- `[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) - keeping content muted/paused`
2144
+ `[StormcloudVideoPlayer] Playing next ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) - main video stays muted, ad layer stays visible`
2249
2145
  );
2250
2146
  }
2251
2147
  this.playSingleAd(next).catch(() => {
2252
- }).finally(() => {
2253
- this.isTransitioningBetweenAds = false;
2148
+ if (this.config.debugAdTiming) {
2149
+ console.error(
2150
+ "[StormcloudVideoPlayer] Failed to play next ad in pod"
2151
+ );
2152
+ }
2153
+ this.handleAdPodComplete();
2254
2154
  });
2255
2155
  } else {
2256
2156
  if (this.config.debugAdTiming) {
2257
- console.log("[StormcloudVideoPlayer] Ad pod completed");
2157
+ console.log(
2158
+ "[StormcloudVideoPlayer] No more ads in pod - completing ad break"
2159
+ );
2258
2160
  }
2259
- this.inAdBreak = false;
2260
- this.expectedAdBreakDurationMs = void 0;
2261
- this.currentAdBreakStartWallClockMs = void 0;
2262
- this.currentAdIndex = 0;
2263
- this.totalAdsInBreak = 0;
2264
- this.showAds = false;
2265
- this.clearAdStopTimer();
2161
+ this.handleAdPodComplete();
2266
2162
  }
2267
2163
  });
2268
2164
  this.video.addEventListener("timeupdate", () => {
@@ -2980,23 +2876,11 @@ var StormcloudVideoPlayer = class {
2980
2876
  maxExtensionMs
2981
2877
  });
2982
2878
  }
2983
- this.inAdBreak = false;
2984
- this.expectedAdBreakDurationMs = void 0;
2985
- this.currentAdBreakStartWallClockMs = void 0;
2986
- this.showAds = false;
2987
- this.adPodQueue = [];
2988
- this.currentAdIndex = 0;
2989
- this.totalAdsInBreak = 0;
2990
- this.clearAdFailsafeTimer();
2991
2879
  if (adPlaying) {
2992
2880
  this.ima.stop().catch(() => {
2993
2881
  });
2994
- return;
2995
- }
2996
- const originalMutedState = this.ima.getOriginalMutedState();
2997
- if (this.video.muted !== originalMutedState) {
2998
- this.video.muted = originalMutedState;
2999
2882
  }
2883
+ this.handleAdPodComplete();
3000
2884
  }
3001
2885
  scheduleAdStartIn(delayMs) {
3002
2886
  this.clearAdStartTimer();
@@ -3083,17 +2967,11 @@ var StormcloudVideoPlayer = class {
3083
2967
  this.handleAdFailure();
3084
2968
  }
3085
2969
  }
3086
- handleAdFailure() {
2970
+ handleAdPodComplete() {
3087
2971
  var _a;
3088
2972
  if (this.config.debugAdTiming) {
3089
2973
  console.log(
3090
- "[StormcloudVideoPlayer] Handling ad failure - resuming content",
3091
- {
3092
- inAdBreak: this.inAdBreak,
3093
- showAds: this.showAds,
3094
- videoPaused: this.video.paused,
3095
- adPlaying: this.ima.isAdPlaying()
3096
- }
2974
+ "[StormcloudVideoPlayer] Handling ad pod completion - resuming content"
3097
2975
  );
3098
2976
  }
3099
2977
  this.inAdBreak = false;
@@ -3106,34 +2984,41 @@ var StormcloudVideoPlayer = class {
3106
2984
  this.showAds = false;
3107
2985
  this.currentAdIndex = 0;
3108
2986
  this.totalAdsInBreak = 0;
3109
- const currentMutedState = this.video.muted;
3110
2987
  const originalMutedState = this.ima.getOriginalMutedState();
3111
2988
  this.video.muted = originalMutedState;
3112
2989
  if (this.config.debugAdTiming) {
3113
2990
  console.log(
3114
- `[StormcloudVideoPlayer] Restored mute state: ${currentMutedState} -> ${originalMutedState}`
2991
+ `[StormcloudVideoPlayer] Restored main video mute state to: ${originalMutedState}`
3115
2992
  );
3116
2993
  }
3117
- if (this.video.paused) {
2994
+ if (!this.shouldContinueLiveStreamDuringAds() && this.video.paused) {
3118
2995
  if (this.config.debugAdTiming) {
3119
2996
  console.log("[StormcloudVideoPlayer] Resuming paused video");
3120
2997
  }
3121
2998
  (_a = this.video.play()) == null ? void 0 : _a.catch((error) => {
3122
2999
  if (this.config.debugAdTiming) {
3123
3000
  console.error(
3124
- "[StormcloudVideoPlayer] Failed to resume video after ad failure:",
3001
+ "[StormcloudVideoPlayer] Failed to resume video:",
3125
3002
  error
3126
3003
  );
3127
3004
  }
3128
3005
  });
3129
- } else {
3130
- if (this.config.debugAdTiming) {
3131
- console.log(
3132
- "[StormcloudVideoPlayer] Video is already playing, no resume needed"
3133
- );
3134
- }
3135
3006
  }
3136
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
+ }
3137
3022
  startAdFailsafeTimer() {
3138
3023
  var _a;
3139
3024
  this.clearAdFailsafeTimer();