@openplayerjs/player 3.1.0 → 3.1.2

package/dist/index.js

@@ -1,4 +1,4 @@
-import { getOverlayManager, EVENT_OPTIONS, isAudio, isMobile, DisposableStore, formatTime, generateISODateTime, offset } from '@openplayerjs/core';
+import { getOverlayManager, EVENT_OPTIONS, isAudio, isMobile, DisposableStore, getCaptionTrackProvider, formatTime, generateISODateTime, offset } from '@openplayerjs/core';
 
 const defaultUIConfiguration = {
     step: 0,
@@ -21,6 +21,7 @@ const defaultLabels = Object.freeze({
     play: 'Play',
     progressRail: 'Time Rail',
     progressSlider: 'Time Slider',
+    restart: 'Restart',
     settings: 'Player Settings',
     speed: 'Speed',
     speedNormal: 'Normal',
@@ -253,7 +254,7 @@ function bindCenterOverlay(core, keyTarget, bindings) {
                 if (upVolume > 0)
                     lastNonZeroVolume = upVolume;
                 const el = getActiveMedia(core);
-                if (el && el !== core.media) {
+                if (el && el !== core.surface) {
                     try {
                         el.volume = upVolume;
                         el.muted = !(upVolume > 0);
@@ -273,7 +274,7 @@ function bindCenterOverlay(core, keyTarget, bindings) {
                 if (downVolume > 0)
                     lastNonZeroVolume = downVolume;
                 const el = getActiveMedia(core);
-                if (el && el !== core.media) {
+                if (el && el !== core.surface) {
                     try {
                         el.volume = downVolume;
                         el.muted = !(downVolume > 0);
@@ -315,7 +316,7 @@ function bindCenterOverlay(core, keyTarget, bindings) {
                         lastNonZeroVolume = 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;
@@ -329,7 +330,7 @@ function bindCenterOverlay(core, keyTarget, bindings) {
                     const restore = lastNonZeroVolume > 0 ? lastNonZeroVolume : 1;
                     core.volume = restore;
                     core.muted = false;
-                    if (el && el !== core.media) {
+                    if (el && el !== core.surface) {
                         try {
                             el.volume = restore;
                             el.muted = false;
@@ -1058,7 +1059,7 @@ function isRelevantKind(kind) {
 function trackLabel(t, index) {
     return (t.label && t.label.trim()) || (t.language && t.language.trim().toUpperCase()) || `Track ${index + 1}`;
 }
-function listRelevantTracks(media) {
+function listNativeTracks(media) {
     const list = media.textTracks ?? null;
     if (!list)
         return [];
@@ -1073,21 +1074,27 @@ function listRelevantTracks(media) {
     }
     return out;
 }
-function getShowingIndex(media) {
-    const tracks = listRelevantTracks(media);
-    for (const x of tracks) {
+function getNativeShowingIndex(media) {
+    for (const x of listNativeTracks(media)) {
         if (x.track.mode === 'showing')
             return x.index;
     }
     return 'off';
 }
-function setAllOff(media) {
-    for (const x of listRelevantTracks(media))
+function setNativeAllOff(media) {
+    for (const x of listNativeTracks(media))
         x.track.mode = 'disabled';
 }
-function selectIndex(media, index) {
-    for (const x of listRelevantTracks(media)) {
-        x.track.mode = x.index === index ? 'showing' : 'disabled';
+// For ad video: use 'hidden' instead of 'disabled' so the browser keeps the
+// VTT data loaded; 'disabled' discards cue data and the re-fetch on re-enable
+// can silently fail, making captions unrecoverable until the ad restarts.
+function setNativeAllHidden(media) {
+    for (const x of listNativeTracks(media))
+        x.track.mode = 'hidden';
+}
+function selectNativeIndex(media, index, offMode = 'disabled') {
+    for (const x of listNativeTracks(media)) {
+        x.track.mode = x.index === index ? 'showing' : offMode;
     }
 }
 class CaptionsControl extends BaseControl {
@@ -1117,6 +1124,20 @@ class CaptionsControl extends BaseControl {
             writable: true,
             value: null
         });
+        // Separate from lastSelectedIndex (which tracks content-media state) so a
+        // content-video pref can't bleed into ad-video track selection.
+        Object.defineProperty(this, "lastAdTrackIndex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "lastSelectedProviderId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
     }
     build() {
         const core = this.core;
@@ -1128,30 +1149,87 @@ class CaptionsControl extends BaseControl {
         this.button.className = 'op-controls__captions';
         setA11yLabel(this.button, buttonLabel);
         this.button.setAttribute('aria-pressed', 'false');
+        const getProvider = () => getCaptionTrackProvider(core);
+        const getAdVideo = () => {
+            const el = this.activeOverlay?.fullscreenVideoEl;
+            return el instanceof HTMLVideoElement ? el : null;
+        };
         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;
+            const adVideo = getAdVideo();
+            if (this.activeOverlay) {
+                // During an ad overlay, show caption button only if the ad video has tracks.
+                if (adVideo) {
+                    const adTracks = listNativeTracks(adVideo);
+                    this.button.style.display = adTracks.length > 0 ? '' : 'none';
+                    if (adTracks.length > 0) {
+                        const on = getNativeShowingIndex(adVideo) !== 'off';
+                        this.button.classList.toggle('op-controls__captions--on', on);
+                        this.button.setAttribute('aria-pressed', on ? 'true' : 'false');
+                    }
+                }
+                else {
+                    this.button.style.display = 'none';
+                }
+                return;
+            }
+            const provider = getProvider();
+            const nativeTracks = listNativeTracks(core.media);
+            const providerTracks = provider?.getTracks() ?? [];
+            const hasTracks = nativeTracks.length > 0 || providerTracks.length > 0;
+            this.button.style.display = hasTracks ? '' : 'none';
+            const on = provider ? provider.getActiveTrack() !== null : getNativeShowingIndex(core.media) !== 'off';
             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);
+            const adVideo = getAdVideo();
+            if (this.activeOverlay && adVideo) {
+                // Toggle captions on the ad video. Use 'hidden' (not 'disabled') so
+                // the browser keeps VTT data; 'disabled' discards it and re-enabling
+                // silently fails.
+                const showing = getNativeShowingIndex(adVideo);
+                if (showing === 'off') {
+                    const tracks = listNativeTracks(adVideo);
+                    // Use lastAdTrackIndex (ad-specific) — not lastSelectedIndex which
+                    // tracks content-media state and may point to a wrong index.
+                    const idx = this.lastAdTrackIndex ?? tracks[0]?.index;
+                    if (typeof idx === 'number')
+                        selectNativeIndex(adVideo, idx, 'hidden');
+                }
+                else {
+                    setNativeAllHidden(adVideo);
+                }
             }
             else {
-                setAllOff(media);
+                const provider = getProvider();
+                if (provider) {
+                    const active = provider.getActiveTrack();
+                    if (active !== null) {
+                        provider.setTrack(null);
+                    }
+                    else {
+                        const tracks = provider.getTracks();
+                        const id = this.lastSelectedProviderId ?? tracks[0]?.id ?? null;
+                        provider.setTrack(id);
+                        if (id) {
+                            this.lastSelectedProviderId = id;
+                        }
+                    }
+                }
+                else {
+                    const showing = getNativeShowingIndex(core.media);
+                    if (showing === 'off') {
+                        const tracks = listNativeTracks(core.media);
+                        const idx = this.lastSelectedIndex ?? tracks[0]?.index;
+                        if (typeof idx === 'number')
+                            selectNativeIndex(core.media, idx);
+                    }
+                    else {
+                        setNativeAllOff(core.media);
+                    }
+                }
             }
             refresh();
             me.preventDefault();
@@ -1161,11 +1239,77 @@ class CaptionsControl extends BaseControl {
             id: 'captions',
             label,
             getSubmenu: () => {
-                const media = getActiveMedia(core);
-                const tracks = listRelevantTracks(media);
-                if (!tracks.length)
+                const adVideo = getAdVideo();
+                if (this.activeOverlay && adVideo) {
+                    // Show ad video's caption tracks in the submenu
+                    const adTracks = listNativeTracks(adVideo);
+                    if (!adTracks.length)
+                        return null;
+                    const showing = getNativeShowingIndex(adVideo);
+                    return {
+                        id: 'captions',
+                        label,
+                        items: [
+                            {
+                                id: 'off',
+                                label: labels.off,
+                                checked: showing === 'off',
+                                onSelect: () => {
+                                    setNativeAllHidden(adVideo);
+                                    refresh();
+                                },
+                            },
+                            ...adTracks.map((x) => ({
+                                id: String(x.index),
+                                label: trackLabel(x.track, x.index),
+                                checked: x.index === showing,
+                                onSelect: () => {
+                                    selectNativeIndex(adVideo, x.index, 'hidden');
+                                    this.lastAdTrackIndex = x.index;
+                                    refresh();
+                                },
+                            })),
+                        ],
+                    };
+                }
+                if (this.activeOverlay)
+                    return null;
+                const captionProvider = getProvider();
+                const nativeTracks = listNativeTracks(core.media);
+                if (captionProvider) {
+                    const providerTracks = captionProvider.getTracks();
+                    if (!providerTracks.length)
+                        return null;
+                    const active = captionProvider.getActiveTrack();
+                    return {
+                        id: 'captions',
+                        label,
+                        items: [
+                            {
+                                id: 'off',
+                                label: labels.off,
+                                checked: active === null,
+                                onSelect: () => {
+                                    captionProvider.setTrack(null);
+                                    refresh();
+                                },
+                            },
+                            ...providerTracks.map((t) => ({
+                                id: t.id,
+                                label: t.label || t.language || t.id,
+                                checked: t.id === active,
+                                onSelect: () => {
+                                    captionProvider.setTrack(t.id);
+                                    this.lastSelectedProviderId = t.id;
+                                    refresh();
+                                },
+                            })),
+                        ],
+                    };
+                }
+                if (!nativeTracks.length)
                     return null;
-                const showing = getShowingIndex(media);
+                const showing = getNativeShowingIndex(core.media);
                 return {
                     id: 'captions',
                     label,
@@ -1175,16 +1319,16 @@ class CaptionsControl extends BaseControl {
                             label: labels.off,
                             checked: showing === 'off',
                             onSelect: () => {
-                                setAllOff(media);
+                                setNativeAllOff(core.media);
                                 refresh();
                             },
                         },
-                        ...tracks.map((x) => ({
+                        ...nativeTracks.map((x) => ({
                             id: String(x.index),
                             label: trackLabel(x.track, x.index),
                             checked: x.index === showing,
                             onSelect: () => {
-                                selectIndex(media, x.index);
+                                selectNativeIndex(core.media, x.index);
                                 this.lastSelectedIndex = x.index;
                                 refresh();
                             },
@@ -1194,8 +1338,26 @@ class CaptionsControl extends BaseControl {
             },
         };
         getSettingsRegistry(core).register(provider);
-        this.dispose.add(this.overlayMgr.bus.on('overlay:changed', refresh));
-        this.onPlayer('loadedmetadata', refresh);
+        this.dispose.add(this.overlayMgr.bus.on('overlay:changed', (ov) => {
+            if (ov) {
+                // Defer: mountAdVideo attaches caption tracks after activate() fires overlay:changed.
+                Promise.resolve().then(() => refresh());
+            }
+            else {
+                // Ad ended — reset the per-ad track preference so the next ad starts fresh.
+                this.lastAdTrackIndex = null;
+                refresh();
+            }
+        }));
+        this.onPlayer('loadedmetadata', () => {
+            const captionProvider = getProvider();
+            refresh();
+            // If the engine exposes a subscribe hook, wire it up so it can push
+            // track-list updates (e.g. YouTube captions module loads after onReady).
+            if (captionProvider?.subscribe) {
+                this.dispose.add(captionProvider.subscribe(() => refresh()));
+            }
+        });
         refresh();
         return this.button;
     }
@@ -1400,25 +1562,36 @@ class FullscreenControl extends BaseControl {
         const resize = (width, height) => {
             const container = this.resolveFullscreenContainer();
             const video = this.resolveFullscreenVideoEl();
+            // For iframe engines the video element is hidden; also resize its parent (.op-media)
+            // so the iframe (position:absolute inside it) fills the fullscreen viewport.
+            const mediaContainer = video?.parentElement ?? null;
             if (width) {
                 container.style.width = '100%';
                 if (video)
                     video.style.width = '100%';
+                if (mediaContainer && mediaContainer !== container)
+                    mediaContainer.style.width = '100%';
             }
             else {
                 container.style.removeProperty('width');
                 if (video)
                     video.style.removeProperty('width');
+                if (mediaContainer && mediaContainer !== container)
+                    mediaContainer.style.removeProperty('width');
             }
             if (height) {
                 container.style.height = '100%';
                 if (video)
                     video.style.height = '100%';
+                if (mediaContainer && mediaContainer !== container)
+                    mediaContainer.style.height = '100%';
             }
             else {
                 container.style.removeProperty('height');
                 if (video)
                     video.style.removeProperty('height');
+                if (mediaContainer && mediaContainer !== container)
+                    mediaContainer.style.removeProperty('height');
             }
         };
         const sync = () => {
@@ -1524,10 +1697,19 @@ class PlayControl extends BaseControl {
             btn.setAttribute('aria-pressed', playing ? 'true' : 'false');
             setA11yLabel(btn, isEnded && !playing ? restartLabel : playing ? pauseLabel : playLabel);
         };
-        this.onPlayer('play', () => { isEnded = false; setPlaying(true); });
-        this.onPlayer('playing', () => { isEnded = false; setPlaying(true); });
+        this.onPlayer('play', () => {
+            isEnded = false;
+            setPlaying(true);
+        });
+        this.onPlayer('playing', () => {
+            isEnded = false;
+            setPlaying(true);
+        });
         this.onPlayer('pause', () => setPlaying(false));
-        this.onPlayer('ended', () => { isEnded = true; setPlaying(false); });
+        this.onPlayer('ended', () => {
+            isEnded = true;
+            setPlaying(false);
+        });
         return btn;
     }
 }