eb-player 2.0.2 → 2.0.4

package/dist/build/eb-player.css

@@ -85,8 +85,8 @@
   --eb-radius-control: 8px;
   --eb-duration-transition: 200ms;
   font-family: 'Inter', -apple-system, sans-serif;
-  border-radius: 14px;
-  box-shadow: 0 40px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
+  border-radius: 0;
+  box-shadow: none;
   color: #fff;
 }
 
@@ -349,9 +349,9 @@
   transition: height .15s;
 }
 
-/* Red gradient fill */
+/* Solid red fill */
 [data-theme="lequipe"] .eb-player .eb-seekbar-progress {
-  background: linear-gradient(90deg, #d61e00, color-mix(in srgb, #d61e00 70%, #fff));
+  background: #d61e00;
   border-radius: 3px;
   transition: height .15s;
 }
@@ -525,72 +525,184 @@
    Settings panel: glassmorphism dropdown
    ============================================================ */
 [data-theme="lequipe"] .eb-player .eb-settings-panel {
-  background: rgba(10,10,20,.55);
-  backdrop-filter: blur(18px) saturate(160%);
-  -webkit-backdrop-filter: blur(18px) saturate(160%);
-  border-radius: 12px;
-  min-width: 300px;
-  box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
+  background: rgba(30,30,45,.6);
+  backdrop-filter: blur(24px) saturate(160%);
+  -webkit-backdrop-filter: blur(24px) saturate(160%);
+  border-radius: 14px;
+  width: min(340px, 80vw);
+  max-height: 60vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
+}
+
+/* Small viewports: compact rows */
+@media (max-height: 400px) {
+  [data-theme="lequipe"] .eb-player .eb-settings-category { padding: 12px 14px; font-size: 13px; gap: 10px; }
+  [data-theme="lequipe"] .eb-player .eb-settings-item { padding: 11px 14px; font-size: 13px; }
+  [data-theme="lequipe"] .eb-player .eb-settings-header { padding: 10px 14px; }
+  [data-theme="lequipe"] .eb-player .eb-settings-panel { min-width: 220px; border-radius: 10px; }
+  [data-theme="lequipe"] .eb-player .eb-settings-back { width: 30px; height: 30px; }
 }
 
 [data-theme="lequipe"] .eb-player .eb-settings-menu {
   padding: 0;
 }
 
-[data-theme="lequipe"] .eb-player .eb-settings-category,
-[data-theme="lequipe"] .eb-player .eb-settings-item,
-[data-theme="lequipe"] .eb-player .eb-settings-back {
-  padding: 15px 20px;
+/* Root menu category rows — icon | label | value | chevron */
+[data-theme="lequipe"] .eb-player .eb-settings-category {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 18px 20px;
+  font-size: 14px;
+  color: rgba(255,255,255,.95);
+  border-bottom: 1px solid rgba(255,255,255,.06);
+  transition: background .12s;
+  width: 100%;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category:last-child {
+  border-bottom: none;
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category:hover {
+  background: rgba(255,255,255,.05);
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255,255,255,.6);
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category__icon .eb-icon {
+  width: 22px;
+  height: 22px;
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category__label {
+  flex: 1;
+  font-weight: 400;
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category__value {
+  color: rgba(255,255,255,.45);
   font-size: 13px;
-  color: rgba(255,255,255,.9);
+  font-weight: 400;
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category__chevron {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: rgba(255,255,255,.3);
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category__chevron .eb-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Sub-menu header — circular back button + title */
+[data-theme="lequipe"] .eb-player .eb-settings-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  border-bottom: 1px solid rgba(255,255,255,.08);
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-header__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #fff;
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-back {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(255,255,255,.12);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: background .15s;
+  flex-shrink: 0;
+  color: #fff;
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-back:hover {
+  background: rgba(255,255,255,.2);
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-back .eb-icon {
+  width: 18px;
+  height: 18px;
+}
+
+/* Sub-menu items */
+[data-theme="lequipe"] .eb-player .eb-settings-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  font-size: 14px;
+  color: rgba(255,255,255,.7);
   border-bottom: 1px solid rgba(255,255,255,.06);
   transition: background .12s;
+  width: 100%;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
 }
 
-[data-theme="lequipe"] .eb-player .eb-settings-category:last-child,
 [data-theme="lequipe"] .eb-player .eb-settings-item:last-child {
   border-bottom: none;
 }
 
-[data-theme="lequipe"] .eb-player .eb-settings-category:hover,
-[data-theme="lequipe"] .eb-player .eb-settings-item:hover,
-[data-theme="lequipe"] .eb-player .eb-settings-back:hover {
+[data-theme="lequipe"] .eb-player .eb-settings-item:hover {
   background: rgba(255,255,255,.05);
 }
 
-/* Selected item text */
+/* Selected item text — brighter */
 [data-theme="lequipe"] .eb-player .eb-settings-item--selected {
   color: #fff;
   font-weight: 500;
 }
 
-/* Active selection dot (filled red) */
+/* Active selection dot (filled accent) */
 [data-theme="lequipe"] .eb-player .eb-settings-item--selected::after {
   content: '';
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
   background: var(--eb-accent, #d61e00);
-  box-shadow: 0 0 0 3px rgba(214,30,0,.25);
   flex-shrink: 0;
 }
 
 /* Non-selected items: hollow dot */
 [data-theme="lequipe"] .eb-player .eb-settings-item:not(.eb-settings-item--selected)::after {
   content: '';
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
   border: 2px solid rgba(255,255,255,.2);
   flex-shrink: 0;
 }
 
-/* Back button */
-[data-theme="lequipe"] .eb-player .eb-settings-back {
-  gap: 14px;
-  font-weight: 600;
-}
-
 /* ============================================================
    Loading spinner
    ============================================================ */
@@ -2219,9 +2331,10 @@
   position: absolute;
   background: rgba(0, 0, 0, 0.85);
   border-radius: 6px;
-  min-width: 180px;
+  min-width: 160px;
+  max-width: 220px;
   overflow: hidden;
-  font-size: 13px;
+  font-size: 12px;
   z-index: 40;
 }
 
@@ -2249,6 +2362,20 @@
   padding: 4px 0;
 }
 
+.eb-settings-submenu .eb-settings-menu {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.eb-settings-submenu .eb-settings-menu::-webkit-scrollbar {
+  width: 4px;
+}
+
+.eb-settings-submenu .eb-settings-menu::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+}
+
 .eb-settings-category,
 .eb-settings-item,
 .eb-settings-back {
@@ -2256,12 +2383,12 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 8px 14px;
+  padding: 5px 12px;
   border: none;
   background: none;
   color: #fff;
   cursor: pointer;
-  font-size: 13px;
+  font-size: 12px;
   text-align: left;
 }
 

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.
      *
@@ -308,9 +310,25 @@
             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: V2_LAYOUT,
+        lequipe: LEQUIPE_LAYOUT,
         modern: V2_LAYOUT,
     };
     /**
@@ -532,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'
         }
     };
     /**
@@ -1330,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) {
@@ -1341,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() {
@@ -1655,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 });
@@ -1675,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();
         }
         /**
@@ -1702,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>
@@ -1768,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 });
             });
         }
@@ -1783,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 });
             });
         }
@@ -1791,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;
         }
@@ -5034,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'];
@@ -6226,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, AVAILABLE_THEMES, THEME_LAYOUTS };
+        console.info(`%cEBPlayer v${VERSION}`, 'color: #1FA9DD; font-weight: bold');
+        window.EBPlayer = { start, stop, destroy, AVAILABLE_THEMES, THEME_LAYOUTS, version: VERSION };
     }
 
     /**