@gcorevideo/player 2.30.0 → 2.30.2

package/dist/index.embed.js

@@ -49867,6 +49867,48 @@ Hls.defaultConfig = void 0;
 // export const CLAPPR_VERSION: string = process.env.CLAPPR_VERSION || '0.11.3';
 const CLAPPR_VERSION$1 = '0.13.0';
 
+class RangesList {
+    // TODO write an efficient implementation
+    items = [];
+    insert(start, end, value) {
+        const index = this.findIndex((start + end) / 2);
+        this.items.splice(index, 0, [start, end, value]);
+    }
+    find(position) {
+        const index = this.findIndex(position);
+        const item = this.items[index];
+        if (!item || item[0] > position || item[1] < position) {
+            return null;
+        }
+        return item[2];
+    }
+    findIndex(position) {
+        let low = 0;
+        let high = this.items.length;
+        let index = 0;
+        while (low < high) {
+            index = low + Math.floor((high - low) / 2);
+            const item = this.items[index];
+            if (item[0] > position) {
+                if (index === low) {
+                    return index;
+                }
+                high = index;
+                continue;
+            }
+            if (item[1] <= position) {
+                if (index === high - 1) {
+                    return index + 1;
+                }
+                low = index + 1;
+                continue;
+            }
+            break;
+        }
+        return index;
+    }
+}
+
 // Copyright 2014 Globo.com Player authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found on https://github.com/clappr/hlsjs-playback/blob/main/LICENSE
@@ -49876,7 +49918,6 @@ const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
 const T$7 = 'playback.hls';
 class HlsPlayback extends BasePlayback {
-    _ccTracksUpdated = false;
     _currentFragment = null;
     _currentLevel = null;
     _durationExcludesAfterLiveSyncPoint = false;
@@ -49901,7 +49942,8 @@ class HlsPlayback extends BasePlayback {
     _timeUpdateTimer = null;
     oncueenter = null;
     oncueexit = null;
-    cues = []; // TODO check the list size and use BST if needed
+    cues = null;
+    cuesByTrack = {};
     currentCueId = null;
     /**
      * @internal
@@ -50098,7 +50140,6 @@ class HlsPlayback extends BasePlayback {
         }
         this._manifestParsed = false;
         // this._ccIsSetup = false
-        this._ccTracksUpdated = false;
         this._setInitialState();
         this._hls.destroy();
         this._hls = null;
@@ -50152,12 +50193,20 @@ class HlsPlayback extends BasePlayback {
         this._hls.on(Events.AUDIO_TRACK_SWITCHED, (evt, data) => this._onAudioTrackSwitched(evt, data));
         this._hls.on(Events.CUES_PARSED, (evt, data) => {
             data.cues?.forEach((cue) => {
-                this.cues.push({
+                if (!this.cues) {
+                    const trackId = this._hls.subtitleTrack;
+                    if (!this.cuesByTrack[trackId]) {
+                        this.cuesByTrack[trackId] = new RangesList();
+                    }
+                    this.cues = this.cuesByTrack[trackId];
+                }
+                const cueInfo = {
                     id: cue.id,
                     start: cue.startTime,
                     end: cue.endTime,
                     text: cue.text,
-                });
+                };
+                this.cues.insert(cue.startTime, cue.endTime, cueInfo);
             });
         });
         this.bindCustomListeners();
@@ -50384,7 +50433,7 @@ class HlsPlayback extends BasePlayback {
         }
     }
     reload() {
-        this.cues = [];
+        this.cues = null;
         this.currentCueId = null;
         this._hls?.startLoad(-1);
     }
@@ -50449,9 +50498,7 @@ class HlsPlayback extends BasePlayback {
     }
     triggerCues() {
         const currentTime = this.getCurrentTime();
-        // const cues = Object.values(this.cues)
-        // TODO build a search tree
-        const cue = this.cues.find((cue) => currentTime >= cue.start && currentTime <= cue.end);
+        const cue = this.cues?.find(currentTime);
         if (cue) {
             this.currentCueId = cue.id;
             this.oncueenter?.(cue);
@@ -50494,20 +50541,14 @@ class HlsPlayback extends BasePlayback {
     destroy() {
         this._stopTimeUpdateTimer();
         this._destroyHLSInstance();
+        this.cues = null;
+        this.cuesByTrack = {};
         return super.destroy();
     }
     _updatePlaybackType(evt, data) {
         const prevPlaybackType = this._playbackType;
         this._playbackType = (data.details.live ? Playback.LIVE : Playback.VOD);
         this._onLevelUpdated(evt, data);
-        // Live stream subtitle tracks detection hack (may not immediately available)
-        // if (
-        //   this._ccTracksUpdated &&
-        //   this._playbackType === Playback.LIVE &&
-        //   this.hasClosedCaptionsTracks
-        // ) {
-        //   this._onSubtitleLoaded()
-        // }
         if (prevPlaybackType !== this._playbackType) {
             this._updateSettings();
         }
@@ -50727,7 +50768,10 @@ class HlsPlayback extends BasePlayback {
             return;
         }
         this._hls.subtitleTrack = id;
-        this.cues = [];
+        if (!this.cuesByTrack[id]) {
+            this.cuesByTrack[id] = new RangesList();
+        }
+        this.cues = this.cuesByTrack[id];
     }
     /**
      * @override
@@ -50736,7 +50780,7 @@ class HlsPlayback extends BasePlayback {
         return this.getTextTracks();
     }
     getTextTracks() {
-        return this._hls?.subtitleTracks.map((t) => ({
+        return (this._hls?.subtitleTracks.map((t) => ({
             id: t.id,
             name: t.name,
             track: {
@@ -50744,7 +50788,7 @@ class HlsPlayback extends BasePlayback {
                 label: t.name,
                 language: t.lang,
             },
-        })) || [];
+        })) || []);
     }
 }
 HlsPlayback.canPlay = function (resource, mimeType) {
@@ -51357,7 +51401,7 @@ function insertStyle(css) {
 
 insertStyle("@import \"https://fonts.googleapis.com/css?family=Roboto\";\n:root {\n  --theme-background-color: rgb(0 0 0 / 70%);\n  --theme-text-color: rgb(255 255 255 / 100%);\n  --theme-foreground-color: rgb(201 201 201 / 100%);\n  --theme-hover-color: rgb(255 255 255 / 100%);\n}\n\n.gcore-skin-bg-color {\n  background-color: var(--theme-background-color) !important;\n}\n\n.gcore-skin-text-color {\n  color: var(--theme-text-color) !important;\n}\n\n.gcore-skin-text-color svg {\n  fill: var(--theme-text-color) !important;\n}\n\n.gcore-skin-text-color svg path {\n  fill: var(--theme-text-color) !important;\n}\n\n.gcore-skin-border-textarea-color {\n  border-color: var(--theme-text-color) !important;\n}\n\n.gcore-skin-button-color {\n  color: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color svg {\n  fill: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color svg path {\n  fill: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color svg path.icon-hover {\n  fill: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color[data-fullscreen] svg {\n  stroke: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color[data-fullscreen] svg path {\n  stroke: var(--theme-foreground-color) !important;\n}\n\n.gcore-skin-main-color {\n  background-color: var(--theme-foreground-color);\n}\n\n.gcore-skin-border-color {\n  border-color: var(--theme-foreground-color) !important;\n}\n\n.gcore-skin-button-color:hover {\n  color: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-button-color:hover svg {\n  fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-button-color:hover svg path {\n  fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-border-color:hover {\n  border-color: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-button-with-bg-color:hover svg path.icon-hover {\n  fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-active {\n  color: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-active svg {\n  fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-active svg path {\n  fill: var(--theme-hover-color) !important;\n}\n\n* {\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  user-select: none;\n}\n\n.player-poster {\n  background-size: contain !important;\n}\n\n.spinner-three-bounce > .gcore-skin-main-color {\n  box-shadow: 4px 4px 9px 1px rgba(36, 61, 81, 0.51);\n}\n\n.gplayer-lite-btn {\n  cursor: pointer;\n  border: none;\n  margin: 0;\n  padding: 0;\n  width: auto;\n  overflow: visible;\n  background: transparent;\n  /* inherit font & color from ancestor */\n  color: inherit;\n  font: inherit;\n  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */\n  line-height: normal;\n  /* Corrects font smoothing for webkit */\n  -webkit-font-smoothing: inherit;\n  -moz-osx-font-smoothing: inherit;\n  /* Corrects inability to style clickable `input` types in iOS */\n  appearance: none;\n  /* Remove excess padding and border in Firefox 4+ */\n}\n.gplayer-lite-btn::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}");
 
-const pluginHtml$4 = "<button class='gcore-skin-button-color media-control-dd' id=\"gplayer-audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n    <span class=\"media-control-dd__text\" id=\"gplayer-audiotracks-button-text\"><%= title %></span>\n    <span class=\"media-control-dd__arrow\"><%= icon %></span>\n</button>\n<ul class=\"gcore-skin-bg-color menu media-control-dd__popup\" id=\"gplayer-audiotracks-menu\" role=\"menu\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class=\"gcore-skin-text-color\" data-item=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\n                <%= track.label %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
+const pluginHtml$4 = "<button class='gcore-skin-button-color media-control-dd' id=\"gplayer-audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n    <span class=\"media-control-dd__text\" id=\"gplayer-audiotracks-button-text\"><%= title %></span>\n    <span class=\"media-control-dd__arrow\"><%= icon %></span>\n</button>\n<ul class=\"gcore-skin-bg-color menu media-control-dd__popup\" id=\"gplayer-audiotracks-menu\" role=\"menu\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class=\"gcore-skin-text-color\" data-item=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\n                <%= track.label || track.language %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
 
 const audioArrow = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"9px\" height=\"6px\" viewBox=\"0 0 9 6\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n     xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->\n  <title>quality-arrow</title>\n  <desc>Created with Sketch.</desc>\n  <defs></defs>\n  <g id=\"quality-arrow\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n    <path\n      d=\"M5.07079194,5.78553848 C4.91457318,5.94277844 4.70551573,6.00941824 4.50028717,5.99893557 C4.2950586,6.00941824 4.08676693,5.94277844 3.92978239,5.78553848 L0.221118462,1.2997069 C-0.0737061539,1.00469478 -0.0737061539,0.526236029 0.221118462,0.231972666 C0.515177299,-0.0630394586 1.23500883,0.00734414472 1.64852907,0.00734414472 L7.77475484,0.00734414472 C8.21201421,0.00734414472 8.48539703,-0.0630394586 8.77945587,0.231972666 C9.07351471,0.526236029 9.07351471,1.00469478 8.77945587,1.2997069 L5.07079194,5.78553848 Z\"\n      fill=\"#FFFFFE\"></path>\n  </g>\n</svg>\n";
 
