@gcorevideo/player 2.28.30 → 2.28.36

package/dist/index.js

@@ -12899,6 +12899,9 @@ class BasePlayback extends HTML5Video$1 {
         super._onPlaying();
         this.trigger(Events$1.PLAYBACK_MEDIACONTROL_ENABLE);
     }
+    setTextTrack(id) {
+        // noop
+    }
 }
 
 var PlaybackEvents;
@@ -12917,10 +12920,11 @@ 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$e = 'playback.dash';
 class DashPlayback extends BasePlayback {
     _levels = [];
     _currentLevel = AUTO$1;
+    _currentTextTrackId = -1;
     // true when the actual duration is longer than hlsjs's live sync point
     // when this is false playableRegionDuration will be the actual duration
     // when this is true playableRegionDuration will exclude the time after the sync point
@@ -13053,7 +13057,11 @@ class DashPlayback extends BasePlayback {
                 streaming: {
                     text: {
                         defaultEnabled: false,
-                        dispatchForManualRendering: true,
+                        // NOTE: dispatchForManualRendering is not correctly implemented in DASH.js;
+                        // it does not work when there are multiple text tracks.
+                        // CUE_ENTER and CUE_EXIT events might be dispatched additionally
+                        // for a track, other than the currently active one.
+                        // dispatchForManualRendering: true, // TODO only when useNativeSubtitles is not true?
                     },
                 },
             }, this.options.dash);
