eb-player 2.0.0 → 2.0.2

package/dist/build/ebplayer.bundle.js

@@ -274,28 +274,45 @@
             right: ['forward']
         }
     };
+    /**
+     * Available themes — single source of truth for all theme names and labels.
+     * The test player reads this to populate the skin selector dynamically.
+     * Add new entries here when creating a new theme-*.css file.
+     */
+    const AVAILABLE_THEMES = [
+        { value: 'default', label: 'Default' },
+        { value: 'forja', label: 'Forja', primaryColor: '#FC013B' },
+        { value: 'radio', label: 'Radio', primaryColor: '#F4A261' },
+        { value: 'snrt', label: 'SNRT', primaryColor: '#006633' },
+        { value: 'modern', label: 'Modern', primaryColor: '#7c3aed' },
+        { value: 'v2', label: 'V2', primaryColor: '#ff841f' },
+        { value: 'lequipe', label: "L'Equipe", primaryColor: '#d61e00' },
+    ];
     /**
      * Theme-specific default layouts.
      * Used when config.layout is not explicitly provided but a theme is set.
      */
-    const THEME_LAYOUTS = {
-        v2: {
-            topBar: {
-                left: [],
-                right: ['settings', 'pip', 'cast']
-            },
-            bottomBar: {
-                left: ['play-pause', 'live-sync', 'time'],
-                center: ['seekbar'],
-                right: ['volume', 'fullscreen']
-            },
-            middleBar: {
-                left: ['rewind'],
-                center: [],
-                right: ['forward']
-            }
+    const V2_LAYOUT = {
+        topBar: {
+            left: [],
+            right: ['settings', 'pip', 'cast']
+        },
+        bottomBar: {
+            left: ['play-pause', 'live-sync', 'time'],
+            center: ['seekbar'],
+            right: ['volume', 'fullscreen']
+        },
+        middleBar: {
+            left: ['rewind'],
+            center: [],
+            right: ['forward']
         }
     };
+    const THEME_LAYOUTS = {
+        v2: V2_LAYOUT,
+        lequipe: V2_LAYOUT,
+        modern: V2_LAYOUT,
+    };
     /**
      * Returns the effective layout for a given config.
      * Priority: explicit config.layout > theme default > DEFAULT_LAYOUT
@@ -1347,7 +1364,6 @@
             if (this.snapshotTake !== null) {
                 this.snapshotTake(this.tooltipTime);
             }
-            // Preview video element is set via 'snapshot-handler-ready' event — no creation needed here
             this.render();
         }
         // ---- Chapter helpers ----
@@ -3643,6 +3659,13 @@
          */
         mount(container) {
             this._container = container;
+            // Clear container DOM so a fresh <video> element is created on each mount.
+            // This prevents EME/MediaKeys conflicts — setMediaKeys(null) is async and
+            // hls.js destroy() doesn't wait for it, so reusing the same <video> element
+            // causes "The existing ContentDecryptor" errors on skin switch.
+            container.textContent = '';
+            // Clear lit-html's internal render state so render() treats the container as fresh
+            delete container['_$litPart$'];
             // Clear any stale theme/style from a previous mount cycle
             container.removeAttribute('data-theme');
             container.removeAttribute('style');
@@ -4858,6 +4881,7 @@
             // Private — NEVER in PlayerState (Pitfall 2)
             this.driver = null;
             this.tokenManager = null;
+            this.autoQuality = true;
             // Holds state reference for named driver event handlers
             this.eventState = null;
             this.liveSyncDisabled = false;
@@ -4917,6 +4941,14 @@
             if (this.driver === null)
                 return;
             this.driver.currentLevel = index;
+            // When index is -1 (Auto/ABR), hls.js will fire LEVEL_SWITCHED with the
+            // actual resolved level. We need to keep currentQuality as -1 so the UI
+            // shows "Auto" as selected. Track ABR mode to prevent LEVEL_SWITCHED
+            // from overwriting it.
+            this.autoQuality = index === -1;
+            if (this.state !== null) {
+                this.state.currentQuality = index;
+            }
         }
         setAudioTrack(index) {
             if (this.driver === null)
@@ -4978,7 +5010,7 @@
                     token: config.token,
                     tokenType: config.tokenType,
                     srcInTokenRequest: config.srcInTokenRequest,
-                    extraParamsCallback: config.extraParamsCallback,
+                    extraParamsCallback: (config.engineSettings.extraParamsCallback ?? config.extraParamsCallback),
                     onCDNTokenError: config.engineSettings.onCDNTokenError
                 });
                 // Fetch initial token
@@ -4989,7 +5021,7 @@
                 if (this.detached)
                     return;
             }
-            console.info('HlsEngine: loading hls.js from', hlsjsUrl);
+            // console.info('HlsEngine: loading hls.js from', hlsjsUrl)
             const Hls = await loadScript(hlsjsUrl, 'Hls');
             // Guard: abort if detached during CDN script load
             if (this.detached)
