eb-player 2.0.1 → 2.0.4

package/dist/build/ebplayer.bundle.js

@@ -4,6 +4,8 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.EBPlayer = {}));
 })(this, (function (exports) { 'use strict';
 
+    var __EB_PLAYER_VERSION__ = "2.0.4";
+
     /**
      * Finite State Machine for player playback state transitions.
      *
@@ -274,28 +276,61 @@
             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 LEQUIPE_LAYOUT = {
+        topBar: {
+            left: [],
+            right: ['pip', 'settings']
+        },
+        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: LEQUIPE_LAYOUT,
+        modern: V2_LAYOUT,
+    };
     /**
      * Returns the effective layout for a given config.
      * Priority: explicit config.layout > theme default > DEFAULT_LAYOUT
@@ -515,6 +550,30 @@
             fr: 'La diffusion a échoué. Reprise de la lecture locale.',
             ar: 'Casting failed. Resuming local playback.',
             es: 'Error en la transmisión. Reanudando la reproducción local.'
+        },
+        'settings.audio': {
+            en: 'Audio track', fr: 'Piste audio', ar: 'مسار صوتي', es: 'Pista de audio'
+        },
+        'settings.subtitles': {
+            en: 'Subtitles', fr: 'Sous-titres', ar: 'ترجمات', es: 'Subtítulos'
+        },
+        'settings.speed': {
+            en: 'Playback speed', fr: 'Vitesse de lecture', ar: 'سرعة التشغيل', es: 'Velocidad'
+        },
+        'settings.quality': {
+            en: 'Quality', fr: 'Qualité', ar: 'الجودة', es: 'Calidad'
+        },
+        'settings.default': {
+            en: 'Default', fr: 'Défaut', ar: 'افتراضي', es: 'Predeterminado'
+        },
+        'settings.off': {
+            en: 'Off', fr: 'Désactivés', ar: 'إيقاف', es: 'Desactivado'
+        },
+        'settings.normal': {
+            en: 'Normal', fr: 'Normale', ar: 'عادي', es: 'Normal'
+        },
+        'settings.auto': {
+            en: 'Auto', fr: 'Auto', ar: 'تلقائي', es: 'Auto'
         }
     };
     /**
@@ -1313,8 +1372,14 @@
                 const trackEl = event.currentTarget;
                 this.dragValue = this.eventToTime(event, trackEl);
                 this.scheduleRender();
+                // During drag with pointer capture, only update tooltip when pointer is within track bounds
+                const rect = trackEl.getBoundingClientRect();
+                if (event.clientX >= rect.left && event.clientX <= rect.right) {
+                    this.updateTooltip(event);
+                }
+                return;
             }
-            // Always update tooltip on pointermove over the track
+            // Always update tooltip on pointermove over the track when not dragging
             this.updateTooltip(event);
         }
         handlePointerUp(event) {
@@ -1324,6 +1389,11 @@
             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() {
@@ -1638,16 +1708,20 @@
             this.mode = 'root';
             this.verticalDir = 'up';
             this.horizontalDir = 'right';
+            this.outsideClickHandler = null;
+            this.outsideClickTimer = null;
         }
         onConnect() {
             this.state.on('settingsOpen', () => {
                 // When settings close, reset to root mode
                 if (!this.state.settingsOpen) {
                     this.mode = 'root';
+                    this.removeOutsideClickListener();
                 }
                 else {
                     // Compute placement when opening
                     this.computePlacement();
+                    this.addOutsideClickListener();
                 }
                 this.render();
             }, { signal: this.signal });
@@ -1658,6 +1732,8 @@
             this.state.on('subtitleTracks', () => this.render(), { signal: this.signal });
             this.state.on('currentSubtitleTrack', () => this.render(), { signal: this.signal });
             this.state.on('playbackRate', () => this.render(), { signal: this.signal });
+            // Clean up outside-click listener when component disconnects
+            this.signal.addEventListener('abort', () => this.removeOutsideClickListener());
             this.render();
         }
         /**
@@ -1685,53 +1761,76 @@
             this.mode = 'root';
             this.render();
         }
+        /**
+         * Returns the display label for the currently selected value in a category.
+         */
+        currentValueLabel(mode) {
+            const i18n = this.i18n;
+            if (mode === 'quality') {
+                const levels = this.state.qualityLevels;
+                const current = this.state.currentQuality;
+                if (current === -1)
+                    return i18n.t('settings.auto');
+                const level = levels[current];
+                return level?.height ? `${level.height}p` : i18n.t('settings.auto');
+            }
+            if (mode === 'speed') {
+                const rate = this.state.playbackRate;
+                return rate === 1 ? i18n.t('settings.normal') : `${rate}x`;
+            }
+            if (mode === 'audio') {
+                const tracks = this.state.audioTracks;
+                const current = this.state.currentAudioTrack;
+                const track = tracks[current];
+                return track?.name || track?.lang || i18n.t('settings.default');
+            }
+            if (mode === 'subtitles') {
+                const current = this.state.currentSubtitleTrack;
+                if (current === -1)
+                    return i18n.t('settings.off');
+                const tracks = this.state.subtitleTracks;
+                const track = tracks[current];
+                return track?.name || track?.lang || `Track ${current}`;
+            }
+            return '';
+        }
         renderRootMenu() {
             const qualityLevels = this.state.qualityLevels;
             const audioTracks = this.state.audioTracks;
             const subtitleTracks = this.state.subtitleTracks;
+            const i18n = this.i18n;
             const showQuality = qualityLevels.length > 0;
             const showSpeed = this.config.speed === true;
             const showAudio = audioTracks.length > 1;
             const showSubtitles = subtitleTracks.length > 0;
+            const row = (iconName, label, value, mode) => b `
+      <li>
+        <button class="eb-settings-category" @click="${() => this.navigateTo(mode)}">
+          <span class="eb-settings-category__icon">${icon(iconName)}</span>
+          <span class="eb-settings-category__label">${label}</span>
+          <span class="eb-settings-category__value">${value}</span>
+          <span class="eb-settings-category__chevron">${icon('chevron-right')}</span>
+        </button>
+      </li>
+    `;
             return b `
       <ul class="eb-settings-menu eb-settings-root">
-        ${showQuality ? b `
-          <li>
-            <button class="eb-settings-category" @click="${() => this.navigateTo('quality')}">
-              Quality
-            </button>
-          </li>
-        ` : ''}
-        ${showSpeed ? b `
-          <li>
-            <button class="eb-settings-category" @click="${() => this.navigateTo('speed')}">
-              Speed
-            </button>
-          </li>
-        ` : ''}
-        ${showAudio ? b `
-          <li>
-            <button class="eb-settings-category" @click="${() => this.navigateTo('audio')}">
-              Audio
-            </button>
-          </li>
-        ` : ''}
-        ${showSubtitles ? b `
-          <li>
-            <button class="eb-settings-category" @click="${() => this.navigateTo('subtitles')}">
-              Subtitles
-            </button>
-          </li>
-        ` : ''}
+        ${showAudio ? row('audio', i18n.t('settings.audio'), this.currentValueLabel('audio'), 'audio') : ''}
+        ${showSubtitles ? row('subtitle', i18n.t('settings.subtitles'), this.currentValueLabel('subtitles'), 'subtitles') : ''}
+        ${showSpeed ? row('speed', i18n.t('settings.speed'), this.currentValueLabel('speed'), 'speed') : ''}
+        ${showQuality ? row('quality', i18n.t('settings.quality'), this.currentValueLabel('quality'), 'quality') : ''}
       </ul>
     `;
         }
         renderSubMenu(title, items, onSelect) {
             return b `
       <div class="eb-settings-submenu">
-        <button class="eb-settings-back" @click="${() => this.navigateBack()}">
-          ${title}
-        </button>
+        <div class="eb-settings-header">
+          <button class="eb-settings-back" @click="${() => this.navigateBack()}">
+            ${icon('chevron-left')}
+          </button>
+          <span class="eb-settings-header__title">${title}</span>
+        </div>
         <ul class="eb-settings-menu">
           ${items.map((item) => b `
             <li>
@@ -1751,14 +1850,14 @@
             const levels = this.state.qualityLevels;
             const currentQuality = this.state.currentQuality;
             const items = getQualityItems(levels, currentQuality);
-            return this.renderSubMenu('Quality', items, (item) => {
+            return this.renderSubMenu(this.i18n.t('settings.quality'), items, (item) => {
                 this.bus.emit('settings-select-quality', { index: item.value });
             });
         }
         renderSpeedMenu() {
             const currentRate = this.state.playbackRate;
             const items = getSpeedItems(currentRate);
-            return this.renderSubMenu('Speed', items, (item) => {
+            return this.renderSubMenu(this.i18n.t('settings.speed'), items, (item) => {
                 this.bus.emit('settings-select-speed', { rate: item.value });
             });
         }
@@ -1766,7 +1865,7 @@
             const tracks = this.state.audioTracks;
             const currentTrack = this.state.currentAudioTrack;
             const items = getAudioItems(tracks, currentTrack);
-            return this.renderSubMenu('Audio', items, (item) => {
+            return this.renderSubMenu(this.i18n.t('settings.audio'), items, (item) => {
                 this.bus.emit('settings-select-audio', { index: item.value });
             });
         }
@@ -1774,10 +1873,37 @@
             const tracks = this.state.subtitleTracks;
             const currentTrack = this.state.currentSubtitleTrack;
             const items = getSubtitleItems(tracks, currentTrack);
-            return this.renderSubMenu('Subtitles', items, (item) => {
+            return this.renderSubMenu(this.i18n.t('settings.subtitles'), items, (item) => {
                 this.bus.emit('settings-select-subtitle', { index: item.value });
             });
         }
+        addOutsideClickListener() {
+            this.removeOutsideClickListener();
+            // Defer to next tick so the opening click doesn't immediately close
+            this.outsideClickTimer = setTimeout(() => {
+                this.outsideClickTimer = null;
+                // Guard: panel may have closed before this timer fires
+                if (!this.state?.settingsOpen)
+                    return;
+                this.outsideClickHandler = (event) => {
+                    const wrapper = this.el?.querySelector('.eb-settings-wrapper');
+                    if (wrapper && !wrapper.contains(event.target)) {
+                        this.state.settingsOpen = false;
+                    }
+                };
+                document.addEventListener('click', this.outsideClickHandler, { capture: true });
+            }, 0);
+        }
+        removeOutsideClickListener() {
+            if (this.outsideClickTimer !== null) {
+                clearTimeout(this.outsideClickTimer);
+                this.outsideClickTimer = null;
+            }
+            if (this.outsideClickHandler !== null) {
+                document.removeEventListener('click', this.outsideClickHandler, { capture: true });
+                this.outsideClickHandler = null;
+            }
+        }
         toggleSettings() {
             this.state.settingsOpen = !this.state.settingsOpen;
         }
@@ -3642,6 +3768,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 +4990,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 +5050,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 +5119,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 +5130,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)
@@ -5001,7 +5143,7 @@
             // Build driver config — only spread known engineSettings keys that hls.js recognises,
             // not the entire engineSettings bag (which may contain player-specific keys like
             // extraParamsCallback that should NOT leak into the hls.js constructor config).
-            const { emeEnabled, drmSystems, ...hlsEngineSettings } = config.engineSettings;
+            const { emeEnabled: _emeEnabled, drmSystems: _drmSystems, ...hlsEngineSettings } = config.engineSettings;
             // Remove player-specific keys that are NOT hls.js config options
             const hlsSafeSettings = { ...hlsEngineSettings };
             delete hlsSafeSettings['extraParamsCallback'];
@@ -5145,8 +5287,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 +5671,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 +5837,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 });
         }
@@ -6187,10 +6335,17 @@
         }
     }
     // ---------------------------------------------------------------------------
+    // Version
+    // ---------------------------------------------------------------------------
+    // Injected at build time by Rollup's @rollup/plugin-virtual or replaced by bundler.
+    // Falls back to 'dev' when running unbundled (tests, dev server).
+    const VERSION = typeof __EB_PLAYER_VERSION__ !== 'undefined' ? __EB_PLAYER_VERSION__ : 'dev';
+    // ---------------------------------------------------------------------------
     // window.EBPlayer assignment
     // ---------------------------------------------------------------------------
     if (typeof window !== 'undefined') {
-        window.EBPlayer = { start, stop, destroy };
+        console.info(`%cEBPlayer v${VERSION}`, 'color: #1FA9DD; font-weight: bold');
+        window.EBPlayer = { start, stop, destroy, AVAILABLE_THEMES, THEME_LAYOUTS, version: VERSION };
     }
 
     /**