@@ -13097,24 +13105,6 @@ class DashPlayback extends BasePlayback {
         this._dash.on(_.events.PLAYBACK_RATE_CHANGED, (e) => {
             this.trigger(PlaybackEvents.PLAYBACK_RATE_CHANGED, e.playbackRate);
         });
-        this._dash.on(_.events.TRACK_CHANGE_RENDERED, (e) => {
-            if (e.mediaType === 'audio') {
-                this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack$1(e.newMediaInfo));
-            }
-        });
-        this._dash.on(_.events.CUE_ENTER, (e) => {
-            this.oncueenter?.({
-                end: e.end,
-                id: e.id,
-                start: e.start,
-                text: e.text,
-            });
-        });
-        this._dash.on(_.events.CUE_EXIT, (e) => {
-            this.oncueexit?.({
-                id: e.id,
-            });
-        });
     }
     render() {
         this._ready();
@@ -13203,7 +13193,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$e} _onPlaybackError`, { type: event.type, code: event.error.code, message: event.error.message });
     };
     _onDASHJSSError = (event) => {
         this._stopTimeUpdateTimer();
@@ -13424,14 +13414,14 @@ class DashPlayback extends BasePlayback {
         this._dash?.setTextTrack(this.closedCaptionsTrackId);
     }
     setTextTrack(id) {
+        this._currentTextTrackId = id;
         this._dash?.setTextTrack(id);
     }
     /**
      * @override
      */
     get closedCaptionsTracks() {
-        const tt = this.getTextTracks();
-        return tt;
+        return this.getTextTracks();
     }
     getTextTracks() {
         return this._dash?.getTracksFor('text').map((t, index) => ({
@@ -13441,7 +13431,7 @@ class DashPlayback extends BasePlayback {
                 id: index,
                 label: getTextTrackLabel(t) || "",
                 language: t.lang,
-                mode: "hidden",
+                mode: this._currentTextTrackId === index ? "showing" : "hidden",
             },
         })) || [];
     }
@@ -50103,7 +50093,7 @@ 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$d = 'playback.hls';
 class HlsPlayback extends BasePlayback {
     _ccTracksUpdated = false;
     _currentFragment = null;
@@ -50428,7 +50418,7 @@ class HlsPlayback extends BasePlayback {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$e} _recover failed to recover`, {
+            trace(`${T$d} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -50515,7 +50505,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$e} _onHLSJSError`, {
+        trace(`${T$d} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -50563,7 +50553,7 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$e} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$d} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
@@ -50576,7 +50566,7 @@ class HlsPlayback extends BasePlayback {
                             evt,
                             data,
                         });
-                        trace(`${T$e} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$d} _onHLSJSError trying to recover from media error`, {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
@@ -50606,7 +50596,7 @@ class HlsPlayback extends BasePlayback {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$e} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$d} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -50947,13 +50937,17 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_AUDIO_AVAILABLE, data.audioTracks.map(toClapprTrack));
     }
     _onAudioTrackSwitched(_, data) {
-        trace(`${T$e} onAudioTrackSwitched`);
+        trace(`${T$d} onAudioTrackSwitched`);
         // @ts-ignore
         const track = this._hls.audioTracks[data.id];
         this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack(track));
     }
     setTextTrack(id) {
+        if (id === this._hls.subtitleTrack) {
+            return;
+        }
         this._hls.subtitleTrack = id;
+        this.cues = [];
     }
     /**
      * @override
@@ -50988,7 +50982,7 @@ function toClapprTrack(t) {
     };
 }
 
-const T$d = 'playback.html5_video';
+const T$c = 'playback.html5_video';
 const STALL_TIMEOUT = 15000;
 class HTML5Video extends BasePlayback {
     stallTimerId = null;
@@ -51089,7 +51083,7 @@ class HTML5Video extends BasePlayback {
     switchAudioTrack(id) {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$d} switchAudioTrack`, {
+        trace(`${T$c} switchAudioTrack`, {
             supported,
         });
         if (supported) {
@@ -51108,7 +51102,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$c = 'gplayer';
+const T$b = 'gplayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -51444,7 +51438,7 @@ class Player {
         }
     }
     triggerAutoPlay() {
-        trace(`${T$c} triggerAutoPlay`);
+        trace(`${T$b} triggerAutoPlay`);
         setTimeout(() => {
             this.player?.play({
                 autoPlay: true,
@@ -51462,7 +51456,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$c} onReady`, {
+            trace(`${T$b} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -51496,7 +51490,7 @@ class Player {
     buildCoreOptions(rootNode) {
         const sources = this.buildMediaSourcesList();
         const source = sources[0];
-        trace(`${T$c} buildCoreOptions`, {
+        trace(`${T$b} buildCoreOptions`, {
             source,
             sources,
         });
@@ -51573,7 +51567,7 @@ class Player {
     }
 }
 
-var version$1 = "2.28.30";
+var version$1 = "2.28.36";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -52006,7 +52000,7 @@ const INITIAL_SETTINGS = {
     default: [],
     seekEnabled: false,
 };
-const T$b = 'plugins.media_control';
+const T$a = 'plugins.media_control';
 /**
  * Extended events for the {@link MediaControl} plugin
  * @public
@@ -52299,7 +52293,7 @@ class MediaControl extends UICorePlugin {
      * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
      */
     enable() {
-        trace(`${T$b} enable`, {
+        trace(`${T$a} enable`, {
             chromeless: this.options.chromeless,
             userDisabled: this.userDisabled,
         });
@@ -52456,7 +52450,7 @@ class MediaControl extends UICorePlugin {
         this.$el.removeClass('w370');
         this.$el.removeClass('w270');
         this.verticalVolume = false;
-        trace(`${T$b} playerResize`, {
+        trace(`${T$a} playerResize`, {
             size,
             width: this.container.$el.width(),
             height: this.container.$el.height(),
@@ -53458,7 +53452,7 @@ class AudioTracks extends UICorePlugin {
 
 const templateHtml$2 = "<div class=\"big-mute-icon-wrapper\" data-big-mute id=\"gplayer-big-mute-button\">\n    <div class=\"big-mute-icon gcore-skin-border-color\" data-big-mute-icon id=\"gplayer-big-mute-icon\"></div>\n</div>\n";
 
-const T$a = 'plugins.big_mute_button';
+const T$9 = 'plugins.big_mute_button';
 // TODO rewrite as a container plugin
 /**
  * `PLUGIN` that displays a big mute button over the video when it's being played muted.
@@ -53521,7 +53515,7 @@ class BigMuteButton extends UICorePlugin {
         if (autoPlay) {
             this.autoPlay = true;
         }
-        trace(`${T$a} onPlay`, {
+        trace(`${T$9} onPlay`, {
             autoPlay: this.autoPlay,
             wasMuted,
             volume,
@@ -53535,7 +53529,7 @@ class BigMuteButton extends UICorePlugin {
     }
     onStop(_, metadata) {
         const ui = metadata?.ui;
-        trace(`${T$a} onStop`, { ui });
+        trace(`${T$9} onStop`, { ui });
         if (ui) {
             this.destroy();
         }
@@ -56499,7 +56493,7 @@ const PLAYBACK_NAMES = {
     hls: 'HLS.js',
     html5_video: 'Native',
 };
-const T$9 = 'plugins.nerd_stats';
+const T$8 = 'plugins.nerd_stats';
 /**
  * `PLUGIN` that displays useful statistics regarding the playback as well as the network quality estimation.
  * @public
@@ -56636,7 +56630,7 @@ class NerdStats extends UICorePlugin {
         return super.destroy();
     }
     toggle = () => {
-        trace(`${T$9} toggle`, {
+        trace(`${T$8} toggle`, {
             open: this.open,
         });
         if (this.open) {
@@ -56656,14 +56650,14 @@ class NerdStats extends UICorePlugin {
         })
             .catch((e) => {
             reportError(e);
-            trace(`${T$9} speedtest error`, {
+            trace(`${T$8} speedtest error`, {
                 error: e,
             });
             this.disable();
         });
     }
     hide() {
-        trace(`${T$9} hide`);
+        trace(`${T$8} hide`);
         this.$el.hide();
         this.open = false;
         stopSpeedtest();
@@ -57396,7 +57390,7 @@ const reloadIcon = "<svg fill=\"#FFFFFF\" height=\"24\" viewBox=\"0 0 24 24\" wi
 
 const templateHtml = "<div class=\"player-error-screen__content\" data-error-screen>\n    <% if (icon) { %>\n        <div class=\"player-error-screen__icon\" data-error-screen><%= icon %></div>\n    <% } %>\n    <div class=\"player-error-screen__title\" data-error-screen><%= title %></div>\n    <% if (message) { %>\n        <div class=\"player-error-screen__message\" data-error-screen><%= message %></div>\n    <% } %>\n    <% if (code) { %>\n        <div class=\"player-error-screen__code\" data-error-screen><%= i18n.t('error_code') %>: <%= code %></div>\n    <% } %>\n    <% if (reloadIcon) { %>\n        <div class=\"player-error-screen__reload\" data-error-screen><%= reloadIcon %></div>\n    <% } %>\n</div>\n";
 
-const T$8 = 'plugins.error_screen';
+const T$7 = 'plugins.error_screen';
 /**
  * `PLUGIN` that displays fatal errors nicely in the overlay on top of the player.
  * @public
@@ -57448,11 +57442,11 @@ class ErrorScreen extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
     onPlay() {
-        trace(`${T$8} onPlay`);
+        trace(`${T$7} onPlay`);
         this.unmount();
     }
     unmount() {
-        trace(`${T$8} unmount`);
+        trace(`${T$7} unmount`);
         this.err = null;
         this.$el.remove();
     }
@@ -57465,7 +57459,7 @@ class ErrorScreen extends UICorePlugin {
         };
     }
     reload() {
-        trace(`${T$8} reload`);
+        trace(`${T$7} reload`);
         setTimeout(() => {
             this.core.configure({
                 reloading: true,
@@ -57488,7 +57482,7 @@ class ErrorScreen extends UICorePlugin {
         }
     }
     onError(err) {
-        trace(`${T$8} onError`, { err });
+        trace(`${T$7} onError`, { err });
         if (err.UI) {
             if (this.err) {
                 this.unmount();
@@ -57973,7 +57967,7 @@ const streamsMomentoIcon = "<svg id=\"Слой_1\" data-name=\"Слой 1\" xmln
 const streamsWhiteNightsIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"50\" height=\"50\" viewBox=\"0 0 50 50\">\n  <defs>\n    <clipPath id=\"clip-Icon\">\n      <rect width=\"50\" height=\"50\"/>\n    </clipPath>\n  </defs>\n  <g id=\"Icon\" clip-path=\"url(#clip-Icon)\">\n    <g id=\"icon2\" transform=\"translate(-0.041 0)\">\n      <path id=\"Контур_77\" data-name=\"Контур 77\" d=\"M6.493,13v8.266h6.275V19.74H8.31V17.714h4.006V16.3H8.31V14.53h4.365V13Zm7.5,0v8.266h1.7V15.732h.023l3.438,5.534h1.818V13h-1.7v5.545h-.023L15.8,13Z\" fill=\"#fff\"/>\n      <path id=\"Контур_76\" data-name=\"Контур 76\" d=\"M29.949,29.1V26.774H31.94a1.4,1.4,0,0,1,.938.272,1.1,1.1,0,0,1,.313.874,1.155,1.155,0,0,1-.313.9,1.375,1.375,0,0,1-.938.278ZM28.132,25.36v8.266h1.817V30.4h1.818a1.353,1.353,0,0,1,.984.3,1.637,1.637,0,0,1,.394.949c.046.333.079.681.1,1.042a3.2,3.2,0,0,0,.185.938h1.819a1.218,1.218,0,0,1-.191-.423,3.611,3.611,0,0,1-.093-.527c-.019-.185-.033-.367-.041-.544s-.016-.332-.023-.463a5.052,5.052,0,0,0-.087-.625,2.109,2.109,0,0,0-.2-.573,1.586,1.586,0,0,0-.359-.451,1.414,1.414,0,0,0-.556-.284v-.023a1.926,1.926,0,0,0,1-.81,2.494,2.494,0,0,0,.307-1.262,2.308,2.308,0,0,0-.165-.88,2.128,2.128,0,0,0-.486-.724,2.3,2.3,0,0,0-.764-.492,2.67,2.67,0,0,0-1-.179ZM43.506,30.5V25.36H41.689V30.5a2.065,2.065,0,0,1-.37,1.36,1.7,1.7,0,0,1-1.343.434,2.086,2.086,0,0,1-.886-.156,1.283,1.283,0,0,1-.758-.978,3.748,3.748,0,0,1-.058-.66V25.36H36.456V30.5a3.16,3.16,0,0,0,.92,2.5,3.807,3.807,0,0,0,2.6.81,3.82,3.82,0,0,0,2.593-.816,3.132,3.132,0,0,0,.937-2.492Z\" fill=\"#fff\"/>\n      <path id=\"Контур_80\" data-name=\"Контур 80\" d=\"M22.646,31.2H4.689a4.505,4.505,0,0,1-4.5-4.5V8.5A4.505,4.505,0,0,1,4.689,4h18.2a4.505,4.505,0,0,1,4.5,4.5v8.445l-.893.1a3.184,3.184,0,0,0-2.846,3.177V30.5l-.465.7ZM4.689,6a2.5,2.5,0,0,0-2.5,2.5V26.7a2.5,2.5,0,0,0,2.5,2.5H21.65V20.22a5.18,5.18,0,0,1,3.739-4.992V8.5a2.5,2.5,0,0,0-2.5-2.5Z\" fill=\"#fff\"/>\n      <path id=\"Контур_81\" data-name=\"Контур 81\" d=\"M30.127,47.884a1,1,0,0,1-1-1V43.267H26.846a5.206,5.206,0,0,1-5.2-5.2V20.222a5.206,5.206,0,0,1,5.2-5.2H44.692a5.206,5.206,0,0,1,5.2,5.2V38.068a5.206,5.206,0,0,1-5.2,5.2H35.058l-4.216,4.316A1,1,0,0,1,30.127,47.884ZM26.846,17.022a3.2,3.2,0,0,0-3.2,3.2V38.067a3.2,3.2,0,0,0,3.2,3.2h3.281a1,1,0,0,1,1,1v2.162l2.8-2.86a1,1,0,0,1,.715-.3H44.692a3.2,3.2,0,0,0,3.2-3.2V20.222a3.2,3.2,0,0,0-3.2-3.2Z\" fill=\"#fff\"/>\n    </g>\n  </g>\n</svg>\n";
 
 const VERSION$4 = '0.0.1';
-const T$7 = 'plugins.multicamera';
+const T$6 = 'plugins.multicamera';
 /**
  * `PLUGIN` that adds support for loading multiple streams and switching between them using the media control UI.
  * @beta
@@ -58130,7 +58124,7 @@ class MultiCamera extends UICorePlugin {
     onCameraSelect(event) {
         const value = event.currentTarget.dataset
             .multicameraSelectorSelect;
-        trace(`${T$7} onCameraSelect`, { value });
+        trace(`${T$6} onCameraSelect`, { value });
         if (value !== undefined) {
             this.changeById(parseInt(value, 10));
         }
@@ -58256,13 +58250,13 @@ class MultiCamera extends UICorePlugin {
         }
     }
     changeById(id) {
-        trace(`${T$7} changeById`, { id });
+        trace(`${T$6} changeById`, { id });
         queueMicrotask(() => {
             const playbackOptions = this.core.options.playback || {};
             // TODO figure out what this does
             playbackOptions.recycleVideo = Browser.isMobile;
             this.currentCamera = this.findElementById(id) ?? null;
-            trace(`${T$7} changeById`, {
+            trace(`${T$6} changeById`, {
                 id,
                 currentCamera: this.currentCamera,
                 multicamera: this.multicamera,
@@ -58283,7 +58277,7 @@ class MultiCamera extends UICorePlugin {
             // TODO remove?
             // for html5 playback:
             this.options.dvrEnabled = this.currentCamera.dvr;
-            trace(`${T$7} changeById`, { currentCamera: this.currentCamera });
+            trace(`${T$6} changeById`, { currentCamera: this.currentCamera });
             // TODO
             this.core.configure({
                 playback: playbackOptions,
@@ -58346,7 +58340,7 @@ const pipIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"no
 const buttonHtml$2 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\">\n    <%= pipIcon %>\n</button>\n";
 
 const VERSION$3 = '0.0.1';
-const T$6 = `plugins.pip`;
+const T$5 = `plugins.pip`;
 /**
  * `PLUGIN` that enables picture-in-picture mode.
  * @public
@@ -58404,7 +58398,7 @@ class PictureInPicture extends UICorePlugin {
         });
     }
     isPiPSupported() {
-        trace(`${T$6} isPiPSupported`, {
+        trace(`${T$5} isPiPSupported`, {
             pictureInPictureEnabled: !!document.pictureInPictureEnabled,
             requestPictureInPicture: !!HTMLVideoElement.prototype.requestPictureInPicture,
         });
@@ -58426,7 +58420,7 @@ class PictureInPicture extends UICorePlugin {
         return this;
     }
     togglePictureInPicture() {
-        trace(`${T$6} togglePictureInPicture`);
+        trace(`${T$5} togglePictureInPicture`);
         if (this.videoElement !== document.pictureInPictureElement) {
             this.requestPictureInPicture();
         }
@@ -58435,13 +58429,13 @@ class PictureInPicture extends UICorePlugin {
         }
     }
     requestPictureInPicture() {
-        trace(`${T$6} requestPictureInPicture`, {
+        trace(`${T$5} requestPictureInPicture`, {
             videoElement: !!this.videoElement,
         });
         this.videoElement.requestPictureInPicture();
     }
     exitPictureInPicture() {
-        trace(`${T$6} exitPictureInPicture`);
+        trace(`${T$5} exitPictureInPicture`);
         document.exitPictureInPicture();
     }
 }
@@ -58468,7 +58462,7 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: 2.0, label: '2x' },
 ];
 const DEFAULT_PLAYBACK_RATE = 1;
-const T$5 = 'plugins.playback_rate';
+const T$4 = 'plugins.playback_rate';
 /**
  * `PLUGIN` that allows changing the playback speed of the video.
  * @public
@@ -58554,7 +58548,7 @@ class PlaybackRate extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
     }
     onCoreReady() {
-        trace(`${T$5} onCoreReady`);
+        trace(`${T$4} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         const gear = this.core.getPlugin('bottom_gear');
@@ -58563,7 +58557,7 @@ class PlaybackRate extends UICorePlugin {
         this.listenTo(gear, GearEvents.RENDERED, this.onGearRendered);
     }
     onActiveContainerChange() {
-        trace(`${T$5} onActiveContainerChange`);
+        trace(`${T$4} onActiveContainerChange`);
         this.metadataLoaded = false;
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_STOP, this.onStop);
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_PLAY, this.onPlay);
@@ -58571,15 +58565,15 @@ class PlaybackRate extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_LOADEDMETADATA, this.onMetaDataLoaded);
     }
     onMediaControlRendered() {
-        trace(`${T$5} onMediaControlRendered`);
+        trace(`${T$4} onMediaControlRendered`);
         this.render();
     }
     onGearRendered() {
-        trace(`${T$5} onGearRendered`);
+        trace(`${T$4} onGearRendered`);
         this.mount();
     }
     mount() {
-        trace(`${T$5} mount`, {
+        trace(`${T$4} mount`, {
             shouldMount: this.shouldMount(),
         });
         if (!this.shouldMount()) {
@@ -58596,7 +58590,7 @@ class PlaybackRate extends UICorePlugin {
         })));
     }
     onMetaDataLoaded() {
-        trace(`${T$5} onMetaDataLoaded`, {
+        trace(`${T$4} onMetaDataLoaded`, {
             playbackType: this.core.activePlayback.getPlaybackType(),
             dvrEnabled: this.core.activePlayback.dvrEnabled,
         });
@@ -58618,7 +58612,7 @@ class PlaybackRate extends UICorePlugin {
             this.core.activePlayback?.setPlaybackRate(this.selectedRate);
         }
         else {
-            trace(`${T$5} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
+            trace(`${T$4} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
                 playbackRate,
                 selectedRate: this.selectedRate,
             });
@@ -58681,13 +58675,13 @@ class PlaybackRate extends UICorePlugin {
         }
     }
     syncRate() {
-        trace(`${T$5} syncRate`, {
+        trace(`${T$4} syncRate`, {
             selectedRate: this.selectedRate,
         });
         this.core.activePlayback?.setPlaybackRate(this.selectedRate);
     }
     resetPlaybackRate() {
-        trace(`${T$5} resetPlaybackRate`, {
+        trace(`${T$4} resetPlaybackRate`, {
             selectedRate: this.selectedRate,
         });
         this.core.activePlayback?.setPlaybackRate(DEFAULT_PLAYBACK_RATE);
@@ -58722,7 +58716,7 @@ class PlaybackRate extends UICorePlugin {
             ?.label || `x${rate}`);
     }
     highlightCurrentRate() {
-        trace(`${T$5} highlightCurrentRate`, {
+        trace(`${T$4} highlightCurrentRate`, {
             selectedRate: this.selectedRate,
         });
         this.allRateElements().removeClass('current');
@@ -59758,7 +59752,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
     }
 }
 
-const T$4 = 'plugins.source_controller';
+const T$3 = 'plugins.source_controller';
 const INITIAL_RETRY_DELAY = 1000;
 const MAX_RETRY_DELAY = 5000;
 const RETRY_DELAY_BLUR = 500;
@@ -59934,7 +59928,7 @@ class SourceController extends CorePlugin {
     }
     bindContainerEventListeners() {
         this.core.activePlayback.on(Events$1.PLAYBACK_ERROR, (error) => {
-            trace(`${T$4} on PLAYBACK_ERROR`, {
+            trace(`${T$3} on PLAYBACK_ERROR`, {
                 error: {
                     code: error?.code,
                     description: error?.description,
@@ -59958,7 +59952,7 @@ class SourceController extends CorePlugin {
             }
         });
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAY, (_, { autoPlay }) => {
-            trace(`${T$4} onContainerPlay`, {
+            trace(`${T$3} onContainerPlay`, {
                 autoPlay,
                 currentSource: this.sourcesList[this.currentSourceIndex],
                 retrying: this.active,
@@ -59976,7 +59970,7 @@ class SourceController extends CorePlugin {
         this.sourcesDelay = {};
     }
     retryPlayback() {
-        trace(`${T$4} retryPlayback enter`, {
+        trace(`${T$3} retryPlayback enter`, {
             currentSourceIndex: this.currentSourceIndex,
             currentSource: this.sourcesList[this.currentSourceIndex],
         });
@@ -59984,18 +59978,18 @@ class SourceController extends CorePlugin {
         this.switching = true;
         this.core.activeContainer?.getPlugin('spinner')?.show(0);
         this.getNextMediaSource().then((nextSource) => {
-            trace(`${T$4} retryPlayback syncing...`, {
+            trace(`${T$3} retryPlayback syncing...`, {
                 nextSource,
             });
             const rnd = Math.round(RETRY_DELAY_BLUR * Math.random());
             this.sync(() => {
                 this.switching = false;
                 this.core.load(nextSource.source, nextSource.mimeType);
-                trace(`${T$4} retryPlayback loaded`, {
+                trace(`${T$3} retryPlayback loaded`, {
                     nextSource,
                 });
                 setTimeout(() => {
-                    trace(`${T$4} retryPlayback playing`, {
+                    trace(`${T$3} retryPlayback playing`, {
                         autoPlay: this.autoPlay,
                         nextSource,
                     });
@@ -60033,8 +60027,6 @@ const comboboxHTML = "<button\n    class='media-control-button media-control-ico
 const stringHTML = "<div class=\"gplayer-cc-line\" id=\"gplayer-cc-line\">\n  <p></p>\n</div>\n";
 
 const VERSION = '2.19.14';
-const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected';
-const T$3 = 'plugins.cc';
 /**
  * `PLUGIN` that provides a UI to select the subtitles when available.
  * @public
@@ -60071,9 +60063,10 @@ const T$3 = 'plugins.cc';
  * ```
  */
 class ClosedCaptions extends UICorePlugin {
-    isPreselectedApplied = false;
+    isSelectedApplied = false;
     active = false;
     open = false;
+    userSelectedItemId = -1;
     track = null;
     tracks = [];
     $line = null;
@@ -60135,8 +60128,12 @@ class ClosedCaptions extends UICorePlugin {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mount);
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_SHOW, () => {
+            this.$line?.removeClass('media-control-cc-pulled');
+        });
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, () => {
             this.hideMenu();
+            this.$line?.addClass('media-control-cc-pulled');
         });
         this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
             if (from !== this.name) {
@@ -60171,10 +60168,9 @@ class ClosedCaptions extends UICorePlugin {
                 video.classList.remove('ios-fullscreen');
             }
         });
-        this.isPreselectedApplied = false;
+        this.isSelectedApplied = false;
     }
     onPlaybackReady() {
-        trace(`${T$3} onPlaybackReady`);
         this.core.activePlayback.oncueenter = (e) => {
             this.setSubtitleText(e.text);
         };
@@ -60195,23 +60191,27 @@ class ClosedCaptions extends UICorePlugin {
         this.activateTrack(id);
     }
     activateTrack(id) {
-        if (['dash', 'hls'].includes(this.core.activePlayback?.name)) {
-            this.core.activePlayback.setTextTrack(id);
+        const isManaged = this.core.activePlayback?.name === 'hls';
+        this.core.activePlayback.setTextTrack(id);
+        if (isManaged) {
+            return;
+        }
+        if (!this.core.activePlayback?.el.textTracks) {
             return;
         }
-        for (const track of this.currentTracks) {
-            if (track.id === id) {
+        for (const [index, track] of Array.from(this.core.activePlayback?.el.textTracks ?? []).entries()) {
+            if (index === id) {
                 if (this.useNativeSubtitles) {
-                    track.track.mode = 'showing';
+                    track.mode = 'showing';
                 }
                 else {
-                    track.track.mode = 'hidden';
+                    track.mode = 'hidden';
                 }
-                this.setSubtitleText(this.getSubtitleText(track.track));
-                track.track.oncuechange = (e) => {
+                this.setSubtitleText(this.getSubtitleText(track));
+                track.oncuechange = () => {
                     try {
-                        if (track.track.activeCues?.length) {
-                            const html = track.track.activeCues[0].getCueAsHTML();
+                        if (track.activeCues?.length) {
+                            const html = track.activeCues[0].getCueAsHTML();
                             this.setSubtitleText(html);
                         }
                         else {
@@ -60224,8 +60224,8 @@ class ClosedCaptions extends UICorePlugin {
                 };
             }
             else {
-                track.track.oncuechange = () => { };
-                track.track.mode = 'disabled';
+                track.oncuechange = () => { };
+                track.mode = 'disabled';
             }
         }
     }
@@ -60233,7 +60233,7 @@ class ClosedCaptions extends UICorePlugin {
         try {
             // TODO ensure to apply only once
             this.currentTracks = this.core.activePlayback.closedCaptionsTracks;
-            this.applyPreselectedSubtitles();
+            this.applySelectedSubtitles();
             this.render();
         }
         catch (error) {
@@ -60268,8 +60268,10 @@ class ClosedCaptions extends UICorePlugin {
         this.$el.find('#gplayer-cc-menu').hide();
         this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false');
         this.$line.hide();
-        for (const track of this.currentTracks) {
-            track.track.mode = 'hidden';
+        for (const track of this.core.activePlayback.el.textTracks) {
+            if (track.mode === 'showing') {
+                track.mode = 'hidden';
+            }
         }
     }
     /**
@@ -60281,7 +60283,6 @@ class ClosedCaptions extends UICorePlugin {
         if (this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
             this.currentTrack &&
-            // this.currentTrack.track.mode &&
             (Browser.isiOS || this.useNativeSubtitles)) {
             this.$line.hide();
             this.currentTrack.track.mode = 'showing';
@@ -60323,6 +60324,10 @@ class ClosedCaptions extends UICorePlugin {
         this.resizeFont();
         this.clampPopup();
         this.core.activeContainer.$el.append(this.$line);
+        const mc = this.core.getPlugin('media_control');
+        if (!mc?.isVisible()) {
+            this.$line?.addClass('media-control-cc-pulled');
+        }
         this.updateSelection();
         this.renderIcon();
         return this;
@@ -60340,22 +60345,36 @@ class ClosedCaptions extends UICorePlugin {
     }
     onItemSelect(event) {
         // event.target does not exist for some reason in tests
-        const id = (event.target ?? event.currentTarget).dataset?.item ??
-            '-1';
-        localStorage.setItem(LOCAL_STORAGE_CC_ID, id); // TODO store language instead?
-        this.selectItem(this.findById(Number(id)));
+        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();
         return false;
     }
-    applyPreselectedSubtitles() {
-        if (!this.isPreselectedApplied) {
-            this.isPreselectedApplied = true;
-            // if the language is undefined, then let the engine decide
-            // to hide the subtitles forcefully, set the language to 'none'
-            setTimeout(() => {
-                this.selectItem(this.tracks.find((t) => this.isPreselectedLanguage(t.track.language)) ?? null);
-            }, 0);
+    applySelectedSubtitles() {
+        if (this.isSelectedApplied) {
+            return;
         }
+        this.isSelectedApplied = true;
+        // If user selected a language, activate that
+        // Otherwise, if there is no configured language, then let the engine decide
+        // To hide the subtitles initially forcefully, set the language to 'none'
+        let matcher;
+        if (this.userSelectedItemId !== -1) {
+            matcher = (track) => track.id === this.userSelectedItemId;
+        }
+        else if (this.preselectedLanguage) {
+            matcher = (track) => this.isPreselectedLanguage(track.track.language);
+        }
+        else {
+            return;
+        }
+        setTimeout(() => {
+            this.selectItem(this.tracks.find(matcher) ?? null);
+        }, 0);
     }
     hideMenu() {
         this.open = false;
@@ -60389,10 +60408,9 @@ class ClosedCaptions extends UICorePlugin {
         return this.$el.find('#gplayer-cc-menu li'); // TODO fix semantically
     }
     selectSubtitles() {
-        const trackId = this.currentTrack?.id ?? -1;
-        // TODO find out if this is needed
-        this.core.activePlayback.closedCaptionsTrackId = trackId;
-        // this.core.activePlayback.closedCaptionsTrackId = -1
+        if (this.currentTrack) {
+            this.core.activePlayback.closedCaptionsTrackId = this.currentTrack.id;
+        }
     }
     getSubtitleText(track) {
         const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
@@ -60415,7 +60433,7 @@ class ClosedCaptions extends UICorePlugin {
         this.setSubtitleText('');
     }
     updateSelection() {
-        if (!this.currentTrack) {
+        if (this.core.activePlayback.closedCaptionsTrackId === -1) {
             this.hide();
         }
         else {