eb-player 2.0.4 → 2.0.7

package/dist/build/eb-player.css

@@ -2049,7 +2049,12 @@
   user-select: none;
 }
 
-/* Video element fills the container */
+/* Video element fills the container.
+   filter: brightness(1) is visually identical to no filter but forces Chrome to
+   composite the video through the GPU filter pipeline instead of using a hardware
+   overlay plane. Without this, DRM-protected video (Widevine) renders on a separate
+   hardware overlay that sits above ALL HTML layers — making seekbar snapshot preview
+   and other overlay elements invisible behind the main video. */
 .eb-player video.eb-video {
   position: absolute;
   top: 0;
@@ -2059,6 +2064,7 @@
   display: block;
   object-fit: contain;
   z-index: 1;
+  filter: brightness(1);
 }
 
 /* ============================================================
@@ -2362,23 +2368,29 @@
   padding: 4px 0;
 }
 
-.eb-settings-submenu .eb-settings-menu {
+.eb-settings-submenu {
   max-height: 200px;
   overflow-y: auto;
 }
 
-.eb-settings-submenu .eb-settings-menu::-webkit-scrollbar {
+.eb-settings-submenu::-webkit-scrollbar {
   width: 4px;
 }
 
-.eb-settings-submenu .eb-settings-menu::-webkit-scrollbar-thumb {
+.eb-settings-submenu::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.3);
   border-radius: 2px;
 }
 
+.eb-settings-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 12px;
+}
+
 .eb-settings-category,
-.eb-settings-item,
-.eb-settings-back {
+.eb-settings-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2392,9 +2404,18 @@
   text-align: left;
 }
 
+.eb-settings-back {
+  display: flex;
+  align-items: center;
+  border: none;
+  background: none;
+  color: #fff;
+  cursor: pointer;
+  padding: 0;
+}
+
 .eb-settings-category:hover,
-.eb-settings-item:hover,
-.eb-settings-back:hover {
+.eb-settings-item:hover {
   background: rgba(255, 255, 255, 0.1);
 }
 
@@ -2477,13 +2498,27 @@
   white-space: nowrap;
   pointer-events: none;
   text-align: center;
+  z-index: 50;
+  overflow: hidden;
 }
 
 .eb-seekbar-preview {
+  position: static !important;
   width: 120px;
-  height: auto;
-  display: block;
-  margin-bottom: 4px;
+  height: 68px;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  max-width: none !important;
+  max-height: none !important;
+  display: block !important;
+  object-fit: contain;
+  background: #000;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  inset: auto !important;
+  transform: none !important;
+  z-index: auto !important;
 }
 
 .eb-chapter-marker {
@@ -2843,7 +2878,7 @@
    Responsive: ensure container fills parent
    ============================================================ */
 .eb-player,
