stormcloud-video-player 0.2.32 → 0.2.33

package/lib/ui/StormcloudVideoPlayer.cjs

@@ -351,15 +351,17 @@ function createImaController(video, options) {
   let adsLoadedResolve;
   let adsLoadedReject;
   function makeAdsRequest(google, vastTagUrl) {
+    console.log("[IMA] \u{1F4CB} === makeAdsRequest() - Building IMA request ===");
     const adsRequest = new google.ima.AdsRequest();
     const preloadedResponse = preloadedVast.get(vastTagUrl);
     if (preloadedResponse) {
       adsRequest.adsResponse = preloadedResponse;
       console.log(
-        "[IMA] Using preloaded VAST response for immediate ad request"
+        "[IMA] \u26A1 Using preloaded VAST response for immediate ad request"
       );
     } else {
       adsRequest.adTagUrl = vastTagUrl;
+      console.log("[IMA] \u{1F310} Will fetch VAST from URL:", vastTagUrl);
     }
     const videoWidth = video.offsetWidth || video.clientWidth || 640;
     const videoHeight = video.offsetHeight || video.clientHeight || 360;
@@ -371,6 +373,7 @@ function createImaController(video, options) {
       try {
         const willAutoPlay = !video.paused || video.autoplay;
         adsRequest.setAdWillAutoPlay(willAutoPlay);
+        console.log(`[IMA] Ad will autoplay: ${willAutoPlay}`);
       } catch (error) {
         console.warn("[IMA] Failed to call setAdWillAutoPlay:", error);
       }
@@ -379,13 +382,17 @@ function createImaController(video, options) {
       try {
         const willPlayMuted = video.muted || video.volume === 0;
         adsRequest.setAdWillPlayMuted(willPlayMuted);
+        console.log(`[IMA] Ad will play muted: ${willPlayMuted}`);
       } catch (error) {
         console.warn("[IMA] Failed to call setAdWillPlayMuted:", error);
       }
     }
     adsRequest.vastLoadTimeout = 5e3;
-    console.log(`[IMA] Ads request dimensions: ${videoWidth}x${videoHeight}`);
+    console.log(`[IMA] \u{1F4D0} Ads request dimensions: ${videoWidth}x${videoHeight}`);
+    console.log("[IMA] \u23F1\uFE0F VAST load timeout: 5000ms");
+    console.log("[IMA] \u{1F680} Calling adsLoader.requestAds()...");
     adsLoader.requestAds(adsRequest);
+    console.log("[IMA] \u23F3 Waiting for ADS_MANAGER_LOADED or AD_ERROR event...");
     if (preloadedResponse) {
       preloadedVast.delete(vastTagUrl);
     }
@@ -463,22 +470,24 @@ function createImaController(video, options) {
       });
     },
     async requestAds(vastTagUrl) {
-      console.log("[IMA] Requesting ads:", vastTagUrl);
+      console.log("[IMA] \u{1F4E1} === requestAds() called ===");
+      console.log("[IMA] VAST URL:", vastTagUrl);
+      console.log("[IMA] This will fetch the ad from the server - no visual change yet");
       if (!vastTagUrl || vastTagUrl.trim() === "") {
         const error = new Error("VAST tag URL is empty or undefined");
-        console.warn("[IMA]", error.message);
+        console.warn("[IMA] \u274C", error.message);
         return Promise.reject(error);
       }
       try {
         new URL(vastTagUrl);
       } catch (e) {
         const error = new Error(`Invalid VAST tag URL format: ${vastTagUrl}`);
-        console.warn("[IMA]", error.message);
+        console.warn("[IMA] \u274C", error.message);
         return Promise.reject(error);
       }
       if (adPlaying) {
         console.warn(
-          "[IMA] Cannot request new ads while an ad is playing. Call stop() first."
+          "[IMA] \u26A0\uFE0F Cannot request new ads while an ad is playing. Call stop() first."
         );
         return Promise.reject(
           new Error("Ad already playing - cannot request new ads")
@@ -568,20 +577,85 @@ function createImaController(video, options) {
           adsLoader.addEventListener(
             google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
             (evt) => {
-              console.log(
-                "[IMA] Ads manager loaded - enabling preloading for continuous playback"
-              );
+              console.log("[IMA] \u2705 ADS_MANAGER_LOADED - Ads fetched successfully!");
+              console.log("[IMA] Setting up ads manager with preloading enabled");
+              console.log("[IMA] ========================================");
+              console.log("[IMA] EXPECTED EVENT FLOW:");
+              console.log("[IMA] 1. requestAds() \u2192 fetch VAST");
+              console.log("[IMA] 2. ADS_MANAGER_LOADED \u2192 ads ready");
+              console.log("[IMA] 3. play() \u2192 start playback");
+              console.log("[IMA] 4. CONTENT_PAUSE_REQUESTED \u2192 show ad layer \u2728");
+              console.log("[IMA] 5. STARTED \u2192 ad is playing");
+              console.log("[IMA] 6. CONTENT_RESUME_REQUESTED \u2192 ad done");
+              console.log("[IMA] 7. ALL_ADS_COMPLETED \u2192 hide ad layer");
+              console.log("[IMA] ========================================");
               try {
                 const adsRenderingSettings = new google.ima.AdsRenderingSettings();
                 adsRenderingSettings.enablePreloading = true;
                 adsManager = evt.getAdsManager(video, adsRenderingSettings);
                 const AdEvent = google.ima.AdEvent.Type;
                 const AdErrorEvent = google.ima.AdErrorEvent.Type;
+                console.log("[IMA] ========== IMA EVENT LOGGING ENABLED ==========");
+                console.log("[IMA] All IMA SDK events will be logged below");
+                const allAdEvents = [
+                  "AD_BREAK_READY",
+                  "AD_METADATA",
+                  "ALL_ADS_COMPLETED",
+                  "CLICK",
+                  "COMPLETE",
+                  "CONTENT_PAUSE_REQUESTED",
+                  "CONTENT_RESUME_REQUESTED",
+                  "DURATION_CHANGE",
+                  "FIRST_QUARTILE",
+                  "IMPRESSION",
+                  "INTERACTION",
+                  "LINEAR_CHANGED",
+                  "LOADED",
+                  "LOG",
+                  "MIDPOINT",
+                  "PAUSED",
+                  "RESUMED",
+                  "SKIPPABLE_STATE_CHANGED",
+                  "SKIPPED",
+                  "STARTED",
+                  "THIRD_QUARTILE",
+                  "USER_CLOSE",
+                  "VOLUME_CHANGED",
+                  "VOLUME_MUTED"
+                ];
+                allAdEvents.forEach((eventType) => {
+                  if (AdEvent[eventType]) {
+                    adsManager.addEventListener(AdEvent[eventType], (e) => {
+                      var _a, _b, _c, _d, _e, _f;
+                      const ad = (_a = e.getAd) == null ? void 0 : _a.call(e);
+                      const adData = ad ? {
+                        adId: (_b = ad.getAdId) == null ? void 0 : _b.call(ad),
+                        title: (_c = ad.getTitle) == null ? void 0 : _c.call(ad),
+                        duration: (_d = ad.getDuration) == null ? void 0 : _d.call(ad),
+                        isLinear: (_e = ad.isLinear) == null ? void 0 : _e.call(ad),
+                        contentType: (_f = ad.getContentType) == null ? void 0 : _f.call(ad)
+                      } : null;
+                      console.log(`[IMA EVENT] ${eventType}`, {
+                        eventType,
+                        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+                        adData
+                      });
+                    });
+                  }
+                });
+                console.log("[IMA] ========== EVENT LISTENERS ATTACHED ==========");
                 adsManager.addEventListener(
                   AdErrorEvent.AD_ERROR,
                   (errorEvent) => {
-                    var _a;
-                    console.error("[IMA] Ad error:", errorEvent.getError());
+                    var _a, _b, _c, _d, _e, _f;
+                    const error = errorEvent.getError();
+                    console.error("[IMA] \u274C AD_ERROR Event:", {
+                      message: (_a = error.getMessage) == null ? void 0 : _a.call(error),
+                      errorCode: (_b = error.getErrorCode) == null ? void 0 : _b.call(error),
+                      type: (_c = error.getType) == null ? void 0 : _c.call(error),
+                      vastErrorCode: (_d = error.getVastErrorCode) == null ? void 0 : _d.call(error),
+                      innerError: (_e = error.getInnerError) == null ? void 0 : _e.call(error)
+                    });
                     destroyAdsManager();
                     adPlaying = false;
                     setAdPlayingFlag(false);
@@ -623,7 +697,7 @@ function createImaController(video, options) {
                           console.log(
                             "[IMA] Resuming paused video after ad error"
                           );
-                          (_a = video.play()) == null ? void 0 : _a.catch(() => {
+                          (_f = video.play()) == null ? void 0 : _f.catch(() => {
                           });
                         }
                       }
@@ -633,7 +707,8 @@ function createImaController(video, options) {
                 adsManager.addEventListener(
                   AdEvent.CONTENT_PAUSE_REQUESTED,
                   () => {
-                    console.log("[IMA] Content pause requested");
+                    console.log("[IMA] \u2705 CONTENT_PAUSE_REQUESTED - Ad is ready to play!");
+                    console.log("[IMA] This is the event that triggers the ad layer to appear");
                     if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
                       video.pause();
                       console.log("[IMA] Content video paused (VOD mode)");
@@ -649,15 +724,16 @@ function createImaController(video, options) {
                       adContainerEl.style.backgroundColor = "#000";
                       adContainerEl.offsetHeight;
                       adContainerEl.style.opacity = "1";
-                      console.log("[IMA] Ad container shown on content pause");
+                      console.log("[IMA] \u2728 Ad container NOW VISIBLE (after content pause)");
                     }
                     adPlaying = true;
                     setAdPlayingFlag(true);
+                    console.log("[IMA] Emitting 'content_pause' event to player");
                     emit("content_pause");
                   }
                 );
                 adsManager.addEventListener(AdEvent.STARTED, () => {
-                  console.log("[IMA] Ad started - showing ad video");
+                  console.log("[IMA] \u25B6\uFE0F STARTED - Ad playback has begun");
                   setAdPlayingFlag(true);
                   hideContentVideo();
                   if (adVideoElement) {
@@ -673,20 +749,21 @@ function createImaController(video, options) {
                     adContainerEl.style.backgroundColor = "#000";
                     adContainerEl.offsetHeight;
                     adContainerEl.style.opacity = "1";
-                    console.log("[IMA] Ad container now visible");
+                    console.log("[IMA] Ad container now visible (STARTED event)");
                   }
                 });
                 adsManager.addEventListener(
                   AdEvent.CONTENT_RESUME_REQUESTED,
                   () => {
-                    console.log("[IMA] Content resume requested");
+                    console.log("[IMA] \u23F8\uFE0F CONTENT_RESUME_REQUESTED - Single ad completed");
                     adPlaying = false;
                     setAdPlayingFlag(false);
+                    console.log("[IMA] Emitting 'content_resume' event to player");
                     emit("content_resume");
                   }
                 );
                 adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, () => {
-                  console.log("[IMA] All ads completed - restoring content");
+                  console.log("[IMA] \u{1F3C1} ALL_ADS_COMPLETED - All ads in break finished");
                   adPlaying = false;
                   setAdPlayingFlag(false);
                   if (adContainerEl) {
@@ -696,7 +773,7 @@ function createImaController(video, options) {
                       if (adContainerEl) {
                         adContainerEl.style.pointerEvents = "none";
                         adContainerEl.style.display = "none";
-                        console.log("[IMA] Ad container hidden");
+                        console.log("[IMA] \u{1F648} Ad container hidden (ALL_ADS_COMPLETED)");
                       }
                     }, 300);
                   }
@@ -707,6 +784,7 @@ function createImaController(video, options) {
                       console.warn("[IMA] Failed to resume content video:", e);
                     });
                   }
+                  console.log("[IMA] Emitting 'all_ads_completed' event to player");
                   emit("all_ads_completed");
                 });
                 console.log("[IMA] Ads manager event listeners attached");
@@ -755,7 +833,17 @@ function createImaController(video, options) {
           adsLoader.addEventListener(
             google.ima.AdErrorEvent.Type.AD_ERROR,
             (adErrorEvent) => {
-              console.error("[IMA] Ads loader error:", adErrorEvent.getError());
+              var _a, _b, _c, _d;
+              const error = adErrorEvent.getError();
+              console.error("[IMA] \u274C ADS_LOADER ERROR - Ad request failed!", {
+                message: (_a = error.getMessage) == null ? void 0 : _a.call(error),
+                errorCode: (_b = error.getErrorCode) == null ? void 0 : _b.call(error),
+                type: (_c = error.getType) == null ? void 0 : _c.call(error),
+                vastErrorCode: (_d = error.getVastErrorCode) == null ? void 0 : _d.call(error)
+              });
+              console.error("[IMA] This means the ad server didn't return valid ads");
+              console.error("[IMA] Ad layer will NOT appear (no flicker)");
+              console.error("[IMA] Full error object:", adErrorEvent.getError());
               adPlaying = false;
               setAdPlayingFlag(false);
               if (adContainerEl) {
@@ -787,8 +875,10 @@ function createImaController(video, options) {
             false
           );
         }
-        console.log("[IMA] Making ads request");
+        console.log("[IMA] \u{1F680} Making ads request to IMA SDK");
+        console.log("[IMA] Waiting for IMA SDK response (LOADED or ERROR event)...");
         makeAdsRequest(google, vastTagUrl);
+        console.log("[IMA] \u23F3 Returning promise that will resolve when ads are loaded");
         return adsLoadedPromise;
       } catch (error) {
         console.error("[IMA] Failed to request ads:", error);
@@ -826,20 +916,23 @@ function createImaController(video, options) {
     },
     async play() {
       var _a, _b;
+      console.log("[IMA] \u25B6\uFE0F === play() called ===");
+      console.log("[IMA] This initializes and starts the ad");
+      console.log("[IMA] Ad layer will appear when CONTENT_PAUSE_REQUESTED fires");
       if (!((_a = window.google) == null ? void 0 : _a.ima) || !adDisplayContainer) {
         console.warn(
-          "[IMA] Cannot play ad: IMA SDK or ad container not available"
+          "[IMA] \u274C Cannot play ad: IMA SDK or ad container not available"
         );
         return Promise.reject(new Error("IMA SDK not available"));
       }
       if (!adsManager) {
-        console.warn("[IMA] Cannot play ad: No ads manager available");
+        console.warn("[IMA] \u274C Cannot play ad: No ads manager available");
         return Promise.reject(new Error("No ads manager"));
       }
       try {
         const width = video.clientWidth || 640;
         const height = video.clientHeight || 360;
-        console.log(`[IMA] Initializing ads manager (${width}x${height})`);
+        console.log(`[IMA] \u{1F3AC} Initializing ads manager (${width}x${height})`);
         adsManager.init(width, height, window.google.ima.ViewMode.NORMAL);
         adPlaying = true;
         const adVolume = originalMutedState ? 0 : originalVolume;
@@ -847,7 +940,7 @@ function createImaController(video, options) {
           adVideoElement.volume = adVolume;
           adVideoElement.muted = originalMutedState;
           console.log(
-            `[IMA] Set dedicated ad video volume to ${adVolume}, muted: ${originalMutedState}`
+            `[IMA] \u{1F50A} Set dedicated ad video volume to ${adVolume}, muted: ${originalMutedState}`
           );
         }
         try {
@@ -856,11 +949,13 @@ function createImaController(video, options) {
         } catch (error) {
           console.warn("[IMA] Failed to set IMA manager volume:", error);
         }
-        console.log("[IMA] Starting ad playback");
+        console.log("[IMA] \u{1F3AF} Calling adsManager.start()");
+        console.log("[IMA] If successful, IMA will fire CONTENT_PAUSE_REQUESTED");
         adsManager.start();
+        console.log("[IMA] \u2705 play() completed successfully");
         return Promise.resolve();
       } catch (error) {
-        console.error("[IMA] Error starting ad playback:", error);
+        console.error("[IMA] \u274C Error starting ad playback:", error);
         adPlaying = false;
         setAdPlayingFlag(false);
         if (!(options == null ? void 0 : options.continueLiveStreamDuringAds)) {
@@ -2531,10 +2626,9 @@ var StormcloudVideoPlayer = class {
         const nextPreloaded = this.findNextPreloadedAd();
         if (nextPreloaded) {
           this.currentAdIndex++;
-          this.enforceAdHoldState();
           if (this.config.debugAdTiming) {
             console.log(
-              `[StormcloudVideoPlayer] Playing next preloaded ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak})`
+              `[StormcloudVideoPlayer] Playing next preloaded ad in pod (${this.currentAdIndex}/${this.totalAdsInBreak}) - layer will stay visible if ad loads`
             );
           }
           this.playSingleAd(nextPreloaded).catch(() => {
@@ -3174,10 +3268,9 @@ var StormcloudVideoPlayer = class {
       this.currentAdIndex = 0;
       this.totalAdsInBreak = vastTagUrls.length;
       this.adPodQueue = [...vastTagUrls];
-      this.enforceAdHoldState();
       if (this.config.debugAdTiming) {
         console.log(
-          `[StormcloudVideoPlayer] Starting ad pod with ${vastTagUrls.length} ads - preloading all ads in parallel`
+          `[StormcloudVideoPlayer] Starting ad pod with ${vastTagUrls.length} ads - preloading all ads in parallel (ad layer will show after ad loads)`
         );
       }
       this.preloadAllAdsInBackground().catch((error) => {
@@ -3268,7 +3361,6 @@ var StormcloudVideoPlayer = class {
         const rest = tags.slice(1);
         this.adPodQueue = rest;
         this.ima.updateOriginalMutedState(this.video.muted, this.video.volume);
-        this.enforceAdHoldState();
         await this.playSingleAd(first);
         this.inAdBreak = true;
         this.expectedAdBreakDurationMs = remainingMs;
@@ -3394,10 +3486,9 @@ var StormcloudVideoPlayer = class {
       try {
         if (this.config.debugAdTiming) {
           console.log(
-            "[StormcloudVideoPlayer] Ad request completed, attempting playback"
+            "[StormcloudVideoPlayer] Ad request completed, attempting playback (ad layer will show when IMA triggers content pause)"
           );
         }
-        this.enforceAdHoldState();
         await this.ima.play();
         this.showAds = true;
         if (this.config.debugAdTiming) {