@openplayerjs/player 3.0.0-beta.0

package/dist/index.js

@@ -0,0 +1,2178 @@
+import { getOverlayManager, EVENT_OPTIONS, isAudio, isMobile, DisposableStore, formatTime, generateISODateTime, offset } from '@openplayerjs/core';
+
+const defaultUIConfiguration = {
+    step: 0,
+    allowSkip: true,
+    allowRewind: true,
+};
+const defaultLabels = Object.freeze({
+    auto: 'Auto',
+    captions: 'CC/Subtitles',
+    click: 'Click to unmute',
+    container: 'Media player',
+    fullscreen: 'Fullscreen',
+    levels: 'Quality Levels',
+    live: 'Live',
+    loading: 'Loading...',
+    media: 'Media',
+    mute: 'Mute',
+    off: 'Off',
+    pause: 'Pause',
+    play: 'Play',
+    progressRail: 'Time Rail',
+    progressSlider: 'Time Slider',
+    settings: 'Player Settings',
+    speed: 'Speed',
+    speedNormal: 'Normal',
+    tap: 'Tap to unmute',
+    toggleCaptions: 'Toggle Captions',
+    unmute: 'Unmute',
+    volume: 'Volume',
+    volumeControl: 'Volume Control',
+    volumeSlider: 'Volume Slider',
+});
+function resolveUIConfig(coreOrConfig) {
+    const config = coreOrConfig.config ? coreOrConfig.config : coreOrConfig;
+    const allowSkip = config.allowSkip ?? defaultUIConfiguration.allowSkip;
+    const allowRewind = config.allowRewind ?? defaultUIConfiguration.allowRewind;
+    const step = config.step ?? defaultUIConfiguration.step;
+    const width = config.width;
+    const height = config.height;
+    const labels = { ...defaultLabels, ...(config.labels || {}) };
+    // Normalize config in-place when called with a Player instance so downstream code can rely on it.
+    if (coreOrConfig.config) {
+        try {
+            config.labels = labels;
+            config.allowSkip = allowSkip;
+            config.allowRewind = allowRewind;
+            config.step = step;
+        }
+        catch {
+            // ignore
+        }
+    }
+    return { allowSkip, allowRewind, step, width, height, labels };
+}
+
+const registry = new Map();
+function parsePlacement(key) {
+    if (key === 'main') {
+        return { v: 'middle', h: 'center', region: 'main' };
+    }
+    const parts = key.split('-');
+    let v = 'middle';
+    let h = 'center';
+    for (const part of parts) {
+        if (part === 'top' || part === 'bottom')
+            v = part;
+        if (part === 'left' || part === 'right')
+            h = part;
+        if (part === 'middle' || part === 'center')
+            h = 'center';
+    }
+    return { v, h };
+}
+function createSection(name) {
+    const section = document.createElement('div');
+    section.className = `op-controls__layer op-controls-layer__${name}`;
+    const left = document.createElement('div');
+    left.className = 'op-controls__left';
+    const center = document.createElement('div');
+    center.className = 'op-controls__middle';
+    const right = document.createElement('div');
+    right.className = 'op-controls__right';
+    section.append(left, center, right);
+    return { section, left, center, right };
+}
+function createControlGrid(controlsRoot, mainRoot) {
+    const top = createSection('top');
+    const middle = createSection('center');
+    const bottom = createSection('bottom');
+    controlsRoot.append(top.section, middle.section, bottom.section);
+    return {
+        place(placement, el) {
+            // Special "main" region lives in the media container, not in the controls bar.
+            const region = placement.region?.trim();
+            if (region === 'main' && mainRoot) {
+                mainRoot.appendChild(el);
+                return;
+            }
+            const row = placement.v === 'top' ? top : placement.v === 'middle' ? middle : bottom;
+            const col = placement.h === 'left' ? row.left : placement.h === 'center' ? row.center : row.right;
+            col.appendChild(el);
+        },
+    };
+}
+function registerControl(name, factory) {
+    registry.set(name, factory);
+}
+function getControl(name) {
+    const factory = registry.get(name);
+    return factory?.() || null;
+}
+function buildControls(config) {
+    const controls = [];
+    Object.entries(config || {}).forEach(([key, names]) => {
+        if (!Array.isArray(names))
+            return;
+        const placement = parsePlacement(key);
+        names.forEach((name) => {
+            const control = getControl(name);
+            if (!control)
+                return;
+            control.placement = placement;
+            controls.push(control);
+        });
+    });
+    return controls;
+}
+
+function getActiveMedia(core) {
+    try {
+        const hasOverlayMgr = typeof getOverlayManager === 'function';
+        if (!hasOverlayMgr)
+            return core.media;
+        const active = getOverlayManager(core)?.active;
+        const v = active?.fullscreenVideoEl;
+        return v && typeof v.play === 'function' ? v : core.media;
+    }
+    catch {
+        return core.media;
+    }
+}
+async function togglePlayback(core) {
+    const media = getActiveMedia(core);
+    const isPlaying = !media.paused && !media.ended;
+    if (isPlaying) {
+        core.pause();
+        return;
+    }
+    await core.play();
+}
+
+function bindCenterOverlay(core, keyTarget, bindings) {
+    let lastNonZeroVolume = core.volume || 1;
+    const onKeyboard = () => {
+        if (keyTarget.classList.contains('op-player__keyboard--inactive')) {
+            keyTarget.classList.remove('op-player__keyboard--inactive');
+        }
+    };
+    const onPointer = () => {
+        if (!keyTarget.classList.contains('op-player__keyboard--inactive')) {
+            keyTarget.classList.add('op-player__keyboard--inactive');
+        }
+    };
+    keyTarget.addEventListener('click', onPointer, EVENT_OPTIONS);
+    keyTarget.addEventListener('pointerdown', onPointer, EVENT_OPTIONS);
+    keyTarget.addEventListener('pointerleave', onPointer, EVENT_OPTIONS);
+    window.addEventListener('click', onPointer, EVENT_OPTIONS);
+    window.addEventListener('pointerdown', onPointer, EVENT_OPTIONS);
+    window.addEventListener('keydown', onKeyboard, EVENT_OPTIONS);
+    keyTarget.addEventListener('keydown', async (e) => {
+        const key = e.key;
+        onKeyboard();
+        const activeEl = document.activeElement;
+        if (activeEl &&
+            (key === ' ' || key === 'Enter' || key === 'Spacebar') &&
+            (activeEl.tagName === 'BUTTON' || activeEl.getAttribute('role') === 'button')) {
+            activeEl.click();
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        const conf = resolveUIConfig(core).step;
+        const step = conf && conf > 0 ? conf : 5;
+        switch (key) {
+            // Toggle play/pause
+            case 'k':
+            case 'K':
+            case 'Enter':
+            case ' ':
+            case 'Spacebar': {
+                await togglePlayback(core);
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+            }
+            // End key ends video
+            case 'End':
+                if (core.duration !== Infinity) {
+                    core.currentTime = core.duration;
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+                break;
+            // Home key resets progress
+            case 'Home':
+                core.currentTime = 0;
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+            // Volume
+            case 'ArrowUp': {
+                const upVolume = Math.min(core.volume + 0.1, 1);
+                core.volume = upVolume;
+                core.muted = !(upVolume > 0);
+                if (upVolume > 0)
+                    lastNonZeroVolume = upVolume;
+                const el = getActiveMedia(core);
+                if (el && el !== core.media) {
+                    try {
+                        el.volume = upVolume;
+                        el.muted = !(upVolume > 0);
+                    }
+                    catch {
+                        // ignore
+                    }
+                }
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+            }
+            case 'ArrowDown': {
+                const downVolume = Math.max(core.volume - 0.1, 0);
+                core.volume = downVolume;
+                core.muted = !(downVolume > 0);
+                if (downVolume > 0)
+                    lastNonZeroVolume = downVolume;
+                const el = getActiveMedia(core);
+                if (el && el !== core.media) {
+                    try {
+                        el.volume = downVolume;
+                        el.muted = !(downVolume > 0);
+                    }
+                    catch {
+                        // ignore
+                    }
+                }
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+            }
+            // Fullscreen toggle
+            case 'f':
+            case 'F': {
+                const fullscreenTarget = e.target;
+                if (fullscreenTarget.requestFullscreen)
+                    fullscreenTarget.requestFullscreen();
+                else if (fullscreenTarget.mozRequestFullScreen)
+                    fullscreenTarget.mozRequestFullScreen();
+                else if (fullscreenTarget.webkitRequestFullScreen)
+                    fullscreenTarget.webkitRequestFullScreen();
+                else if (fullscreenTarget.msRequestFullscreen)
+                    fullscreenTarget.msRequestFullscreen();
+                else if (fullscreenTarget.webkitEnterFullscreen)
+                    fullscreenTarget.webkitEnterFullscreen();
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+            }
+            // Mute toggle preserving last volume
+            case 'm':
+            case 'M': {
+                const el = getActiveMedia(core);
+                const nextMuted = !core.muted;
+                if (nextMuted) {
+                    // store last non-zero volume before muting
+                    if (core.volume > 0)
+                        lastNonZeroVolume = core.volume;
+                    core.volume = 0;
+                    core.muted = true;
+                    if (el && el !== core.media) {
+                        try {
+                            el.volume = 0;
+                            el.muted = true;
+                        }
+                        catch {
+                            // ignore
+                        }
+                    }
+                }
+                else {
+                    const restore = lastNonZeroVolume > 0 ? lastNonZeroVolume : 1;
+                    core.volume = restore;
+                    core.muted = false;
+                    if (el && el !== core.media) {
+                        try {
+                            el.volume = restore;
+                            el.muted = false;
+                        }
+                        catch {
+                            // ignore
+                        }
+                    }
+                }
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+            }
+            // Seek
+            case 'J':
+            case 'j':
+            case 'ArrowLeft':
+                if (core.duration !== Infinity) {
+                    core.currentTime = Math.max(0, core.currentTime - step);
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+                break;
+            case 'L':
+            case 'l':
+            case 'ArrowRight':
+                if (core.duration !== Infinity) {
+                    core.currentTime = Math.min(core.duration, core.currentTime + step);
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+                break;
+            // Rate
+            case '<':
+                core.playbackRate = Math.max(core.playbackRate - 0.25, 0.25);
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+            case '>':
+                core.playbackRate = Math.min(core.playbackRate + 0.25, 2);
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+        }
+    }, EVENT_OPTIONS);
+    core.events.on('waiting', () => {
+        bindings?.showLoader(true);
+        bindings?.showButton(false);
+    });
+    core.events.on('seeking', () => {
+        bindings?.showLoader(true);
+        bindings?.showButton(false);
+    });
+    core.events.on('seeked', () => {
+        bindings?.showLoader(false);
+        // After seeking, only show the center button if we are paused.
+        // When seeking during playback (common on iOS), keeping the play button visible
+        // causes it to linger even after the loader is hidden.
+        bindings?.showButton(core.media?.paused ?? false);
+    });
+    core.events.on('play', () => {
+        bindings?.showLoader(false);
+        bindings?.showButton(false);
+    });
+    core.events.on('pause', () => {
+        bindings?.showLoader(false);
+        bindings?.showButton(true);
+    });
+    core.events.on('playing', () => {
+        bindings?.showLoader(false);
+        bindings?.showButton(false);
+    });
+    core.events.on('ended', () => {
+        bindings?.showLoader(false);
+        bindings?.showButton(true);
+    });
+}
+
+let srId$1 = 0;
+function nextId() {
+    srId$1 += 1;
+    return `op-player-sr-${srId$1}`;
+}
+function ensureSrSpan(host, text) {
+    const existing = host.querySelector(':scope > span.op-player__sr-only');
+    const span = existing ?? document.createElement('span');
+    if (!existing) {
+        span.className = 'op-player__sr-only';
+        host.appendChild(span);
+    }
+    span.textContent = text;
+    return span;
+}
+function ensureLabelledBy(el, labelText, opts) {
+    const parent = el.parentElement ?? opts?.container;
+    if (!parent) {
+        el.setAttribute('aria-label', labelText);
+        return;
+    }
+    const labelledBy = el.getAttribute('aria-labelledby');
+    let span = null;
+    if (labelledBy) {
+        const found = document.getElementById(labelledBy);
+        if (found && found instanceof HTMLSpanElement)
+            span = found;
+    }
+    if (!span) {
+        span = document.createElement('span');
+        span.className = 'op-player__sr-only';
+        span.id = nextId();
+        if (el.parentElement === parent && parent.contains(el)) {
+            parent.insertBefore(span, el);
+        }
+        else {
+            parent.appendChild(span);
+        }
+        el.setAttribute('aria-labelledby', span.id);
+    }
+    span.textContent = labelText;
+    el.removeAttribute('aria-label');
+}
+function setA11yLabel(el, labelText, opts) {
+    const tag = el.tagName.toLowerCase();
+    const isButtonLike = tag === 'button' || el.getAttribute('role') === 'button';
+    if (isButtonLike) {
+        ensureSrSpan(el, labelText);
+        el.removeAttribute('aria-label');
+        return;
+    }
+    ensureLabelledBy(el, labelText, opts);
+}
+
+function createCenterOverlayDom(core) {
+    const labels = resolveUIConfig(core).labels;
+    const playLabel = labels.play;
+    const pauseLabel = labels.pause;
+    const loadingLabel = labels.loading;
+    const button = document.createElement('button');
+    button.className = 'op-player__play';
+    button.tabIndex = 0;
+    button.type = 'button';
+    button.setAttribute('aria-pressed', 'false');
+    button.setAttribute('aria-hidden', 'false');
+    setA11yLabel(button, playLabel);
+    button.setAttribute('aria-keyshortcuts', 'K Enter');
+    button.addEventListener('click', async (e) => {
+        await togglePlayback(core);
+        e.preventDefault();
+        e.stopPropagation();
+    }, EVENT_OPTIONS);
+    const loader = document.createElement('span');
+    loader.className = 'op-player__loader';
+    loader.tabIndex = -1;
+    loader.setAttribute('aria-hidden', 'true');
+    loader.setAttribute('role', 'status');
+    loader.setAttribute('aria-live', 'polite');
+    const loaderText = document.createElement('span');
+    loaderText.className = 'op-player__sr-only';
+    loaderText.textContent = loadingLabel;
+    loader.appendChild(loaderText);
+    let flashTimer;
+    let isFlashing = false;
+    const cancelFlash = () => {
+        if (flashTimer) {
+            window.clearTimeout(flashTimer);
+            flashTimer = undefined;
+        }
+        isFlashing = false;
+        button.classList.remove('op-player__play--flash');
+    };
+    const showButton = (show) => {
+        if (show) {
+            if (isFlashing)
+                return;
+            button.classList.remove('op-player__play--paused');
+            button.setAttribute('aria-hidden', 'false');
+            button.removeAttribute('inert');
+            setA11yLabel(button, playLabel);
+            button.inert = false;
+            button.tabIndex = 0;
+        }
+        else {
+            if (isFlashing)
+                cancelFlash();
+            // Avoid aria-hidden on a focused element (Chrome warning).
+            const active = document.activeElement;
+            if (active && (active === button || button.contains(active))) {
+                active.blur?.();
+            }
+            button.classList.add('op-player__play--paused');
+            button.setAttribute('aria-hidden', 'true');
+            button.setAttribute('inert', '');
+            setA11yLabel(button, pauseLabel);
+            button.inert = true;
+            button.tabIndex = -1;
+        }
+    };
+    const flashPause = (ms) => {
+        cancelFlash();
+        isFlashing = true;
+        button.classList.remove('op-player__play--paused');
+        button.classList.add('op-player__play--flash');
+        button.setAttribute('aria-hidden', 'false');
+        button.removeAttribute('inert');
+        button.inert = false;
+        button.tabIndex = -1;
+        setA11yLabel(button, pauseLabel);
+        flashTimer = window.setTimeout(() => {
+            button.classList.remove('op-player__play--flash');
+            flashTimer = undefined;
+            isFlashing = false;
+            showButton(true);
+        }, ms);
+    };
+    const showLoader = (show) => {
+        loader.style.display = show ? '' : 'none';
+        loader.setAttribute('aria-hidden', show ? 'false' : 'true');
+    };
+    return { button, loader, showButton, showLoader, flashPause };
+}
+
+let srId = 0;
+function labelElement(host, text) {
+    const existing = host.querySelector(':scope > span.op-player__sr-only');
+    const span = existing ?? document.createElement('span');
+    if (!existing) {
+        srId += 1;
+        span.className = 'op-player__sr-only';
+        span.id = `op-player-sr-el-${srId}`;
+        host.insertBefore(span, host.firstChild);
+        host.setAttribute('aria-labelledby', span.id);
+        host.removeAttribute('aria-label');
+    }
+    span.textContent = text;
+}
+function maybeAutoplayUnmute(core, wrapper) {
+    const media = core.media;
+    const wantsAutoplay = !!(media.autoplay || media.preload === 'auto');
+    if (!wantsAutoplay && !core.canAutoplay && !core.canAutoplayMuted)
+        return;
+    if (core.canAutoplay && !core.canAutoplayMuted)
+        return;
+    queueMicrotask(async () => {
+        try {
+            const restoreVolume = core.volume > 0 ? core.volume : 1;
+            core.muted = true;
+            core.volume = 0;
+            await core.play();
+            const labels = resolveUIConfig(core).labels;
+            const action = isMobile() ? labels.tap : labels.click;
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'op-player__unmute';
+            btn.textContent = action;
+            btn.tabIndex = 0;
+            const cleanup = () => {
+                try {
+                    offMuted?.();
+                }
+                catch {
+                    // ignore
+                }
+                try {
+                    btn.remove();
+                }
+                catch {
+                    // ignore
+                }
+            };
+            const offMuted = core.events.on('volumechange', () => {
+                if (!core.muted)
+                    cleanup();
+            });
+            btn.addEventListener('click', () => {
+                // Treat explicit unmute as a user interaction so ad plugins can lift forced mute.
+                if (!core.userInteracted) {
+                    core.userInteracted = true;
+                    core.emit('player:interacted');
+                }
+                core.muted = false;
+                core.volume = restoreVolume;
+                core.play().catch(() => undefined);
+                cleanup();
+            }, EVENT_OPTIONS);
+            wrapper.insertBefore(btn, wrapper.firstChild);
+            core.events.on('player:destroy', cleanup);
+        }
+        catch {
+            // ignore autoplay failures
+        }
+    });
+}
+function createUI(core, media, controls) {
+    const ui = resolveUIConfig(core);
+    media.tabIndex = -1;
+    const tmpMedia = media;
+    const isMediaAudio = isAudio(tmpMedia);
+    const placeholder = document.createComment('op-player-placeholder');
+    const parent = tmpMedia.parentNode;
+    if (parent)
+        parent.insertBefore(placeholder, tmpMedia);
+    const wrapper = document.createElement('div');
+    wrapper.className = `op-player op-player__keyboard--inactive ${isMediaAudio ? 'op-player__audio' : 'op-player__video'}`;
+    wrapper.setAttribute('role', 'region');
+    wrapper.tabIndex = 0;
+    let style = '';
+    if (ui.width) {
+        const width = typeof ui.width === 'number' ? `${ui.width}px` : ui.width;
+        style += `width: ${width} !important;`;
+    }
+    if (ui.height) {
+        const height = typeof ui.height === 'number' ? `${ui.height}px` : ui.height;
+        style += `height: ${height} !important;`;
+    }
+    if (style) {
+        wrapper.setAttribute('style', style);
+    }
+    media.controls = false;
+    media.replaceWith(wrapper);
+    labelElement(wrapper, ui.labels.container);
+    const mediaContainer = document.createElement('div');
+    mediaContainer.className = 'op-media';
+    mediaContainer.tabIndex = 0;
+    mediaContainer.setAttribute('role', 'group');
+    mediaContainer.appendChild(tmpMedia);
+    labelElement(mediaContainer, ui.labels.media);
+    const mainControls = document.createElement('div');
+    mainControls.className = 'op-media__main';
+    let overlay;
+    if (!isMediaAudio) {
+        mediaContainer.appendChild(mainControls);
+        overlay = createCenterOverlayDom(core);
+        mediaContainer.appendChild(overlay.button);
+        mediaContainer.appendChild(overlay.loader);
+    }
+    bindCenterOverlay(core, wrapper, overlay);
+    const controlsRoot = document.createElement('div');
+    controlsRoot.className = 'op-controls';
+    controlsRoot.setAttribute('aria-hidden', 'false');
+    if (isMediaAudio) {
+        const grid = createControlGrid(controlsRoot);
+        wrapper.appendChild(mediaContainer);
+        wrapper.appendChild(controlsRoot);
+        const createdControls = [];
+        controls.forEach((control) => {
+            const el = control.create(core);
+            el.dataset.controlId = control.id;
+            grid.place(control.placement, el);
+            createdControls.push(control);
+        });
+        const ctx = { wrapper, mediaContainer, controlsRoot, placeholder, grid };
+        const offDestroy = core.events.on('player:destroy', () => {
+            try {
+                createdControls.forEach((c) => c.destroy?.());
+            }
+            catch {
+                // ignore
+            }
+            try {
+                wrapper.replaceWith(media);
+            }
+            catch {
+                // ignore
+            }
+            try {
+                placeholder.remove();
+            }
+            catch {
+                // ignore
+            }
+            try {
+                offAddElement();
+                offAddControl();
+                offDestroy();
+            }
+            catch {
+                // ignore
+            }
+        });
+        const offAddElement = core.events.on('ui:addElement', (payload) => {
+            if (!payload?.el)
+                return;
+            const placement = payload.placement || { v: 'bottom', h: 'right' };
+            ctx.grid?.place(placement, payload.el);
+        });
+        const offAddControl = core.events.on('ui:addControl', (payload) => {
+            const control = payload?.control;
+            if (!control)
+                return;
+            const el = control.create(core);
+            el.dataset.controlId = control.id;
+            ctx.grid?.place(control.placement, el);
+            payload.el = el;
+            createdControls.push(control);
+        });
+        maybeAutoplayUnmute(core, wrapper);
+        return ctx;
+    }
+    const mobile = isMobile();
+    const POINTER_SHOW_MS = 3000;
+    const KEYBOARD_SHOW_MS = 6500;
+    let hideTimer;
+    let lastInteraction = 'pointer';
+    const controlsHaveFocus = () => controlsRoot.contains(document.activeElement);
+    const showControls = () => {
+        wrapper.classList.remove('op-controls--hidden');
+        mediaContainer.classList.remove('op-media--controls-hidden');
+        if (hideTimer)
+            window.clearTimeout(hideTimer);
+        controlsRoot.setAttribute('aria-hidden', 'false');
+    };
+    const hideControls = () => {
+        if (controlsHaveFocus()) {
+            if (lastInteraction === 'keyboard') {
+                wrapper.focus();
+            }
+            else {
+                return;
+            }
+        }
+        wrapper.classList.add('op-controls--hidden');
+        mediaContainer.classList.add('op-media--controls-hidden');
+        controlsRoot.setAttribute('aria-hidden', 'true');
+    };
+    const scheduleHide = (ms) => {
+        if (core.media.paused || core.media.ended)
+            return;
+        if (hideTimer)
+            window.clearTimeout(hideTimer);
+        hideTimer = window.setTimeout(() => hideControls(), ms ?? POINTER_SHOW_MS);
+    };
+    const onControlsHover = () => {
+        lastInteraction = 'pointer';
+        showControls();
+        scheduleHide(POINTER_SHOW_MS);
+    };
+    controlsRoot.addEventListener('focusin', () => {
+        lastInteraction = 'keyboard';
+        showControls();
+        scheduleHide(KEYBOARD_SHOW_MS);
+    });
+    controlsRoot.addEventListener('focusout', () => {
+        window.setTimeout(() => {
+            if (!controlsHaveFocus())
+                scheduleHide(lastInteraction === 'keyboard' ? KEYBOARD_SHOW_MS : POINTER_SHOW_MS);
+        }, 0);
+    });
+    const isFocusInMediaArea = () => {
+        const active = document.activeElement;
+        if (!active)
+            return false;
+        return wrapper.contains(active) && !controlsRoot.contains(active);
+    };
+    wrapper.addEventListener('focusin', () => {
+        if (isFocusInMediaArea()) {
+            showControls();
+            if (hideTimer)
+                window.clearTimeout(hideTimer);
+        }
+    }, EVENT_OPTIONS);
+    wrapper.addEventListener('focusout', () => {
+        window.setTimeout(() => {
+            if (!wrapper.contains(document.activeElement) && !controlsHaveFocus())
+                scheduleHide();
+        }, 0);
+    }, EVENT_OPTIONS);
+    wrapper.addEventListener('keydown', () => {
+        lastInteraction = 'keyboard';
+        if (isFocusInMediaArea()) {
+            showControls();
+            if (hideTimer)
+                window.clearTimeout(hideTimer);
+        }
+        else if (controlsHaveFocus()) {
+            showControls();
+            scheduleHide(KEYBOARD_SHOW_MS);
+        }
+    }, EVENT_OPTIONS);
+    if (mobile) {
+        wrapper.addEventListener('pointerdown', () => {
+            lastInteraction = 'pointer';
+            showControls();
+            scheduleHide(POINTER_SHOW_MS);
+        }, EVENT_OPTIONS);
+    }
+    else {
+        wrapper.addEventListener('pointermove', onControlsHover, EVENT_OPTIONS);
+        wrapper.addEventListener('pointerenter', onControlsHover, EVENT_OPTIONS);
+        controlsRoot.addEventListener('pointerenter', onControlsHover, EVENT_OPTIONS);
+        controlsRoot.addEventListener('pointermove', onControlsHover, EVENT_OPTIONS);
+        controlsRoot.addEventListener('pointerleave', () => scheduleHide(POINTER_SHOW_MS), EVENT_OPTIONS);
+    }
+    const grid = createControlGrid(controlsRoot, mainControls);
+    wrapper.appendChild(mediaContainer);
+    wrapper.appendChild(controlsRoot);
+    const createdControls = [];
+    controls.forEach((control) => {
+        const el = control.create(core);
+        el.dataset.controlId = control.id;
+        grid.place(control.placement, el);
+        createdControls.push(control);
+    });
+    const ctx = { wrapper, mediaContainer, controlsRoot, placeholder, grid };
+    maybeAutoplayUnmute(core, wrapper);
+    wrapper.addEventListener('click', async (e) => {
+        // Linear overlays (e.g. full-screen ads with their own video) own click handling.
+        // Non-linear ads (no fullscreenVideoEl) run alongside the content, so we allow pause.
+        if (getOverlayManager(core).active?.fullscreenVideoEl)
+            return;
+        const target = e.target;
+        // Clicks inside the controls bar must not toggle playback.
+        if (target && controlsRoot.contains(target))
+            return;
+        // Clicks on interactive elements (buttons, links) are handled by those elements.
+        if (target && target !== wrapper && target.closest('button, [role="button"], a'))
+            return;
+        const isPlaying = !core.media.paused && !core.media.ended;
+        if (isPlaying) {
+            overlay?.flashPause(350);
+            core.pause();
+        }
+        else {
+            await core.play().catch(() => undefined);
+        }
+    }, EVENT_OPTIONS);
+    const offPlaying = core.events.on('playing', () => scheduleHide(POINTER_SHOW_MS));
+    const offPause = core.events.on('pause', () => showControls());
+    const offEnded = core.events.on('ended', () => showControls());
+    const offDestroy = core.events.on('player:destroy', () => {
+        try {
+            createdControls.forEach((c) => c.destroy?.());
+        }
+        catch {
+            // ignore
+        }
+        try {
+            wrapper.replaceWith(media);
+        }
+        catch {
+            // ignore
+        }
+        try {
+            placeholder.remove();
+        }
+        catch {
+            // ignore
+        }
+        try {
+            offPlaying?.();
+            offPause?.();
+            offEnded?.();
+            offAddElement();
+            offAddControl();
+            offDestroy();
+        }
+        catch {
+            // ignore
+        }
+    });
+    const offAddElement = core.events.on('ui:addElement', (payload) => {
+        if (!payload?.el)
+            return;
+        const placement = payload.placement || { v: 'bottom', h: 'right' };
+        ctx.grid?.place(placement, payload.el);
+    });
+    const offAddControl = core.events.on('ui:addControl', (payload) => {
+        const control = payload?.control;
+        if (!control)
+            return;
+        const el = control.create(core);
+        el.dataset.controlId = control.id;
+        ctx.grid?.place(control.placement, el);
+        payload.el = el;
+        createdControls.push(control);
+    });
+    return ctx;
+}
+
+function extendControls(core) {
+    const api = {
+        addElement(el, placement = { v: 'bottom', h: 'right' }) {
+            if (core.events.listenerCount('ui:addElement') === 0) {
+                throw new Error('UI not initialized; cannot addElement');
+            }
+            core.events.emit('ui:addElement', { el, placement });
+            core.emit('controls:changed');
+            return el;
+        },
+        addControl(control) {
+            if (core.events.listenerCount('ui:addControl') === 0) {
+                throw new Error('UI not initialized; cannot addControl');
+            }
+            const payload = { control, el: undefined };
+            core.events.emit('ui:addControl', payload);
+            core.emit('controls:changed');
+            return payload.el;
+        },
+    };
+    Object.assign(core, { controls: api });
+    return api;
+}
+
+class BaseControl {
+    constructor() {
+        Object.defineProperty(this, "core", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "overlayMgr", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "activeOverlay", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "dispose", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new DisposableStore()
+        });
+    }
+    onOverlayChanged(_ov) {
+        // ignore
+    }
+    create(core) {
+        this.core = core;
+        this.overlayMgr = getOverlayManager(core);
+        this.activeOverlay = this.overlayMgr.active ?? null;
+        this.dispose.add(this.overlayMgr.bus.on('overlay:changed', (ov) => {
+            this.activeOverlay = ov;
+            this.onOverlayChanged(ov);
+        }));
+        return this.build();
+    }
+    destroy() {
+        this.dispose.dispose();
+    }
+    onPlayer(event, cb) {
+        return this.dispose.add(this.core.events.on(event, cb));
+    }
+    listen(target, type, handler, options) {
+        return this.dispose.addEventListener(target, type, handler, options);
+    }
+    resolvePlayerRoot() {
+        const media = this.core.media;
+        if (!media)
+            return document.body;
+        return media.closest('.op-player') || media.parentElement || document.body;
+    }
+    resolveFullscreenContainer() {
+        return this.activeOverlay?.fullscreenEl || this.resolvePlayerRoot();
+    }
+    resolveFullscreenVideoEl() {
+        return (this.activeOverlay?.fullscreenVideoEl ||
+            (this.core.media ?? null));
+    }
+}
+
+// Use a symbol to avoid collisions with user-land fields.
+const SETTINGS_REGISTRY_KEY = Symbol.for('openplayerjs.settings.registry');
+class SettingsRegistry {
+    constructor() {
+        Object.defineProperty(this, "providers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+    }
+    register(provider) {
+        this.providers.set(provider.id, provider);
+        return () => this.providers.delete(provider.id);
+    }
+    list() {
+        return Array.from(this.providers.values()).sort((a, b) => a.label.localeCompare(b.label));
+    }
+}
+function getSettingsRegistry(core) {
+    const host = core;
+    if (host[SETTINGS_REGISTRY_KEY])
+        return host[SETTINGS_REGISTRY_KEY];
+    const reg = new SettingsRegistry();
+    host[SETTINGS_REGISTRY_KEY] = reg;
+    return reg;
+}
+
+function isRelevantKind(kind) {
+    return kind === 'captions' || kind === 'subtitles';
+}
+function trackLabel(t, index) {
+    return (t.label && t.label.trim()) || (t.language && t.language.trim().toUpperCase()) || `Track ${index + 1}`;
+}
+function listRelevantTracks(media) {
+    const list = media.textTracks ?? null;
+    if (!list)
+        return [];
+    const out = [];
+    for (let i = 0; i < list.length; i++) {
+        const t = list[i];
+        if (!t)
+            continue;
+        if (!isRelevantKind(String(t.kind)))
+            continue;
+        out.push({ index: i, track: t });
+    }
+    return out;
+}
+function getShowingIndex(media) {
+    const tracks = listRelevantTracks(media);
+    for (const x of tracks) {
+        if (x.track.mode === 'showing')
+            return x.index;
+    }
+    return 'off';
+}
+function setAllOff(media) {
+    for (const x of listRelevantTracks(media))
+        x.track.mode = 'disabled';
+}
+function selectIndex(media, index) {
+    for (const x of listRelevantTracks(media)) {
+        x.track.mode = x.index === index ? 'showing' : 'disabled';
+    }
+}
+class CaptionsControl extends BaseControl {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'captions'
+        });
+        Object.defineProperty(this, "placement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { v: 'bottom', h: 'right' }
+        });
+        Object.defineProperty(this, "button", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "lastSelectedIndex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+    }
+    build() {
+        const core = this.core;
+        const labels = resolveUIConfig(core).labels;
+        const label = labels.captions;
+        const buttonLabel = labels.toggleCaptions;
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.className = 'op-controls__captions';
+        setA11yLabel(this.button, buttonLabel);
+        this.button.setAttribute('aria-pressed', 'false');
+        const refresh = () => {
+            const media = getActiveMedia(core);
+            const tracks = listRelevantTracks(media);
+            this.button.style.display = tracks.length ? '' : 'none';
+            const showing = getShowingIndex(media);
+            const on = showing !== 'off';
+            if (typeof showing === 'number')
+                this.lastSelectedIndex = showing;
+            this.button.classList.toggle('op-controls__captions--on', on);
+            this.button.setAttribute('aria-pressed', on ? 'true' : 'false');
+        };
+        // Toggle only (on/off)
+        this.listen(this.button, 'click', (e) => {
+            const me = e;
+            const media = getActiveMedia(core);
+            const showing = getShowingIndex(media);
+            if (showing === 'off') {
+                const tracks = listRelevantTracks(media);
+                const idx = this.lastSelectedIndex ?? tracks[0]?.index;
+                if (typeof idx === 'number')
+                    selectIndex(media, idx);
+            }
+            else {
+                setAllOff(media);
+            }
+            refresh();
+            me.preventDefault();
+            me.stopPropagation();
+        }, EVENT_OPTIONS);
+        const provider = {
+            id: 'captions',
+            label,
+            getSubmenu: () => {
+                const media = getActiveMedia(core);
+                const tracks = listRelevantTracks(media);
+                if (!tracks.length)
+                    return null;
+                const showing = getShowingIndex(media);
+                return {
+                    id: 'captions',
+                    label,
+                    items: [
+                        {
+                            id: 'off',
+                            label: labels.off,
+                            checked: showing === 'off',
+                            onSelect: () => {
+                                setAllOff(media);
+                                refresh();
+                            },
+                        },
+                        ...tracks.map((x) => ({
+                            id: String(x.index),
+                            label: trackLabel(x.track, x.index),
+                            checked: x.index === showing,
+                            onSelect: () => {
+                                selectIndex(media, x.index);
+                                this.lastSelectedIndex = x.index;
+                                refresh();
+                            },
+                        })),
+                    ],
+                };
+            },
+        };
+        getSettingsRegistry(core).register(provider);
+        this.dispose.add(this.overlayMgr.bus.on('overlay:changed', refresh));
+        this.onPlayer('loadedmetadata', refresh);
+        refresh();
+        return this.button;
+    }
+}
+function createCaptionsControl() {
+    return new CaptionsControl();
+}
+
+class CurrentTimeControl extends BaseControl {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'currentTime'
+        });
+        Object.defineProperty(this, "placement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { v: 'bottom', h: 'left' }
+        });
+    }
+    build() {
+        const core = this.core;
+        const el = document.createElement('time');
+        el.className = 'op-controls__current';
+        el.setAttribute('role', 'timer');
+        el.setAttribute('aria-live', 'off');
+        el.setAttribute('aria-hidden', 'false');
+        el.setAttribute('datetime', 'PT0M0S');
+        el.innerText = '0:00';
+        const update = () => {
+            if (this.activeOverlay) {
+                el.setAttribute('aria-hidden', 'false');
+                el.innerText = formatTime(this.activeOverlay.value);
+                return;
+            }
+            if (core.isLive) {
+                el.setAttribute('aria-hidden', 'true');
+                return;
+            }
+            const t = core.currentTime;
+            el.setAttribute('aria-hidden', 'false');
+            const currTime = Number.isFinite(t) ? Math.max(0, t) : 0;
+            const formattedTime = formatTime(currTime);
+            el.innerText = formattedTime;
+            el.setAttribute('datetime', generateISODateTime(currTime));
+        };
+        this.onPlayer('timeupdate', () => update());
+        this.onPlayer('seeked', () => update());
+        this.onPlayer('durationchange', () => update());
+        this.overlayMgr.bus.on('overlay:changed', () => update());
+        update();
+        return el;
+    }
+}
+function createCurrentTimeControl() {
+    return new CurrentTimeControl();
+}
+
+class DurationControl extends BaseControl {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'duration'
+        });
+        Object.defineProperty(this, "placement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { v: 'bottom', h: 'right' }
+        });
+    }
+    build() {
+        const core = this.core;
+        const el = document.createElement('time');
+        el.className = 'op-controls__duration';
+        el.setAttribute('aria-hidden', 'false');
+        el.setAttribute('datetime', 'PT0M0S');
+        const update = () => {
+            if (this.activeOverlay) {
+                el.setAttribute('aria-hidden', 'false');
+                el.innerText = formatTime(this.activeOverlay.duration);
+                return;
+            }
+            const d = core.duration;
+            if (core.isLive || d === Infinity) {
+                el.removeAttribute('datetime');
+                el.textContent = resolveUIConfig(core).labels.live;
+                return;
+            }
+            el.setAttribute('aria-hidden', 'false');
+            const duration = Number.isFinite(d) ? Math.max(0, d) : core.config?.duration || 0;
+            const formattedDuration = formatTime(duration);
+            el.textContent = formattedDuration;
+            el.setAttribute('datetime', generateISODateTime(duration));
+        };
+        this.onPlayer('durationchange', update);
+        this.onPlayer('timeupdate', update);
+        this.overlayMgr.bus.on('overlay:changed', update);
+        update();
+        return el;
+    }
+}
+function createDurationControl() {
+    return new DurationControl();
+}
+
+function getFullscreenElement() {
+    const d = document;
+    return (document.fullscreenElement || d.webkitFullscreenElement || d.mozFullScreenElement || d.msFullscreenElement || null);
+}
+function requestFullscreen(el) {
+    if (!el)
+        return;
+    if (el.requestFullscreen)
+        return el.requestFullscreen();
+    if (el.mozRequestFullScreen)
+        return el.mozRequestFullScreen();
+    if (el.webkitRequestFullScreen)
+        return el.webkitRequestFullScreen();
+    if (el.msRequestFullscreen)
+        return el.msRequestFullscreen();
+    if (el.webkitEnterFullscreen)
+        return el.webkitEnterFullscreen();
+}
+function exitFullscreen() {
+    const d = document;
+    if (document.exitFullscreen)
+        return document.exitFullscreen();
+    if (d.mozCancelFullScreen)
+        return d.mozCancelFullScreen();
+    if (d.webkitCancelFullScreen)
+        return d.webkitCancelFullScreen();
+    if (d.msExitFullscreen)
+        return d.msExitFullscreen();
+}
+class FullscreenControl extends BaseControl {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'fullscreen'
+        });
+        Object.defineProperty(this, "placement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { v: 'bottom', h: 'right' }
+        });
+        Object.defineProperty(this, "isFullscreen", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "screenW", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "screenH", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+    }
+    build() {
+        const core = this.core;
+        const labels = resolveUIConfig(core).labels;
+        const btn = document.createElement('button');
+        btn.tabIndex = 0;
+        btn.type = 'button';
+        btn.className = 'op-controls__fullscreen';
+        setA11yLabel(btn, labels.fullscreen);
+        btn.setAttribute('aria-pressed', 'false');
+        const setFullscreenData = (on) => {
+            if (on)
+                btn.classList.add('op-controls__fullscreen--out');
+            else
+                btn.classList.remove('op-controls__fullscreen--out');
+            btn.setAttribute('aria-pressed', on ? 'true' : 'false');
+        };
+        const resize = (width, height) => {
+            const container = this.resolveFullscreenContainer();
+            const video = this.resolveFullscreenVideoEl();
+            if (width) {
+                container.style.width = '100%';
+                if (video)
+                    video.style.width = '100%';
+            }
+            else {
+                container.style.removeProperty('width');
+                if (video)
+                    video.style.removeProperty('width');
+            }
+            if (height) {
+                container.style.height = '100%';
+                if (video)
+                    video.style.height = '100%';
+            }
+            else {
+                container.style.removeProperty('height');
+                if (video)
+                    video.style.removeProperty('height');
+            }
+        };
+        const sync = () => {
+            const fsEl = getFullscreenElement();
+            const container = this.resolveFullscreenContainer();
+            const now = !!fsEl && (fsEl === container || fsEl.contains?.(container));
+            setFullscreenData(now);
+            if (now)
+                document.body.classList.add('op-fullscreen__on');
+            else
+                document.body.classList.remove('op-fullscreen__on');
+            resize(now ? this.screenW : undefined, now ? this.screenH : undefined);
+            this.isFullscreen = now;
+        };
+        ['fullscreenchange', 'mozfullscreenchange', 'webkitfullscreenchange', 'msfullscreenchange'].forEach((evt) => {
+            this.listen(document, evt, sync, EVENT_OPTIONS);
+        });
+        this.listen(document, 'keydown', (e) => {
+            const ke = e;
+            if (ke.key === 'Escape' && this.isFullscreen)
+                exitFullscreen();
+        }, EVENT_OPTIONS);
+        this.listen(btn, 'click', async (e) => {
+            const me = e;
+            this.screenW = window.screen.width;
+            this.screenH = window.screen.height;
+            if (getFullscreenElement()) {
+                exitFullscreen();
+                return;
+            }
+            const container = this.resolveFullscreenContainer();
+            requestFullscreen(container);
+            try {
+                await window.screen.orientation?.lock('landscape');
+            }
+            catch {
+                // ignore
+            }
+            me.preventDefault();
+            me.stopPropagation();
+        }, EVENT_OPTIONS);
+        sync();
+        return btn;
+    }
+    onOverlayChanged() {
+        if (getFullscreenElement()) {
+            const el = getFullscreenElement();
+            if (el) {
+                document.dispatchEvent(new Event('fullscreenchange'));
+            }
+        }
+    }
+}
+function createFullscreenControl() {
+    return new FullscreenControl();
+}
+
+class PlayControl extends BaseControl {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'play'
+        });
+        Object.defineProperty(this, "placement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { v: 'bottom', h: 'left' }
+        });
+    }
+    build() {
+        const core = this.core;
+        const labels = resolveUIConfig(core).labels;
+        const playLabel = labels.play;
+        const pauseLabel = labels.pause;
+        const btn = document.createElement('button');
+        btn.tabIndex = 0;
+        btn.type = 'button';
+        btn.className = 'op-controls__playpause';
+        setA11yLabel(btn, playLabel);
+        btn.setAttribute('aria-pressed', 'false');
+        this.listen(btn, 'click', async (e) => {
+            const me = e;
+            await togglePlayback(core);
+            me.preventDefault();
+            me.stopPropagation();
+        }, EVENT_OPTIONS);
+        const setPlaying = (playing) => {
+            btn.classList.toggle('op-controls__playpause--pause', playing);
+            btn.setAttribute('aria-pressed', playing ? 'true' : 'false');
+            setA11yLabel(btn, playing ? pauseLabel : playLabel);
+        };
+        this.onPlayer('play', () => setPlaying(true));
+        this.onPlayer('pause', () => setPlaying(false));
+        this.onPlayer('playing', () => setPlaying(true));
+        this.onPlayer('pause', () => setPlaying(false));
+        this.onPlayer('ended', () => setPlaying(false));
+        return btn;
+    }
+}
+function createPlayControl() {
+    return new PlayControl();
+}
+
+class ProgressControl extends BaseControl {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'progress'
+        });
+        Object.defineProperty(this, "placement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { v: 'top', h: 'center' }
+        });
+        Object.defineProperty(this, "repaint", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+    }
+    build() {
+        const core = this.core;
+        const ui = resolveUIConfig(core);
+        const { allowRewind, allowSkip, labels } = ui;
+        const progressLabel = labels.progressSlider;
+        const railLabel = labels.progressRail;
+        const progress = document.createElement('div');
+        progress.className = 'op-controls__progress';
+        progress.role = 'group';
+        setA11yLabel(progress, progressLabel);
+        const slider = document.createElement('input');
+        slider.type = 'range';
+        slider.role = 'slider';
+        slider.className = 'op-controls__progress--seek';
+        slider.tabIndex = 0;
+        slider.min = '0';
+        slider.step = '0.1';
+        slider.value = '0';
+        setA11yLabel(slider, railLabel, { container: progress });
+        slider.setAttribute('aria-valuemin', '0');
+        slider.setAttribute('aria-valuenow', '0');
+        const buffer = document.createElement('progress');
+        buffer.className = 'op-controls__progress--buffer';
+        buffer.max = 100;
+        buffer.value = 0;
+        const played = document.createElement('progress');
+        played.className = 'op-controls__progress--played';
+        played.max = 100;
+        played.value = 0;
+        progress.appendChild(slider);
+        progress.appendChild(played);
+        progress.appendChild(buffer);
+        let tooltip;
+        if (!isMobile()) {
+            tooltip = document.createElement('span');
+            tooltip.className = 'op-controls__tooltip';
+            tooltip.tabIndex = -1;
+            tooltip.textContent = '00:00';
+            progress.appendChild(tooltip);
+        }
+        const setPressed = (pressed) => {
+            if (pressed)
+                slider.classList.add('op-progress--pressed');
+            else
+                slider.classList.remove('op-progress--pressed');
+        };
+        this.listen(slider, 'pointerdown', () => setPressed(true));
+        this.listen(slider, 'pointerup', () => setPressed(false));
+        this.listen(slider, 'pointercancel', () => setPressed(false));
+        this.listen(slider, 'mouseleave', () => setPressed(false));
+        // iOS Safari may not reliably fire Pointer Events for <input type="range">.
+        // Ensure tap/drag interactions still mark the slider as "pressed" so seeking commits.
+        this.listen(slider, 'touchstart', () => setPressed(true), EVENT_OPTIONS);
+        this.listen(slider, 'touchend', () => setPressed(false), EVENT_OPTIONS);
+        this.listen(slider, 'mousedown', () => setPressed(true), EVENT_OPTIONS);
+        this.listen(slider, 'mouseup', () => setPressed(false), EVENT_OPTIONS);
+        const clearPressed = () => setPressed(false);
+        this.listen(document, 'pointerup', clearPressed, EVENT_OPTIONS);
+        this.listen(document, 'pointercancel', clearPressed, EVENT_OPTIONS);
+        this.listen(document, 'mouseup', clearPressed, EVENT_OPTIONS);
+        this.listen(document, 'touchend', clearPressed, EVENT_OPTIONS);
+        const setSeekEnabled = (enabled) => {
+            slider.disabled = !enabled;
+            slider.classList.toggle('op-progress--disabled', !enabled);
+            progress.setAttribute('aria-disabled', (!enabled).toString());
+        };
+        const getDuration = () => {
+            if (this.activeOverlay)
+                return this.activeOverlay.duration;
+            return core.media?.duration ?? core.duration;
+        };
+        const getValue = () => {
+            if (this.activeOverlay)
+                return this.activeOverlay.value;
+            return core.media?.currentTime ?? core.currentTime;
+        };
+        const getMode = () => (this.activeOverlay ? this.activeOverlay.mode : 'normal');
+        const updateUI = () => {
+            const duration = getDuration();
+            const value = getValue();
+            const mode = getMode();
+            if ((core.isLive || duration === Infinity) && !this.activeOverlay) {
+                progress.setAttribute('aria-hidden', 'true');
+                return;
+            }
+            progress.setAttribute('aria-hidden', 'false');
+            if (Number.isFinite(duration) && duration > 0) {
+                if (!slider.max || slider.max === '0' || parseFloat(slider.max || '-1') !== duration) {
+                    slider.max = String(duration);
+                    slider.setAttribute('aria-valuemax', String(duration));
+                }
+            }
+            this.repaint = updateUI;
+            if (this.activeOverlay)
+                setSeekEnabled(this.activeOverlay.canSeek);
+            else
+                setSeekEnabled(!core.isLive && core.media?.duration !== Infinity);
+            if (slider.classList.contains('op-progress--pressed'))
+                return;
+            const d = Number.isFinite(duration) && duration > 0 ? duration : 0;
+            const v = Number.isFinite(value) && value >= 0 ? value : 0;
+            slider.value = String(v);
+            slider.setAttribute('aria-valuenow', String(v));
+            const min = parseFloat(slider.min);
+            const max = parseFloat(slider.max);
+            if (Number.isFinite(min) && Number.isFinite(max) && max > min) {
+                const percentage = mode === 'countdown' ? ((max - v - min) * 100) / (max - min) : ((v - min) * 100) / (max - min);
+                slider.style.backgroundSize = `${percentage}% 100%`;
+            }
+            played.value = !d ? 0 : mode === 'countdown' ? ((d - v) / d) * 100 : (v / d) * 100;
+            if (this.activeOverlay && Number.isFinite(this.activeOverlay.bufferedPct)) {
+                buffer.value = Math.max(0, Math.min(100, this.activeOverlay.bufferedPct));
+            }
+        };
+        const seekFromClientX = (clientX) => {
+            if (this.activeOverlay && !this.activeOverlay.canSeek)
+                return;
+            const duration = getDuration();
+            if ((core.isLive || duration === Infinity) && !this.activeOverlay)
+                return;
+            if (!Number.isFinite(duration) || duration <= 0)
+                return;
+            const rect = progress.getBoundingClientRect();
+            const x = clientX - rect.left;
+            const pct = Math.max(0, Math.min(1, x / rect.width));
+            const val = pct * duration;
+            const currTime = getValue();
+            if ((val < currTime && !allowRewind) || (val > currTime && !allowSkip))
+                return;
+            if (Number.isFinite(val)) {
+                slider.value = String(val);
+                core.currentTime = val;
+            }
+        };
+        // On iOS/Android, taps may land on the <progress> overlays instead of the range input.
+        // Implement rail tap-to-seek at the container level so seeking is reliable.
+        this.listen(progress, 'click', (e) => {
+            const me = e;
+            const t = e.target;
+            if (t && t.closest('input[type="range"]'))
+                return;
+            seekFromClientX(me.clientX);
+        }, EVENT_OPTIONS);
+        this.listen(progress, 'touchstart', (e) => {
+            const te = e;
+            const t = e.target;
+            if (t && t.closest('input[type="range"]'))
+                return;
+            const touch = te.touches && te.touches[0];
+            if (!touch)
+                return;
+            // Prevent the synthetic delayed click from fighting our seek.
+            te.preventDefault();
+            seekFromClientX(touch.clientX);
+        }, EVENT_OPTIONS);
+        this.listen(slider, 'change', (e) => {
+            if (this.activeOverlay && !this.activeOverlay.canSeek)
+                return;
+            const target = e.target;
+            const val = parseFloat(target.value);
+            const currTime = getValue();
+            if ((val < currTime && !allowRewind) || (val > currTime && !allowSkip))
+                return;
+            if (Number.isFinite(val))
+                core.currentTime = val;
+            // Release pressed state after a tap-to-seek interaction.
+            setPressed(false);
+        }, EVENT_OPTIONS);
+        this.listen(slider, 'input', (e) => {
+            const pressed = slider.classList.contains('op-progress--pressed');
+            // On iOS Safari a tap can trigger input/change without Pointer Events; allow seek on mobile.
+            if (!pressed && !isMobile())
+                return;
+            if (this.activeOverlay && !this.activeOverlay.canSeek)
+                return;
+            const target = e.target;
+            const min = parseFloat(target.min);
+            const max = parseFloat(target.max);
+            const val = parseFloat(target.value);
+            const currTime = getValue();
+            if ((val < currTime && !allowRewind) || (val > currTime && !allowSkip))
+                return;
+            if (Number.isFinite(min) && Number.isFinite(max) && max > min) {
+                slider.style.backgroundSize = `${((val - min) * 100) / (max - min)}% 100%`;
+            }
+            const duration = getDuration();
+            const d = Number.isFinite(duration) && duration > 0 ? duration : 0;
+            played.value = d ? (val / d) * 100 : 0;
+            core.currentTime = val;
+        }, EVENT_OPTIONS);
+        this.onPlayer('durationchange', updateUI);
+        this.onPlayer('timeupdate', updateUI);
+        this.onPlayer('waiting', () => {
+            if (!slider.classList.contains('loading'))
+                slider.classList.add('loading');
+            if (slider.classList.contains('error'))
+                slider.classList.remove('error');
+        });
+        this.onPlayer('play', () => {
+            if (slider.classList.contains('loading'))
+                slider.classList.remove('loading');
+            if (slider.classList.contains('error'))
+                slider.classList.remove('error');
+            if (!core.isLive && core.media.duration !== Infinity) {
+                progress.removeAttribute('aria-valuenow');
+                progress.removeAttribute('aria-valuetext');
+            }
+        });
+        this.onPlayer('playing', () => {
+            if (slider.classList.contains('loading'))
+                slider.classList.remove('loading');
+            if (slider.classList.contains('error'))
+                slider.classList.remove('error');
+        });
+        this.onPlayer('ended', () => {
+            slider.style.backgroundSize = '0% 100%';
+            if (slider.max)
+                slider.max = '0';
+            buffer.value = 0;
+            played.value = 0;
+        });
+        this.listen(progress, 'pointermove', (e) => {
+            const me = e;
+            if (isMobile())
+                return;
+            if (this.activeOverlay && !this.activeOverlay.canSeek)
+                return;
+            const duration = getDuration();
+            if ((core.isLive || duration === Infinity) && !this.activeOverlay)
+                return;
+            const x = me.pageX;
+            let pos = x - offset(progress).left;
+            const half = tooltip.offsetWidth / 2;
+            const percentage = pos / progress.offsetWidth;
+            const time = percentage * duration;
+            const root = this.resolvePlayerRoot();
+            const limit = root.offsetWidth - tooltip.offsetWidth;
+            if (pos <= 0 || x - offset(root).left <= half)
+                pos = 0;
+            else if (x - offset(root).left >= limit)
+                pos = limit - offset(slider).left - 10;
+            else
+                pos -= half;
+            if (percentage >= 0 && percentage <= 1)
+                tooltip.classList.add('op-controls__tooltip--visible');
+            else
+                tooltip.classList.remove('op-controls__tooltip--visible');
+            tooltip.style.left = `${pos}px`;
+            tooltip.textContent = Number.isNaN(time) ? '00:00' : formatTime(time);
+        }, EVENT_OPTIONS);
+        this.listen(document, 'pointermove', (e) => {
+            const me = e;
+            if (!me.target.closest('.op-controls__progress')) {
+                tooltip.classList.remove('op-controls__tooltip--visible');
+            }
+        }, EVENT_OPTIONS);
+        updateUI();
+        return progress;
+    }
+    onOverlayChanged() {
+        this.repaint?.();
+    }
+}
+function createProgressControl() {
+    return new ProgressControl();
+}
+
+class SettingsControl extends BaseControl {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'settings'
+        });
+        Object.defineProperty(this, "placement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { v: 'bottom', h: 'right' }
+        });
+        Object.defineProperty(this, "root", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "button", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "panel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "view", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "isOpen", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "activeSubmenuId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+    }
+    build() {
+        const labels = resolveUIConfig(this.core).labels;
+        this.root = document.createElement('div');
+        this.root.className = 'op-menu--container';
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.className = 'op-controls__settings';
+        this.button.setAttribute('aria-haspopup', 'menu');
+        this.button.setAttribute('aria-expanded', 'false');
+        setA11yLabel(this.button, labels.settings);
+        this.panel = document.createElement('div');
+        this.panel.className = 'op-menu';
+        this.panel.setAttribute('role', 'menu');
+        this.panel.style.display = 'none';
+        this.view = document.createElement('div');
+        this.view.className = 'op-menu__submenu';
+        this.panel.appendChild(this.view);
+        this.root.appendChild(this.button);
+        this.root.appendChild(this.panel);
+        this.listen(this.button, 'click', (e) => {
+            const me = e;
+            this.toggle();
+            me.preventDefault();
+            me.stopPropagation();
+        }, EVENT_OPTIONS);
+        this.listen(document, 'click', (e) => {
+            if (!this.isOpen)
+                return;
+            const t = e.target;
+            if (!t.closest('.op-menu--container'))
+                this.close();
+        }, EVENT_OPTIONS);
+        this.listen(document, 'keydown', (e) => {
+            if (!this.isOpen)
+                return;
+            const ke = e;
+            if (ke.key === 'Escape')
+                this.close();
+        }, EVENT_OPTIONS);
+        this.dispose.add(this.overlayMgr.bus.on('overlay:changed', () => {
+            this.activeSubmenuId = null;
+            // Always re-compute availability so the control can hide during ads
+            // and re-appear when content resumes, even if the menu isn't open.
+            this.render();
+        }));
+        getSettingsRegistry(this.core).register({
+            id: 'speed',
+            label: labels.speed,
+            getSubmenu: (core) => {
+                const ov = this.overlayMgr.active;
+                if (ov?.id === 'ads')
+                    return null;
+                const rates = [0.5, 0.75, 1, 1.25, 1.5, 2];
+                const current = core.playbackRate || 1;
+                return {
+                    id: 'speed',
+                    label: labels.speed,
+                    items: rates.map((r) => ({
+                        id: String(r),
+                        label: r === 1 ? labels.speedNormal : `${r}x`,
+                        checked: Math.abs(current - r) < 1e-6,
+                        onSelect: () => {
+                            core.playbackRate = r;
+                        },
+                    })),
+                };
+            },
+        });
+        // Re-render on readiness (tracks/rates may appear)
+        this.onPlayer('loadedmetadata', () => {
+            if (this.isOpen)
+                this.render();
+        });
+        return this.root;
+    }
+    toggle() {
+        if (this.isOpen)
+            this.close();
+        else
+            this.open();
+    }
+    open() {
+        this.isOpen = true;
+        this.button.setAttribute('aria-expanded', 'true');
+        this.panel.style.display = 'block';
+        this.render();
+    }
+    close() {
+        this.isOpen = false;
+        this.activeSubmenuId = null;
+        this.button.setAttribute('aria-expanded', 'false');
+        this.panel.style.display = 'none';
+    }
+    render() {
+        const reg = getSettingsRegistry(this.core);
+        const providers = reg.list();
+        const available = providers
+            .map((p) => ({ p, submenu: p.getSubmenu(this.core) }))
+            .filter((x) => x.submenu && x.submenu.items.length);
+        // Hide settings if there's nothing to show
+        this.root.style.display = available.length ? '' : 'none';
+        // Clear view
+        while (this.view.firstChild)
+            this.view.removeChild(this.view.firstChild);
+        const active = this.activeSubmenuId
+            ? (available.find((x) => x.submenu.id === this.activeSubmenuId)?.submenu ?? null)
+            : null;
+        if (!active) {
+            // Root menu listing submenus
+            for (const { submenu } of available) {
+                this.view.appendChild(this.makeRow(submenu.label, () => {
+                    this.activeSubmenuId = submenu.id;
+                    this.render();
+                }));
+            }
+            return;
+        }
+        const header = document.createElement('div');
+        header.className = 'op-menu__header';
+        const back = document.createElement('button');
+        back.type = 'button';
+        back.className = 'op-submenu__back';
+        setA11yLabel(back, 'Back');
+        this.listen(back, 'click', (e) => {
+            const me = e;
+            this.activeSubmenuId = null;
+            this.render();
+            me.preventDefault();
+            me.stopPropagation();
+        }, EVENT_OPTIONS);
+        const title = document.createElement('div');
+        title.className = 'op-controls__settings-title';
+        title.textContent = active.label;
+        header.append(back, title);
+        this.view.appendChild(header);
+        for (const item of active.items) {
+            this.view.appendChild(this.makeRow(item.label, () => {
+                if (item.disabled)
+                    return;
+                item.onSelect();
+                // Recompute submenu after selection
+                this.render();
+            }, item.checked, item.disabled));
+        }
+    }
+    makeRow(label, onClick, checked = false, disabled = false) {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'op-controls__menu-item';
+        btn.setAttribute('role', 'menuitem');
+        btn.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+        btn.setAttribute('aria-checked', checked ? 'true' : 'false');
+        const text = document.createElement('span');
+        text.className = 'op-controls__menu-item-label';
+        text.textContent = label;
+        const mark = document.createElement('span');
+        mark.className = `op-menu__item-check ${checked ? 'checked' : ''}`;
+        btn.append(mark, text);
+        this.listen(btn, 'click', (e) => {
+            const me = e;
+            onClick();
+            me.preventDefault();
+            me.stopPropagation();
+        }, EVENT_OPTIONS);
+        return btn;
+    }
+}
+function createSettingsControl() {
+    return new SettingsControl();
+}
+
+class TimeControl extends BaseControl {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'time'
+        });
+        Object.defineProperty(this, "placement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { v: 'bottom', h: 'left' }
+        });
+    }
+    build() {
+        const core = this.core;
+        const delimiter = document.createElement('span');
+        delimiter.className = 'op-controls__time-delimiter';
+        delimiter.textContent = '/';
+        const container = document.createElement('span');
+        container.className = 'op-controls-time';
+        const currentTime = new CurrentTimeControl().create(core);
+        const duration = new DurationControl().create(core);
+        container.appendChild(currentTime);
+        container.appendChild(delimiter);
+        container.appendChild(duration);
+        return container;
+    }
+}
+function createTimeControl() {
+    return new TimeControl();
+}
+
+class VolumeControl extends BaseControl {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'volume'
+        });
+        Object.defineProperty(this, "placement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { v: 'bottom', h: 'right' }
+        });
+    }
+    build() {
+        const core = this.core;
+        const labels = resolveUIConfig(core).labels;
+        const muteLabel = labels.mute;
+        const unmuteLabel = labels.unmute;
+        const volumeLabel = labels.volume;
+        const volumeControlLabel = labels.volumeControl;
+        const volumeSliderLabel = labels.volumeSlider;
+        const wrapper = document.createElement('div');
+        wrapper.className = 'op-controls__volume';
+        wrapper.tabIndex = 0;
+        wrapper.setAttribute('aria-valuemin', '0');
+        wrapper.setAttribute('aria-valuemax', '100');
+        wrapper.setAttribute('aria-valuenow', `${core.volume}`);
+        setA11yLabel(wrapper, volumeControlLabel);
+        wrapper.setAttribute('aria-orientation', 'vertical');
+        wrapper.setAttribute('role', 'slider');
+        const slider = document.createElement('input');
+        slider.className = 'op-controls__volume--input';
+        slider.tabIndex = -1;
+        slider.type = 'range';
+        slider.value = core.volume.toString();
+        slider.min = '0';
+        slider.max = '1';
+        slider.step = '0.1';
+        setA11yLabel(slider, volumeSliderLabel, { container: wrapper });
+        const display = document.createElement('progress');
+        display.className = 'op-controls__volume--display';
+        display.max = 10;
+        display.value = core.volume * 10;
+        wrapper.appendChild(slider);
+        wrapper.appendChild(display);
+        let lastVolume = core.volume;
+        const formatVolume = (vol) => {
+            if (vol >= 1)
+                return 1;
+            if (vol <= 0)
+                return 0;
+            return vol;
+        };
+        const updateSlider = (vol) => {
+            const v = formatVolume(vol);
+            display.value = v * 10;
+            const formattedVol = Math.floor(v * 100);
+            wrapper.setAttribute('aria-valuenow', `${formattedVol}`);
+            wrapper.setAttribute('aria-valuetext', `${volumeLabel}: ${formattedVol}`);
+        };
+        const updateBtn = (vol) => {
+            const v = formatVolume(vol);
+            if (v <= 0.5 && v > 0) {
+                btn.classList.remove('op-controls__mute--muted');
+                btn.classList.add('op-controls__mute--half');
+            }
+            else if (v === 0) {
+                btn.classList.add('op-controls__mute--muted');
+                btn.classList.remove('op-controls__mute--half');
+            }
+            else {
+                btn.classList.remove('op-controls__mute--muted');
+                btn.classList.remove('op-controls__mute--half');
+            }
+        };
+        this.listen(slider, 'input', (e) => {
+            const vol = Number(e.target.value);
+            const v = formatVolume(vol);
+            lastVolume = v;
+            core.volume = v;
+            core.muted = v === 0;
+            const el = getActiveMedia(core);
+            if (el && el !== core.media) {
+                try {
+                    el.volume = v;
+                    el.muted = v === 0;
+                }
+                catch {
+                    // ignore
+                }
+            }
+            updateSlider(v);
+            updateBtn(v);
+        }, EVENT_OPTIONS);
+        const btn = document.createElement('button');
+        btn.tabIndex = 0;
+        btn.type = 'button';
+        btn.title = muteLabel;
+        btn.className = 'op-controls__mute';
+        setA11yLabel(btn, muteLabel);
+        btn.setAttribute('aria-pressed', 'false');
+        this.listen(btn, 'click', (e) => {
+            const me = e;
+            const el = getActiveMedia(core);
+            if (!core.muted) {
+                if (core.volume > 0)
+                    lastVolume = core.volume;
+                core.volume = 0;
+                core.muted = true;
+                if (el && el !== core.media) {
+                    try {
+                        el.volume = 0;
+                        el.muted = true;
+                        btn.title = muteLabel;
+                        setA11yLabel(btn, muteLabel);
+                    }
+                    catch {
+                        // ignore
+                    }
+                }
+            }
+            else {
+                const restore = lastVolume > 0 ? lastVolume : 1;
+                core.volume = restore;
+                core.muted = false;
+                if (el && el !== core.media) {
+                    try {
+                        el.volume = restore;
+                        el.muted = false;
+                        btn.title = unmuteLabel;
+                        setA11yLabel(btn, unmuteLabel);
+                    }
+                    catch {
+                        // ignore
+                    }
+                }
+            }
+            me.preventDefault();
+            me.stopPropagation();
+        }, EVENT_OPTIONS);
+        this.onPlayer('volumechange', () => {
+            const muted = core.muted || core.volume === 0;
+            const vol = formatVolume(core.volume);
+            if (vol > 0)
+                lastVolume = vol;
+            slider.value = (muted ? 0 : vol).toString();
+            updateSlider(muted ? 0 : vol);
+            updateBtn(muted ? 0 : vol);
+            btn.setAttribute('aria-pressed', muted ? 'true' : 'false');
+            const el = getActiveMedia(core);
+            if (el && el !== core.media) {
+                try {
+                    el.muted = muted;
+                    if (!muted)
+                        el.volume = vol;
+                }
+                catch {
+                    // ignore
+                }
+            }
+        });
+        const container = document.createElement('div');
+        container.className = 'op-controls__volume--container';
+        container.appendChild(btn);
+        container.appendChild(wrapper);
+        return container;
+    }
+}
+function createVolumeControl() {
+    return isMobile() ? null : new VolumeControl();
+}
+
+export { BaseControl, buildControls, createCaptionsControl, createControlGrid, createCurrentTimeControl, createDurationControl, createFullscreenControl, createPlayControl, createProgressControl, createSettingsControl, createTimeControl, createUI, createVolumeControl, defaultLabels, defaultUIConfiguration, extendControls, registerControl, resolveUIConfig, setA11yLabel };
+//# sourceMappingURL=index.js.map