@@ -5146,8 +5178,12 @@
             const state = this.eventState;
             if (!state)
                 return;
-            const switchedData = data;
-            state.currentQuality = switchedData.level;
+            // In ABR mode (autoQuality), keep currentQuality as -1 so the UI shows "Auto".
+            // Only update to the actual level index when the user picked a specific quality.
+            if (!this.autoQuality) {
+                const switchedData = data;
+                state.currentQuality = switchedData.level;
+            }
         }
         _onAudioTracksUpdated(_event, data) {
             const state = this.eventState;
@@ -5526,7 +5562,7 @@
             };
             // Register with AbortSignal so it auto-removes when engine is detached
             window.addEventListener('unhandledrejection', this.dvrErrorHandler, { signal });
-            console.info('DashEngine: loading dashjs from', dashjsUrl);
+            // console.info('DashEngine: loading dashjs from', dashjsUrl)
             const dashjs = await loadScript(dashjsUrl, 'dashjs');
             const player = dashjs.MediaPlayer().create();
             if (!player) {
@@ -5692,7 +5728,9 @@
             this.lib.start();
             // Clean up on abort
             signal.addEventListener('abort', () => {
-                this.lib.stop();
+                if (this.lib !== null && typeof this.lib.stop === 'function') {
+                    this.lib.stop();
+                }
                 this.lib = null;
             }, { once: true });
         }
@@ -5725,6 +5763,10 @@
         /**
          * Initialize the snapshot Hls instance using the CDN-loaded Hls constructor.
          * Creates a separate Hls instance with minimal buffering for thumbnail generation.
+         *
+         * Returns a promise that resolves once the manifest is loaded and the snapshot
+         * handler is ready to serve seek thumbnails — matching the legacy Vue 2 behaviour
+         * where the handler only resolved after MANIFEST_LOADED.
          */
         init(HlsConstructor) {
             // Create an off-screen video element for the snapshot player
@@ -5775,6 +5817,16 @@
             if (this.config.src) {
                 driver.loadSource(this.config.src);
             }
+            // Wait for the manifest to load before resolving — the snapshot handler is only
+            // useful once hls.js knows about the available levels and can seek to segments.
+            // This matches the legacy Vue 2 code which resolved after MANIFEST_LOADED and
+            // forced loadLevel = 0 to pin the lowest quality for thumbnails.
+            return new Promise((resolve) => {
+                driver.once(HlsConstructor.Events.MANIFEST_LOADED, () => {
+                    driver['loadLevel'] = 0;
+                    resolve();
+                });
+            });
         }
         /**
          * Seek the snapshot player to the specified time.
@@ -6066,8 +6118,8 @@
                         activeSnapshotDestroy = null;
                     }
                     const isDash = src.includes('.mpd') && mergedConfig.dashjs !== false;
-                    // Defer init until CDN script is loaded (engine's onAttach loads CDN script async)
-                    setTimeout(() => {
+                    // Wait for engine driver to be ready (CDN script loaded) before initializing snapshot
+                    engine.driverReady.then(() => {
                         if (isDash) {
                             const win = window;
                             if (win.dashjs) {
@@ -6086,15 +6138,25 @@
                             const win = window;
                             if (win.Hls) {
                                 const handler = new HlsSnapshotHandler({ src, engineSettings: mergedConfig.engineSettings }, null);
-                                handler.init(win.Hls);
-                                activeSnapshotDestroy = () => handler.destroy();
-                                const snapshotVideo = handler.getVideo();
-                                if (snapshotVideo !== null) {
-                                    controller.bus.emit('snapshot-handler-ready', { take: (time) => handler.take(time), video: snapshotVideo });
-                                }
+                                handler.init(win.Hls)
+                                    .then(() => {
+                                    activeSnapshotDestroy = () => handler.destroy();
+                                    const snapshotVideo = handler.getVideo();
+                                    if (snapshotVideo !== null) {
+                                        controller.bus.emit('snapshot-handler-ready', { take: (time) => handler.take(time), video: snapshotVideo });
+                                    }
+                                })
+                                    .catch((error) => {
+                                    console.warn('EBPlayer: HlsSnapshotHandler init failed:', error);
+                                });
+                            }
+                            else {
+                                console.warn('EBPlayer: window.Hls not available after driverReady — snapshot preview disabled');
                             }
                         }
-                    }, 500);
+                    }).catch((error) => {
+                        console.warn('EBPlayer: Snapshot handler init failed:', error);
+                    });
                 }
             },
             close() {
@@ -6167,7 +6229,7 @@
     // window.EBPlayer assignment
     // ---------------------------------------------------------------------------
     if (typeof window !== 'undefined') {
-        window.EBPlayer = { start, stop, destroy };
+        window.EBPlayer = { start, stop, destroy, AVAILABLE_THEMES, THEME_LAYOUTS };
     }
 
     /**