@gcorevideo/player 2.21.1 → 2.21.4

package/dist/plugins/index.js

@@ -9775,7 +9775,7 @@ function ifError(err) {
 // export const CLAPPR_VERSION: string = process.env.CLAPPR_VERSION || '0.11.3';
 const CLAPPR_VERSION = '0.11.3';
 
-const pluginHtml$7 = "<button data-track-selector-button class='gcore-skin-button-color'>\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"></span>\n</button>\n<ul class='gcore-skin-bg-color'>\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-track-selector-select=\"<%= track.id %>\">\n                <%= track.label %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
+const pluginHtml$7 = "<button data-audiotracks-button class='gcore-skin-button-color' id=\"audiotracks-button\">\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"></span>\n</button>\n<ul class='gcore-skin-bg-color' id=\"audiotracks-select\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-audiotracks-select=\"<%= track.id %>\">\n                <%= track.label %>\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";
 
@@ -9817,8 +9817,7 @@ class AudioSelector extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: 'media-control-audio-tracks',
-            'data-track-selector': '',
+            class: 'media-control-audiotracks',
         };
     }
     /**
@@ -9826,8 +9825,8 @@ class AudioSelector extends UICorePlugin {
      */
     get events() {
         return {
-            'click [data-track-selector-select]': 'onTrackSelect',
-            'click [data-track-selector-button]': 'onShowLevelSelectMenu',
+            'click [data-audiotracks-select]': 'onTrackSelect',
+            'click [data-audiotracks-button]': 'onShowLevelSelectMenu',
         };
     }
     /**
@@ -9884,7 +9883,7 @@ class AudioSelector extends UICorePlugin {
         const mediaControl = this.core.getPlugin('media_control');
         this.$el.html(AudioSelector.template({ tracks: this.tracks, title: this.getTitle() }));
         this.$('.audio-arrow').append(audioArrow);
-        mediaControl.putElement('audioTracksSelector', this.$el);
+        mediaControl.putElement('audiotracks', this.el);
         this.updateText();
         this.highlightCurrentTrack();
         return this;
@@ -9897,7 +9896,7 @@ class AudioSelector extends UICorePlugin {
         return this.tracks.find((track) => track.id === id);
     }
     onTrackSelect(event) {
-        const id = event.target?.dataset?.trackSelectorSelect;
+        const id = event.target?.dataset?.audiotracksSelect;
         if (id) {
             this.selectAudioTrack(id);
         }
@@ -9927,7 +9926,7 @@ class AudioSelector extends UICorePlugin {
     }
     trackElement(id) {
         return this.$('ul a' +
-            (id !== undefined ? '[data-track-selector-select="' + id + '"]' : '')).parent();
+            (id !== undefined ? '[data-audiotracks-select="' + id + '"]' : '')).parent();
     }
     getTitle() {
         return this.currentTrack?.label || '';
@@ -10094,7 +10093,7 @@ class BigMuteButton extends UICorePlugin {
     }
 }
 
-const pluginHtml$5 = "<button type=\"button\" class=\"button-gear media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon\" data-gear-button=\"-1\">\n    <%= icon %>\n</button>\n<div class=\"gear-wrapper gcore-skin-bg-color\">\n    <ul class=\"gear-options-list\">\n        <% for (const item of items) { %>\n            <li data-<%= item %>></li>\n        <% } %>\n    </ul>\n</div>";
+const pluginHtml$5 = "<button type=\"button\" class=\"button-gear media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon\" data-gear-button=\"-1\" id=\"gear-button\">\n    <%= icon %>\n</button>\n<div class=\"gear-wrapper gcore-skin-bg-color\">\n    <ul class=\"gear-options-list\" id=\"gear-options\">\n        <% for (const item of items) { %>\n            <li data-<%= item %>></li>\n        <% } %>\n    </ul>\n</div>";
 
 const gearIcon = "<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_660_1503)\">\n    <path\n      d=\"M19.14 12.94C19.18 12.64 19.2 12.33 19.2 12C19.2 11.68 19.18 11.36 19.13 11.06L21.16 9.47999C21.34 9.33999 21.39 9.06999 21.28 8.86999L19.36 5.54999C19.24 5.32999 18.99 5.25999 18.77 5.32999L16.38 6.28999C15.88 5.90999 15.35 5.58999 14.76 5.34999L14.4 2.80999C14.36 2.56999 14.16 2.39999 13.92 2.39999H10.08C9.83999 2.39999 9.64999 2.56999 9.60999 2.80999L9.24999 5.34999C8.65999 5.58999 8.11999 5.91999 7.62999 6.28999L5.23999 5.32999C5.01999 5.24999 4.76999 5.32999 4.64999 5.54999L2.73999 8.86999C2.61999 9.07999 2.65999 9.33999 2.85999 9.47999L4.88999 11.06C4.83999 11.36 4.79999 11.69 4.79999 12C4.79999 12.31 4.81999 12.64 4.86999 12.94L2.83999 14.52C2.65999 14.66 2.60999 14.93 2.71999 15.13L4.63999 18.45C4.75999 18.67 5.00999 18.74 5.22999 18.67L7.61999 17.71C8.11999 18.09 8.64999 18.41 9.23999 18.65L9.59999 21.19C9.64999 21.43 9.83999 21.6 10.08 21.6H13.92C14.16 21.6 14.36 21.43 14.39 21.19L14.75 18.65C15.34 18.41 15.88 18.09 16.37 17.71L18.76 18.67C18.98 18.75 19.23 18.67 19.35 18.45L21.27 15.13C21.39 14.91 21.34 14.66 21.15 14.52L19.14 12.94ZM12 15.6C10.02 15.6 8.39999 13.98 8.39999 12C8.39999 10.02 10.02 8.39999 12 8.39999C13.98 8.39999 15.6 10.02 15.6 12C15.6 13.98 13.98 15.6 12 15.6Z\"\n      fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_660_1503\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
 
@@ -10356,7 +10355,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 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 === \"vr\") {\n                renderVR(setting)\n            } else if (setting === \"clipsText\") {\n                renderClipsText(setting)\n            } else if (setting === \"fullscreen\") {\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";
 
@@ -10408,7 +10407,7 @@ function orderByOrderPattern(arr, order) {
  * The methods exposed are to be used by the other plugins that extend the media control UI.
  */
 class MediaControl extends UICorePlugin {
-    advertisementPlaying = false;
+    // private advertisementPlaying = false
     buttonsColor = null;
     currentDurationValue = 0;
     currentPositionValue = 0;
@@ -10430,7 +10429,7 @@ class MediaControl extends UICorePlugin {
     lastMouseY = 0;
     persistConfig;
     rendered = false;
-    settings = {};
+    settings = {}; // TODO & seekEnabled: boolean, ...
     userDisabled = false;
     userKeepVisible = false;
     verticalVolume = false;
@@ -10450,7 +10449,6 @@ class MediaControl extends UICorePlugin {
     $seekBarLoaded = null;
     $seekBarPosition = null;
     $seekBarScrubber = null;
-    $subtitlesSelector = null;
     $volumeBarContainer = null;
     $volumeBarBackground = null;
     $volumeBarFill = null;
@@ -10471,7 +10469,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;
     }
     /**
@@ -10611,18 +10610,16 @@ class MediaControl extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events.CONTAINER_DBLCLICK, this.toggleFullscreen);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_PROGRESS, this.updateProgressBar);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_SETTINGSUPDATE, this.settingsUpdate);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.settingsUpdate);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_SETTINGSUPDATE, this.updateSettings);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.updateSettings);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_MEDIACONTROL_DISABLE, this.disable);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_MEDIACONTROL_ENABLE, this.enable);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_ENDED, this.ended);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_VOLUME, this.onVolumeChanged);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_OPTIONS_CHANGE, this.setInitialVolume);
-        if (this.core.activePlayback.el.nodeName.toLowerCase() === 'video') {
-            // wait until the metadata has loaded and then check if fullscreen on video tag is supported
-            this.listenToOnce(this.core.activeContainer, Events.CONTAINER_LOADEDMETADATA, this.onLoadedMetadataOnVideoTag);
-        }
+        // wait until the metadata has loaded and then check if fullscreen on video tag is supported
+        this.listenToOnce(this.core.activeContainer, Events.CONTAINER_LOADEDMETADATA, this.onLoadedMetadata);
     }
     /**
      * Hides the media control UI
@@ -10655,13 +10652,13 @@ class MediaControl extends UICorePlugin {
     onVolumeChanged() {
         this.updateVolumeUI();
     }
-    onLoadedMetadataOnVideoTag(event) {
+    onLoadedMetadata() {
         const video = this.core.activePlayback?.el;
         // video.webkitSupportsFullscreen is deprecated but iOS appears to only use this
         // see https://github.com/clappr/clappr/issues/1127
         if (!Fullscreen.fullscreenEnabled() && video.webkitSupportsFullscreen) {
             this.fullScreenOnVideoTagSupported = true;
-            this.settingsUpdate();
+            this.updateSettings();
         }
     }
     updateVolumeUI() {
@@ -10890,7 +10887,7 @@ class MediaControl extends UICorePlugin {
         this.setInitialVolume();
         this.changeTogglePlay();
         this.bindContainerEvents();
-        this.settingsUpdate();
+        this.updateSettings();
         this.core.activeContainer.trigger(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.core.activeContainer.isDvrInUse());
         // TODO test
         if (this.core.activeContainer.mediaControlDisabled) {
@@ -11071,18 +11068,19 @@ class MediaControl extends UICorePlugin {
             this.core.$el.addClass('nocursor');
         }
     }
-    settingsUpdate() {
+    updateSettings() {
         const newSettings = $.extend(true, {
             left: [],
             default: [],
             right: [],
-        }, this.core.activeContainer?.settings);
+        }, this.core.activeContainer.settings);
         newSettings.left = orderByOrderPattern([...newSettings.left, 'clipsText', 'volume'], LEFT_ORDER);
+        // actual order of the items appear rendered is controlled by CSS
         newSettings.right = [
             'fullscreen',
             'pip',
-            'bottomgear',
-            'subtitles',
+            'gear',
+            'cc',
             'multicamera',
             'playbackrate',
             'vr',
@@ -11091,7 +11089,7 @@ class MediaControl extends UICorePlugin {
         if ((!this.fullScreenOnVideoTagSupported &&
             !Fullscreen.fullscreenEnabled()) ||
             this.options.fullscreenDisable) {
-            // remove fullscreen from settings if it is present
+            // remove fullscreen from settings if it is not available
             removeArrayItem(newSettings.default, 'fullscreen');
             removeArrayItem(newSettings.left, 'fullscreen');
             removeArrayItem(newSettings.right, 'fullscreen');
@@ -11128,10 +11126,9 @@ 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]');
+        this.$clipText = this.$el.find('.media-clip-text[data-clipstext]'); // TODO
         this.$clipTextContainer = this.$el.find('.media-clip-container[data-clipstext]');
         this.resetIndicators();
         this.initializeIcons();
@@ -11157,33 +11154,31 @@ class MediaControl extends UICorePlugin {
      */
     getElement(name) {
         switch (name) {
-            case 'audioTracksSelector':
+            case 'audiotracks':
                 return null;
             case 'clipText':
                 return this.$clipText;
-            case 'gear':
-                return null;
-            case 'pip':
-                return null;
             case 'playbackRate':
                 return this.$playbackRate;
             case 'seekBarContainer':
                 return this.$seekBarContainer;
-            case 'subtitlesSelector':
-                return this.$subtitlesSelector;
         }
     }
     putElement(name, element) {
-        switch (name) {
-            case 'audioTracksSelector':
-                this.getRightPanel().append(element);
-                break;
-            case 'pip':
-                this.getRightPanel().append(element);
-                break;
-            case 'gear':
-                this.getRightPanel().append(element);
-                break;
+        const panel = this.getElementLocation(name);
+        if (panel) {
+            const current = panel.find(`[data-${name}]`);
+            element.setAttribute(`data-${name}`, "");
+            // TODO test
+            if (current.length) {
+                if (current[0] === element) {
+                    return;
+                }
+                current.replaceWith(element);
+            }
+            else {
+                panel.append(element);
+            }
         }
     }
     /**
@@ -11421,12 +11416,12 @@ class MediaControl extends UICorePlugin {
     }
     // TODO manage by the ads plugin
     onStartAd() {
-        this.advertisementPlaying = true;
+        // this.advertisementPlaying = true
         this.disable();
     }
     // TODO manage by the ads plugin
     onFinishAd() {
-        this.advertisementPlaying = false;
+        // this.advertisementPlaying = false
         this.enable();
     }
     // TODO remove
@@ -11470,12 +11465,25 @@ class MediaControl extends UICorePlugin {
         }
         return isFinite(this.core.activePlayback.getDuration());
     }
+    getElementLocation(name) {
+        if (this.settings.right?.includes(name)) {
+            return this.getRightPanel();
+        }
+        if (this.settings.left?.includes(name)) {
+            return this.getLeftPanel();
+        }
+        if (this.settings.default?.includes(name)) {
+            return this.getCenterPanel();
+        }
+        return null;
+    }
 }
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
 };
 
 const VERSION$5 = '2.19.12';
+// 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
@@ -11484,7 +11492,7 @@ const VERSION$5 = '2.19.12';
  *
  * Depends on:
  *
- * - {@link MediaControl | media_control}
+ * - {@link MediaControl}
  */
 class BottomGear extends UICorePlugin {
     isHd = false;
@@ -11537,6 +11545,7 @@ class BottomGear extends UICorePlugin {
     getElement(name) {
         return this.$el.find(`.gear-options-list [data-${name}]`);
     }
+    // TODO implement putElement/addElement method
     /**
      * Replaces the content of the gear menu
      * @param content - Zepto result of the element
@@ -11567,7 +11576,7 @@ class BottomGear extends UICorePlugin {
         ];
         const icon = this.isHd ? gearHdIcon : gearIcon;
         this.$el.html(BottomGear.template({ icon, items }));
-        mediaControl.putElement('gear', this.$el);
+        mediaControl.putElement('gear', this.el);
         mediaControl.trigger(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED);
         return this;
     }
@@ -14567,7 +14576,7 @@ class ClipsPlugin extends UICorePlugin {
 
 const templateHtml$1 = "<ul class=\"context-menu-list\">\n    <% if(options) { %>\n        <% for (var i = 0; i < options.length; i++) { %>\n        <li class=\"context-menu-list-item <%= options[i].class %>\"\n            data-<%= options[i].name %>><%= options[i].label %></li>\n        <% } %>\n    <% } %>\n</ul>\n";
 
-var version$1 = "2.21.1";
+var version$1 = "2.21.4";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -16050,6 +16059,7 @@ class PictureInPicture extends UICorePlugin {
     static get version() {
         return VERSION$2;
     }
+    static buttonTemplate = tmpl(buttonHtml$1);
     /**
      * @internal
      */
@@ -16082,8 +16092,7 @@ class PictureInPicture extends UICorePlugin {
         if (!this.isPiPSupported()) {
             return this;
         }
-        const t = tmpl(buttonHtml$1);
-        this.$el.html(t({ pipIcon }));
+        this.$el.html(PictureInPicture.buttonTemplate({ pipIcon }));
         const mediaControl = this.core.getPlugin('media_control');
         if (mediaControl) {
             mediaControl.putElement('pip', this.el);
@@ -16109,9 +16118,9 @@ class PictureInPicture extends UICorePlugin {
     }
 }
 
-const buttonHtml = "<button class='gplayer-lite-btn gcore-skin-text-color gear-option'>\n    <span class=\"gear-option_speed-icon\"><%= speedIcon %></span>\n    <span>Playback speed</span>\n    <span class=\"gear-option_arrow-right-icon\"><%= arrowRightIcon %></span>\n    <span class='gear-option_value'><%= title %></span>\n</button>\n";
+const buttonHtml = "<button class='gplayer-lite-btn gcore-skin-text-color gear-option' id=\"playback-rate-button\">\n    <span class=\"gear-option_speed-icon\"><%= speedIcon %></span>\n    <span class=\"gear-option_label\"><%= i18n.t('playback_rate') %></span>\n    <span class=\"gear-option_arrow-right-icon\"><%= arrowRightIcon %></span>\n    <span class='gear-option_value'><%= title %></span>\n</button>\n";
 
-const listHtml = "<button class=\"gplayer-lite-btn go-back gcore-skin-text-color\">\n    <span class=\"arrow-left-icon\"><%= arrowLeftIcon %></span>\n    Playback speed\n</button>\n<ul class=\"gear-sub-menu\">\n    <% for (var i = playbackRates.length - 1; i >= 0; i--) { %>\n        <li>\n            <a href=\"#\" class='gear-sub-menu_btn gcore-skin-text-color' data-rate=\"<%= playbackRates[i].value %>\">\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= playbackRates[i].label %>\n            </a>\n        </li>\n    <% } %>\n</ul>\n";
+const listHtml = "<button class=\"gplayer-lite-btn go-back gcore-skin-text-color\">\n    <span class=\"arrow-left-icon\"><%= arrowLeftIcon %></span>\n    <%= i18n.t('playback_rate') %>\n</button>\n<ul class=\"gear-sub-menu\">\n    <% for (const item of playbackRates) { %>\n        <li>\n            <a href=\"#\" class='gear-sub-menu_btn gcore-skin-text-color' data-rate=\"<%= item.value %>\">\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= item.label %>\n            </a>\n        </li>\n    <% } %>\n</ul>\n";
 
 const speedIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M11.9854 23.9999C11.4272 23.9999 10.9571 23.5293 10.9571 22.9704C10.9571 22.4115 11.4272 21.9409 11.9854 21.9409C17.4492 21.9409 21.9143 17.4704 21.9143 11.9999C21.9143 6.52948 17.4492 2.05899 11.9854 2.05899C11.4272 2.05899 10.9571 1.58836 10.9571 1.02949C10.9571 0.470625 11.4272 0 11.9854 0C18.5949 0 24 5.38224 24 12.0291C24 18.6766 18.5949 24 11.9854 24V23.9999ZM10.2227 17.853L17.4785 13.4413C18.0072 13.1178 18.301 12.5885 18.301 11.9707C18.301 11.353 17.9779 10.8237 17.4785 10.5002L10.2227 6.08852C9.69405 5.76499 9.01826 5.76499 8.4896 6.05919C7.96094 6.35338 7.60828 6.94157 7.60828 7.5591V16.3824C7.60828 17.0002 7.93142 17.5883 8.4896 17.8824C8.75393 18.0294 9.04779 18.1177 9.34139 18.1177C9.63523 18.1177 9.95838 18.0294 10.2227 17.853V17.853ZM15.9216 11.9707L9.66457 15.7647V8.17661L15.9216 11.9707ZM8.22516 22.3529C8.4602 21.8236 8.25447 21.2058 7.7258 20.9705C7.19714 20.7353 6.69755 20.4413 6.2277 20.0882C5.75764 19.7646 5.11137 19.8822 4.78824 20.3235C4.46509 20.7941 4.58251 21.4412 5.02327 21.7647C5.58146 22.1764 6.19819 22.5293 6.81519 22.8235C6.96211 22.8824 7.10903 22.9117 7.25574 22.9117C7.66699 22.941 8.04893 22.7057 8.22513 22.3528L8.22516 22.3529ZM3.58381 19.0882C4.05387 18.7647 4.17127 18.1177 3.84814 17.647C3.52502 17.1764 3.23115 16.6765 2.99635 16.1471C2.76132 15.6178 2.14456 15.4118 1.6157 15.6472C1.08704 15.8825 0.881306 16.5 1.11634 17.0295C1.41018 17.6472 1.7626 18.2648 2.14459 18.8236C2.35032 19.1178 2.67325 19.2646 2.99638 19.2646C3.20191 19.2942 3.40763 19.2353 3.58384 19.0882L3.58381 19.0882ZM1.14563 13.9707C1.70382 13.9118 2.14435 13.4118 2.08576 12.853C2.05645 12.5588 2.05645 12.2648 2.05645 11.9706C2.05645 11.6764 2.05645 11.4117 2.08576 11.1178C2.14456 10.5589 1.70381 10.059 1.14563 10.0001C0.587439 9.94122 0.0881057 10.3825 0.0293019 10.9414C1.96979e-07 11.2942 0 11.6178 0 11.9709C0 12.3237 0.0293018 12.6768 0.0588091 13.0297C0.117618 13.5589 0.558169 13.9709 1.08706 13.9709C1.08686 13.9707 1.11636 13.9707 1.14567 13.9707L1.14563 13.9707ZM2.96687 7.79432C3.2019 7.26502 3.49553 6.76482 3.81866 6.2944C4.1418 5.82377 4.02439 5.17672 3.55432 4.8532C3.08427 4.52967 2.438 4.64722 2.11486 5.11786C1.73292 5.67672 1.38047 6.2942 1.08661 6.91193C0.851579 7.44123 1.08661 8.05897 1.58597 8.29426C1.73289 8.35314 1.87981 8.38247 2.02652 8.38247C2.40888 8.41181 2.7906 8.1767 2.96686 7.7943L2.96687 7.79432ZM6.22757 3.85328C6.69762 3.52974 7.19696 3.23554 7.69635 2.97089C8.22501 2.73558 8.43074 2.11807 8.19571 1.58857C7.96068 1.05927 7.34392 0.85329 6.81505 1.08861C6.19806 1.3828 5.58128 1.73565 5.02314 2.14741C4.55308 2.47094 4.43568 3.11797 4.78811 3.5886C4.99384 3.8828 5.31676 4.02969 5.6399 4.02969C5.84583 4.05902 6.05135 4.00014 6.22757 3.85325V3.85328Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
@@ -16132,7 +16141,7 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: '1.25', label: '1.25x' },
     { value: '1.5', label: '1.5x' },
     { value: '1.75', label: '1.75x' },
-    { value: '2.0', label: '2x' }
+    { value: '2.0', label: '2x' },
 ];
 const DEFAULT_PLAYBACK_RATE = '1.0';
 const T$6 = 'plugins.playback_rate';
@@ -16148,6 +16157,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;
@@ -16171,16 +16181,17 @@ class PlaybackRate extends UICorePlugin {
     static listTemplate = tmpl(listHtml);
     constructor(core) {
         super(core);
-        this.playbackRates = core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
-        this.selectedRate = core.options.playbackRate?.defaultValue || DEFAULT_PLAYBACK_RATE;
+        this.playbackRates =
+            core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
+        this.selectedRate =
+            core.options.playbackRate?.defaultValue || DEFAULT_PLAYBACK_RATE;
     }
     /**
      * @internal
      */
     get attributes() {
         return {
-            'class': this.name,
-            'data-playback-rate-select': ''
+            class: 'media-control-playbackrate',
         };
     }
     /**
@@ -16228,7 +16239,7 @@ class PlaybackRate extends UICorePlugin {
     allRateElements() {
         return this.$('ul.gear-sub-menu li');
     }
-    rateElement(rate = "1") {
+    rateElement(rate = '1') {
         return this.$(`ul.gear-sub-menu a[data-rate="${rate}"]`).parent();
     }
     onPlaybackRateChange(playbackRate) {
@@ -16239,10 +16250,11 @@ class PlaybackRate extends UICorePlugin {
         }
     }
     shouldRender() {
-        if (!this.core.activeContainer) {
+        if (!this.core.activePlayback) {
             return false;
         }
-        if (this.core.getPlaybackType() === Playback.LIVE && !this.core.activePlayback.dvrEnabled) {
+        if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
+            !this.core.activePlayback.dvrEnabled) {
             return false;
         }
         return 'setPlaybackRate' in this.core.activePlayback;
@@ -16265,9 +16277,12 @@ class PlaybackRate extends UICorePlugin {
             title: this.getTitle(),
             speedIcon,
             arrowRightIcon,
+            i18n: this.core.i18n,
         });
         this.$el.html(button);
-        this.core.getPlugin('bottom_gear')?.getElement('rate')?.html(this.el);
+        this.core.getPlugin('bottom_gear')
+            ?.getElement('rate')
+            ?.html(this.el);
         this.rendered = true;
         return this;
     }
@@ -16282,7 +16297,8 @@ class PlaybackRate extends UICorePlugin {
         }
     }
     onPlay() {
-        if (this.core.getPlaybackType() === Playback.LIVE && !this.core.activePlayback.dvrEnabled) {
+        if (this.core.getPlaybackType() === Playback.LIVE &&
+            !this.core.activePlayback.dvrEnabled) {
             this.resetPlaybackRate();
         }
         else {
@@ -16292,8 +16308,7 @@ class PlaybackRate extends UICorePlugin {
     resetPlaybackRate() {
         this.setSelectedRate(DEFAULT_PLAYBACK_RATE);
     }
-    onStop() {
-    }
+    onStop() { }
     onRateSelect(event) {
         event.stopPropagation();
         const rate = event.currentTarget.dataset.rate;
@@ -16308,6 +16323,7 @@ class PlaybackRate extends UICorePlugin {
             playbackRates: this.playbackRates,
             arrowLeftIcon,
             checkIcon,
+            i18n: this.core.i18n,
         }));
         this.core.getPlugin('bottom_gear')?.setContent(this.el);
         this.highlightCurrentRate();
@@ -16323,7 +16339,8 @@ class PlaybackRate extends UICorePlugin {
         this.selectedRate = rate;
     }
     getTitle() {
-        return this.playbackRates.find((r) => r.value === this.selectedRate)?.label || this.selectedRate;
+        return (this.playbackRates.find((r) => r.value === this.selectedRate)?.label ||
+            this.selectedRate);
     }
     highlightCurrentRate() {
         this.allRateElements().removeClass('current');
@@ -17356,53 +17373,51 @@ 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-cc-button class='media-control-button media-control-icon gcore-skin-button-color' id=\"cc-button\">\n    <span class='cc-text'></span>\n</button>\n\n<ul class='gcore-skin-bg-color' id=\"cc-select\">\n    <% for (const t of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-cc-select=\"<%= t.id %>\">\n                <%= t.name %>\n            </a>\n        </li>\n    <% } %>\n    <li><a href=\"#\" class='gcore-skin-text-color' data-cc-select=\"-1\">Off</a></li>\n</ul>\n";
 
-const stringHTML = "<div class=\"subtitle-string\">\n  <p></p>\n</div>\n";
+const stringHTML = "<div class=\"cc-line\" id=\"cc-line\">\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' };
+const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected';
+const T$2 = 'plugins.cc';
 /**
  * `PLUGIN` that provides a UI to select the subtitles when available.
  * @beta
  *
  * @remarks
+ * The plugin is activated when closed captions tracks are provided with the media source.
+ * It shows a familiar "CC" button with a dropdown menu to select the subtitles language.
+ *
  * Depends on:
  *
  * - {@link MediaControl}
  *
- * Configuration options:
- *
- * - subtitles.language - The language of the subtitles to select by default.
- *
+ * Configuration options -  {@link ClosedCaptionsPluginSettings}
  * @example
  * ```ts
- * import { Subtitles } from '@gcorevideo/player'
+ * import { ClosedCaptions } from '@gcorevideo/player'
  *
- * Player.registerPlugin(Subtitles)
+ * Player.registerPlugin(ClosedCaptions)
  *
  * new Player({
  *   ...
- *   subtitles: {
+ *   cc: {
  *     language: 'en',
  *   },
  * })
  * ```
  */
-class Subtitles extends UICorePlugin {
-    currentLevel = null;
+class ClosedCaptions extends UICorePlugin {
     isPreselectedApplied = false;
     isShowing = false;
-    track = { ...NO_TRACK };
-    tracks = null;
-    $string = null;
+    track = null;
+    tracks = [];
+    $line = null;
     /**
      * @internal
      */
     get name() {
-        return 'subtitles';
+        return 'cc';
     }
     /**
      * @internal
@@ -17423,8 +17438,7 @@ class Subtitles extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: this.name,
-            'data-subtitles': '',
+            class: 'media-control-cc',
         };
     }
     /**
@@ -17432,28 +17446,32 @@ class Subtitles extends UICorePlugin {
      */
     get events() {
         return {
-            'click [data-subtitles-select]': 'onLevelSelect',
-            'click [data-subtitles-button]': 'onShowLevelSelectMenu',
+            'click [data-cc-select]': 'onItemSelect',
+            'click [data-cc-button]': 'toggleMenu',
         };
     }
     get preselectedLanguage() {
-        return this.core.options.subtitles?.language ?? 'off';
+        return this.core.options.cc?.language ?? this.core.options.subtitles?.language ?? '';
     }
     /**
      * @internal
      */
     bindEvents() {
+        this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize);
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
+    }
+    onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize);
-        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.bindPlaybackEvents);
         this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectLevelMenu);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
     }
-    bindPlaybackEvents() {
+    onContainerChanged() {
         this.listenTo(this.core.activeContainer, Events.CONTAINER_FULLSCREEN, this.playerResize);
-        this.listenToOnce(this.core.activePlayback, Events.PLAYBACK_PLAY, this.getTracks);
         this.listenTo(this.core.activeContainer, 'container:advertisement:start', this.onStartAd);
+        this.listenTo(this.core.activePlayback, Events.PLAYBACK_SUBTITLE_AVAILABLE, this.onSubtitleAvailable);
+        this.listenTo(this.core.activePlayback, Events.PLAYBACK_SUBTITLE_CHANGED, this.onSubtitleChanged);
         // fix for iOS
         const video = this.core.activePlayback.el;
         assert(video, 'video element is required');
@@ -17468,19 +17486,46 @@ 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() {
+        this.applyTracks();
+    }
+    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) {
+                    }
+                };
             }
-            catch (error) {
+            else {
+                track.track.oncuechange = null;
+                track.track.mode = 'hidden';
             }
         }
     }