-.eb-player video {
+.eb-player video.eb-video {
   max-width: 100%;
   max-height: 100%;
 }

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.4";
+    var __EB_PLAYER_VERSION__ = "2.0.7";
 
     /**
      * Finite State Machine for player playback state transitions.
@@ -1312,6 +1312,8 @@
             this.tooltipX = 0;
             this.previewVideoEl = null;
             this.snapshotTake = null;
+            this.trackEl = null;
+            this.boundDocPointerMove = null;
         }
         onConnect() {
             // Subscribe to snapshot handler readiness (emitted by eb-player.ts)
@@ -1332,6 +1334,10 @@
             this.state.on('epgPrograms', () => this.scheduleRender(), { signal: this.signal });
             this.render();
         }
+        disconnect() {
+            this.stopDocumentTracking();
+            super.disconnect();
+        }
         // ---- rAF batching ----
         scheduleRender() {
             if (this.rafPending)
@@ -1354,11 +1360,47 @@
             const clamped = Math.min(1, Math.max(0, percent));
             return clamped * this.state.duration;
         }
+        // ---- Document-level pointer tracking ----
+        // pointerleave/mouseleave on the track are unreliable when the tooltip (a DOM child)
+        // is absolutely positioned above the track — some browsers consider the pointer still
+        // "inside" the track's subtree. Instead, we track pointer position at the document level
+        // and hide the tooltip when the pointer moves outside the track's bounding rect.
+        startDocumentTracking() {
+            if (this.boundDocPointerMove)
+                return;
+            this.boundDocPointerMove = (event) => this.onDocPointerMove(event);
+            document.addEventListener('pointermove', this.boundDocPointerMove);
+            document.addEventListener('mouseleave', this.boundDocPointerMove);
+        }
+        stopDocumentTracking() {
+            if (!this.boundDocPointerMove)
+                return;
+            document.removeEventListener('pointermove', this.boundDocPointerMove);
+            document.removeEventListener('mouseleave', this.boundDocPointerMove);
+            this.boundDocPointerMove = null;
+        }
+        onDocPointerMove(event) {
+            if (this.isDragging)
+                return;
+            if (!this.trackEl)
+                return;
+            const rect = this.trackEl.getBoundingClientRect();
+            const inBounds = event.clientX >= rect.left
+                && event.clientX <= rect.right
+                && event.clientY >= rect.top
+                && event.clientY <= rect.bottom;
+            if (!inBounds) {
+                this.tooltipVisible = false;
+                this.stopDocumentTracking();
+                this.render();
+            }
+        }
         // ---- Drag handlers ----
         handlePointerDown(event) {
             if (this.state.adPlaying)
                 return;
             const trackEl = event.currentTarget;
+            this.trackEl = trackEl;
             // setPointerCapture ensures events continue firing even if pointer leaves the element
             if (typeof trackEl.setPointerCapture === 'function') {
                 trackEl.setPointerCapture(event.pointerId);
@@ -1389,20 +1431,16 @@
             const seekTime = this.eventToTime(event, trackEl);
             this.isDragging = false;
             this.bus.emit('seek', { time: seekTime });
-            // Hide tooltip if pointer is outside the track bounds after drag ends
-            const rect = trackEl.getBoundingClientRect();
-            if (event.clientX < rect.left || event.clientX > rect.right) {
-                this.tooltipVisible = false;
-            }
-            this.render();
-        }
-        handlePointerLeave() {
+            // Always hide tooltip on pointer up — it reappears naturally via pointermove
+            // if the pointer is still over the track.
             this.tooltipVisible = false;
+            this.stopDocumentTracking();
             this.render();
         }
         // ---- Tooltip ----
         updateTooltip(event) {
             const trackEl = event.currentTarget;
+            this.trackEl = trackEl;
             const rect = trackEl.getBoundingClientRect();
             // Compute hover time (use LTR calculation for tooltip position regardless of RTL)
             const rawPercent = (event.clientX - rect.left) / rect.width;
@@ -1413,6 +1451,8 @@
             // Position tooltip at pointer X relative to track, clamped to track edges
             this.tooltipX = Math.min(rect.width, Math.max(0, event.clientX - rect.left));
             this.tooltipVisible = true;
+            // Start document-level tracking to detect when pointer leaves the track
+            this.startDocumentTracking();
             // Request snapshot frame for seekbar preview thumbnail
             if (this.snapshotTake !== null) {
                 this.snapshotTake(this.tooltipTime);
@@ -1505,11 +1545,10 @@
             const tooltip = b `
       <div
         class="eb-seekbar-tooltip"
-        style="left: ${this.tooltipX}px"
-        ?hidden="${!this.tooltipVisible}"
+        style="left: ${this.tooltipX}px; visibility: ${this.tooltipVisible ? 'visible' : 'hidden'}"
       >
-        ${tooltipTimeText}
         ${this.previewVideoEl !== null ? this.previewVideoEl : b ``}
+        ${tooltipTimeText}
       </div>
     `;
             return b `
@@ -1522,7 +1561,6 @@
           @pointerdown="${(event) => this.handlePointerDown(event)}"
           @pointermove="${(event) => this.handlePointerMove(event)}"
           @pointerup="${(event) => this.handlePointerUp(event)}"
-          @pointerleave="${() => this.handlePointerLeave()}"
         >
           <div class="eb-seekbar-buffered" style="width: ${bufferedPercent.toFixed(2)}%"></div>
           <div class="eb-seekbar-progress" style="width: ${progressPercent.toFixed(2)}%">
@@ -2220,13 +2258,24 @@
      *
      * - Calls screenfull.toggle() with the closest .eb-player ancestor on click
      * - Subscribes to screenfull 'change' event to update state.isFullscreen
-     * - Hidden when screenfull.isEnabled is false (e.g. iOS Safari)
+     * - Falls back to video-element fullscreen on mobile (iOS Safari webkitEnterFullscreen,
+     *   Android Chrome video.requestFullscreen) when the Fullscreen API is not available
+     *   for arbitrary elements
      * - Re-renders when state.isFullscreen changes
      */
     class FullscreenButton extends BaseComponent {
         constructor() {
             super(...arguments);
             this.changeHandler = null;
+            this.videoEl = null;
+            this.videoFullscreenBeginHandler = null;
+            this.videoFullscreenEndHandler = null;
+            this.useVideoFallback = false;
+            this.handleDocFullscreenChange = () => {
+                const isFullscreen = document.fullscreenElement === this.videoEl;
+                this.state.isFullscreen = isFullscreen;
+                this.render();
+            };
         }
         onConnect() {
             this.state.on('isFullscreen', () => this.render(), { signal: this.signal });
@@ -2236,25 +2285,90 @@
                     this.render();
                 };
                 screenfull$1.on('change', this.changeHandler);
-                // Unsubscribe when signal aborts (on disconnect)
                 this.signal.addEventListener('abort', () => {
                     screenfull$1.off('change', this.changeHandler);
                     this.changeHandler = null;
                 });
             }
+            else {
+                // Fullscreen API not available for elements — try video-element fallback (mobile)
+                this.initVideoFallback();
+            }
             this.render();
         }
