@gcorevideo/player 2.21.1 → 2.21.3

package/dist/index.js

@@ -12628,6 +12628,9 @@ var PlaybackErrorCode;
  * @internal
  */
 class BasePlayback extends HTML5Video$1 {
+    get isHTML5Video() {
+        return true;
+    }
     createError(errorData, options) {
         const i18n = this.i18n ||
             // @ts-ignore
@@ -43296,7 +43299,7 @@ class Player {
     }
 }
 
-var version$1 = "2.21.1";
+var version$1 = "2.21.3";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43918,7 +43921,7 @@ function getPageX(event) {
     return 0;
 }
 
-const mediaControlHTML = "<div class=\"media-control-background\" data-background></div>\n\n<div class=\"media-control-layer gcore-skin-bg-color\" data-controls>\n    <% var renderBar = function(name) { %>\n        <div class=\"bar-container\" data-<%= name %>>\n            <div class=\"bar-background\" data-<%= name %>>\n                <div class=\"bar-fill-1\" data-<%= name %>></div>\n                <div class=\"bar-fill-2 gcore-skin-main-color\" data-<%= name %>></div>\n                <div class=\"bar-hover\" data-<%= name %>></div>\n            </div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderSegmentedBar = function(name, segments) {\n        segments = segments || 10; %>\n    <div class=\"bar-container\" data-<%= name %>>\n        <div class=\"bar-background\" data-<%= name %>>\n            <div class=\"bar-fill-1 gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    </div>\n    <% }; %>\n    <% var renderDrawer = function(name, renderContent) { %>\n        <div class=\"drawer-container\" data-<%= name %>>\n            <div class=\"drawer-icon-container\" data-<%= name %>>\n                <div class=\"drawer-icon media-control-icon gcore-skin-button-color\" data-<%= name %>></div>\n                <span class=\"drawer-text\" data-<%= name %>></span>\n            </div>\n            <% renderContent(name); %>\n        </div>\n    <% }; %>\n    <% var renderIndicator = function(name) { %>\n        <div class=\"media-control-indicator gcore-skin-text-color\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderQuality = function(name) { %>\n        <div class=\"media-control-quality\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderNerd = function(name) { %>\n        <div class=\"media-control-nerd\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderSubtitles = function(name) { %>\n        <div class=\"media-control-subtitles\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderMultiCamera = function(name) { %>\n        <div class=\"media-control-multicamera\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderClipsText = function(name) { %>\n\n        <div class=\"media-clip-container gcore-skin-text-color\" data-<%= name %>>\n            <div class=\"media-clip-point gcore-skin-text-color\" data-<%= name %>>•</div>\n            <div class=\"media-clip-text gcore-skin-text-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderPlaybackRate = function(name) { %>\n        <div class=\"media-control-playbackrate\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderVR = function(name) { %>\n        <div class=\"media-control-vr\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderButton = function(name) { %>\n        <button type=\"button\" class=\"media-control-button media-control-icon gcore-skin-button-color\" data-<%= name %>\n                aria-label=\"<%= name %>\"></button>\n    <% }; %>\n\n    <% var templates = {\n        bar: renderBar,\n        segmentedBar: renderSegmentedBar,\n    };\n    var render = function (settingsList) {\n        settingsList.forEach(function (setting) {\n\n            if (setting === \"seekbar\") {\n                renderBar(setting);\n            } else if (setting === \"volume\") {\n                renderDrawer(setting, settings.volumeBarTemplate ? templates[settings.volumeBarTemplate] : function (name) {\n                    return renderSegmentedBar(name);\n                });\n            } else if (setting === \"duration\" || setting === \"position\") {\n                renderIndicator(setting);\n            } else if (setting === \"quality\") {\n                renderQuality(setting)\n            } else if (setting === \"nerd\") {\n                renderNerd(setting)\n            } else if (setting === \"multicamera\") {\n                renderMultiCamera(setting)\n            } else if (setting === \"subtitles\") {\n                renderSubtitles(setting)\n            } else if (setting === \"playbackrate\") {\n                renderPlaybackRate(setting)\n            } else if (setting === \"vr\") {\n                renderVR(setting)\n            } else if (setting === \"clipsText\") {\n                renderClipsText(setting)\n            } else {\n                renderButton(setting);\n            }\n        });\n    }; %>\n    <% if (settings.left && settings.left.length) { %>\n        <div class=\"media-control-left-panel\" data-media-control>\n            <% render(settings.left); %>\n        </div>\n    <% } %>\n    <% if (settings.default && settings.default.length) { %>\n        <div class=\"media-control-center-panel\" data-media-control>\n            <% render(settings.default); %>\n        </div>\n    <% } %>\n    <% if (settings.right && settings.right.length) { %>\n        <div class=\"media-control-right-panel\" data-media-control>\n            <% render(settings.right); %>\n        </div>\n    <% } %>\n</div>\n";
+const mediaControlHTML = "<div class=\"media-control-background\" data-background></div>\n\n<div class=\"media-control-layer gcore-skin-bg-color\" data-controls>\n    <% var renderBar = function(name) { %>\n        <div class=\"bar-container\" data-<%= name %>>\n            <div class=\"bar-background\" data-<%= name %>>\n                <div class=\"bar-fill-1\" data-<%= name %>></div>\n                <div class=\"bar-fill-2 gcore-skin-main-color\" data-<%= name %>></div>\n                <div class=\"bar-hover\" data-<%= name %>></div>\n            </div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderSegmentedBar = function(name, segments) {\n        segments = segments || 10; %>\n    <div class=\"bar-container\" data-<%= name %>>\n        <div class=\"bar-background\" data-<%= name %>>\n            <div class=\"bar-fill-1 gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    </div>\n    <% }; %>\n    <% var renderDrawer = function(name, renderContent) { %>\n        <div class=\"drawer-container\" data-<%= name %>>\n            <div class=\"drawer-icon-container\" data-<%= name %>>\n                <div class=\"drawer-icon media-control-icon gcore-skin-button-color\" data-<%= name %>></div>\n                <span class=\"drawer-text\" data-<%= name %>></span>\n            </div>\n            <% renderContent(name); %>\n        </div>\n    <% }; %>\n    <% var renderIndicator = function(name) { %>\n        <div class=\"media-control-indicator gcore-skin-text-color\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderQuality = function(name) { %>\n        <div class=\"media-control-quality\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderNerd = function(name) { %>\n        <div class=\"media-control-nerd\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderMultiCamera = function(name) { %>\n        <div class=\"media-control-multicamera\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderClipsText = function(name) { %>\n\n        <div class=\"media-clip-container gcore-skin-text-color\" data-<%= name %>>\n            <div class=\"media-clip-point gcore-skin-text-color\" data-<%= name %>>•</div>\n            <div class=\"media-clip-text gcore-skin-text-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderPlaybackRate = function(name) { %>\n        <div class=\"media-control-playbackrate\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderVR = function(name) { %>\n        <div class=\"media-control-vr\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderButton = function(name) { %>\n        <button type=\"button\" class=\"media-control-button media-control-icon gcore-skin-button-color\" data-<%= name %>\n                aria-label=\"<%= name %>\"></button>\n    <% }; %>\n\n    <% var templates = {\n        bar: renderBar,\n        segmentedBar: renderSegmentedBar,\n    };\n    var render = function (settingsList) {\n        settingsList.forEach(function (setting) {\n\n            if (setting === \"seekbar\") {\n                renderBar(setting);\n            } else if (setting === \"volume\") {\n                renderDrawer(setting, settings.volumeBarTemplate ? templates[settings.volumeBarTemplate] : function (name) {\n                    return renderSegmentedBar(name);\n                });\n            } else if (setting === \"duration\" || setting === \"position\") {\n                renderIndicator(setting);\n            } else if (setting === \"quality\") {\n                renderQuality(setting)\n            } else if (setting === \"nerd\") {\n                renderNerd(setting)\n            } else if (setting === \"multicamera\") {\n                renderMultiCamera(setting)\n            } else if (setting === \"playbackrate\") {\n                renderPlaybackRate(setting)\n            } else if (setting === \"vr\") {\n                renderVR(setting)\n            } else if (setting === \"clipsText\") {\n                renderClipsText(setting)\n            } else {\n                renderButton(setting);\n            }\n        });\n    }; %>\n    <% if (settings.left && settings.left.length) { %>\n        <div class=\"media-control-left-panel\" data-media-control>\n            <% render(settings.left); %>\n        </div>\n    <% } %>\n    <% if (settings.default && settings.default.length) { %>\n        <div class=\"media-control-center-panel\" data-media-control>\n            <% render(settings.default); %>\n        </div>\n    <% } %>\n    <% if (settings.right && settings.right.length) { %>\n        <div class=\"media-control-right-panel\" data-media-control>\n            <% render(settings.right); %>\n        </div>\n    <% } %>\n</div>\n";
 
 const playIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g clip-path=\"url(#clip0_28_1564)\">\n    <path d=\"M6 3V20L19.3571 11.5L6 3Z\" fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_28_1564\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
 
@@ -44013,7 +44016,6 @@ class MediaControl extends UICorePlugin {
     $seekBarLoaded = null;
     $seekBarPosition = null;
     $seekBarScrubber = null;
-    $subtitlesSelector = null;
     $volumeBarContainer = null;
     $volumeBarBackground = null;
     $volumeBarFill = null;
@@ -44034,7 +44036,8 @@ class MediaControl extends UICorePlugin {
         return { min: CLAPPR_VERSION };
     }
     get disabled() {
-        const playbackIsNOOP = this.core.activeContainer && this.core.activeContainer.getPlaybackType() === Playback.NO_OP;
+        const playbackIsNOOP = this.core.activeContainer &&
+            this.core.activeContainer.getPlaybackType() === Playback.NO_OP;
         return this.userDisabled || playbackIsNOOP;
     }
     /**
@@ -44694,7 +44697,6 @@ class MediaControl extends UICorePlugin {
         this.$volumeBarBackground = this.$el.find('.bar-background[data-volume]');
         this.$volumeBarFill = this.$el.find('.bar-fill-1[data-volume]');
         this.$volumeBarScrubber = this.$el.find('.bar-scrubber[data-volume]');
-        this.$subtitlesSelector = this.$el.find('.media-control-subtitles[data-subtitles]');
         this.$playbackRate = this.$el.find('.media-control-playbackrate[data-playbackrate]');
         this.$multiCameraSelector = this.$el.find('.media-control-multicamera[data-multicamera]');
         this.$clipText = this.$el.find('.media-clip-text[data-clipstext]');
@@ -44736,7 +44738,7 @@ class MediaControl extends UICorePlugin {
             case 'seekBarContainer':
                 return this.$seekBarContainer;
             case 'subtitlesSelector':
-                return this.$subtitlesSelector;
+                return null;
         }
     }
     putElement(name, element) {
@@ -44744,10 +44746,13 @@ class MediaControl extends UICorePlugin {
             case 'audioTracksSelector':
                 this.getRightPanel().append(element);
                 break;
+            case 'gear':
+                this.getRightPanel().append(element);
+                break;
             case 'pip':
                 this.getRightPanel().append(element);
                 break;
-            case 'gear':
+            case 'subtitlesSelector':
                 this.getRightPanel().append(element);
                 break;
         }
@@ -45043,6 +45048,7 @@ MediaControl.extend = function (properties) {
 
 const VERSION$5 = '2.19.12';
 const T$d = 'plugins.bottom_gear';
+// TODO disabled if no items added
 /**
  * `PLUGIN` that adds the gear button with an extra options menu on the right side of the {@link MediaControl | media control} UI
  * @beta
@@ -45051,7 +45057,7 @@ const T$d = 'plugins.bottom_gear';
  *
  * Depends on:
  *
- * - {@link MediaControl | media_control}
+ * - {@link MediaControl}
  */
 class BottomGear extends UICorePlugin {
     isHd = false;
@@ -49731,6 +49737,7 @@ const T$6 = 'plugins.playback_rate';
  * - {@link BottomGear | bottom_gear}
  *
  * It renders a button in the gear menu, which opens a dropdown with the options to change the playback rate.
+ * Note that the playback rate change is supported only for VOD or DVR enabled live streams.
  */
 class PlaybackRate extends UICorePlugin {
     playbackRates = DEFAULT_PLAYBACK_RATES;
@@ -50943,14 +50950,13 @@ const subtitlesOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"
 
 const subtitlesOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M16.238 16.1C13.979 16.1 12.578 14.538 12.578 11.997C12.578 9.462 13.973 7.9 16.238 7.9C18.087 7.9 19.5029 9.127 19.6219 10.824H18.032C17.876 9.927 17.168 9.338 16.238 9.338C15.011 9.338 14.249 10.354 14.249 11.997C14.249 13.641 15.011 14.662 16.243 14.662C17.178 14.662 17.881 14.111 18.038 13.251H19.627C19.492 14.938 18.119 16.1 16.238 16.1ZM8.03198 16.1C5.77298 16.1 4.37299 14.538 4.37299 11.997C4.37299 9.462 5.76798 7.9 8.03198 7.9C9.88098 7.9 11.298 9.127 11.416 10.824H9.82697C9.67097 9.927 8.96198 9.338 8.03198 9.338C6.80598 9.338 6.04297 10.354 6.04297 11.997C6.04297 13.641 6.80596 14.662 8.03796 14.662C8.97296 14.662 9.67601 14.111 9.83301 13.251H11.422C11.287 14.938 9.91398 16.1 8.03198 16.1ZM22.5 3H1.5C0.672 3 0 3.671 0 4.5V19.5C0 20.329 0.672 21 1.5 21H22.5C23.329 21 24 20.329 24 19.5V4.5C24 3.671 23.329 3 22.5 3Z\"\n    fill=\"#C9C9C9\"/>\n  <rect y=\"22\" width=\"24\" height=\"2\" rx=\"1\" fill=\"#F6413B\"/>\n</svg>\n";
 
-const comboboxHTML = "<button data-subtitles-button class='media-control-button media-control-icon gcore-skin-button-color'>\n    <span class='subtitle-text'></span>\n</button>\n\n<ul class='gcore-skin-bg-color'>\n    <li><a href=\"#\" class='gcore-skin-text-color' data-subtitles-select=\"off\">off</a></li>\n    <% for (const track of tracks) { %>\n        <% if (track.kind === 'subtitles' || track.kind === 'captions') { %>\n            <li>\n                <a href=\"#\" class='gcore-skin-text-color' data-subtitles-select=\"<%= track.language %>\">\n                    <%= track.label %>\n                </a>\n            </li>\n        <% } %>\n    <% } %>\n</ul>\n";
+const comboboxHTML = "<button data-subtitles-button class='media-control-button media-control-icon gcore-skin-button-color'>\n    <span class='subtitle-text'></span>\n</button>\n\n<ul class='gcore-skin-bg-color'>\n    <% for (const t of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-subtitles-select=\"<%= t.id %>\">\n                <%= t.name %>\n            </a>\n        </li>\n    <% } %>\n    <li><a href=\"#\" class='gcore-skin-text-color' data-subtitles-select=\"-1\">Off</a></li>\n</ul>\n";
 
 const stringHTML = "<div class=\"subtitle-string\">\n  <p></p>\n</div>\n";
 
 const VERSION = '2.19.14';
 const LOCAL_STORAGE_SUBTITLES_ID = 'gplayer.plugins.subtitles.selected';
 const T$2 = 'plugins.subtitles';
-const NO_TRACK = { language: 'off' };
 /**
  * `PLUGIN` that provides a UI to select the subtitles when available.
  * @beta
@@ -50960,10 +50966,7 @@ const NO_TRACK = { language: 'off' };
  *
  * - {@link MediaControl}
  *
- * Configuration options:
- *
- * - subtitles.language - The language of the subtitles to select by default.
- *
+ * Configuration options -  {@link SubtitlesPluginSettings}
  * @example
  * ```ts
  * import { Subtitles } from '@gcorevideo/player'
@@ -50979,11 +50982,10 @@ const NO_TRACK = { language: 'off' };
  * ```
  */
 class Subtitles extends UICorePlugin {
-    currentLevel = null;
     isPreselectedApplied = false;
     isShowing = false;
-    track = { ...NO_TRACK };
-    tracks = null;
+    track = null;
+    tracks = [];
     $string = null;
     /**
      * @internal
@@ -51010,7 +51012,7 @@ class Subtitles extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: this.name,
+            class: 'media-control-subtitles',
             'data-subtitles': '',
         };
     }
@@ -51019,28 +51021,34 @@ class Subtitles extends UICorePlugin {
      */
     get events() {
         return {
-            'click [data-subtitles-select]': 'onLevelSelect',
-            'click [data-subtitles-button]': 'onShowLevelSelectMenu',
+            'click [data-subtitles-select]': 'onItemSelect',
+            'click [data-subtitles-button]': 'toggleMenu',
         };
     }
     get preselectedLanguage() {
-        return this.core.options.subtitles?.language ?? 'off';
+        return this.core.options.subtitles?.language ?? '';
     }
     /**
      * @internal
      */
     bindEvents() {
+        this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events$1.CORE_RESIZE, this.playerResize);
+        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
+    }
+    onCoreReady() {
+        trace(`${T$2} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(this.core, Events$1.CORE_RESIZE, this.playerResize);
-        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.bindPlaybackEvents);
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
-        this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hideSelectLevelMenu);
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hideMenu);
     }
-    bindPlaybackEvents() {
+    onContainerChanged() {
+        trace(`${T$2} onContainerChanged`);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_FULLSCREEN, this.playerResize);
-        this.listenToOnce(this.core.activePlayback, Events$1.PLAYBACK_PLAY, this.getTracks);
         this.listenTo(this.core.activeContainer, 'container:advertisement:start', this.onStartAd);
+        this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_SUBTITLE_AVAILABLE, this.onSubtitleAvailable);
+        this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_SUBTITLE_CHANGED, this.onSubtitleChanged);
         // fix for iOS
         const video = this.core.activePlayback.el;
         assert(video, 'video element is required');
@@ -51055,20 +51063,50 @@ class Subtitles extends UICorePlugin {
             }
         });
     }
-    getTracks() {
-        if (this.core.activePlayback) {
-            try {
-                const tracks = this.core.activePlayback.el
-                    .textTracks;
-                if (tracks.length > 0) {
-                    this.setTracks(tracks);
-                }
+    onSubtitleAvailable() {
+        trace(`${T$2} onSubtitleAvailable`);
+        this.applyTracks();
+    }
+    onSubtitleChanged({ id }) {
+        trace(`${T$2} onSubtitleChanged`, { id });
+        if (id === -1) {
+            this.clearSubtitleText();
+        }
+        for (const track of this.tracks) {
+            if (track.id === id) {
+                track.track.mode = 'showing';
+                this.setSubtitleText(this.getSubtitleText(track.track));
+                track.track.oncuechange = (e) => {
+                    try {
+                        if (track.track.activeCues?.length) {
+                            const html = track.track.activeCues[0].getCueAsHTML();
+                            this.setSubtitleText(html);
+                        }
+                        else {
+                            this.clearSubtitleText();
+                        }
+                    }
+                    catch (error) {
+                        reportError(error);
+                    }
+                };
             }
-            catch (error) {
-                reportError(error);
+            else {
+                track.track.oncuechange = null;
+                track.track.mode = 'hidden';
             }
         }
     }
+    applyTracks() {
+        try {
+            this.tracks = this.core.activePlayback.closedCaptionsTracks;
+            this.applyPreselectedSubtitles();
+            this.render();
+        }
+        catch (error) {
+            reportError(error);
+        }
+    }
     onStartAd() {
         if (this.isShowing && this.core.activeContainer) {
             this.hide();
@@ -51080,10 +51118,11 @@ class Subtitles extends UICorePlugin {
         this.stopListening(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
     }
     playerResize() {
+        trace(`${T$2} playerResize`);
         const shouldShow = this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
-            this.currentLevel &&
-            this.currentLevel.mode &&
+            this.track &&
+            this.track.track.mode &&
             Browser.isiOS &&
             this.isShowing;
         if (shouldShow) {
@@ -51105,7 +51144,7 @@ class Subtitles extends UICorePlugin {
         this.$string.hide();
         if (this.tracks) {
             for (const t of this.tracks) {
-                t.mode = 'hidden';
+                t.track.mode = 'hidden';
             }
         }
     }
@@ -51117,23 +51156,20 @@ class Subtitles extends UICorePlugin {
         this.renderIcon();
         if (this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
-            this.currentLevel &&
-            this.currentLevel.mode &&
+            this.track &&
+            this.track.track.mode &&
             Browser.isiOS) {
             this.$string.hide();
-            this.currentLevel.mode = 'showing';
+            this.track.track.mode = 'showing';
         }
         else {
             this.$string.show();
         }
     }
     shouldRender() {
-        return !!(this.tracks && this.tracks.length > 0);
+        return this.tracks.length > 0;
     }
     resizeFont() {
-        if (!this.core.activeContainer) {
-            return;
-        }
         if (!this.$string) {
             return;
         }
@@ -51150,132 +51186,72 @@ class Subtitles extends UICorePlugin {
         if (!this.shouldRender()) {
             return this;
         }
-        trace(`${T$2} render`, {
-            tracks: this.tracks?.length,
-            track: this.track?.language,
-        });
         const mediaControl = this.core.getPlugin('media_control');
-        assert(mediaControl, 'media_control plugin is required');
         this.$el.html(Subtitles.template({ tracks: this.tracks }));
         this.core.activeContainer.$el.find('.subtitle-string').remove();
         this.$string = $(Subtitles.templateString());
         this.resizeFont();
-        this.core.activeContainer.$el.append(this.$string[0]);
-        const ss = mediaControl.getElement('subtitlesSelector');
-        if (ss && ss.length > 0) {
-            ss.append(this.el);
-        }
-        else {
-            mediaControl.getRightPanel().append(this.el);
-        }
-        this.updateCurrentLevel(this.track);
-        this.highlightCurrentSubtitles();
-        this.applyPreselectedSubtitles();
+        this.core.activeContainer.$el.append(this.$string);
+        mediaControl.putElement('subtitlesSelector', this.$el);
+        this.updateSelection();
         this.renderIcon();
         return this;
     }
-    setTracks(tracks) {
-        this.tracks = tracks;
-        this.render();
+    findById(id) {
+        return this.tracks.find((track) => track.id === id) ?? null;
     }
-    findLevelBy(id) {
-        if (this.tracks) {
-            for (const track of this.tracks) {
-                if (track.language === id) {
-                    return track; // TODO TrackInfo?
-                }
-            }
-        }
-    }
-    selectLevel(id) {
+    selectItem(item) {
         this.clearSubtitleText();
-        this.track = this.findLevelBy(id) || { ...NO_TRACK };
-        this.hideSelectLevelMenu();
-        if (!this.track) {
-            this.track = { language: 'off' };
-        }
-        this.updateCurrentLevel(this.track);
-    }
-    onLevelSelect(event) {
-        const id = event.target.dataset.subtitlesSelect;
-        if (id) {
-            localStorage.setItem(LOCAL_STORAGE_SUBTITLES_ID, id);
-            this.selectLevel(id);
-        }
+        this.track = item;
+        this.hideMenu();
+        this.updateSelection();
+    }
+    onItemSelect(event) {
+        const id = event.target.dataset.subtitlesSelect ?? '-1';
+        trace(`${T$2} onItemSelect`, { id });
+        localStorage.setItem(LOCAL_STORAGE_SUBTITLES_ID, id);
+        this.selectItem(this.findById(Number(id)));
         return false;
     }
     applyPreselectedSubtitles() {
         if (!this.isPreselectedApplied) {
             this.isPreselectedApplied = true;
+            if (!this.preselectedLanguage) {
+                return;
+            }
             setTimeout(() => {
-                this.selectLevel(this.preselectedLanguage);
-            }, 300);
+                this.selectItem(this.tracks.find((t) => t.track.language === this.preselectedLanguage) ?? null);
+            }, 300); // TODO why delay?
         }
     }
-    onShowLevelSelectMenu() {
-        trace(`${T$2} onShowLevelSelectMenu`);
-        this.toggleContextMenu();
-    }
-    hideSelectLevelMenu() {
+    hideMenu() {
         this.$('[data-subtitles] ul').hide();
     }
-    toggleContextMenu() {
+    toggleMenu() {
         this.$('[data-subtitles] ul').toggle();
     }
-    buttonElement() {
-        return this.$('[data-subtitles] button');
+    itemElement(id) {
+        return this.$(`ul li a[data-subtitles-select="${id}"]`).parent();
     }
-    levelElement(id) {
-        return this.$('[data-subtitles] ul a' + (id ? '[data-subtitles-select="' + id + '"]' : '')).parent();
-    }
-    startLevelSwitch() {
-        this.buttonElement().addClass('changing');
-    }
-    stopLevelSwitch() {
-        this.buttonElement().removeClass('changing');
+    allItemElements() {
+        return this.$('[data-subtitles] li');
     }
     selectSubtitles() {
-        if (!this.currentLevel) {
-            return;
-        }
-        if (this.tracks) {
-            for (let i = 0; i < this.tracks.length; i++) {
-                const track = this.tracks[i];
-                if (track.language === this.currentLevel.language) {
-                    track.mode = 'showing';
-                    const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
-                    const cues = track.cues;
-                    let subtitleText = '';
-                    if (cues && cues.length) {
-                        for (const cue of cues) {
-                            if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
-                                subtitleText +=
-                                    cue.getCueAsHTML().textContent + '\n';
-                            }
-                        }
-                    }
-                    this.setSubtitleText(subtitleText);
-                    track.oncuechange = (e) => {
-                        try {
-                            if (track.activeCues?.length) {
-                                const html = track.activeCues[0].getCueAsHTML();
-                                this.setSubtitleText(html);
-                            }
-                            else {
-                                this.clearSubtitleText();
-                            }
-                        }
-                        catch (error) {
-                            // console.error(error);
-                            reportError(error);
-                        }
-                    };
-                    continue;
+        const trackId = this.track ? this.track.id : -1;
+        this.core.activePlayback.closedCaptionsTrackId = trackId;
+    }
+    getSubtitleText(track) {
+        const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
+        const cues = track.cues;
+        const lines = [];
+        if (cues && cues.length) {
+            for (const cue of cues) {
+                if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
+                    lines.push(cue.getCueAsHTML().textContent);
                 }
-                this.tracks[i].oncuechange = null;
-                this.tracks[i].mode = 'hidden';
             }
         }
+        return lines.join('\n');
     }
     setSubtitleText(text) {
         this.$string.find('p').html(text);
@@ -51283,9 +51259,8 @@ class Subtitles extends UICorePlugin {
     clearSubtitleText() {
         this.setSubtitleText('');
     }
-    updateCurrentLevel(track) {
-        this.currentLevel = track;
-        if (track.language === 'off') {
+    updateSelection() {
+        if (!this.track) {
             this.hide();
         }
         else {
@@ -51295,21 +51270,22 @@ class Subtitles extends UICorePlugin {
         this.highlightCurrentSubtitles();
     }
     highlightCurrentSubtitles() {
-        this.levelElement().removeClass('current');
-        this.levelElement().find('a').removeClass('gcore-skin-active');
-        if (this.currentLevel) {
-            const currentLevelElement = this.levelElement(this.currentLevel.language);
-            currentLevelElement.addClass('current');
-            currentLevelElement.find('a').addClass('gcore-skin-active');
-        }
+        this.allItemElements()
+            .removeClass('current')
+            .find('a')
+            .removeClass('gcore-skin-active');
+        trace(`${T$2} highlightCurrentSubtitles`, {
+            track: this.track?.id,
+        });
+        const currentLevelElement = this.itemElement(this.track ? this.track.id : -1);
+        currentLevelElement
+            .addClass('current')
+            .find('a')
+            .addClass('gcore-skin-active');
     }
     renderIcon() {
         const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon;
-        this.core
-            .getPlugin('media_control')
-            .getElement('subtitlesSelector')
-            ?.find('span.subtitle-text')
-            .html(icon);
+        this.$el.find('span.subtitle-text').html(icon);
     }
 }