openplayerjs - npm Package Compare versions

Comparing version 2.14.2 to 2.14.3

dist/esm/controls/captions.js

@@ -12,6 +12,5 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
 };
-var _Captions_player, _Captions_button, _Captions_captions, _Captions_menu, _Captions_events, _Captions_langTracks, _Captions_mediaTrackList, _Captions_trackUrlList, _Captions_hasTracks, _Captions_currentTrack, _Captions_default, _Captions_controlPosition, _Captions_controlLayer;
+var _Captions_player, _Captions_button, _Captions_captions, _Captions_menu, _Captions_events, _Captions_mediaTrackList, _Captions_hasTracks, _Captions_currentTrack, _Captions_default, _Captions_controlPosition, _Captions_controlLayer;
 import { EVENT_OPTIONS, IS_ANDROID, IS_IOS } from '../utils/constants';
-import { addEvent, getAbsoluteUrl, isJson, sanitize } from '../utils/general';
-import { timeToSeconds } from '../utils/time';
+import { addEvent } from '../utils/general';
 class Captions {
@@ -28,5 +27,3 @@ constructor(player, position, layer) {
         });
-        _Captions_langTracks.set(this, {});
         _Captions_mediaTrackList.set(this, void 0);
-        _Captions_trackUrlList.set(this, {});
         _Captions_hasTracks.set(this, void 0);
@@ -40,29 +37,12 @@ _Captions_currentTrack.set(this, void 0);
         __classPrivateFieldSet(this, _Captions_controlLayer, layer, "f");
-        this._getCuesFromText = this._getCuesFromText.bind(this);
-        this._getNativeCues = this._getNativeCues.bind(this);
-        this._displayCaptions = this._displayCaptions.bind(this);
-        this._hideCaptions = this._hideCaptions.bind(this);
-        this._search = this._search.bind(this);
-        this._prepareTrack = this._prepareTrack.bind(this);
         this._formatMenuItems = this._formatMenuItems.bind(this);
+        this._setDefaultTrack = this._setDefaultTrack.bind(this);
     }
     create() {
-        const trackList = __classPrivateFieldGet(this, _Captions_player, "f").getElement().textTracks;
-        const tracks = [];
-        for (let i = 0, total = trackList.length; i < total; i++) {
-            const selector = [
-                `track[kind="subtitles"][srclang="${trackList[i].language}"][label="${trackList[i].label}"]`,
-                `track[kind="captions"][srclang="${trackList[i].language}"][label="${trackList[i].label}"]`,
-            ];
-            const tag = __classPrivateFieldGet(this, _Captions_player, "f").getElement().querySelector(selector.join(', '));
-            if (tag) {
-                tracks.push(trackList[i]);
-            }
-        }
-        if (!tracks.length) {
-            for (let i = 0, total = trackList.length; i < total; i++) {
-                tracks.push(trackList[i]);
-            }
-        }
-        __classPrivateFieldSet(this, _Captions_mediaTrackList, tracks, "f");
+        var _a;
+        const { textTracks } = __classPrivateFieldGet(this, _Captions_player, "f").getElement();
+        const { labels, detachMenus } = __classPrivateFieldGet(this, _Captions_player, "f").getOptions();
+        __classPrivateFieldSet(this, _Captions_mediaTrackList, Object.keys(textTracks)
+            .map((k) => textTracks[Number(k)])
+            .filter((el) => ['subtitles', 'captions'].includes(el.kind) && el.language), "f");
         __classPrivateFieldSet(this, _Captions_hasTracks, !!__classPrivateFieldGet(this, _Captions_mediaTrackList, "f").length, "f");
@@ -72,3 +52,2 @@ if (!__classPrivateFieldGet(this, _Captions_hasTracks, "f")) {
         }
-        const { labels, detachMenus } = __classPrivateFieldGet(this, _Captions_player, "f").getOptions();
         __classPrivateFieldSet(this, _Captions_button, document.createElement('button'), "f");
@@ -82,2 +61,6 @@ __classPrivateFieldGet(this, _Captions_button, "f").className = `op-controls__captions op-control__${__classPrivateFieldGet(this, _Captions_controlPosition, "f")}`;
         __classPrivateFieldGet(this, _Captions_button, "f").setAttribute('data-active-captions', 'off');
+        __classPrivateFieldSet(this, _Captions_captions, document.createElement('div'), "f");
+        __classPrivateFieldGet(this, _Captions_captions, "f").className = 'op-captions';
+        const target = __classPrivateFieldGet(this, _Captions_player, "f").getContainer();
+        target.insertBefore(__classPrivateFieldGet(this, _Captions_captions, "f"), target.firstChild);
         if (detachMenus) {
@@ -93,82 +76,31 @@ __classPrivateFieldGet(this, _Captions_button, "f").classList.add('op-control--no-hover');
             </div>`;
-        }
-        for (let i = 0, trackItems = __classPrivateFieldGet(this, _Captions_player, "f").getElement().querySelectorAll('track'), total = trackItems.length; i < total; i++) {
-            const element = trackItems[i];
-            if (element.kind === 'subtitles' || element.kind === 'captions') {
-                if (element.default) {
-                    __classPrivateFieldSet(this, _Captions_default, element.srclang, "f");
-                    __classPrivateFieldGet(this, _Captions_button, "f").setAttribute('data-active-captions', element.srclang);
-                }
-                const trackUrl = getAbsoluteUrl(element.src);
-                const currTrack = __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")[i];
-                if (currTrack && currTrack.language === element.srclang) {
-                    if (currTrack.cues && currTrack.cues.length > 0) {
-                        __classPrivateFieldGet(this, _Captions_langTracks, "f")[element.srclang] = this._getNativeCues(__classPrivateFieldGet(this, _Captions_mediaTrackList, "f")[i]);
-                        this._prepareTrack(i, element.srclang, trackUrl, element.default || false);
-                    }
-                    else {
-                        fetch(trackUrl)
-                            .then((response) => {
-                            if (!response.ok) {
-                                throw new Error('Network response was not ok');
-                            }
-                            return response.text();
-                        })
-                            .then((d) => {
-                            __classPrivateFieldGet(this, _Captions_langTracks, "f")[element.srclang] = this._getCuesFromText(d);
-                            this._prepareTrack(i, element.srclang, trackUrl, element.default || false);
-                            const selector = `.op-subtitles__option[data-value="captions-${__classPrivateFieldGet(this, _Captions_mediaTrackList, "f")[i].language}"]`;
-                            if (__classPrivateFieldGet(this, _Captions_menu, "f") && !__classPrivateFieldGet(this, _Captions_menu, "f").querySelector(selector)) {
-                                const item = document.createElement('div');
-                                const label = (labels === null || labels === void 0 ? void 0 : labels.lang) ? labels.lang[__classPrivateFieldGet(this, _Captions_mediaTrackList, "f")[i].language] : null;
-                                item.className = 'op-settings__submenu-item';
-                                item.tabIndex = 0;
-                                item.setAttribute('role', 'menuitemradio');
-                                item.setAttribute('aria-checked', __classPrivateFieldGet(this, _Captions_default, "f") === __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")[i].language ? 'true' : 'false');
-                                item.innerHTML = `<div class="op-settings__submenu-label op-subtitles__option"
-                                        data-value="captions-${__classPrivateFieldGet(this, _Captions_mediaTrackList, "f")[i].language}">
-                                        ${label || __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")[i].label}
-                                    </div>`;
-                                __classPrivateFieldGet(this, _Captions_menu, "f").appendChild(item);
-                            }
-                        });
-                    }
-                }
+            const itemContainer = document.createElement('div');
+            itemContainer.className = `op-controls__container op-control__${__classPrivateFieldGet(this, _Captions_controlPosition, "f")}`;
+            itemContainer.append(__classPrivateFieldGet(this, _Captions_button, "f"), __classPrivateFieldGet(this, _Captions_menu, "f"));
+            __classPrivateFieldGet(this, _Captions_player, "f").getControls().getLayer(__classPrivateFieldGet(this, _Captions_controlLayer, "f")).append(itemContainer);
+            for (const track of __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")) {
+                const item = document.createElement('div');
+                const label = ((_a = labels === null || labels === void 0 ? void 0 : labels.lang) === null || _a === void 0 ? void 0 : _a[track.language]) || null;
+                item.className = 'op-settings__submenu-item';
+                item.tabIndex = 0;
+                item.setAttribute('role', 'menuitemradio');
+                item.setAttribute('aria-checked', __classPrivateFieldGet(this, _Captions_default, "f") === track.language ? 'true' : 'false');
+                item.innerHTML = `<div class="op-settings__submenu-label op-subtitles__option"
+                    data-value="captions-${track.language}">
+                    ${label || track.label}
+                </div>`;
+                __classPrivateFieldGet(this, _Captions_menu, "f").append(item);
             }
         }
-        __classPrivateFieldSet(this, _Captions_captions, document.createElement('div'), "f");
-        __classPrivateFieldGet(this, _Captions_captions, "f").className = 'op-captions';
-        __classPrivateFieldGet(this, _Captions_captions, "f").innerHTML = '<span></span>';
-        const container = __classPrivateFieldGet(this, _Captions_captions, "f").querySelector('span');
-        __classPrivateFieldGet(this, _Captions_events, "f").media.timeupdate = () => {
-            if (__classPrivateFieldGet(this, _Captions_player, "f").isMedia()) {
-                if (__classPrivateFieldGet(this, _Captions_currentTrack, "f")) {
-                    const currentCues = __classPrivateFieldGet(this, _Captions_langTracks, "f")[__classPrivateFieldGet(this, _Captions_currentTrack, "f").language];
-                    if (container && currentCues !== undefined) {
-                        const index = this._search(currentCues, __classPrivateFieldGet(this, _Captions_player, "f").getMedia().currentTime);
-                        container.innerHTML = '';
-                        if (index > -1 && __classPrivateFieldGet(this, _Captions_button, "f").classList.contains('op-controls__captions--on')) {
-                            __classPrivateFieldGet(this, _Captions_captions, "f").classList.add('op-captions--on');
-                            container.innerHTML = sanitize(currentCues[index].text, false);
-                        }
-                        else {
-                            this._hideCaptions();
-                        }
-                    }
-                }
-                else {
-                    this._hideCaptions();
-                }
-            }
-            else {
-                this._hideCaptions();
-            }
-        };
+        else {
+            __classPrivateFieldGet(this, _Captions_player, "f").getControls().getLayer(__classPrivateFieldGet(this, _Captions_controlLayer, "f")).append(__classPrivateFieldGet(this, _Captions_button, "f"));
+        }
         __classPrivateFieldGet(this, _Captions_events, "f").button.click = (e) => {
+            var _a;
             const button = e.target;
             if (detachMenus) {
                 const menus = __classPrivateFieldGet(this, _Captions_player, "f").getContainer().querySelectorAll('.op-settings');
-                for (let i = 0, total = menus.length; i < total; ++i) {
-                    if (menus[i] !== __classPrivateFieldGet(this, _Captions_menu, "f")) {
-                        menus[i].setAttribute('aria-hidden', 'true');
+                for (const menuItem of Array.from(menus)) {
+                    if (menuItem !== __classPrivateFieldGet(this, _Captions_menu, "f")) {
+                        menuItem.setAttribute('aria-hidden', 'true');
                     }
@@ -186,3 +118,2 @@ }
                 if (button.classList.contains('op-controls__captions--on')) {
-                    this._hideCaptions();
                     button.classList.remove('op-controls__captions--on');
@@ -192,10 +123,8 @@ button.setAttribute('data-active-captions', 'off');
                 else {
-                    if (!__classPrivateFieldGet(this, _Captions_currentTrack, "f")) {
-                        const [track] = __classPrivateFieldGet(this, _Captions_mediaTrackList, "f");
-                        __classPrivateFieldSet(this, _Captions_currentTrack, track, "f");
-                    }
-                    this._displayCaptions();
                     button.classList.add('op-controls__captions--on');
-                    button.setAttribute('data-active-captions', __classPrivateFieldGet(this, _Captions_currentTrack, "f").language);
+                    button.setAttribute('data-active-captions', ((_a = __classPrivateFieldGet(this, _Captions_currentTrack, "f")) === null || _a === void 0 ? void 0 : _a.language) || '');
                 }
+                for (const track of __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")) {
+                    track.mode = button.getAttribute('data-active-captions') === track.language ? 'showing' : 'hidden';
+                }
             }
@@ -227,30 +156,15 @@ };
         };
-        if (__classPrivateFieldGet(this, _Captions_hasTracks, "f")) {
-            const target = __classPrivateFieldGet(this, _Captions_player, "f").getContainer();
-            target.insertBefore(__classPrivateFieldGet(this, _Captions_captions, "f"), target.firstChild);
-            if (detachMenus) {
-                const itemContainer = document.createElement('div');
-                itemContainer.className = `op-controls__container op-control__${__classPrivateFieldGet(this, _Captions_controlPosition, "f")}`;
-                itemContainer.appendChild(__classPrivateFieldGet(this, _Captions_button, "f"));
-                itemContainer.appendChild(__classPrivateFieldGet(this, _Captions_menu, "f"));
-                __classPrivateFieldGet(this, _Captions_player, "f").getControls().getLayer(__classPrivateFieldGet(this, _Captions_controlLayer, "f")).appendChild(itemContainer);
-            }
-            else {
-                __classPrivateFieldGet(this, _Captions_player, "f").getControls().getLayer(__classPrivateFieldGet(this, _Captions_controlLayer, "f")).appendChild(__classPrivateFieldGet(this, _Captions_button, "f"));
-            }
-            __classPrivateFieldGet(this, _Captions_button, "f").addEventListener('click', __classPrivateFieldGet(this, _Captions_events, "f").button.click, EVENT_OPTIONS);
-        }
-        if ((__classPrivateFieldGet(this, _Captions_mediaTrackList, "f").length <= 1 && !detachMenus) || (!__classPrivateFieldGet(this, _Captions_mediaTrackList, "f").length && detachMenus)) {
-            return;
-        }
+        __classPrivateFieldGet(this, _Captions_button, "f").addEventListener('click', __classPrivateFieldGet(this, _Captions_events, "f").button.click, EVENT_OPTIONS);
         __classPrivateFieldGet(this, _Captions_events, "f").global.click = (e) => {
             const option = e.target;
             if (option.closest(`#${__classPrivateFieldGet(this, _Captions_player, "f").id}`) && option.classList.contains('op-subtitles__option')) {
-                const langEl = option.getAttribute('data-value');
-                const language = langEl ? langEl.replace('captions-', '') : '';
-                const currentLang = Array.from(__classPrivateFieldGet(this, _Captions_mediaTrackList, "f")).filter((item) => item.language === language);
-                __classPrivateFieldSet(this, _Captions_currentTrack, currentLang ? currentLang.pop() : undefined, "f");
+                const language = option.getAttribute('data-value').replace('captions-', '');
+                for (const track of __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")) {
+                    track.mode = track.language === language ? 'showing' : 'hidden';
+                    if (track.language === language) {
+                        __classPrivateFieldSet(this, _Captions_currentTrack, track, "f");
+                    }
+                }
                 if (detachMenus) {
                     if (__classPrivateFieldGet(this, _Captions_button, "f").classList.contains('op-controls__captions--on')) {
-                        this._hideCaptions();
                         __classPrivateFieldGet(this, _Captions_button, "f").classList.remove('op-controls__captions--on');
@@ -260,19 +174,13 @@ __classPrivateFieldGet(this, _Captions_button, "f").setAttribute('data-active-captions', 'off');
                     else {
-                        this._displayCaptions();
                         __classPrivateFieldGet(this, _Captions_button, "f").classList.add('op-controls__captions--on');
                         __classPrivateFieldGet(this, _Captions_button, "f").setAttribute('data-active-captions', language);
                     }
-                    if (option.parentElement && option.parentElement.parentElement) {
-                        const captions = option.parentElement.parentElement.querySelectorAll('.op-settings__submenu-item');
-                        for (let i = 0, total = captions.length; i < total; ++i) {
-                            captions[i].setAttribute('aria-checked', 'false');
-                        }
+                    const captions = __classPrivateFieldGet(this, _Captions_menu, "f").querySelectorAll('.op-settings__submenu-item');
+                    for (const caption of Array.from(captions)) {
+                        caption.setAttribute('aria-checked', 'false');
                     }
-                    if (option.parentElement) {
-                        option.parentElement.setAttribute('aria-checked', 'true');
-                    }
+                    option.parentElement.setAttribute('aria-checked', 'true');
                     __classPrivateFieldGet(this, _Captions_menu, "f").setAttribute('aria-hidden', 'false');
                 }
                 else {
-                    this._displayCaptions();
                     __classPrivateFieldGet(this, _Captions_button, "f").setAttribute('data-active-captions', language);
@@ -284,2 +192,33 @@ }
         };
+        __classPrivateFieldGet(this, _Captions_events, "f").global.cuechange = (e) => {
+            var _a;
+            while (__classPrivateFieldGet(this, _Captions_captions, "f").lastChild) {
+                __classPrivateFieldGet(this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(this, _Captions_captions, "f").lastChild);
+            }
+            const t = e.target;
+            if (t.mode !== 'showing') {
+                return;
+            }
+            if (t.activeCues && ((_a = t.activeCues) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                for (const cue of Array.from(t.activeCues)) {
+                    const content = (cue === null || cue === void 0 ? void 0 : cue.text) || '';
+                    if (content) {
+                        __classPrivateFieldGet(this, _Captions_captions, "f").classList.add('op-captions--on');
+                        const caption = document.createElement('span');
+                        caption.innerHTML = content;
+                        __classPrivateFieldGet(this, _Captions_captions, "f").prepend(caption);
+                    }
+                    else {
+                        while (__classPrivateFieldGet(this, _Captions_captions, "f").lastChild) {
+                            __classPrivateFieldGet(this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(this, _Captions_captions, "f").lastChild);
+                        }
+                    }
+                }
+            }
+            else {
+                while (__classPrivateFieldGet(this, _Captions_captions, "f").lastChild) {
+                    __classPrivateFieldGet(this, _Captions_captions, "f").removeChild(__classPrivateFieldGet(this, _Captions_captions, "f").lastChild);
+                }
+            }
+        };
         if (detachMenus) {
@@ -291,24 +230,35 @@ __classPrivateFieldGet(this, _Captions_button, "f").addEventListener('mouseover', __classPrivateFieldGet(this, _Captions_events, "f").button.mouseover, EVENT_OPTIONS);
         }
-        if (typeof __classPrivateFieldGet(this, _Captions_events, "f").global.click !== 'undefined') {
-            document.addEventListener('click', __classPrivateFieldGet(this, _Captions_events, "f").global.click, EVENT_OPTIONS);
+        document.addEventListener('click', __classPrivateFieldGet(this, _Captions_events, "f").global.click, EVENT_OPTIONS);
+        for (const track of __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")) {
+            track.mode = track.mode !== 'showing' ? 'hidden' : track.mode;
+            track.addEventListener('cuechange', __classPrivateFieldGet(this, _Captions_events, "f").global.cuechange, EVENT_OPTIONS);
         }
+        const targetTrack = __classPrivateFieldGet(this, _Captions_player, "f")
+            .getElement()
+            .querySelector('track:is([kind="subtitles"],[kind="captions"])[default]');
+        if (targetTrack) {
+            const matchTrack = __classPrivateFieldGet(this, _Captions_mediaTrackList, "f").find((el) => el.language === targetTrack.srclang);
+            if (matchTrack) {
+                this._setDefaultTrack(matchTrack);
+            }
+        }
     }
     destroy() {
         const { detachMenus } = __classPrivateFieldGet(this, _Captions_player, "f").getOptions();
-        if (typeof __classPrivateFieldGet(this, _Captions_events, "f").global.click !== 'undefined') {
-            document.removeEventListener('click', __classPrivateFieldGet(this, _Captions_events, "f").global.click);
+        if (!__classPrivateFieldGet(this, _Captions_hasTracks, "f")) {
+            return;
         }
-        if (__classPrivateFieldGet(this, _Captions_hasTracks, "f")) {
-            __classPrivateFieldGet(this, _Captions_button, "f").removeEventListener('click', __classPrivateFieldGet(this, _Captions_events, "f").button.click);
-            if (detachMenus) {
-                __classPrivateFieldGet(this, _Captions_button, "f").removeEventListener('mouseover', __classPrivateFieldGet(this, _Captions_events, "f").button.mouseover);
-                __classPrivateFieldGet(this, _Captions_menu, "f").removeEventListener('mouseover', __classPrivateFieldGet(this, _Captions_events, "f").button.mouseover);
-                __classPrivateFieldGet(this, _Captions_menu, "f").removeEventListener('mouseout', __classPrivateFieldGet(this, _Captions_events, "f").button.mouseout);
-                __classPrivateFieldGet(this, _Captions_player, "f").getElement().removeEventListener('controlshidden', __classPrivateFieldGet(this, _Captions_events, "f").button.mouseout);
-                __classPrivateFieldGet(this, _Captions_menu, "f").remove();
-            }
-            __classPrivateFieldGet(this, _Captions_player, "f").getElement().removeEventListener('timeupdate', __classPrivateFieldGet(this, _Captions_events, "f").media.timeupdate);
-            __classPrivateFieldGet(this, _Captions_button, "f").remove();
-            __classPrivateFieldGet(this, _Captions_captions, "f").remove();
+        for (const track of __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")) {
+            track.removeEventListener('cuechange', __classPrivateFieldGet(this, _Captions_events, "f").global.cuechange);
         }
+        document.removeEventListener('click', __classPrivateFieldGet(this, _Captions_events, "f").global.click);
+        __classPrivateFieldGet(this, _Captions_button, "f").removeEventListener('click', __classPrivateFieldGet(this, _Captions_events, "f").button.click);
+        if (detachMenus) {
+            __classPrivateFieldGet(this, _Captions_button, "f").removeEventListener('mouseover', __classPrivateFieldGet(this, _Captions_events, "f").button.mouseover);
+            __classPrivateFieldGet(this, _Captions_menu, "f").removeEventListener('mouseover', __classPrivateFieldGet(this, _Captions_events, "f").button.mouseover);
+            __classPrivateFieldGet(this, _Captions_menu, "f").removeEventListener('mouseout', __classPrivateFieldGet(this, _Captions_events, "f").button.mouseout);
+            __classPrivateFieldGet(this, _Captions_player, "f").getElement().removeEventListener('controlshidden', __classPrivateFieldGet(this, _Captions_events, "f").button.mouseout);
+            __classPrivateFieldGet(this, _Captions_menu, "f").remove();
+        }
+        __classPrivateFieldGet(this, _Captions_button, "f").remove();
     }
@@ -331,118 +281,31 @@ addSettings() {
     }
-    _getCuesFromText(vttText) {
-        const lines = vttText.split(/\r?\n/);
-        const entries = [];
-        const urlRegexp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
-        let timePattern = '^((?:[0-9]{1,2}:)?[0-9]{2}:[0-9]{2}([,.][0-9]{1,3})?) --> ';
-        timePattern += '((?:[0-9]{1,2}:)?[0-9]{2}:[0-9]{2}([,.][0-9]{3})?)(.*?)$';
-        const regexp = new RegExp(timePattern);
-        let identifier;
-        for (let i = 0, total = lines.length; i < total; i++) {
-            const timeCode = regexp.exec(lines[i]);
-            if (timeCode && i < lines.length) {
-                if (i - 1 >= 0 && lines[i - 1] !== '') {
-                    identifier = lines[i - 1];
-                }
-                i++;
-                let cue = lines[i];
-                i++;
-                while (lines[i] !== '' && i < lines.length) {
-                    cue = `${cue}\n${lines[i]}`;
-                    i++;
-                }
-                cue = cue.trim().replace(urlRegexp, "<a href='$1' target='_blank'>$1</a>");
-                const initTime = timeToSeconds(timeCode[1]);
-                entries.push({
-                    endTime: timeToSeconds(timeCode[3]),
-                    identifier: identifier || '',
-                    settings: isJson(timeCode[5]) ? JSON.parse(timeCode[5]) : {},
-                    startTime: initTime === 0 ? 0.2 : initTime,
-                    text: cue,
-                });
-            }
-            identifier = '';
+    _formatMenuItems() {
+        const { labels, detachMenus } = __classPrivateFieldGet(this, _Captions_player, "f").getOptions();
+        if (__classPrivateFieldGet(this, _Captions_mediaTrackList, "f").length <= 1 && !detachMenus) {
+            return [];
         }
-        return entries;
-    }
-    _getNativeCues(track) {
-        const cues = [];
-        const trackCues = track.cues;
-        Object.keys(trackCues).forEach((index) => {
-            const j = parseInt(index, 10);
-            const current = trackCues[j];
-            cues.push({
-                endTime: current.endTime,
-                identifier: current.id,
-                settings: {},
-                startTime: current.startTime,
-                text: current.text,
-            });
-        });
-        return cues;
-    }
-    _displayCaptions() {
-        if (!__classPrivateFieldGet(this, _Captions_captions, "f") || !__classPrivateFieldGet(this, _Captions_currentTrack, "f") || __classPrivateFieldGet(this, _Captions_currentTrack, "f").cues === undefined) {
-            return;
-        }
-        const container = __classPrivateFieldGet(this, _Captions_captions, "f").querySelector('span');
-        if (container) {
-            container.innerHTML = '';
-        }
-        __classPrivateFieldGet(this, _Captions_player, "f").getElement().addEventListener('timeupdate', __classPrivateFieldGet(this, _Captions_events, "f").media.timeupdate, EVENT_OPTIONS);
-    }
-    _hideCaptions() {
-        __classPrivateFieldGet(this, _Captions_captions, "f").classList.remove('op-captions--on');
-        if (!__classPrivateFieldGet(this, _Captions_currentTrack, "f")) {
-            __classPrivateFieldGet(this, _Captions_button, "f").classList.remove('op-controls__captions--on');
-            __classPrivateFieldGet(this, _Captions_button, "f").setAttribute('data-active-captions', 'off');
-        }
-    }
-    _search(tracks, currentTime) {
-        let low = 0;
-        let high = tracks.length - 1;
-        while (low <= high) {
-            const mid = (low + high) >> 1;
-            const start = tracks[mid].startTime;
-            const stop = tracks[mid].endTime;
-            if (currentTime >= start && currentTime < stop) {
-                return mid;
-            }
-            if (start < currentTime) {
-                low = mid + 1;
-            }
-            else if (start > currentTime) {
-                high = mid - 1;
-            }
-        }
-        return -1;
-    }
-    _prepareTrack(index, language, trackUrl, showTrack = false) {
-        __classPrivateFieldGet(this, _Captions_trackUrlList, "f")[language] = trackUrl;
-        __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")[index].mode = 'disabled';
-        if (showTrack) {
-            __classPrivateFieldSet(this, _Captions_default, language, "f");
-            __classPrivateFieldGet(this, _Captions_button, "f").classList.add('op-controls__captions--on');
-            __classPrivateFieldGet(this, _Captions_button, "f").setAttribute('data-active-captions', language);
-            __classPrivateFieldSet(this, _Captions_currentTrack, Array.from(__classPrivateFieldGet(this, _Captions_mediaTrackList, "f"))
-                .filter((item) => item.language === __classPrivateFieldGet(this, _Captions_default, "f"))
-                .pop(), "f");
-            this._displayCaptions();
-            if (!__classPrivateFieldGet(this, _Captions_player, "f").getContainer().classList.contains('op-captions--detected')) {
-                __classPrivateFieldGet(this, _Captions_player, "f").getContainer().classList.add('op-captions--detected');
-            }
-        }
-    }
-    _formatMenuItems() {
-        const { labels } = __classPrivateFieldGet(this, _Captions_player, "f").getOptions();
         let items = [{ key: 'off', label: (labels === null || labels === void 0 ? void 0 : labels.off) || '' }];
-        for (let i = 0, total = __classPrivateFieldGet(this, _Captions_mediaTrackList, "f").length; i < total; i++) {
-            const track = __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")[i];
+        for (const track of __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")) {
             const label = (labels === null || labels === void 0 ? void 0 : labels.lang) ? labels.lang[track.language] : null;
             items = items.filter((el) => el.key !== track.language);
-            items.push({ key: track.language, label: label || __classPrivateFieldGet(this, _Captions_mediaTrackList, "f")[i].label });
+            items.push({ key: track.language, label: label || track.label });
         }
         return items;
     }
+    _setDefaultTrack(track) {
+        var _a, _b;
+        track.mode = 'showing';
+        __classPrivateFieldSet(this, _Captions_default, track.language, "f");
+        __classPrivateFieldGet(this, _Captions_button, "f").setAttribute('data-active-captions', __classPrivateFieldGet(this, _Captions_default, "f"));
+        __classPrivateFieldGet(this, _Captions_button, "f").classList.add('op-controls__captions--on');
+        __classPrivateFieldSet(this, _Captions_currentTrack, track, "f");
+        const options = document.querySelectorAll('.op-settings__submenu-item') || [];
+        for (const option of Array.from(options)) {
+            option.setAttribute('aria-checked', 'false');
+        }
+        (_b = (_a = document
+            .querySelector(`.op-subtitles__option[data-value="captions-${track.language}"]`)) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-checked', 'true');
+    }
 }
-_Captions_player = new WeakMap(), _Captions_button = new WeakMap(), _Captions_captions = new WeakMap(), _Captions_menu = new WeakMap(), _Captions_events = new WeakMap(), _Captions_langTracks = new WeakMap(), _Captions_mediaTrackList = new WeakMap(), _Captions_trackUrlList = new WeakMap(), _Captions_hasTracks = new WeakMap(), _Captions_currentTrack = new WeakMap(), _Captions_default = new WeakMap(), _Captions_controlPosition = new WeakMap(), _Captions_controlLayer = new WeakMap();
+_Captions_player = new WeakMap(), _Captions_button = new WeakMap(), _Captions_captions = new WeakMap(), _Captions_menu = new WeakMap(), _Captions_events = new WeakMap(), _Captions_mediaTrackList = new WeakMap(), _Captions_hasTracks = new WeakMap(), _Captions_currentTrack = new WeakMap(), _Captions_default = new WeakMap(), _Captions_controlPosition = new WeakMap(), _Captions_controlLayer = new WeakMap();
 export default Captions;

docs/usage.md

@@ -11,3 +11,3 @@ # Usage
 
-Optionally, if you want to use VTT closed captions, need to add the `track` tag as indicated in the snippet above; you can also use the `default` attribute in the tag, but as a rule of thumb, all the attributes displayed below in the `track` tag **MUST** be there; otherwise, closed captions won't be displayed.
+Optionally, if you want to support closed captions, need to add the `track` tag as indicated in the snippet above; you can also use the `default` attribute in the tag, but as a rule of thumb, all the attributes displayed below in the `track` tag **MUST** be there; otherwise, closed captions won't be displayed. More information about this [here](#about-captions-and-subtitles).
 
@@ -174,2 +174,34 @@ ```html
 
+### About captions and subtitles
+
+Given the changes performed in browser for security purposes, captions and subtitle files will need to have CORS permissions if they come from a different domain in order to be supported by OpenPlayerJS.
+
+OpenPlayerJS supports *Web Video Text Tracks Format* (WebVTT) and *SubRip Subtitle* (SRT) files for captions and subtitles; however, WebVTT files are encouraged since they are fully compatible with iOS devices, specially when using full screen mode in smartphones. The reason behind this is because iOS will default to the native phone media player, and its player doesn't have support for other formats in terms of captions/subtitles.
+
+Also, if you are planning to have full support for captions/subtitles across devices, it is important to note that, for Safari, **at least one track tag needs to be present**. So, if you are looking to add captions/subtitles dynamically, make sure that you have a default track element with an empty.vtt file as source. That way, the empty file won't be displayed at all and the dynamically added ones will be considered. For example:
+
+```html
+<video id="video" class="op-player op-player__media" controls playsinline>
+    <source src="/path/to/video.mp4" type="video/mp4" />
+    <track kind="subtitles" src="/path/to/empty.vtt" />
+</video>
+<script>
+    const player = new OpenPlayerJS('video');
+    player.addCaptions({
+        srclang: 'en',
+        src: '/path/to/english.vtt',
+        kind: 'captions',
+        label: 'English',
+        default: true
+    });
+    player.addCaptions({
+        srclang: 'ja',
+        src: '/path/to/ja.vtt',
+        kind: 'subtitles',
+        label: '日本語'
+    });
+    player.init();
+</script>
+```
+
 ### About the usage of third-party libraries
@@ -176,0 +208,0 @@

package.json

 {
     "name": "openplayerjs",
-    "version": "2.14.2",
+    "version": "2.14.3",
     "homepage": "https://www.openplayerjs.com/",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -22,3 +22,2 @@ # [OpenPlayer.js](https://www.openplayerjs.com)
 -   Runs a simple but yet powerful algorithm to **check the browser's autoplay capabilities** across browsers.
--   Supports for **local and remote captions** for **both video and audio**, even without including the `crossorigin` attribute.
 -   **Enhance your player** adding your own buttons. Check [here](./docs/customize.md) for more details.
@@ -25,0 +24,0 @@ -   Provides the ability to use a **single VAST/VPAID** source or a **VAST/VPAID playlist** from several different sources (including URLs and valid XML strings).

types/controls/captions.d.ts

@@ -6,13 +6,9 @@ import { PlayerComponent, SettingsItem } from '../interfaces';
     constructor(player: Player, position: string, layer: string);
+    custom?: boolean | undefined;
     create(): void;
     destroy(): void;
     addSettings(): SettingsItem | unknown;
-    private _getCuesFromText;
-    private _getNativeCues;
-    private _displayCaptions;
-    private _hideCaptions;
-    private _search;
-    private _prepareTrack;
     private _formatMenuItems;
+    private _setDefaultTrack;
 }
 export default Captions;

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

1690930

decreased by-1.42%

Lines of code

14993

decreased by-1.54%

Number of lines in readme file

133

decreased by-0.75%

No dependency changes