eb-player 2.0.19 → 2.0.20

package/dist/build/eb-player.css

@@ -2539,6 +2539,15 @@
   pointer-events: none;
 }
 
+/* While an ad plays, raise the ads container above the player chrome (bars are
+   z-index 30) and enable pointer-events so IMA's own ad UI — Skip button,
+   click-through — receives clicks. At rest the container stays pointer-events:none
+   so it never blocks clicks on the content video. */
+.eb-ad-playing .eb-ads-container {
+  z-index: 40;
+  pointer-events: auto;
+}
+
 /* ============================================================
    Top bar
    ============================================================ */

package/dist/build/ebplayer.bundle.js

@@ -4,7 +4,7 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.EBPlayer = {}));
 })(this, (function (exports) { 'use strict';
 
-    var __EB_PLAYER_VERSION__ = "2.0.19";
+    var __EB_PLAYER_VERSION__ = "2.0.20";
 
     /**
      * Finite State Machine for player playback state transitions.
@@ -3324,6 +3324,11 @@
             state.on('controlsVisible', () => {
                 this.updateControlsVisibility();
             }, { signal });
+            // Toggle ad-playing class so the IMA ads container can receive clicks
+            // (skip button, click-through) and sit above the player chrome during ads.
+            state.on('adPlaying', () => {
+                this.updateAdPlayingState();
+            }, { signal });
         }
         /**
          * Toggles poster image visibility based on playbackState.
@@ -3398,6 +3403,19 @@
             inner.classList.toggle('eb-controls-visible', visible);
             inner.classList.toggle('eb-controls-hidden', !visible);
         }
+        /**
+         * Toggles the eb-ad-playing class on the player container. While an IMA ad
+         * plays, CSS raises the ads container above the player chrome and enables
+         * pointer-events on it so IMA's own ad UI (Skip button, click-through) is
+         * clickable — the container is pointer-events:none at rest to avoid blocking
+         * clicks on the content video.
+         */
+        updateAdPlayingState() {
+            const inner = this.el?.firstElementChild;
+            if (inner == null)
+                return;
+            inner.classList.toggle('eb-ad-playing', this.state.adPlaying);
+        }
         /**
          * Applies or removes the dir=rtl attribute without full re-render.
          * More efficient than re-rendering the entire template for a simple attribute change.
@@ -3940,6 +3958,12 @@
                 // Wire event handlers for ad lifecycle
                 adsManager.addEventListener(ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, () => {
                     state.adPlaying = true;
+                    // Pause the content stream while the ad plays. IMA's integration
+                    // contract requires the publisher to pause its own content video on
+                    // CONTENT_PAUSE_REQUESTED; the symmetric CONTENT_RESUME_REQUESTED
+                    // handler below resumes it with video.play(). Without this the main
+                    // HLS/DASH stream keeps playing (audio + video) underneath the ad.
+                    video.pause();
                 });
                 adsManager.addEventListener(ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, () => {
                     state.adPlaying = false;