+    applyTracks() {
+        try {
+            this.tracks = this.core.activePlayback.closedCaptionsTracks;
+            this.applyPreselectedSubtitles();
+            this.render();
+        }
+        catch (error) {
+        }
+    }
     onStartAd() {
         if (this.isShowing && this.core.activeContainer) {
             this.hide();
@@ -17494,8 +17539,8 @@ class Subtitles extends UICorePlugin {
     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) {
@@ -17513,10 +17558,10 @@ class Subtitles extends UICorePlugin {
     hide() {
         this.isShowing = false;
         this.renderIcon();
-        this.$string.hide();
+        this.$line.hide();
         if (this.tracks) {
             for (const t of this.tracks) {
-                t.mode = 'hidden';
+                t.track.mode = 'hidden';
             }
         }
     }
@@ -17528,28 +17573,25 @@ 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.$line.hide();
+            this.track.track.mode = 'showing';
         }
         else {
-            this.$string.show();
+            this.$line.show();
         }
     }
     shouldRender() {
-        return !!(this.tracks && this.tracks.length > 0);
+        return this.tracks?.length > 0;
     }
     resizeFont() {
-        if (!this.core.activeContainer) {
-            return;
-        }
-        if (!this.$string) {
+        if (!this.$line) {
             return;
         }
         const skinWidth = this.core.activeContainer.$el.width();
-        this.$string.find('p').css('font-size', skinWidth * 0.03);
+        this.$line.find('p').css('font-size', skinWidth * 0.03);
     }
     /**
      * @internal
@@ -17561,139 +17603,80 @@ 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.$el.html(ClosedCaptions.template({ tracks: this.tracks }));
+        this.core.activeContainer.$el.find('#cc-line').remove();
+        this.$line = $(ClosedCaptions.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.$line);
+        mediaControl.putElement('cc', 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.ccSelect ?? '-1';
+        localStorage.setItem(LOCAL_STORAGE_CC_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() {
-        this.toggleContextMenu();
-    }
-    hideSelectLevelMenu() {
-        this.$('[data-subtitles] ul').hide();
+    hideMenu() {
+        this.$('[data-cc] ul').hide();
     }
-    toggleContextMenu() {
-        this.$('[data-subtitles] ul').toggle();
+    toggleMenu() {
+        this.$('[data-cc] ul').toggle();
     }
-    buttonElement() {
-        return this.$('[data-subtitles] button');
+    itemElement(id) {
+        return this.$(`ul li a[data-cc-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-cc] 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) {
-                        }
-                    };
-                    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);
+        this.$line.find('p').html(text);
     }
     clearSubtitleText() {
         this.setSubtitleText('');
     }
-    updateCurrentLevel(track) {
-        this.currentLevel = track;
-        if (track.language === 'off') {
+    updateSelection() {
+        if (!this.track) {
             this.hide();
         }
         else {
@@ -17703,21 +17686,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.cc-text').html(icon);
     }
 }
 
@@ -18556,4 +18540,4 @@ class VolumeFade extends UICorePlugin {
     }
 }
 
-export { AudioSelector, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ContextMenu, DvrControls, ErrorScreen, Favicon, GoogleAnalytics, LevelSelector, Logo, MediaControl, MediaControlEvents, MultiCamera, PictureInPicture, PlaybackRate, Poster, SeekTime, Share, SkipTime, SourceController, SpinnerEvents, SpinnerThreeBounce, Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };
+export { AudioSelector, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GoogleAnalytics, LevelSelector, Logo, MediaControl, MediaControlEvents, MultiCamera, PictureInPicture, PlaybackRate, Poster, SeekTime, Share, SkipTime, SourceController, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };