@gcorevideo/player 2.30.0 → 2.30.2

package/dist/index.js

@@ -12922,7 +12922,7 @@ var PlaybackEvents;
 // https://github.com/clappr/clappr/blob/8752995ea439321ac7ca3cd35e8c64de7a3c3d17/LICENSE
 const AUTO$1 = -1;
 const { now: now$2 } = Utils;
-const T$f = 'playback.dash';
+const T$g = 'playback.dash';
 class DashPlayback extends BasePlayback {
     _levels = [];
     _currentLevel = AUTO$1;
@@ -13199,7 +13199,7 @@ class DashPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onPlaybackError = (event) => {
-        trace(`${T$f} _onPlaybackError`, { type: event.type, code: event.error.code, message: event.error.message });
+        trace(`${T$g} _onPlaybackError`, { type: event.type, code: event.error.code, message: event.error.message });
     };
     _onDASHJSSError = (event) => {
         this._stopTimeUpdateTimer();
@@ -50092,6 +50092,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
@@ -50099,9 +50141,8 @@ const { now } = Utils;
 const AUTO = -1;
 const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-const T$e = 'playback.hls';
+const T$f = 'playback.hls';
 class HlsPlayback extends BasePlayback {
-    _ccTracksUpdated = false;
     _currentFragment = null;
     _currentLevel = null;
     _durationExcludesAfterLiveSyncPoint = false;
@@ -50126,7 +50167,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
@@ -50323,7 +50365,6 @@ class HlsPlayback extends BasePlayback {
         }
         this._manifestParsed = false;
         // this._ccIsSetup = false
-        this._ccTracksUpdated = false;
         this._setInitialState();
         this._hls.destroy();
         this._hls = null;
@@ -50377,12 +50418,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();
@@ -50424,7 +50473,7 @@ class HlsPlayback extends BasePlayback {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$e} _recover failed to recover`, {
+            trace(`${T$f} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -50511,7 +50560,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$e} _onHLSJSError`, {
+        trace(`${T$f} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -50559,7 +50608,7 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$e} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$f} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
@@ -50572,7 +50621,7 @@ class HlsPlayback extends BasePlayback {
                             evt,
                             data,
                         });
-                        trace(`${T$e} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$f} _onHLSJSError trying to recover from media error`, {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
@@ -50602,14 +50651,14 @@ class HlsPlayback extends BasePlayback {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$e} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$f} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
         }
     }
     reload() {
-        this.cues = [];
+        this.cues = null;
         this.currentCueId = null;
         this._hls?.startLoad(-1);
     }
@@ -50674,9 +50723,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);
@@ -50719,20 +50766,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();
         }
@@ -50943,7 +50984,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_AUDIO_AVAILABLE, data.audioTracks.map(toClapprTrack));
     }
     _onAudioTrackSwitched(_, data) {
-        trace(`${T$e} onAudioTrackSwitched`);
+        trace(`${T$f} onAudioTrackSwitched`);
         // @ts-ignore
         const track = this._hls.audioTracks[data.id];
         this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack(track));
@@ -50953,7 +50994,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
@@ -50962,7 +51006,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: {
@@ -50970,7 +51014,7 @@ class HlsPlayback extends BasePlayback {
                 label: t.name,
                 language: t.lang,
             },
-        })) || [];
+        })) || []);
     }
 }
 HlsPlayback.canPlay = function (resource, mimeType) {
@@ -50988,7 +51032,7 @@ function toClapprTrack(t) {
     };
 }
 
-const T$d = 'playback.html5_video';
+const T$e = 'playback.html5_video';
 const STALL_TIMEOUT = 15000;
 class HTML5Video extends BasePlayback {
     stallTimerId = null;
@@ -51089,7 +51133,7 @@ class HTML5Video extends BasePlayback {
     switchAudioTrack(id) {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$d} switchAudioTrack`, {
+        trace(`${T$e} switchAudioTrack`, {
             supported,
         });
         if (supported) {
@@ -51108,7 +51152,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$c = 'gplayer';
+const T$d = 'gplayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -51455,7 +51499,7 @@ class Player {
         }
     }
     triggerAutoPlay() {
-        trace(`${T$c} triggerAutoPlay`);
+        trace(`${T$d} triggerAutoPlay`);
         setTimeout(() => {
             this.player?.play({
                 autoPlay: true,
@@ -51473,7 +51517,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$c} onReady`, {
+            trace(`${T$d} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -51507,7 +51551,7 @@ class Player {
     buildCoreOptions(rootNode) {
         const sources = this.buildMediaSourcesList();
         const source = sources[0];
-        trace(`${T$c} buildCoreOptions`, {
+        trace(`${T$d} buildCoreOptions`, {
             source,
             sources,
         });
@@ -51584,7 +51628,7 @@ class Player {
     }
 }
 
-var version$1 = "2.30.0";
+var version$1 = "2.30.2";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -51608,7 +51652,7 @@ function version() {
     };
 }
 
-const pluginHtml$6 = "<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$6 = "<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";
 
@@ -52017,7 +52061,7 @@ const INITIAL_SETTINGS = {
     default: [],
     seekEnabled: false,
 };
-const T$b = 'plugins.media_control';
+const T$c = 'plugins.media_control';
 /**
  * Extended events for the {@link MediaControl} plugin
  * @public
@@ -52310,7 +52354,7 @@ class MediaControl extends UICorePlugin {
      * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
      */
     enable() {
-        trace(`${T$b} enable`, {
+        trace(`${T$c} enable`, {
             chromeless: this.options.chromeless,
             userDisabled: this.userDisabled,
         });
@@ -52467,7 +52511,7 @@ class MediaControl extends UICorePlugin {
         this.$el.removeClass('w370');
         this.$el.removeClass('w270');
         this.verticalVolume = false;
-        trace(`${T$b} playerResize`, {
+        trace(`${T$c} playerResize`, {
             size,
             width: this.container.$el.width(),
             height: this.container.$el.height(),
@@ -53265,7 +53309,7 @@ function mergeElements(a, b) {
 }
 
 const VERSION$7 = '2.22.4';
-// const T = 'plugins.audiotracks'
+const T$b = 'plugins.audiotracks';
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @public
@@ -53280,6 +53324,7 @@ class AudioTracks extends UICorePlugin {
     currentTrack = null;
     open = false;
     tracks = [];
+    autoUpdateTimerId = null;
     /**
      * @internal
      */
@@ -53340,19 +53385,21 @@ class AudioTracks extends UICorePlugin {
     onActiveContainerChanged() {
         this.currentTrack = null;
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_AUDIO_AVAILABLE, (tracks) => {
+            trace(`${T$b} on Events.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();
         });
@@ -53360,6 +53407,24 @@ class AudioTracks extends UICorePlugin {
             this.clickaway(null);
         });
     }
+    bindContainerAudioChanged() {
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_AUDIO_CHANGED, (track) => {
+            trace(`${T$b} on Events.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
@@ -53392,7 +53457,7 @@ class AudioTracks extends UICorePlugin {
     selectAudioTrack(id) {
         this.startTrackSwitching();
         this.core.activeContainer.switchAudioTrack(id);
-        this.updateText();
+        this.autoUpdateSelected(id);
     }
     hideMenu() {
         this.open = false;
@@ -53443,7 +53508,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');
@@ -53464,6 +53529,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());
 }
 
@@ -60258,8 +60332,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();

package/docs/api/player.md

@@ -361,6 +361,21 @@ A `PLUGIN` that configures [CMCD](https://cdn.cta.tech/cta/media/media/resources
 `PLUGIN` that displays the thumbnails of the video when available.
 
 
+</td></tr>
+<tr><td>
+
+[TokenRefreshPlugin](./player.tokenrefreshplugin.md)
+
+
+</td><td>
+
+`PLUGIN` — automatic token refresh for Gcore protected-content streams.
+
+Supports all three playback engines:
+
+\| Engine \| Mechanism \| Interruption \| \|\-\-\-\-\-\---\|\-\-\-\-\-\-\-\-\---\|\-\-\-\-\-\-\-\-\-\-\-\---\| \| \*\*hls.js\*\* \| Custom loader rewrites every request URL \| None \| \| \*\*dash.js\*\* \| `addRequestInterceptor` rewrites every request URL \| None \| \| \*\*Native `<video>`<!-- -->\*\* (Safari ≤ iOS 14.4) \| Source reload + seek restore \| Brief \|
+
+
 </td></tr>
 <tr><td>
 
@@ -721,6 +736,28 @@ Plugin configuration options for the thumbnails plugin.
 Current playback time and total duration of the media.
 
 
+</td></tr>
+<tr><td>
+
+[TokenRefreshOptions](./player.tokenrefreshoptions.md)
+
+
+</td><td>
+
+Configuration options for [TokenRefreshPlugin](./player.tokenrefreshplugin.md)<!-- -->.
+
+
+</td></tr>
+<tr><td>
+
+[TokenResponse](./player.tokenresponse.md)
+
+
+</td><td>
+
+Response shape expected from your token-refresh API endpoint.
+
+
 </td></tr>
 <tr><td>
 

package/docs/api/player.player.getplugin.md

@@ -0,0 +1,59 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [Player](./player.player.md) &gt; [getPlugin](./player.player.getplugin.md)
+
+## Player.getPlugin() method
+
+Returns a registered core plugin instance by name, or `null` if not found.
+
+**Signature:**
+
+```typescript
+getPlugin(name: string): any;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+name
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+any
+
+## Example
+
+
+```ts
+const tokenRefresh = player.getPlugin('token_refresh') as TokenRefreshPlugin | null
+```
+

package/docs/api/player.player.md

@@ -137,6 +137,20 @@ Current playback (time since the beginning of the stream), if appropriate.
 Duration of the current media in seconds, if appropriate.
 
 
+</td></tr>
+<tr><td>
+
+[getPlugin(name)](./player.player.getplugin.md)
+
+
+</td><td>
+
+
+</td><td>
+
+Returns a registered core plugin instance by name, or `null` if not found.
+
+
 </td></tr>
 <tr><td>
 

package/docs/api/player.tokenrefreshoptions.gettoken.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [TokenRefreshOptions](./player.tokenrefreshoptions.md) &gt; [getToken](./player.tokenrefreshoptions.gettoken.md)
+
+## TokenRefreshOptions.getToken property
+
+Async function called each time a fresh token is needed. Must return a [TokenResponse](./player.tokenresponse.md)<!-- -->.
+
+**Signature:**
+
+```typescript
+getToken: () => Promise<TokenResponse>;
+```

package/docs/api/player.tokenrefreshoptions.ipbound.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [TokenRefreshOptions](./player.tokenrefreshoptions.md) &gt; [ipBound](./player.tokenrefreshoptions.ipbound.md)
+
+## TokenRefreshOptions.ipBound property
+
+When `true`<!-- -->, the IP-bound variant (`token_ip` / `url_ip`<!-- -->) is used. Defaults to `false`<!-- -->.
+
+**Signature:**
+
+```typescript
+ipBound?: boolean;
+```