eb-player 2.0.1 → 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
@@ -3642,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');
@@ -4857,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;
@@ -4916,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)
@@ -4977,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
@@ -4988,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)
@@ -5145,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;
@@ -5525,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) {
@@ -5691,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 });
         }
@@ -6190,7 +6229,7 @@
     // window.EBPlayer assignment
     // ---------------------------------------------------------------------------
     if (typeof window !== 'undefined') {
-        window.EBPlayer = { start, stop, destroy };
+        window.EBPlayer = { start, stop, destroy, AVAILABLE_THEMES, THEME_LAYOUTS };
     }
 
     /**