@openplayerjs/player 3.0.1 → 3.1.0

package/dist/index.js

@@ -168,13 +168,13 @@ function getActiveMedia(core) {
     try {
         const hasOverlayMgr = typeof getOverlayManager === 'function';
         if (!hasOverlayMgr)
-            return core.media;
+            return core.surface;
         const active = getOverlayManager(core)?.active;
         const v = active?.fullscreenVideoEl;
-        return v && typeof v.play === 'function' ? v : core.media;
+        return v && typeof v.play === 'function' ? v : core.surface;
     }
     catch {
-        return core.media;
+        return core.surface;
     }
 }
 async function togglePlayback(core) {
@@ -736,6 +736,7 @@ function createUI(core, media, controls, options = {}) {
     const KEYBOARD_SHOW_MS = 6500;
     let hideTimer;
     let lastInteraction = 'pointer';
+    let menuOpen = false;
     const controlsHaveFocus = () => controlsRoot.contains(document.activeElement);
     const showControls = () => {
         wrapper.classList.remove('op-controls--hidden');
@@ -743,9 +744,10 @@ function createUI(core, media, controls, options = {}) {
         if (hideTimer)
             window.clearTimeout(hideTimer);
         controlsRoot.setAttribute('aria-hidden', 'false');
+        core.events.emit('ui:controls:show');
     };
     const hideControls = () => {
-        if (core.media.paused || core.media.ended)
+        if (core.surface.paused || core.surface.ended)
             return;
         if (controlsHaveFocus()) {
             if (lastInteraction === 'keyboard') {
@@ -758,11 +760,14 @@ function createUI(core, media, controls, options = {}) {
         wrapper.classList.add('op-controls--hidden');
         mediaContainer.classList.add('op-media--controls-hidden');
         controlsRoot.setAttribute('aria-hidden', 'true');
+        core.events.emit('ui:controls:hide');
     };
     const scheduleHide = (ms) => {
         if (alwaysVisible)
             return;
-        if (core.media.paused || core.media.ended)
+        if (menuOpen)
+            return;
+        if (core.surface.paused || core.surface.ended)
             return;
         if (hideTimer)
             window.clearTimeout(hideTimer);
@@ -853,7 +858,7 @@ function createUI(core, media, controls, options = {}) {
         // 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;
+        const isPlaying = !core.surface.paused && !core.surface.ended;
         if (isPlaying) {
             overlay?.flashPause(350);
             core.pause();
@@ -865,6 +870,15 @@ function createUI(core, media, controls, 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 offMenuOpen = core.events.on('ui:menu:open', () => {
+        menuOpen = true;
+        if (hideTimer)
+            window.clearTimeout(hideTimer);
+    });
+    const offMenuClose = core.events.on('ui:menu:close', () => {
+        menuOpen = false;
+        scheduleHide();
+    });
     const offDestroy = core.events.on('player:destroy', () => {
         try {
             createdControls.forEach((c) => c.destroy?.());
@@ -888,6 +902,8 @@ function createUI(core, media, controls, options = {}) {
             offPlaying?.();
             offPause?.();
             offEnded?.();
+            offMenuOpen?.();
+            offMenuClose?.();
             offAddElement();
             offAddControl();
             offDestroy();
@@ -1219,7 +1235,7 @@ class CurrentTimeControl extends BaseControl {
         const update = () => {
             if (this.activeOverlay) {
                 el.setAttribute('aria-hidden', 'false');
-                el.innerText = formatTime(this.activeOverlay.value);
+                el.innerText = formatTime(Math.ceil(this.activeOverlay.value));
                 return;
             }
             if (core.isLive) {
@@ -1484,6 +1500,8 @@ class PlayControl extends BaseControl {
         const labels = resolveUIConfig(core).labels;
         const playLabel = labels.play;
         const pauseLabel = labels.pause;
+        const restartLabel = labels.restart;
+        let isEnded = false;
         const btn = document.createElement('button');
         btn.tabIndex = 0;
         btn.type = 'button';
@@ -1492,20 +1510,24 @@ class PlayControl extends BaseControl {
         btn.setAttribute('aria-pressed', 'false');
         this.listen(btn, 'click', async (e) => {
             const me = e;
-            await togglePlayback(core);
             me.preventDefault();
             me.stopPropagation();
+            if (isEnded) {
+                const media = getActiveMedia(core);
+                media.currentTime = 0;
+            }
+            await togglePlayback(core);
         }, EVENT_OPTIONS);
         const setPlaying = (playing) => {
             btn.classList.toggle('op-controls__playpause--pause', playing);
+            btn.classList.toggle('op-controls__playpause--replay', isEnded && !playing);
             btn.setAttribute('aria-pressed', playing ? 'true' : 'false');
-            setA11yLabel(btn, playing ? pauseLabel : playLabel);
+            setA11yLabel(btn, isEnded && !playing ? restartLabel : playing ? pauseLabel : playLabel);
         };
-        this.onPlayer('play', () => setPlaying(true));
+        this.onPlayer('play', () => { isEnded = false; setPlaying(true); });
+        this.onPlayer('playing', () => { isEnded = false; setPlaying(true); });
         this.onPlayer('pause', () => setPlaying(false));
-        this.onPlayer('playing', () => setPlaying(true));
-        this.onPlayer('pause', () => setPlaying(false));
-        this.onPlayer('ended', () => setPlaying(false));
+        this.onPlayer('ended', () => { isEnded = true; setPlaying(false); });
         return btn;
     }
 }
@@ -1607,12 +1629,12 @@ class ProgressControl extends BaseControl {
         const getDuration = () => {
             if (this.activeOverlay)
                 return this.activeOverlay.duration;
-            return core.media?.duration ?? core.duration;
+            return core.surface?.duration ?? core.duration;
         };
         const getValue = () => {
             if (this.activeOverlay)
                 return this.activeOverlay.value;
-            return core.media?.currentTime ?? core.currentTime;
+            return core.surface?.currentTime ?? core.currentTime;
         };
         const getMode = () => (this.activeOverlay ? this.activeOverlay.mode : 'normal');
         const updateUI = () => {
@@ -1634,7 +1656,7 @@ class ProgressControl extends BaseControl {
             if (this.activeOverlay)
                 setSeekEnabled(this.activeOverlay.canSeek);
             else
-                setSeekEnabled(!core.isLive && core.media?.duration !== Infinity);
+                setSeekEnabled(!core.isLive && core.surface?.duration !== Infinity);
             if (slider.classList.contains('op-progress--pressed'))
                 return;
             const d = Number.isFinite(duration) && duration > 0 ? duration : 0;
@@ -1741,7 +1763,7 @@ class ProgressControl extends BaseControl {
                 slider.classList.remove('loading');
             if (slider.classList.contains('error'))
                 slider.classList.remove('error');
-            if (!core.isLive && core.media.duration !== Infinity) {
+            if (!core.isLive && core.surface.duration !== Infinity) {
                 progress.removeAttribute('aria-valuenow');
                 progress.removeAttribute('aria-valuetext');
             }
@@ -1873,6 +1895,7 @@ class SettingsControl extends BaseControl {
         this.panel = document.createElement('div');
         this.panel.className = 'op-menu';
         this.panel.setAttribute('role', 'menu');
+        this.panel.tabIndex = -1;
         this.panel.style.display = 'none';
         this.view = document.createElement('div');
         this.view.className = 'op-menu__submenu';
@@ -1899,11 +1922,38 @@ class SettingsControl extends BaseControl {
             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();
+        // Close the menu when focus moves outside the player (matching YouTube behaviour).
+        this.listen(document, 'focusout', () => {
+            if (!this.isOpen)
+                return;
+            window.setTimeout(() => {
+                const playerEl = this.button.closest('.op-player');
+                if (playerEl && !playerEl.contains(document.activeElement))
+                    this.close();
+            }, 0);
+        }, EVENT_OPTIONS);
+        let knownOverlayId = null;
+        this.dispose.add(this.overlayMgr.bus.on('overlay:changed', (ov) => {
+            const newId = ov?.id ?? null;
+            // Only reset submenu navigation when the overlay identity changes
+            // (e.g. ad starts or ends). update() fires overlay:changed on every
+            // timeupdate — we must not reset the user's submenu position then.
+            if (newId !== knownOverlayId) {
+                knownOverlayId = newId;
+                this.activeSubmenuId = null;
+                // Dismiss the menu on any context switch (ad↔content) so the user
+                // never sees a stale track list from the previous context. It is safe
+                // to rebuild here because the ad / content transition has completed.
+                if (this.isOpen)
+                    this.close();
+                else
+                    this.render();
+            }
+            else if (!this.isOpen) {
+                // Periodic timeupdate ticks: only re-render visibility when closed
+                // to avoid destroying buttons the user is actively clicking.
+                this.render();
+            }
         }));
         getSettingsRegistry(this.core).register({
             id: 'speed',
@@ -1912,7 +1962,7 @@ class SettingsControl extends BaseControl {
                 const ov = this.overlayMgr.active;
                 if (ov?.id === 'ads')
                     return null;
-                const rates = [0.5, 0.75, 1, 1.25, 1.5, 2];
+                const rates = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5];
                 const current = core.playbackRate || 1;
                 return {
                     id: 'speed',
@@ -1946,14 +1996,22 @@ class SettingsControl extends BaseControl {
         this.button.setAttribute('aria-expanded', 'true');
         this.panel.style.display = 'block';
         this.render();
+        this.core.events.emit('ui:menu:open');
     }
     close() {
         this.isOpen = false;
         this.activeSubmenuId = null;
         this.button.setAttribute('aria-expanded', 'false');
         this.panel.style.display = 'none';
+        this.core.events.emit('ui:menu:close');
     }
     render() {
+        // If focus is inside the menu container, move it to the panel before clearing
+        // the DOM so the browser doesn't relocate focus to <body>, which would cause
+        // the focusout handler to close the menu mid-navigation.
+        if (this.isOpen && this.root.contains(document.activeElement)) {
+            this.panel.focus({ preventScroll: true });
+        }
         const reg = getSettingsRegistry(this.core);
         const providers = reg.list();
         const available = providers
@@ -2164,7 +2222,7 @@ class VolumeControl extends BaseControl {
             core.volume = v;
             core.muted = v === 0;
             const el = getActiveMedia(core);
-            if (el && el !== core.media) {
+            if (el && el !== core.surface) {
                 try {
                     el.volume = v;
                     el.muted = v === 0;
@@ -2184,7 +2242,7 @@ class VolumeControl extends BaseControl {
                     lastVolume = core.volume;
                 core.volume = 0;
                 core.muted = true;
-                if (el && el !== core.media) {
+                if (el && el !== core.surface) {
                     try {
                         el.volume = 0;
                         el.muted = true;
@@ -2200,7 +2258,7 @@ class VolumeControl extends BaseControl {
                 const restore = lastVolume > 0 ? lastVolume : 1;
                 core.volume = restore;
                 core.muted = false;
-                if (el && el !== core.media) {
+                if (el && el !== core.surface) {
                     try {
                         el.volume = restore;
                         el.muted = false;
@@ -2224,7 +2282,7 @@ class VolumeControl extends BaseControl {
             updateSlider(muted ? 0 : vol);
             updateBtn(muted ? 0 : vol);
             const el = getActiveMedia(core);
-            if (el && el !== core.media) {
+            if (el && el !== core.surface) {
                 try {
                     el.muted = muted;
                     if (!muted)
@@ -2245,7 +2303,7 @@ class VolumeControl extends BaseControl {
             updateBtn(muted ? 0 : vol);
             btn.setAttribute('aria-pressed', muted ? 'true' : 'false');
             const el = getActiveMedia(core);
-            if (el && el !== core.media) {
+            if (el && el !== core.surface) {
                 try {
                     el.muted = muted;
                     if (!muted)