@gcorevideo/player 2.21.3 → 2.21.6

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 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 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";
 
@@ -10375,6 +10374,12 @@ const fullscreenOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"
 // Copyright 2014 Globo.com Player authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the {@link https://github.com/clappr/clappr-plugins/blob/master/LICENSE | LICENSE}.
+const DEFAULT_SETTINGS = {
+    left: [],
+    right: [],
+    default: [],
+    seekEnabled: true,
+};
 /**
  * Custom events emitted by the plugins to communicate with one another
  * @beta
@@ -10389,7 +10394,8 @@ var MediaControlEvents;
 const LEFT_ORDER = [
     'playpause',
     'playstop',
-    'live',
+    // 'live',
+    'dvr',
     'volume',
     'position',
     'duration',
@@ -10408,7 +10414,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;
@@ -10423,14 +10429,13 @@ class MediaControl extends UICorePlugin {
     hideId = null;
     hideVolumeId = null;
     intendedVolume = 100;
-    isHD = false;
     keepVisible = false;
     kibo;
     lastMouseX = 0;
     lastMouseY = 0;
     persistConfig;
     rendered = false;
-    settings = {};
+    settings = DEFAULT_SETTINGS;
     userDisabled = false;
     userKeepVisible = false;
     verticalVolume = false;
@@ -10574,8 +10579,6 @@ class MediaControl extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        // @ts-ignore
-        this.stopListening();
         this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
         this.listenTo(this.core, Events.CORE_MOUSE_MOVE, this.show);
         this.listenTo(this.core, Events.CORE_MOUSE_LEAVE, () => this.hide(this.options.hideMediaControlDelay));
@@ -10611,18 +10614,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_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_SETTINGSUPDATE, this.updateSettings);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrStateChanged);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.onHdUpdate);
         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 +10656,19 @@ 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();
+        if (this.core.activeContainer.getPlaybackType() === Playback.LIVE) {
+            this.$el.addClass('live');
+        }
+        else {
+            this.$el.removeClass('live');
         }
     }
     updateVolumeUI() {
@@ -10670,8 +10677,6 @@ class MediaControl extends UICorePlugin {
             return;
         }
         assert.ok(this.$volumeBarContainer, 'volume bar container must be present');
-        // update volume bar scrubber/fill on bar mode
-        // this.$volumeBarContainer.find('.bar-fill-2').css({});
         const containerWidth = this.$volumeBarContainer.width();
         assert.ok(this.$volumeBarBackground, 'volume bar background must be present');
         const barWidth = this.$volumeBarBackground.width();
@@ -10859,17 +10864,18 @@ class MediaControl extends UICorePlugin {
         // if the container is not ready etc
         this.intendedVolume = value;
         this.persistConfig && !isInitialVolume && Config.persist('volume', value);
+        // TODO
         const setWhenContainerReady = () => {
-            if (this.container && this.container.isReady) {
-                this.container.setVolume(value);
+            if (this.core.activeContainer && this.core.activeContainer.isReady) {
+                this.core.activeContainer.setVolume(value);
             }
             else {
-                this.listenToOnce(this.container, Events.CONTAINER_READY, () => {
-                    this.container.setVolume(value);
+                this.listenToOnce(this.core.activeContainer, Events.CONTAINER_READY, () => {
+                    this.core.activeContainer.setVolume(value);
                 });
             }
         };
-        if (!this.container) {
+        if (!this.core.activeContainer) {
             this.listenToOnce(this, Events.MEDIACONTROL_CONTAINERCHANGED, () => setWhenContainerReady());
         }
         else {
@@ -10879,7 +10885,7 @@ class MediaControl extends UICorePlugin {
     toggleFullscreen() {
         if (!Browser.isMobile) {
             this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name);
-            this.container.fullscreen();
+            this.core.activeContainer.fullscreen();
             this.core.toggleFullscreen();
             this.resetUserKeepVisible();
         }
@@ -10890,7 +10896,8 @@ class MediaControl extends UICorePlugin {
         this.setInitialVolume();
         this.changeTogglePlay();
         this.bindContainerEvents();
-        this.settingsUpdate();
+        this.updateSettings();
+        // TODO remove
         this.core.activeContainer.trigger(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.core.activeContainer.isDvrInUse());
         // TODO test
         if (this.core.activeContainer.mediaControlDisabled) {
@@ -10961,9 +10968,9 @@ class MediaControl extends UICorePlugin {
         }
         // default to 100%
         this.currentSeekBarPercentage = 100;
-        if (this.container &&
-            (this.container.getPlaybackType() !== Playback.LIVE ||
-                this.container.isDvrInUse())) {
+        if (this.core.activeContainer &&
+            (this.core.activeContainer.getPlaybackType() !== Playback.LIVE ||
+                this.core.activeContainer.isDvrInUse())) {
             this.currentSeekBarPercentage =
                 (this.currentPositionValue / this.currentDurationValue) * 100;
         }
@@ -10990,16 +10997,10 @@ class MediaControl extends UICorePlugin {
         const offsetX = MediaControl.getPageX(event) - this.$seekBarContainer.offset().left;
         let pos = (offsetX / this.$seekBarContainer.width()) * 100;
         pos = Math.min(100, Math.max(pos, 0));
-        this.container && this.container.seekPercentage(pos);
+        this.core.activeContainer && this.core.activeContainer.seekPercentage(pos);
         this.setSeekPercentage(pos);
         return false;
     }
-    setKeepVisible() {
-        this.keepVisible = true;
-    }
-    resetKeepVisible() {
-        this.keepVisible = false;
-    }
     setUserKeepVisible() {
         this.userKeepVisible = true;
     }
@@ -11071,18 +11072,24 @@ 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);
+        // TODO make order controlled via CSS
         newSettings.left = orderByOrderPattern([...newSettings.left, 'clipsText', 'volume'], LEFT_ORDER);
+        if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
+            this.core.activePlayback.dvrEnabled) {
+            newSettings.left.push('dvr');
+        }
+        // actual order of the items appear rendered is controlled by CSS
         newSettings.right = [
             'fullscreen',
             'pip',
-            'bottomgear',
-            'subtitles',
+            'gear',
+            'cc',
             'multicamera',
             'playbackrate',
             'vr',
@@ -11091,24 +11098,25 @@ 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');
         }
         removeArrayItem(newSettings.default, 'hd-indicator');
         removeArrayItem(newSettings.left, 'hd-indicator');
+        // TODO get from container's settings
         if (this.core.activePlayback.name === 'html5_video') {
             newSettings.seekEnabled = this.isSeekEnabledForHtml5Playback();
         }
-        const settingsChanged = JSON.stringify(this.settings) !== JSON.stringify(newSettings);
+        const settingsChanged = serializeSettings(this.settings) !== serializeSettings(newSettings);
         if (settingsChanged) {
             this.settings = newSettings;
             this.render();
         }
     }
-    highDefinitionUpdate(isHD) {
-        this.isHD = isHD;
+    onHdUpdate(isHD) {
+        // TODO render?
     }
     createCachedElements() {
         const $layer = this.$el.find('.media-control-layer');
@@ -11130,7 +11138,7 @@ class MediaControl extends UICorePlugin {
         this.$volumeBarScrubber = this.$el.find('.bar-scrubber[data-volume]');
         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();
@@ -11156,49 +11164,44 @@ 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 null;
         }
     }
     putElement(name, element) {
-        switch (name) {
-            case 'audioTracksSelector':
-                this.getRightPanel().append(element);
-                break;
-            case 'gear':
-                this.getRightPanel().append(element);
-                break;
-            case 'pip':
-                this.getRightPanel().append(element);
-                break;
-            case 'subtitlesSelector':
-                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);
+            }
         }
     }
     /**
-     * Get the right panel area to append custom elements to
-     * @returns  ZeptoSelector of the right panel element
+     * Toggle the visibility of a media control element
+     * @param name - The name of the media control element
+     * @param show - Whether to show or hide the element
      */
+    toggleElement(name, show) {
+        this.$el.find(`[data-${name}]`).toggle(show);
+    }
     getRightPanel() {
         return this.$el.find('.media-control-right-panel');
     }
-    /**
-     * Get the left panel area to append custom elements to
-     * @returns  ZeptoSelector of the left panel element
-     */
     getLeftPanel() {
         return this.$el.find('.media-control-left-panel');
     }
@@ -11397,7 +11400,6 @@ class MediaControl extends UICorePlugin {
             this.hideVolumeBar(0);
         }, 0);
         this.parseColors();
-        this.highDefinitionUpdate(this.isHD);
         this.core.$el.append(this.el);
         this.rendered = true;
         this.updateVolumeUI();
@@ -11423,12 +11425,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
@@ -11472,10 +11474,39 @@ 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;
+    }
+    onDvrStateChanged(dvrInUse) {
+        if (dvrInUse) {
+            this.$el.addClass('dvr');
+        }
+        else {
+            this.$el.removeClass('dvr');
+        }
+    }
 }
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
 };
+function serializeSettings(s) {
+    return s.left
+        .slice()
+        .sort()
+        .concat(s.right.slice().sort())
+        .concat(s.default.slice().sort())
+        .concat([s.seekEnabled])
+        .join(',');
+}
 
 const VERSION$5 = '2.19.12';
 // TODO disabled if no items added
@@ -11540,6 +11571,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
@@ -11570,7 +11602,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;
     }
@@ -14570,7 +14602,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.3";
+var version$1 = "2.21.6";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -14703,7 +14735,7 @@ class ContextMenu extends UIContainerPlugin {
     };
 }
 
-const dvrHTML = "<div class=\"live-info\"><%= live %></div>\n<button type=\"button\" class=\"live-button\" aria-label=\"<%= backToLive %>\"><%= backToLive %></button>\n";
+const dvrHTML = "<div class=\"live-info\" id=\"media-control-live\"><%= i18n.t('live') %></div>\n<button type=\"button\" class=\"live-button\" aria-label=\"<%= i18n.t('back_to_live') %>\" id=\"media-control-back-to-live\"><%= i18n.t('back_to_live') %></button>\n";
 
 const T$b = 'plugins.dvr_controls';
 /**
@@ -14748,7 +14780,6 @@ class DvrControls extends UICorePlugin {
     get attributes() {
         return {
             class: 'dvr-controls',
-            'data-dvr-controls': '',
         };
     }
     /**
@@ -14756,37 +14787,17 @@ class DvrControls extends UICorePlugin {
      */
     bindEvents() {
         this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
-        this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.render);
         this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.bindContainerEvents);
     }
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.settingsUpdate);
-        this.settingsUpdate();
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+        // MediaControl has been rendered
+        this.render();
     }
     bindContainerEvents() {
         this.listenToOnce(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.render);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrChanged);
-    }
-    onDvrChanged(dvrInUse) {
-        if (this.core.getPlaybackType() !== Playback.LIVE) {
-            return;
-        }
-        this.render();
-        const mediaControl = this.core.getPlugin('media_control');
-        mediaControl.$el.addClass('live');
-        if (dvrInUse) {
-            mediaControl.$el
-                .addClass('dvr')
-                .find(
-            // TODO add API, test
-            '.media-control-indicator[data-position], .media-control-indicator[data-duration]')
-                .hide();
-        }
-        else {
-            mediaControl.$el.removeClass('dvr');
-        }
     }
     click() {
         const container = this.core.activeContainer;
@@ -14795,13 +14806,8 @@ class DvrControls extends UICorePlugin {
         }
         container.seek(container.getDuration());
     }
-    settingsUpdate() {
-        this.core.getPlugin('media_control').$el.removeClass('live');
-        this.render();
-    }
     shouldRender() {
-        const useDvrControls = this.core.options.useDvrControls !== false;
-        return useDvrControls && this.core.getPlaybackType() === Playback.LIVE;
+        return this.core.getPlaybackType() === Playback.LIVE;
     }
     /**
      * @internal
@@ -14811,16 +14817,19 @@ class DvrControls extends UICorePlugin {
             dvrEnabled: this.core.activePlayback?.dvrEnabled,
             playbackType: this.core.getPlaybackType(),
         });
+        const mediaControl = this.core.getPlugin('media_control');
+        if (!mediaControl) {
+            return this;
+        }
         if (!this.shouldRender()) {
             return this;
         }
+        mediaControl.toggleElement('duration', false);
+        mediaControl.toggleElement('position', false);
         this.$el.html(DvrControls.template({
-            live: this.core.i18n.t('live'),
-            backToLive: this.core.i18n.t('back_to_live'),
+            i18n: this.core.i18n,
         }));
-        const mediaControl = this.core.getPlugin('media_control');
-        mediaControl.$el.addClass('live');
-        mediaControl.getLeftPanel().append(this.$el);
+        mediaControl.putElement('dvr', this.el);
         return this;
     }
 }
@@ -16053,6 +16062,7 @@ class PictureInPicture extends UICorePlugin {
     static get version() {
         return VERSION$2;
     }
+    static buttonTemplate = tmpl(buttonHtml$1);
     /**
      * @internal
      */
@@ -16085,8 +16095,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);
@@ -16112,9 +16121,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";
 
@@ -16135,7 +16144,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';
@@ -16175,16 +16184,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',
         };
     }
     /**
@@ -16232,7 +16242,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) {
@@ -16243,10 +16253,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;
@@ -16269,9 +16280,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;
     }
@@ -16286,7 +16300,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 {
@@ -16296,8 +16311,7 @@ class PlaybackRate extends UICorePlugin {
     resetPlaybackRate() {
         this.setSelectedRate(DEFAULT_PLAYBACK_RATE);
     }
-    onStop() {
-    }
+    onStop() { }
     onRateSelect(event) {
         event.stopPropagation();
         const rate = event.currentTarget.dataset.rate;
@@ -16312,6 +16326,7 @@ class PlaybackRate extends UICorePlugin {
             playbackRates: this.playbackRates,
             arrowLeftIcon,
             checkIcon,
+            i18n: this.core.i18n,
         }));
         this.core.getPlugin('bottom_gear')?.setContent(this.el);
         this.highlightCurrentRate();
@@ -16327,7 +16342,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');
@@ -17360,48 +17376,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    <% 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 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 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 -  {@link SubtitlesPluginSettings}
+ * 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 {
+class ClosedCaptions extends UICorePlugin {
     isPreselectedApplied = false;
     isShowing = false;
     track = null;
     tracks = [];
-    $string = null;
+    $line = null;
     /**
      * @internal
      */
     get name() {
-        return 'subtitles';
+        return 'cc';
     }
     /**
      * @internal
@@ -17422,8 +17441,7 @@ class Subtitles extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: 'media-control-subtitles',
-            'data-subtitles': '',
+            class: 'media-control-cc',
         };
     }
     /**
@@ -17431,12 +17449,12 @@ class Subtitles extends UICorePlugin {
      */
     get events() {
         return {
-            'click [data-subtitles-select]': 'onItemSelect',
-            'click [data-subtitles-button]': 'toggleMenu',
+            'click [data-cc-select]': 'onItemSelect',
+            'click [data-cc-button]': 'toggleMenu',
         };
     }
     get preselectedLanguage() {
-        return this.core.options.subtitles?.language ?? '';
+        return this.core.options.cc?.language ?? this.core.options.subtitles?.language ?? '';
     }
     /**
      * @internal
@@ -17543,7 +17561,7 @@ 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.track.mode = 'hidden';
@@ -17561,22 +17579,22 @@ class Subtitles extends UICorePlugin {
             this.track &&
             this.track.track.mode &&
             Browser.isiOS) {
-            this.$string.hide();
+            this.$line.hide();
             this.track.track.mode = 'showing';
         }
         else {
-            this.$string.show();
+            this.$line.show();
         }
     }
     shouldRender() {
-        return this.tracks.length > 0;
+        return this.tracks?.length > 0;
     }
     resizeFont() {
-        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
@@ -17589,12 +17607,12 @@ class Subtitles extends UICorePlugin {
             return this;
         }
         const mediaControl = this.core.getPlugin('media_control');
-        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);
-        mediaControl.putElement('subtitlesSelector', this.$el);
+        this.core.activeContainer.$el.append(this.$line);
+        mediaControl.putElement('cc', this.el);
         this.updateSelection();
         this.renderIcon();
         return this;
@@ -17609,8 +17627,8 @@ class Subtitles extends UICorePlugin {
         this.updateSelection();
     }
     onItemSelect(event) {
-        const id = event.target.dataset.subtitlesSelect ?? '-1';
-        localStorage.setItem(LOCAL_STORAGE_SUBTITLES_ID, id);
+        const id = event.target.dataset.ccSelect ?? '-1';
+        localStorage.setItem(LOCAL_STORAGE_CC_ID, id);
         this.selectItem(this.findById(Number(id)));
         return false;
     }
@@ -17626,16 +17644,16 @@ class Subtitles extends UICorePlugin {
         }
     }
     hideMenu() {
-        this.$('[data-subtitles] ul').hide();
+        this.$('[data-cc] ul').hide();
     }
     toggleMenu() {
-        this.$('[data-subtitles] ul').toggle();
+        this.$('[data-cc] ul').toggle();
     }
     itemElement(id) {
-        return this.$(`ul li a[data-subtitles-select="${id}"]`).parent();
+        return this.$(`ul li a[data-cc-select="${id}"]`).parent();
     }
     allItemElements() {
-        return this.$('[data-subtitles] li');
+        return this.$('[data-cc] li');
     }
     selectSubtitles() {
         const trackId = this.track ? this.track.id : -1;
@@ -17655,7 +17673,7 @@ class Subtitles extends UICorePlugin {
         return lines.join('\n');
     }
     setSubtitleText(text) {
-        this.$string.find('p').html(text);
+        this.$line.find('p').html(text);
     }
     clearSubtitleText() {
         this.setSubtitleText('');
@@ -17686,7 +17704,7 @@ class Subtitles extends UICorePlugin {
     }
     renderIcon() {
         const icon = this.isShowing ? subtitlesOnIcon : subtitlesOffIcon;
-        this.$el.find('span.subtitle-text').html(icon);
+        this.$el.find('span.cc-text').html(icon);
     }
 }
 
@@ -18525,4 +18543,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 };