eb-player 2.0.15 → 2.0.18

package/dist/build/ebplayer.bundle.js

@@ -4,7 +4,7 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.EBPlayer = {}));
 })(this, (function (exports) { 'use strict';
 
-    var __EB_PLAYER_VERSION__ = "2.0.15";
+    var __EB_PLAYER_VERSION__ = "2.0.18";
 
     /**
      * Finite State Machine for player playback state transitions.
@@ -19,7 +19,10 @@
      * - idle -> loading: initial load or post-stall reload
      * - loading -> playing | error: stream starts or fails
      * - playing -> paused | buffering | ended | error: normal playback events
-     * - paused -> playing | loading | idle: resume or stop
+     * - paused -> playing | loading | idle | buffering: resume or stop
+     *   - paused -> buffering is needed when resuming a paused (live) stream where
+     *     the browser fires 'waiting' before 'playing' (Safari live segment edge);
+     *     without it the FSM strands at 'paused' while the video actually plays
      * - buffering -> playing | paused | idle | error: buffer recovered, user pause, or stall
      *   - buffering -> idle is needed for the stall-watchdog recovery path (kick off reload)
      *   - buffering -> paused is needed for live stream support (user pauses during buffer)
@@ -30,7 +33,7 @@
         idle: ['loading'],
         loading: ['playing', 'buffering', 'paused', 'error', 'idle'],
         playing: ['paused', 'buffering', 'ended', 'error', 'idle'],
-        paused: ['playing', 'loading', 'idle'],
+        paused: ['playing', 'loading', 'idle', 'buffering'],
         buffering: ['playing', 'paused', 'idle', 'error'],
         error: ['loading', 'idle'],
         ended: ['loading', 'idle']
@@ -175,7 +178,11 @@
                 if (previousValue === value) {
                     return true;
                 }
-                rawTarget[String(key)] = value;
+                // Assign and notify subscribers.
+                // Cast the typed StateMap target to a mutable record so the unknown value
+                // can be written through the Proxy set trap.
+                const writable = rawTarget;
+                writable[String(key)] = value;
                 impl.notify(key, value, previousValue);
                 return true;
             }
@@ -287,7 +294,7 @@
         { 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: 'v2', label: 'V2', primaryColor: '#3d4097' },
         { value: 'lequipe', label: "L'Equipe", primaryColor: '#d61e00' },
     ];
     /**
@@ -297,12 +304,12 @@
     const V2_LAYOUT = {
         topBar: {
             left: [],
-            right: ['settings', 'pip', 'cast']
+            right: ['pip', 'settings']
         },
         bottomBar: {
-            left: ['play-pause', 'live-sync', 'time'],
-            center: ['seekbar'],
-            right: ['volume', 'fullscreen']
+            left: ['live-sync', 'time', 'channel-name'],
+            center: ['play-pause', 'seekbar', 'volume', 'fullscreen'],
+            right: []
         },
         middleBar: {
             left: ['rewind'],
@@ -326,10 +333,29 @@
             right: ['forward']
         }
     };
+    const FORJA_LAYOUT = {
+        topBar: {
+            left: [],
+            right: []
+        },
+        bottomBar: {
+            // Row 1: seekbar (full width)
+            // Row 2: play-pause + volume (left) | live-sync + settings + pip + fullscreen (right)
+            left: ['seekbar'],
+            center: ['play-pause', 'volume'],
+            right: ['live-sync', 'settings', 'pip', 'fullscreen']
+        },
+        middleBar: {
+            left: ['rewind'],
+            center: [],
+            right: ['forward']
+        }
+    };
     const THEME_LAYOUTS = {
         v2: V2_LAYOUT,
         lequipe: LEQUIPE_LAYOUT,
         modern: V2_LAYOUT,
+        forja: FORJA_LAYOUT,
     };
     /**
      * Returns the effective layout for a given config.
@@ -355,7 +381,7 @@
         // Drivers
         dashjs: 'https://reference.dashif.org/dash.js/v4.7.4/dist/dash.all.min.js',
         hlsjs: 'https://cdn.jsdelivr.net/npm/hls.js@1.6.10/dist/hls.min.js',
-        engineSettings: { liveSyncDurationCount: 8 },
+        engineSettings: { liveSyncDurationCount: 3 },
         chromecast: 'https://cdnjs.cloudflare.com/ajax/libs/castjs/5.3.0/cast.min.js',
         chromecastApp: undefined,
         chromecastMetadata: undefined,
@@ -396,7 +422,7 @@
         forceAutoplay: false,
         forceQuality: false,
         liveButton: false,
-        syncLiveMargin: 5 * 60,
+        syncLiveMargin: 30,
         isLive: undefined,
         noUi: false,
         preroll: false,
@@ -438,6 +464,8 @@
         epgDefaultLang: 'en',
         showEpgTitlePreview: false,
         showProgressThumb: false,
+        // Display
+        channelName: undefined,
         // Layout
         layout: undefined
     };
@@ -545,6 +573,12 @@
             ar: 'The stream is unavailable. Please try again later.',
             es: 'La transmisión no está disponible. Por favor, inténtelo más tarde.'
         },
+        'error.geoblocked': {
+            en: 'This content is not available in your region.',
+            fr: 'Ce contenu n\'est pas disponible dans votre région.',
+            ar: 'This content is not available in your region.',
+            es: 'Este contenido no está disponible en tu región.'
+        },
         'cast.failed': {
             en: 'Casting failed. Resuming local playback.',
             fr: 'La diffusion a échoué. Reprise de la lecture locale.',
@@ -686,6 +720,7 @@
             this.wireReloadOrchestration(bus, state, i18n, onReload, signal);
             this.wireCastHandoff(bus, video, state, chromecastManager, i18n, signal);
             this.wireVolumeRouting(state, chromecastManager, signal);
+            this.wireGeoblock(bus, state, i18n, signal);
             this.wireAbortCleanup(signal);
         }
         // ---------------------------------------------------------------------------
@@ -819,6 +854,11 @@
                 }
             }, { signal });
         }
+        wireGeoblock(bus, state, i18n, signal) {
+            bus.on('geoblock-detected', () => {
+                state.error = i18n.t('error.geoblocked');
+            }, { signal });
+        }
         showToast(state, message) {
             state.toast = message;
             clearTimeout(this.toastTimer);
@@ -1117,7 +1157,7 @@
         }
         template() {
             const state = this.state;
-            const isPlaying = state.playbackState === 'playing';
+            const isPlaying = state.playbackState === 'playing' || state.playbackState === 'buffering';
             const layout = resolveLayout(this.config).middleBar;
             const slot = (componentId) => b `<div class="eb-slot-${componentId}"></div>`;
             return b `
@@ -1137,7 +1177,7 @@
         handleClick() {
             const state = this.state;
             const bus = this.bus;
-            if (state.playbackState === 'playing') {
+            if (state.playbackState === 'playing' || state.playbackState === 'buffering') {
                 bus.emit('pause');
             }
             else {
@@ -1159,7 +1199,8 @@
             this.render();
         }
         template() {
-            const isPlaying = this.state.playbackState === 'playing';
+            const playbackState = this.state.playbackState;
+            const isPlaying = playbackState === 'playing' || playbackState === 'buffering';
             const ariaLabel = isPlaying ? 'Pause' : 'Play';
             const iconName = isPlaying ? 'pause' : 'play';
             return b `
@@ -1611,16 +1652,18 @@
         }
         template() {
             const { currentTime, duration, isLive, isSyncWithLive } = this.state;
+            if (!this.config.seekbar) {
+                return b `<div class="eb-time-display" hidden></div>`;
+            }
             let timeText;
             if (isLive) {
                 if (isSyncWithLive || !Number.isFinite(duration)) {
-                    // At the live edge or non-DVR stream: show current wall-clock time
                     timeText = formatWallClock(Date.now());
                 }
                 else {
-                    // Behind the live edge with DVR: show negative offset
+                    // Behind live edge: show wall-clock time + negative offset
                     const offset = duration - currentTime;
-                    timeText = `- ${formatDuration(offset)}`;
+                    return b `<div class="eb-time-display">${formatWallClock(Date.now())}  <span class="eb-time-display__offset">-${formatDuration(offset)}</span></div>`;
                 }
             }
             else {
@@ -1652,7 +1695,7 @@
         template() {
             const { isLive, isSyncWithLive } = this.state;
             const configLive = this.config.liveButton === true || this.config.isLive === true;
-            if (!isLive && !configLive) {
+            if (!this.config.seekbar || (!isLive && !configLive)) {
                 return b `<button class="eb-live-sync" hidden style="display:none">${icon('live')}</button>`;
             }
             return b `
@@ -1818,15 +1861,19 @@
             }
             if (mode === 'audio') {
                 const tracks = this.state.audioTracks;
+                if (tracks.length === 0)
+                    return i18n.t('settings.default');
                 const current = this.state.currentAudioTrack;
                 const track = tracks[current];
                 return track?.name || track?.lang || i18n.t('settings.default');
             }
             if (mode === 'subtitles') {
+                const tracks = this.state.subtitleTracks;
+                if (tracks.length === 0)
+                    return i18n.t('settings.off');
                 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}`;
             }
@@ -1834,13 +1881,9 @@
         }
         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)}">
@@ -1853,8 +1896,8 @@
     `;
             return b `
       <ul class="eb-settings-menu eb-settings-root">
-        ${showAudio ? row('audio', i18n.t('settings.audio'), this.currentValueLabel('audio'), 'audio') : ''}
-        ${showSubtitles ? row('subtitle', i18n.t('settings.subtitles'), this.currentValueLabel('subtitles'), 'subtitles') : ''}
+        ${row('audio', i18n.t('settings.audio'), this.currentValueLabel('audio'), 'audio')}
+        ${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>
@@ -1902,17 +1945,25 @@
         renderAudioMenu() {
             const tracks = this.state.audioTracks;
             const currentTrack = this.state.currentAudioTrack;
-            const items = getAudioItems(tracks, currentTrack);
+            const items = tracks.length > 0
+                ? getAudioItems(tracks, currentTrack)
+                : [{ label: this.i18n.t('settings.default'), value: 0, selected: true }];
             return this.renderSubMenu(this.i18n.t('settings.audio'), items, (item) => {
-                this.bus.emit('settings-select-audio', { index: item.value });
+                if (tracks.length > 0) {
+                    this.bus.emit('settings-select-audio', { index: item.value });
+                }
             });
         }
         renderSubtitlesMenu() {
             const tracks = this.state.subtitleTracks;
             const currentTrack = this.state.currentSubtitleTrack;
-            const items = getSubtitleItems(tracks, currentTrack);
+            const items = tracks.length > 0
+                ? getSubtitleItems(tracks, currentTrack)
+                : [{ label: this.i18n.t('settings.off'), value: -1, selected: true }];
             return this.renderSubMenu(this.i18n.t('settings.subtitles'), items, (item) => {
-                this.bus.emit('settings-select-subtitle', { index: item.value });
+                if (tracks.length > 0) {
+                    this.bus.emit('settings-select-subtitle', { index: item.value });
+                }
             });
         }
         addOutsideClickListener() {
@@ -2506,6 +2557,27 @@
         }
     }
 
+    /**
+     * ChannelName displays a static label (e.g. channel or program name)
+     * in the bottom bar, next to the live badge and time display.
+     *
+     * Reads config.channelName and renders nothing if unset.
+     *
+     * Usage:
+     *   EBPlayer.start({ src: '...', skin: 'v2', channelName: 'ALOULA' })
+     */
+    class ChannelName extends BaseComponent {
+        onConnect() {
+            this.render();
+        }
+        template() {
+            const name = this.config.channelName;
+            if (!name)
+                return b ``;
+            return b `<span class="eb-channel-name">${name}</span>`;
+        }
+    }
+
     /**
      * Maps ComponentId strings to factory functions that create component instances.
      * Used by SkinRoot.connectChildComponents() to dynamically mount components
@@ -2524,7 +2596,8 @@
         'rewind': () => new RewindButton(),
         'forward': () => new ForwardButton(),
         'share': () => new ShareButton(),
-        'info': () => new InfoButton()
+        'info': () => new InfoButton(),
+        'channel-name': () => new ChannelName()
     };
     /**
      * Returns the CSS selector for a component's slot element.
@@ -2544,7 +2617,7 @@
      * - Reconnecting: visible when state.reconnecting === true (shows "Reconnecting..." text)
      *
      * Hidden when not buffering and not reconnecting.
-     * CSS in skin.css handles the spin animation on .eb-loading.
+     * Renders a CSS arc ring that spins around the center (wrapping the play/pause button).
      */
     class LoadingSpinner extends BaseComponent {
         onConnect() {
@@ -2556,13 +2629,13 @@
             const isBuffering = this.state.playbackState === 'buffering';
             const isReconnecting = this.state.reconnecting;
             if (!isBuffering && !isReconnecting) {
-                return b `<div class="eb-loading" hidden aria-hidden="true">${icon('spinner')}</div>`;
+                return b `<div class="eb-loading" hidden aria-hidden="true"></div>`;
             }
             const label = isReconnecting
                 ? (this.i18n?.t('loading.reconnecting') ?? 'Reconnecting...')
                 : 'Loading';
             return b `<div class="eb-loading" role="status" aria-label="${label}">
-      ${icon('spinner')}
+      <div class="eb-loading-arc"></div>
       ${isReconnecting ? b `<span class="eb-loading-text">${label}</span>` : ''}
     </div>`;
         }
@@ -2728,8 +2801,10 @@
             }, { signal: this.signal });
         }
         template() {
-            const playlist = this.state?.playlist ?? [];
-            const currentEpisode = this.state?.currentEpisode ?? 0;
+            const playlist = this.state.playlist;
+            const currentEpisode = this.state.currentEpisode;
+            if (playlist.length === 0)
+                return b ``;
             return b `
       <div class="eb-forja-playlist-bar">
         <button
@@ -2793,7 +2868,7 @@
             }, { signal: this.signal });
         }
         template() {
-            const programs = this.state?.epgPrograms ?? [];
+            const programs = this.state.epgPrograms;
             return b `
       <div class="eb-snrt-carousel">
         ${programs.map((program) => b `
@@ -2933,7 +3008,7 @@
         <video
           class="eb-video"
           playsinline
-          ?muted="${config.muted}"
+          .muted="${config.muted}"
           ?autoplay="${config.autoplay}"
           ?controls="${isIOS}"
         ></video>
@@ -3063,16 +3138,14 @@
                     }
                 }
             }
-            // Loading spinner — stays inside overlay-zone (centered, no interaction needed)
-            const overlayZone = inner.querySelector('.eb-overlay-zone');
-            if (overlayZone !== null) {
-                const loadingSlot = document.createElement('div');
-                loadingSlot.className = 'eb-loading-slot';
-                overlayZone.appendChild(loadingSlot);
-                const loadingSpinner = new LoadingSpinner();
-                loadingSpinner.connect(loadingSlot, state, bus, config, i18n);
-                this.childComponents.push(loadingSpinner);
-            }
+            // Loading spinner — mounted directly into .eb-player (not overlay-zone)
+            // so it escapes the overlay-zone stacking context and displays above the middle bar
+            const loadingSlot = document.createElement('div');
+            loadingSlot.className = 'eb-loading-slot';
+            inner.appendChild(loadingSlot);
+            const loadingSpinner = new LoadingSpinner();
+            loadingSpinner.connect(loadingSlot, state, bus, config, i18n);
+            this.childComponents.push(loadingSpinner);
             // Interactive overlays — mounted directly into .eb-player (not overlay-zone)
             // so they escape the overlay-zone stacking context and display above all controls
             const interactiveOverlays = [
@@ -3103,7 +3176,7 @@
         <video
           class="eb-video"
           playsinline
-          ?muted="${config.muted}"
+          .muted="${config.muted}"
           ?autoplay="${config.autoplay}"
         ></video>
       </div>
@@ -3900,10 +3973,14 @@
             const skinColors = this.config.skinColors;
             if (this.config.primaryColor) {
                 container.style.setProperty('--eb-color-primary', this.config.primaryColor);
+                container.style.setProperty('--eb-color-progress', this.config.primaryColor);
+                container.style.setProperty('--eb-accent', this.config.primaryColor);
             }
             // skinColors.general overrides primaryColor
             if (skinColors?.general) {
                 container.style.setProperty('--eb-color-primary', skinColors.general);
+                container.style.setProperty('--eb-color-progress', skinColors.general);
+                container.style.setProperty('--eb-accent', skinColors.general);
             }
             if (skinColors?.progressBar) {
                 container.style.setProperty('--eb-color-progress', skinColors.progressBar);
@@ -4246,7 +4323,7 @@
         // -------------------------------------------------------------------------
         bindVideoEvents(video, state, signal) {
             // Playback timing + live sync detection
-            const syncMargin = this.config?.syncLiveMargin ?? 5 * 60;
+            const syncMargin = this.config?.syncLiveMargin ?? 30;
             video.addEventListener('timeupdate', () => {
                 state.currentTime = Math.round(video.currentTime);
                 if (state.isLive) {
@@ -4272,14 +4349,41 @@
                 state.playbackRate = video.playbackRate;
             }, { signal });
             // FSM transitions: playing, pause, waiting, ended
+            //
+            // Pause guard: browsers fire spurious 'pause' events when currentTime is
+            // set programmatically (rewind/forward/seekbar). We only honour the 'pause'
+            // event when the previous playback state was 'playing' — meaning the user
+            // (or our code) explicitly called video.pause(). During a seek the state
+            // is already 'buffering' by the time the late 'pause' arrives, so it's
+            // harmlessly ignored.
+            let userRequestedPause = false;
             video.addEventListener('playing', () => {
+                userRequestedPause = false;
                 state.playbackState = 'playing';
             }, { signal });
+            video.addEventListener('waiting', () => {
+                state.playbackState = 'buffering';
+            }, { signal });
             video.addEventListener('pause', () => {
+                if (video.seeking)
+                    return;
+                if (state.playbackState === 'buffering') {
+                    userRequestedPause = true;
+                    return;
+                }
                 state.playbackState = 'paused';
             }, { signal });
-            video.addEventListener('waiting', () => {
-                state.playbackState = 'buffering';
+            video.addEventListener('seeked', () => {
+                // Update live sync state immediately after seek so the UI reflects
+                // the new position without waiting for the next timeupdate
+                if (state.isLive) {
+                    state.currentTime = Math.round(video.currentTime);
+                    state.isSyncWithLive = video.currentTime + syncMargin > video.duration;
+                }
+                if (userRequestedPause && video.paused) {
+                    state.playbackState = 'paused';
+                    userRequestedPause = false;
+                }
             }, { signal });
             video.addEventListener('ended', () => {
                 state.playbackState = 'ended';
@@ -5233,8 +5337,8 @@
         seek(time) {
             if (this.video === null)
                 return;
-            // Disable hls.js live sync once on first seek, so it never
-            // auto-seeks back to the live edge on DVR/timeshift streams.
+            // Disable hls.js live sync on first seek so it never auto-seeks
+            // back to the live edge on DVR/timeshift streams.
             if (!this.liveSyncDisabled && this.driver !== null && this.state?.isLive) {
                 const cfg = this.driver.config;
                 cfg.liveSyncDurationCount = 0;
@@ -5374,6 +5478,27 @@
                         if (this.state) {
                             this.state.error = message;
                         }
+                        // hls.js nulls its media on a fatal keySystemError; signal so the
+                        // P2P SDK is torn down before it loops on a null media element.
+                        this.bus?.emit('error-fatal', { code: 'DRM', message });
+                    }
+                });
+            }
+            // Geo-block detection (opt-in, ported from v1.x).
+            // Detects 403 on manifest/level load and surfaces it via the bus + a
+            // window CustomEvent for back-compat with v1 host integrations.
+            if (config.useGeoblockingErrorHandle) {
+                const busRef = this.bus;
+                driver.on(Hls.Events.ERROR, (_event, data) => {
+                    const error = data;
+                    if (error?.type === Hls.ErrorTypes.NETWORK_ERROR
+                        && (error?.details === 'manifestLoadError' || error?.details === 'levelLoadError')
+                        && error?.response?.code === 403) {
+                        busRef?.emit('geoblock-detected');
+                        window.dispatchEvent(new CustomEvent('geoblock', {
+                            detail: { title: 'Geoblock', message: 'Geoblock detected' }
+                        }));
+                        this.stopWatchdog();
                     }
                 });
             }
@@ -6070,12 +6195,23 @@
             this.lib.start();
             // Clean up on abort
             signal.addEventListener('abort', () => {
-                if (this.lib !== null && typeof this.lib.stop === 'function') {
-                    this.lib.stop();
-                }
-                this.lib = null;
+                this.stop();
             }, { once: true });
         }
+        /**
+         * Stop and detach the P2P SDK. Idempotent.
+         *
+         * Called on AbortSignal teardown, and eagerly on an unrecoverable engine
+         * error: hls.js nulls its media element on a fatal keySystemError, so a
+         * still-running eblib instance would keep polling `media.currentTime` and
+         * throw in a loop until full dispose.
+         */
+        stop() {
+            if (this.lib !== null && typeof this.lib.stop === 'function') {
+                this.lib.stop();
+            }
+            this.lib = null;
+        }
     }
 
     /**
@@ -6368,21 +6504,38 @@
     /**
      * EBPlayer facade — consumer-facing API layer.
      *
-     * Provides the window.EBPlayer interface that existing consumers use:
+     * Provides the window.EBPlayer interface:
      *   - window.EBPlayer.start(config) — synchronously returns a PlayerReference
-     *   - window.EBPlayer.stop()        — detaches the active engine (skin stays mounted)
-     *   - window.EBPlayer.destroy()     — disposes the controller (tears down everything)
+     *   - window.EBPlayer.stop()        — detaches all active engines (skins stay mounted)
+     *   - window.EBPlayer.destroy()     — disposes all controllers (tears down everything)
      *
-     * The facade tracks one active controller and one active engine at module level.
-     * Multiple start() calls dispose the previous instance before creating a new one.
+     * Supports multiple simultaneous player instances on the same page.
+     * Each instance is keyed by its container element:
+     *   - Calling start() with the SAME container disposes the old instance first (backward compat).
+     *   - Calling start() with a DIFFERENT container creates an independent player.
+     *
+     * Per-instance cleanup is available via PlayerReference.destroy().
+     * Global stop()/destroy() operate on all instances at once.
      */
     // Import from barrel — triggers CSS imports (base.css + skin.css) for postcss extraction
-    // ---------------------------------------------------------------------------
-    // Module-level active instance tracking
-    // ---------------------------------------------------------------------------
-    let activeController = null;
-    let activeEngine = null;
-    let activeSnapshotDestroy = null;
+    /** Active player instances keyed by their container element. */
+    const instances = new Map();
+    /**
+     * Tear down a single instance: snapshot handler, engine, then controller.
+     * Does NOT remove the entry from the instances Map (caller must do that).
+     */
+    function destroyInstance(inst) {
+        if (inst.snapshotDestroy !== null) {
+            inst.snapshotDestroy();
+            inst.snapshotDestroy = null;
+        }
+        if (inst.engine !== null) {
+            inst.engine.detach();
+            inst.engine = null;
+        }
+        inst.p2p = null;
+        inst.controller.dispose();
+    }
     // ---------------------------------------------------------------------------
     // Container resolution
     // ---------------------------------------------------------------------------
@@ -6425,31 +6578,45 @@
     // ---------------------------------------------------------------------------
     /**
      * Start the player with the given config.
-     * If a player is already running, it is disposed before the new one is created.
+     *
+     * If a player is already mounted on the same container element, it is disposed
+     * before the new one is created (backward-compatible single-instance behavior).
+     * If the container is different, the new player coexists alongside existing ones
+     * (multi-instance support).
      *
      * Returns a PlayerReference synchronously — never returns a Promise.
      */
     function start(runtimeConfig) {
-        // Dispose any existing instance before creating a new one
-        if (activeController !== null) {
-            destroy();
+        const container = resolveContainer(runtimeConfig.el);
+        // Dispose any existing instance on the SAME container (backward compat).
+        // Instances on OTHER containers are left untouched (multi-instance).
+        const existing = instances.get(container);
+        if (existing !== undefined) {
+            destroyInstance(existing);
+            instances.delete(container);
         }
         const mergedConfig = mergeConfig(DEFAULT_CONFIG, runtimeConfig);
         const controller = new PlayerController(runtimeConfig);
-        const container = resolveContainer(runtimeConfig.el);
         controller.mount(container);
         // Video element is available after mount() creates the skin DOM
         const video = container.querySelector('video');
-        activeController = controller;
-        activeEngine = null;
+        // Per-instance state — captured by the reference closure, never shared across instances
+        const inst = {
+            controller,
+            engine: null,
+            snapshotDestroy: null,
+            p2p: null,
+            container
+        };
+        instances.set(container, inst);
         let lastSrc = '';
         const reference = {
             open(src) {
                 lastSrc = src;
                 // Detach any existing engine before opening a new stream
-                if (activeEngine !== null) {
-                    activeEngine.detach();
-                    activeEngine = null;
+                if (inst.engine !== null) {
+                    inst.engine.detach();
+                    inst.engine = null;
                 }
                 const engine = selectEngine(src, mergedConfig);
                 if (video !== null) {
@@ -6458,11 +6625,14 @@
                 engine.setBus(controller.bus);
                 engine.setConfig(mergedConfig);
                 controller.setEngineSync(engine);
-                activeEngine = engine;
+                inst.engine = engine;
                 // P2P integration: wire EasyBroadcast SDK when config.lib and config.manager are set
                 if (mergedConfig.lib && mergedConfig.manager && video !== null) {
                     const isDash = src.includes('.mpd') && mergedConfig.dashjs !== false;
+                    // Stop any P2P SDK from a previous open() before attaching a new one
+                    inst.p2p?.stop();
                     const p2pManager = new P2PManager();
+                    inst.p2p = p2pManager;
                     // Wait for the engine driver to be created before integrating P2P
                     engine.driverReady.then(() => {
                         return p2pManager.integrate({
@@ -6479,9 +6649,9 @@
                 // Snapshot handler: create snapshot engine for seekbar preview thumbnails
                 if (mergedConfig.showProgressThumb) {
                     // Clean up any previous snapshot handler
-                    if (activeSnapshotDestroy !== null) {
-                        activeSnapshotDestroy();
-                        activeSnapshotDestroy = null;
+                    if (inst.snapshotDestroy !== null) {
+                        inst.snapshotDestroy();
+                        inst.snapshotDestroy = null;
                     }
                     const isDash = src.includes('.mpd') && mergedConfig.dashjs !== false;
                     // Wait for engine driver to be ready (CDN script loaded) before initializing snapshot
@@ -6492,7 +6662,7 @@
                                 const handler = new DashSnapshotHandler(src);
                                 handler.init(win.dashjs)
                                     .then((handle) => {
-                                    activeSnapshotDestroy = () => handle.destroy();
+                                    inst.snapshotDestroy = () => handle.destroy();
                                     controller.bus.emit('snapshot-handler-ready', { take: handle.take, video: handle.video });
                                 })
                                     .catch((error) => {
@@ -6512,7 +6682,7 @@
                                 const handler = new HlsSnapshotHandler({ src, engineSettings: { ...mergedConfig.engineSettings, ...snapshotDrmConfig } }, sharedTokenManager);
                                 handler.init(win.Hls)
                                     .then(() => {
-                                    activeSnapshotDestroy = () => handler.destroy();
+                                    inst.snapshotDestroy = () => handler.destroy();
                                     const snapshotVideo = handler.getVideo();
                                     if (snapshotVideo !== null) {
                                         controller.bus.emit('snapshot-handler-ready', { take: (time) => handler.take(time), video: snapshotVideo });
@@ -6547,15 +6717,19 @@
                 }
             },
             close() {
-                if (activeSnapshotDestroy !== null) {
-                    activeSnapshotDestroy();
-                    activeSnapshotDestroy = null;
+                if (inst.snapshotDestroy !== null) {
+                    inst.snapshotDestroy();
+                    inst.snapshotDestroy = null;
                 }
-                if (activeEngine !== null) {
-                    activeEngine.detach();
-                    activeEngine = null;
+                if (inst.engine !== null) {
+                    inst.engine.detach();
+                    inst.engine = null;
                 }
             },
+            destroy() {
+                destroyInstance(inst);
+                instances.delete(container);
+            },
             get state() {
                 return controller.state;
             }
@@ -6576,14 +6750,21 @@
                 reference.open(currentSrc);
                 // Restore selections after manifest loads (~2s pragmatic delay for async manifest parsing)
                 setTimeout(() => {
-                    if (activeEngine !== null) {
-                        activeEngine.setQuality(saved.quality);
-                        activeEngine.setAudioTrack(saved.audioTrack);
-                        activeEngine.setSubtitle(saved.subtitleTrack);
+                    if (inst.engine !== null) {
+                        inst.engine.setQuality(saved.quality);
+                        inst.engine.setAudioTrack(saved.audioTrack);
+                        inst.engine.setSubtitle(saved.subtitleTrack);
                     }
                 }, 2000);
             }, 500);
         });
+        // On an unrecoverable engine error (e.g. fatal DRM keySystemError), tear down
+        // the P2P SDK. hls.js nulls its media element, so a still-running eblib would
+        // otherwise loop on `media.currentTime`. The engine has already surfaced the
+        // clean error via state.error and stopped its stall watchdog.
+        controller.bus.on('error-fatal', () => {
+            inst.p2p?.stop();
+        }, { signal: controller.signal });
         // Auto-open the stream if src is provided in config (matches legacy player behaviour
         // where consumers call start({ src: '...' }) and expect playback to begin immediately).
         // When autoplay is false, defer open() until the user requests play — this avoids
@@ -6595,9 +6776,24 @@
             else {
                 let deferredOpen = true;
                 controller.bus.on('play', () => {
-                    if (deferredOpen) {
-                        deferredOpen = false;
-                        reference.open(mergedConfig.src);
+                    if (!deferredOpen)
+                        return;
+                    deferredOpen = false;
+                    reference.open(mergedConfig.src);
+                    // Honor the user's click intent. CommandHandler's earlier bus.on('play')
+                    // listener fired before us with no source attached, so its video.play()
+                    // was a silent no-op. Wait for driverReady (attachMedia + loadSource
+                    // done) then start playback ourselves.
+                    const engine = inst.engine;
+                    if (engine !== null && video !== null) {
+                        engine.driverReady.then(() => {
+                            const playResult = video.play();
+                            if (playResult && typeof playResult.catch === 'function') {
+                                playResult.catch((error) => {
+                                    console.warn('EBPlayer: deferred play() rejected', error);
+                                });
+                            }
+                        });
                     }
                 }, { signal: controller.signal });
             }
@@ -6605,28 +6801,28 @@
         return reference;
     }
     /**
-     * Stop the active stream.
-     * Detaches the engine without disposing the controller (skin stays mounted).
+     * Stop all active streams.
+     * Detaches engines without disposing controllers (skins stay mounted).
+     * For single-instance usage this behaves identically to the old global stop().
      */
     function stop() {
-        if (activeEngine !== null) {
-            activeEngine.detach();
-            activeEngine = null;
+        for (const inst of instances.values()) {
+            if (inst.engine !== null) {
+                inst.engine.detach();
+                inst.engine = null;
+            }
         }
     }
     /**
-     * Destroy the player completely.
-     * Disposes the controller (tears down skin, events, and all resources).
+     * Destroy all player instances completely.
+     * Disposes every controller (tears down skin, events, and all resources).
+     * For single-instance usage this behaves identically to the old global destroy().
      */
     function destroy() {
-        if (activeEngine !== null) {
-            activeEngine.detach();
-            activeEngine = null;
-        }
-        if (activeController !== null) {
-            activeController.dispose();
-            activeController = null;
+        for (const inst of instances.values()) {
+            destroyInstance(inst);
         }
+        instances.clear();
     }
     // ---------------------------------------------------------------------------
     // Version
@@ -6639,7 +6835,8 @@
     // ---------------------------------------------------------------------------
     if (typeof window !== 'undefined') {
         console.info(`%cEBPlayer v${VERSION}`, 'color: #1FA9DD; font-weight: bold');
-        window.EBPlayer = { start, stop, destroy, AVAILABLE_THEMES, THEME_LAYOUTS, version: VERSION };
+        const win = window;
+        win.EBPlayer = { start, stop, destroy, AVAILABLE_THEMES, THEME_LAYOUTS, version: VERSION };
     }
 
     /**