+        /**
+         * On mobile browsers the Fullscreen API may not work on arbitrary elements,
+         * but the <video> element itself supports fullscreen via webkitEnterFullscreen
+         * (iOS Safari) or video.requestFullscreen() (Android Chrome).
+         */
+        initVideoFallback() {
+            const playerRoot = this.el?.closest('.eb-player');
+            if (!playerRoot)
+                return;
+            const video = playerRoot.querySelector('video.eb-video');
+            if (!video)
+                return;
+            // iOS Safari: webkitSupportsFullscreen + webkitEnterFullscreen
+            const hasWebkitFullscreen = typeof video.webkitEnterFullscreen === 'function';
+            // Android Chrome: standard requestFullscreen on the video element
+            const hasRequestFullscreen = typeof video.requestFullscreen === 'function';
+            if (!hasWebkitFullscreen && !hasRequestFullscreen)
+                return;
+            this.videoEl = video;
+            this.useVideoFallback = true;
+            // Track fullscreen state changes on the video element
+            this.videoFullscreenBeginHandler = () => {
+                this.state.isFullscreen = true;
+                this.render();
+            };
+            this.videoFullscreenEndHandler = () => {
+                this.state.isFullscreen = false;
+                this.render();
+            };
+            // iOS Safari fires these events on the video element
+            video.addEventListener('webkitbeginfullscreen', this.videoFullscreenBeginHandler);
+            video.addEventListener('webkitendfullscreen', this.videoFullscreenEndHandler);
+            // Android Chrome fires standard fullscreenchange on the document
+            document.addEventListener('fullscreenchange', this.handleDocFullscreenChange);
+            this.signal.addEventListener('abort', () => {
+                video.removeEventListener('webkitbeginfullscreen', this.videoFullscreenBeginHandler);
+                video.removeEventListener('webkitendfullscreen', this.videoFullscreenEndHandler);
+                document.removeEventListener('fullscreenchange', this.handleDocFullscreenChange);
+                this.videoFullscreenBeginHandler = null;
+                this.videoFullscreenEndHandler = null;
+                this.videoEl = null;
+            });
+        }
         handleClick() {
-            if (!screenfull$1.isEnabled)
+            if (screenfull$1.isEnabled) {
+                const container = (this.el.closest('.eb-player') ?? this.el);
+                screenfull$1.toggle(container);
                 return;
-            // Use the closest .eb-player ancestor as the fullscreen target,
-            // falling back to this component's own element.
-            // this.el is always non-null when this handler is called from a mounted button.
-            const container = (this.el.closest('.eb-player') ?? this.el);
-            screenfull$1.toggle(container);
+            }
+            if (this.useVideoFallback && this.videoEl) {
+                if (this.state.isFullscreen) {
+                    // Exit fullscreen
+                    if (typeof this.videoEl.webkitExitFullscreen === 'function') {
+                        this.videoEl.webkitExitFullscreen();
+                    }
+                    else if (document.exitFullscreen) {
+                        document.exitFullscreen();
+                    }
+                }
+                else {
+                    // Enter fullscreen
+                    if (typeof this.videoEl.webkitEnterFullscreen === 'function') {
+                        this.videoEl.webkitEnterFullscreen();
+                    }
+                    else if (typeof this.videoEl.requestFullscreen === 'function') {
+                        this.videoEl.requestFullscreen();
+                    }
+                }
+            }
         }
         template() {
-            if (!screenfull$1.isEnabled) {
+            const canFullscreen = screenfull$1.isEnabled || this.useVideoFallback;
+            if (!canFullscreen) {
                 return b `<button class="eb-fullscreen" hidden aria-hidden="true">${icon('fullscreen')}</button>`;
             }
             const isFullscreen = this.state.isFullscreen;
@@ -4998,6 +5112,14 @@
         getDriver() {
             return this.driver;
         }
+        /**
+         * Returns the CDN token manager used by this engine.
+         * Allows the snapshot handler to share the same manager (avoids duplicate token requests).
+         * Returns null when no token URL is configured or before init().
+         */
+        getTokenManager() {
+            return this.tokenManager;
+        }
         // -------------------------------------------------------------------------
         // BaseEngine hooks
         // -------------------------------------------------------------------------
@@ -5880,7 +6002,7 @@
         init(HlsConstructor) {
             // Create an off-screen video element for the snapshot player
             const offscreenVideo = document.createElement('video');
-            offscreenVideo.preload = 'none';
+            offscreenVideo.preload = 'metadata';
             this.offscreenVideo = offscreenVideo;
             // Capture tokenManager via closure (Pitfall 6)
             const tokenManager = this.tokenManager;
@@ -5911,11 +6033,17 @@
                 }
                 PLoader = SnapshotPLoader;
             }
+            // Strip player-specific keys that are NOT hls.js config options — they contain
+            // non-serializable functions that cause DataCloneError when hls.js posts config to its worker.
+            const rawSettings = { ...(this.config.engineSettings ?? {}) };
+            delete rawSettings['extraParamsCallback'];
+            delete rawSettings['onCDNTokenError'];
             const driverConfig = {
                 startLevel: 0,
                 enableWebVTT: false,
+                enableWorker: false,
                 maxBufferLength: 1,
-                ...(this.config.engineSettings ?? {}),
+                ...rawSettings,
                 ...(PLoader ? { pLoader: PLoader } : {})
             };
             const driver = new HlsConstructor(driverConfig);
@@ -6246,7 +6374,13 @@
                         else {
                             const win = window;
                             if (win.Hls) {
-                                const handler = new HlsSnapshotHandler({ src, engineSettings: mergedConfig.engineSettings }, null);
+                                // Share the main engine's token manager with the snapshot handler
+                                // to avoid duplicate token requests (one CDNTokenManager per player instance)
+                                const sharedTokenManager = engine.getTokenManager();
+                                // Build DRM config (emeEnabled, drmSystems, licenseXhrSetup) for the snapshot hls.js instance
+                                const snapshotDrmConfigurator = new DrmConfigurator(sharedTokenManager);
+                                const snapshotDrmConfig = snapshotDrmConfigurator.buildHlsConfig(mergedConfig.engineSettings);
+                                const handler = new HlsSnapshotHandler({ src, engineSettings: { ...mergedConfig.engineSettings, ...snapshotDrmConfig } }, sharedTokenManager);
                                 handler.init(win.Hls)
                                     .then(() => {
                                     activeSnapshotDestroy = () => handler.destroy();
@@ -6304,9 +6438,22 @@
             }, 100);
         });
         // Auto-open the stream if src is provided in config (matches legacy player behaviour
-        // where consumers call start({ src: '...' }) and expect playback to begin immediately)
+        // where consumers call start({ src: '...' }) and expect playback to begin immediately).
+        // When autoplay is false, defer open() until the user requests play — this avoids
+        // fetching CDN tokens and loading manifests before playback is actually needed.
         if (mergedConfig.src) {
-            reference.open(mergedConfig.src);
+            if (mergedConfig.autoplay) {
+                reference.open(mergedConfig.src);
+            }
+            else {
+                let deferredOpen = true;
+                controller.bus.on('play', () => {
+                    if (deferredOpen) {
+                        deferredOpen = false;
+                        reference.open(mergedConfig.src);
+                    }
+                }, { signal: controller.signal });
+            }
         }
         return reference;
     }