eb-player 2.0.2 → 2.0.6

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.6";
+
     /**
      * 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'
         }
     };
     /**
@@ -1270,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)
@@ -1290,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)
@@ -1312,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);
@@ -1330,8 +1414,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,15 +1431,16 @@
             const seekTime = this.eventToTime(event, trackEl);
             this.isDragging = false;
             this.bus.emit('seek', { time: seekTime });
-            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;
@@ -1360,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);
@@ -1452,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 `
@@ -1469,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)}%">
@@ -1655,16 +1746,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 +1770,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 +1799,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 +1888,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 +1903,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 +1911,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;
         }
@@ -2111,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 });
@@ -2127,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;
@@ -5034,7 +5257,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'];
@@ -5771,7 +5994,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;
@@ -5802,11 +6025,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);
@@ -6137,8 +6366,30 @@
                         else {
                             const win = window;
                             if (win.Hls) {
-                                const handler = new HlsSnapshotHandler({ src, engineSettings: mergedConfig.engineSettings }, null);
-                                handler.init(win.Hls)
+                                // Create a dedicated token manager for the snapshot handler (DRM license + manifest tokens)
+                                let snapshotTokenManager = null;
+                                if (mergedConfig.token) {
+                                    snapshotTokenManager = new CDNTokenManager({
+                                        token: mergedConfig.token,
+                                        tokenType: mergedConfig.tokenType,
+                                        srcInTokenRequest: mergedConfig.srcInTokenRequest,
+                                        extraParamsCallback: (mergedConfig.engineSettings.extraParamsCallback ?? mergedConfig.extraParamsCallback),
+                                        onCDNTokenError: mergedConfig.engineSettings.onCDNTokenError
+                                    });
+                                }
+                                // Build DRM config (emeEnabled, drmSystems, licenseXhrSetup) for the snapshot hls.js instance
+                                const snapshotDrmConfigurator = new DrmConfigurator(snapshotTokenManager);
+                                const snapshotDrmConfig = snapshotDrmConfigurator.buildHlsConfig(mergedConfig.engineSettings);
+                                const handler = new HlsSnapshotHandler({ src, engineSettings: { ...mergedConfig.engineSettings, ...snapshotDrmConfig } }, snapshotTokenManager);
+                                // Fetch initial token before init (needed for manifest request)
+                                const tokenReady = snapshotTokenManager && src
+                                    ? snapshotTokenManager.fetchToken({ src }).catch((error) => {
+                                        console.warn('EBPlayer: Snapshot token fetch failed:', error);
+                                    })
+                                    : Promise.resolve();
+                                tokenReady.then(() => {
+                                    return handler.init(win.Hls);
+                                })
                                     .then(() => {
                                     activeSnapshotDestroy = () => handler.destroy();
                                     const snapshotVideo = handler.getVideo();
@@ -6226,10 +6477,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 };
     }
 
     /**