@@ -53011,7 +53055,6 @@ function mergeElements(a, b) {
 }
 
 const VERSION$6 = '2.22.4';
-// const T = 'plugins.audiotracks'
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @public
@@ -53026,6 +53069,7 @@ class AudioTracks extends UICorePlugin {
     currentTrack = null;
     open = false;
     tracks = [];
+    autoUpdateTimerId = null;
     /**
      * @internal
      */
@@ -53086,19 +53130,18 @@ class AudioTracks extends UICorePlugin {
     onActiveContainerChanged() {
         this.currentTrack = null;
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_AUDIO_AVAILABLE, (tracks) => {
+            const currentTrackId = this.core.activeContainer.currentAudioTrack?.id ??
+                this.core.activePlayback?.currentAudioTrack?.id;
             this.currentTrack =
-                tracks.find((track) => track.kind === 'main') ?? null; // TODO test
+                tracks.find((track) => track.id === currentTrackId) ??
+                    tracks.find((track) => track.kind === 'main') ??
+                    tracks[0] ??
+                    null;
             this.tracks = tracks;
             this.render();
             this.mount();
         });
-        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_AUDIO_CHANGED, (track) => {
-            this.currentTrack = track;
-            this.highlightCurrentTrack();
-            this.buttonElement().removeClass('changing');
-            this.updateText();
-        });
-        // TODO test
+        this.bindContainerAudioChanged();
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_CLICK, () => {
             this.hideMenu();
         });
@@ -53106,6 +53149,21 @@ class AudioTracks extends UICorePlugin {
             this.clickaway(null);
         });
     }
+    bindContainerAudioChanged() {
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_AUDIO_CHANGED, (track) => {
+            this.setCurrentTrack(track);
+        });
+    }
+    setCurrentTrack(track) {
+        if (this.autoUpdateTimerId) {
+            clearTimeout(this.autoUpdateTimerId);
+            this.autoUpdateTimerId = null;
+        }
+        this.currentTrack = track;
+        this.highlightCurrentTrack();
+        this.buttonElement().removeClass('changing');
+        this.updateText();
+    }
     shouldRender() {
         // Render is called from the parent class constructor so tracks aren't available
         // Only care if we have at least 2 to choose from
@@ -53138,7 +53196,7 @@ class AudioTracks extends UICorePlugin {
     selectAudioTrack(id) {
         this.startTrackSwitching();
         this.core.activeContainer.switchAudioTrack(id);
-        this.updateText();
+        this.autoUpdateSelected(id);
     }
     hideMenu() {
         this.open = false;
@@ -53189,7 +53247,7 @@ class AudioTracks extends UICorePlugin {
         if (!this.currentTrack) {
             return;
         }
-        this.buttonElementText().text(this.currentTrack.label);
+        this.buttonElementText().text(this.getTitle());
     }
     highlightCurrentTrack() {
         this.trackElement().removeClass('current');
@@ -53210,6 +53268,15 @@ class AudioTracks extends UICorePlugin {
             this.core.getPlugin('media_control')?.slot('audiotracks', this.$el);
         }
     }
+    autoUpdateSelected(id) {
+        if (this.autoUpdateTimerId) {
+            clearTimeout(this.autoUpdateTimerId);
+        }
+        this.autoUpdateTimerId = setTimeout(() => {
+            const track = this.tracks.find(t => t.id === id) ?? null;
+            this.setCurrentTrack(track);
+        }, 500);
+    }
     clickaway = mediaControlClickaway(() => this.hideMenu());
 }
 
@@ -58849,8 +58916,6 @@ class ClosedCaptions extends UICorePlugin {
         // event.target does not exist for some reason in tests
         const id = Number((event.target ?? event.currentTarget).dataset?.item ??
             '-1');
-        // TODO review, make configurable, and emit event in addition
-        // localStorage.setItem(LOCAL_STORAGE_CC_ID, id) // TODO store language instead?
         this.userSelectedItemId = id;
         this.selectItem(this.findById(id));
         this.hideMenu();