@gcorevideo/player 2.22.18 → 2.22.21

package/dist/index.js

@@ -43303,7 +43303,7 @@ class Player {
     }
 }
 
-var version$1 = "2.22.18";
+var version$1 = "2.22.21";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43327,10 +43327,11 @@ function version() {
     };
 }
 
-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\"><%= icon %></span>\n</button>\n<ul class='gcore-skin-bg-color menu hidden' 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 pluginHtml$7 = "<button data-audiotracks-button class='gcore-skin-button-color' id=\"audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"><%= icon %></span>\n</button>\n<ul class='gcore-skin-bg-color menu hidden' id=\"audiotracks-select\" role=\"menu\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-audiotracks-select=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\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";
 
+// import { trace } from '@gcorevideo/utils'
 const VERSION$7 = '2.22.4';
 // const T = 'plugins.audiotracks'
 /**
@@ -43393,7 +43394,7 @@ class AudioTracks extends UICorePlugin {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, () => {
-            mediaControl.putElement('audiotracks', this.$el);
+            mediaControl.mount('audiotracks', this.$el);
         });
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hideMenu);
     }
@@ -43424,18 +43425,18 @@ class AudioTracks extends UICorePlugin {
         if (!this.shouldRender()) {
             return this;
         }
-        this.core.getPlugin('media_control');
         this.$el.html(AudioTracks.template({
             tracks: this.tracks,
             title: this.getTitle(),
             icon: audioArrow,
+            current: this.currentTrack?.id,
         }));
         this.updateText();
         this.highlightCurrentTrack();
         return this;
     }
     onTrackSelect(event) {
-        const id = event.target?.dataset?.audiotracksSelect;
+        const id = event.currentTarget?.dataset?.audiotracksSelect;
         if (id) {
             this.selectAudioTrack(id);
         }
@@ -43444,7 +43445,7 @@ class AudioTracks extends UICorePlugin {
         return false;
     }
     selectAudioTrack(id) {
-        this.startTrackSwitch();
+        this.startTrackSwitching();
         this.core.activeContainer.switchAudioTrack(id);
         this.updateText();
     }
@@ -43452,7 +43453,9 @@ class AudioTracks extends UICorePlugin {
         this.$el.find('#audiotracks-select').addClass('hidden');
     }
     toggleContextMenu() {
-        this.$el.find('#audiotracks-select').toggleClass('hidden');
+        this.$el.find('#audiotracks-select').toggleClass('hidden'); // TODO use plain CSS display: none
+        const open = !this.$el.find('#audiotracks-select').hasClass('hidden'); // TODO hold state
+        this.$el.find('#audiotracks-button').attr('aria-expanded', open);
     }
     buttonElement() {
         return this.$('button');
@@ -43470,7 +43473,7 @@ class AudioTracks extends UICorePlugin {
         }
         return this.currentTrack.label || this.currentTrack.language;
     }
-    startTrackSwitch() {
+    startTrackSwitching() {
         this.buttonElement().addClass('changing');
     }
     updateText() {
@@ -43481,12 +43484,16 @@ class AudioTracks extends UICorePlugin {
     }
     highlightCurrentTrack() {
         this.trackElement().removeClass('current');
-        this.trackElement().find('a').removeClass('gcore-skin-active');
+        this.trackElement()
+            .find('a')
+            .removeClass('gcore-skin-active')
+            .attr('aria-checked', 'false');
         if (this.currentTrack) {
             this.trackElement(this.currentTrack.id)
                 .addClass('current')
                 .find('a')
-                .addClass('gcore-skin-active');
+                .addClass('gcore-skin-active')
+                .attr('aria-checked', 'true');
         }
     }
 }
@@ -43641,7 +43648,7 @@ class BigMuteButton extends UICorePlugin {
     }
 }
 
-const pluginHtml$5 = "<button type=\"button\" class=\"media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon\" id=\"gear-button\">\n    <%= icon %>\n</button>\n<div class=\"gear-wrapper gcore-skin-bg-color\" id=\"gear-options-wrapper\" style=\"display: none;\">\n    <ul class=\"gear-options-list\" id=\"gear-options\"></ul>\n</div>\n";
+const pluginHtml$5 = "<button class=\"media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon\" id=\"gear-button\">\n    <%= icon %>\n</button>\n<div class=\"gear-wrapper gcore-skin-bg-color\" id=\"gear-options-wrapper\" style=\"display:none\">\n    <ul class=\"gear-options-list\" id=\"gear-options\" role=\"menu\"></ul>\n</div>\n";
 
 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";
 
@@ -43656,7 +43663,7 @@ const T$g = 'plugins.bottom_gear';
 var GearEvents;
 (function (GearEvents) {
     /**
-     * Use this event to accurately attach an item to the gear menu
+     * Subscribe to this event to accurately attach an item to the gear menu
      */
     GearEvents["RENDERED"] = "rendered";
 })(GearEvents || (GearEvents = {}));
@@ -43877,39 +43884,39 @@ class BottomGear extends UICorePlugin {
     onMediaControlRendered() {
         trace(`${T$g} onMediaControlRendered`);
         const mediaControl = this.core.getPlugin('media_control');
-        mediaControl.putElement('gear', this.$el);
+        mediaControl.mount('gear', this.$el);
     }
 }
 
 /**
  * @beta
  */
-var Chronograph;
-(function (Chronograph) {
-    Chronograph["Startup"] = "startup";
-    Chronograph["Watch"] = "watch";
-    Chronograph["Pause"] = "pause";
-    Chronograph["Buffering"] = "buffering";
-    Chronograph["Session"] = "session";
+var ClapprStatsChronograph;
+(function (ClapprStatsChronograph) {
+    ClapprStatsChronograph["Startup"] = "startup";
+    ClapprStatsChronograph["Watch"] = "watch";
+    ClapprStatsChronograph["Pause"] = "pause";
+    ClapprStatsChronograph["Buffering"] = "buffering";
+    ClapprStatsChronograph["Session"] = "session";
     // Latency = 'latency',
-})(Chronograph || (Chronograph = {}));
+})(ClapprStatsChronograph || (ClapprStatsChronograph = {}));
 /**
  * @beta
  */
-var Counter;
-(function (Counter) {
-    Counter["Play"] = "play";
-    Counter["Pause"] = "pause";
-    Counter["Error"] = "error";
-    Counter["Buffering"] = "buffering";
-    Counter["DecodedFrames"] = "decodedFrames";
-    Counter["DroppedFrames"] = "droppedFrames";
-    Counter["Fps"] = "fps";
-    Counter["ChangeLevel"] = "changeLevel";
-    Counter["Seek"] = "seek";
-    Counter["Fullscreen"] = "fullscreen";
-    Counter["DvrUsage"] = "dvrUsage";
-})(Counter || (Counter = {}));
+var ClapprStatsCounter;
+(function (ClapprStatsCounter) {
+    ClapprStatsCounter["Play"] = "play";
+    ClapprStatsCounter["Pause"] = "pause";
+    ClapprStatsCounter["Error"] = "error";
+    ClapprStatsCounter["Buffering"] = "buffering";
+    ClapprStatsCounter["DecodedFrames"] = "decodedFrames";
+    ClapprStatsCounter["DroppedFrames"] = "droppedFrames";
+    ClapprStatsCounter["Fps"] = "fps";
+    ClapprStatsCounter["ChangeLevel"] = "changeLevel";
+    ClapprStatsCounter["Seek"] = "seek";
+    ClapprStatsCounter["Fullscreen"] = "fullscreen";
+    ClapprStatsCounter["DvrUsage"] = "dvrUsage";
+})(ClapprStatsCounter || (ClapprStatsCounter = {}));
 /**
  * @beta
  */
@@ -43970,6 +43977,8 @@ function newMetrics$1() {
  * @remarks
  * This plugin does not render anything and is supposed to be extended or used together with other plugins that actually render something.
  *
+ * @see {@link NerdStats} - a plugin that visualises the playback metrics
+ *
  * Configuration options - {@link ClapprStatsSettings}
  *
  * Events - {@link ClapprStatsEvents}
@@ -43979,11 +43988,11 @@ class ClapprStats extends ContainerPlugin {
     lastDecodedFramesCount = 0;
     metrics = newMetrics$1();
     timers = {
-        [Chronograph.Startup]: 0,
-        [Chronograph.Watch]: 0,
-        [Chronograph.Pause]: 0,
-        [Chronograph.Buffering]: 0,
-        [Chronograph.Session]: 0,
+        [ClapprStatsChronograph.Startup]: 0,
+        [ClapprStatsChronograph.Watch]: 0,
+        [ClapprStatsChronograph.Pause]: 0,
+        [ClapprStatsChronograph.Buffering]: 0,
+        [ClapprStatsChronograph.Session]: 0,
     };
     runEach;
     /**
@@ -44013,15 +44022,10 @@ class ClapprStats extends ContainerPlugin {
     inc(counter) {
         this.metrics.counters[counter] += 1;
     }
-    // _timerHasStarted(timer) {
-    //   return this[`_start${timer}`] !== undefined;
-    // }
     start(timer) {
-        // this[`_start${timer}`] = this._now();
         this.timers[timer] = this.now();
     }
     stop(timer) {
-        // this._metrics.timers[timer] += this._now() - this[`_start${timer}`];
         this.metrics.chrono[timer] += this.now() - this.timers[timer];
     }
     constructor(container) {
@@ -44041,10 +44045,10 @@ class ClapprStats extends ContainerPlugin {
         this.listenTo(this.container, Events$1.CONTAINER_PAUSE, this.onPause);
         this.listenToOnce(this.container, Events$1.CONTAINER_STATE_BUFFERING, this.onBuffering);
         this.listenTo(this.container, Events$1.CONTAINER_SEEK, this.onSeek);
-        this.listenTo(this.container, Events$1.CONTAINER_ERROR, () => this.inc(Counter.Error));
-        this.listenTo(this.container, Events$1.CONTAINER_FULLSCREEN, () => this.inc(Counter.Fullscreen));
+        this.listenTo(this.container, Events$1.CONTAINER_ERROR, () => this.inc(ClapprStatsCounter.Error));
+        this.listenTo(this.container, Events$1.CONTAINER_FULLSCREEN, () => this.inc(ClapprStatsCounter.Fullscreen));
         this.listenTo(this.container, Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, (dvrInUse) => {
-            dvrInUse && this.inc(Counter.DvrUsage);
+            dvrInUse && this.inc(ClapprStatsCounter.DvrUsage);
         });
         this.listenTo(this.container.playback, Events$1.PLAYBACK_PROGRESS, this.onProgress);
         this.listenTo(this.container.playback, Events$1.PLAYBACK_TIMEUPDATE, this.onTimeUpdate);
@@ -44072,7 +44076,7 @@ class ClapprStats extends ContainerPlugin {
             last.time = now - last.start;
         }
         this.metrics.extra.bitratesHistory.push({ start: this.now(), bitrate });
-        this.inc(Counter.ChangeLevel);
+        this.inc(ClapprStatsCounter.ChangeLevel);
     }
     stopReporting() {
         this.buildReport();
@@ -44083,31 +44087,31 @@ class ClapprStats extends ContainerPlugin {
     }
     startTimers() {
         this.timerId = setInterval(this.buildReport.bind(this), this.runEach);
-        this.start(Chronograph.Session);
-        this.start(Chronograph.Startup);
+        this.start(ClapprStatsChronograph.Session);
+        this.start(ClapprStatsChronograph.Startup);
     }
     onFirstPlaying() {
         this.listenTo(this.container, Events$1.CONTAINER_TIMEUPDATE, this.onContainerUpdateWhilePlaying);
-        this.start(Chronograph.Watch);
-        this.stop(Chronograph.Startup);
+        this.start(ClapprStatsChronograph.Watch);
+        this.stop(ClapprStatsChronograph.Startup);
     }
     playAfterPause() {
         this.listenTo(this.container, Events$1.CONTAINER_TIMEUPDATE, this.onContainerUpdateWhilePlaying);
-        this.stop(Chronograph.Pause);
-        this.start(Chronograph.Watch);
+        this.stop(ClapprStatsChronograph.Pause);
+        this.start(ClapprStatsChronograph.Watch);
     }
     onPlay() {
-        this.inc(Counter.Play);
+        this.inc(ClapprStatsCounter.Play);
     }
     onPause() {
-        this.stop(Chronograph.Watch);
-        this.start(Chronograph.Pause);
-        this.inc(Counter.Pause);
+        this.stop(ClapprStatsChronograph.Watch);
+        this.start(ClapprStatsChronograph.Pause);
+        this.inc(ClapprStatsCounter.Pause);
         this.listenToOnce(this.container, Events$1.CONTAINER_PLAY, this.playAfterPause);
         this.stopListening(this.container, Events$1.CONTAINER_TIMEUPDATE, this.onContainerUpdateWhilePlaying);
     }
     onSeek(e) {
-        this.inc(Counter.Seek);
+        this.inc(ClapprStatsCounter.Seek);
         this.metrics.extra.watchHistory.push([e * 1000, e * 1000]);
     }
     onTimeUpdate(e) {
@@ -44132,17 +44136,17 @@ class ClapprStats extends ContainerPlugin {
     }
     onContainerUpdateWhilePlaying() {
         if (this.container.playback.isPlaying()) {
-            this.stop(Chronograph.Watch);
-            this.start(Chronograph.Watch);
+            this.stop(ClapprStatsChronograph.Watch);
+            this.start(ClapprStatsChronograph.Watch);
         }
     }
     onBuffering() {
-        this.inc(Counter.Buffering);
-        this.start(Chronograph.Buffering);
+        this.inc(ClapprStatsCounter.Buffering);
+        this.start(ClapprStatsChronograph.Buffering);
         this.listenToOnce(this.container, Events$1.CONTAINER_STATE_BUFFERFULL, this.onBufferfull);
     }
     onBufferfull() {
-        this.stop(Chronograph.Buffering);
+        this.stop(ClapprStatsChronograph.Buffering);
         this.listenToOnce(this.container, Events$1.CONTAINER_STATE_BUFFERING, this.onBuffering);
     }
     onProgress(progress) {
@@ -44154,8 +44158,8 @@ class ClapprStats extends ContainerPlugin {
         // this.trigger(ClapprStatsEvents.PERCENTAGE, currentPercentage);
     }
     buildReport() {
-        this.stop(Chronograph.Session);
-        this.start(Chronograph.Session);
+        this.stop(ClapprStatsChronograph.Session);
+        this.start(ClapprStatsChronograph.Session);
         this.metrics.extra.playbackName = this.playbackName;
         this.metrics.extra.playbackType = this.playbackType;
         this.calcBitrates();
@@ -46344,16 +46348,16 @@ const PLAYBACK_NAMES = {
 };
 const T$f = 'plugins.nerd_stats';
 /**
- * `PLUGIN` that displays useful network-related statistics.
+ * `PLUGIN` that displays useful statistics regarding the playback as well as the network quality estimation.
  * @beta
  *
  * @remarks
  * Depends on:
  *
- * - {@link BottomGear}
- *
- * - {@link ClapprStats}
+ * - {@link BottomGear} - where the button is attached
  *
+ * - {@link ClapprStats} - to get the metrics from
+*
  * The plugin is rendered as an item in the gear menu.
  *
  * When clicked, it shows an overlay window with the information about the network speed, latency, etc,
@@ -46728,7 +46732,7 @@ class ClickToPause extends ContainerPlugin {
      * @internal
      */
     get name() {
-        return 'click_to_pause_custom';
+        return 'click_to_pause';
     }
     /**
      * @internal
@@ -47128,7 +47132,7 @@ class ContextMenu extends UIContainerPlugin {
 
 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$c = 'plugins.dvr_controls';
+// const T = 'plugins.dvr_controls'
 /**
  * `PLUGIN` that adds the DVR controls to the media control UI
  *
@@ -47177,19 +47181,17 @@ class DvrControls extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
-        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.bindContainerEvents);
+        this.listenToOnce(this.core, Events$1.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
-        // MediaControl has been rendered
-        this.render();
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mount);
     }
-    bindContainerEvents() {
-        trace(`${T$c} bindContainerEvents`);
-        this.listenToOnce(this.core.activeContainer, Events$1.CONTAINER_TIMEUPDATE, this.render);
+    onActiveContainerChanged() {
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_LOADEDMETADATA, this.onMetadataLoaded);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrStateChanged);
     }
     click() {
         const container = this.core.activeContainer;
@@ -47198,39 +47200,54 @@ class DvrControls extends UICorePlugin {
         }
         container.seek(container.getDuration());
     }
-    shouldRender() {
-        return this.core.getPlaybackType() === Playback.LIVE;
-    }
     /**
      * @internal
      */
     render() {
-        trace(`${T$c} render`, {
-            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({
             i18n: this.core.i18n,
         }));
-        mediaControl.putElement('dvr', this.$el);
         return this;
     }
+    onMediacontrolRendered() {
+        this.render();
+    }
+    onMetadataLoaded() {
+        this.mount();
+        this.toggleState(this.core.activeContainer.isDvrInUse());
+    }
+    mount() {
+        // TODO move mount point management logic to MediaControl
+        if (this.core.getPlaybackType() !== Playback.LIVE) {
+            return;
+        }
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
+        // TODO -> to MediaControl
+        mediaControl.toggleElement('duration', false);
+        mediaControl.toggleElement('position', false);
+        mediaControl.mount('dvr', this.$el);
+    }
+    onDvrStateChanged(dvrInUse) {
+        this.toggleState(dvrInUse);
+    }
+    toggleState(dvrInUse) {
+        if (dvrInUse) {
+            this.$el.find('#media-control-back-to-live').show();
+            this.$el.find('#media-control-live').hide();
+        }
+        else {
+            this.$el.find('#media-control-back-to-live').hide();
+            this.$el.find('#media-control-live').show();
+        }
+    }
 }
 
 const reloadIcon = "<svg fill=\"#FFFFFF\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"/>\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n</svg>";
 
 const templateHtml = "<div class=\"player-error-screen__content\" data-error-screen>\n    <% if (icon) { %>\n        <div class=\"player-error-screen__icon\" data-error-screen><%= icon %></div>\n    <% } %>\n    <div class=\"player-error-screen__title\" data-error-screen><%= title %></div>\n    <% if (message) { %>\n        <div class=\"player-error-screen__message\" data-error-screen><%= message %></div>\n    <% } %>\n    <% if (code) { %>\n        <div class=\"player-error-screen__code\" data-error-screen><%= i18n.t('error_code') %>: <%= code %></div>\n    <% } %>\n    <% if (reloadIcon) { %>\n        <div class=\"player-error-screen__reload\" data-error-screen><%= reloadIcon %></div>\n    <% } %>\n</div>\n";
 
-const T$b = 'plugins.error_screen';
+const T$c = 'plugins.error_screen';
 /**
  * `PLUGIN` that displays fatal errors nicely in the overlay on top of the player.
  * @public
@@ -47282,11 +47299,11 @@ class ErrorScreen extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
     onPlay() {
-        trace(`${T$b} onPlay`);
+        trace(`${T$c} onPlay`);
         this.unmount();
     }
     unmount() {
-        trace(`${T$b} unmount`);
+        trace(`${T$c} unmount`);
         this.err = null;
         this.$el.remove();
     }
@@ -47299,7 +47316,7 @@ class ErrorScreen extends UICorePlugin {
         };
     }
     reload() {
-        trace(`${T$b} reload`);
+        trace(`${T$c} reload`);
         setTimeout(() => {
             this.core.configure({
                 reloading: true,
@@ -47309,7 +47326,7 @@ class ErrorScreen extends UICorePlugin {
         }, 0);
     }
     onActiveContainerChanged() {
-        trace(`${T$b} onActiveContainerChanged`, {
+        trace(`${T$c} onActiveContainerChanged`, {
             reloading: this.core.options.reloading,
         });
         this.err = null;
@@ -47325,7 +47342,7 @@ class ErrorScreen extends UICorePlugin {
         }
     }
     onError(err) {
-        trace(`${T$b} onError`, { err });
+        trace(`${T$c} onError`, { err });
         if (err.UI) {
             if (this.err) {
                 this.unmount();
@@ -48033,8 +48050,6 @@ const DEFAULT_SETTINGS = {
     right: [
         'audiotracks',
         'cc',
-        // 'dvr',
-        // 'duration',
         'fullscreen',
         'gear',
         'multicamera',
@@ -48047,15 +48062,19 @@ const INITIAL_SETTINGS = {
     default: [],
     seekEnabled: false,
 };
-const T$a = 'plugins.media_control';
+const T$b = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
     'playstop',
-    'dvr',
     'volume',
     'position',
     'duration',
+    'dvr',
 ];
+var ExtendedEvents;
+(function (ExtendedEvents) {
+    ExtendedEvents["MEDIACONTROL_VOLUME"] = "mediacontrol:volume";
+})(ExtendedEvents || (ExtendedEvents = {}));
 const { Config, Fullscreen, formatTime: formatTime$1, extend, removeArrayItem } = Utils;
 function orderByOrderPattern(arr, order) {
     const arrWithoutDuplicates = [...new Set(arr)];
@@ -48293,7 +48312,7 @@ class MediaControl extends UICorePlugin {
      * Hides the media control UI
      */
     disable() {
-        trace(`${T$a} disable`);
+        trace(`${T$b} disable`);
         this.userDisabled = true; // TODO distinguish between user and system (e.g., unplayable) disabled?
         this.hide();
         this.unbindKeyEvents();
@@ -48303,7 +48322,7 @@ class MediaControl extends UICorePlugin {
      * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
      */
     enable() {
-        trace(`${T$a} enable`);
+        trace(`${T$b} enable`);
         if (this.options.chromeless) {
             return;
         }
@@ -48536,14 +48555,15 @@ 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.core.activeContainer && this.core.activeContainer.isReady) {
                 this.core.activeContainer.setVolume(value);
+                this.trigger(ExtendedEvents.MEDIACONTROL_VOLUME, value);
             }
             else {
                 this.listenToOnce(this.core.activeContainer, Events$1.CONTAINER_READY, () => {
                     this.core.activeContainer.setVolume(value);
+                    this.trigger(ExtendedEvents.MEDIACONTROL_VOLUME, value);
                 });
             }
         };
@@ -48701,8 +48721,7 @@ class MediaControl extends UICorePlugin {
             }
             this.$el.show();
             this.trigger(Events$1.MEDIACONTROL_SHOW, this.name);
-            this.container &&
-                this.container.trigger(Events$1.CONTAINER_MEDIACONTROL_SHOW, this.name);
+            this.core.activeContainer?.trigger(Events$1.CONTAINER_MEDIACONTROL_SHOW, this.name);
             this.$el.removeClass('media-control-hide');
             this.hideId = setTimeout(() => this.hide(), timeout);
             if (event) {
@@ -48749,14 +48768,14 @@ class MediaControl extends UICorePlugin {
         }
     }
     updateSettings() {
-        trace(`${T$a} updateSettings`, { settings: this.settings });
+        trace(`${T$b} updateSettings`, { settings: this.settings });
         const newSettings = $.extend(true, {
             left: [],
             default: [],
             right: [],
         }, this.core.activeContainer.settings);
-        trace(`${T$a} updateSettings`, { newSettings });
-        newSettings.left.push('clips'); // TODO
+        trace(`${T$b} updateSettings`, { newSettings });
+        newSettings.left.push('clips'); // TODO settings
         // TODO make order controlled via CSS
         newSettings.left = orderByOrderPattern([...newSettings.left, 'volume', 'clips'], LEFT_ORDER);
         if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
@@ -48767,7 +48786,7 @@ class MediaControl extends UICorePlugin {
         newSettings.right = DEFAULT_SETTINGS.right; // TODO get from the options
         if ((!this.fullScreenOnVideoTagSupported && !fullscreenEnabled()) ||
             this.options.fullscreenDisable) {
-            trace(`${T$a} updateSettings removing fullscreen`, {
+            trace(`${T$b} updateSettings removing fullscreen`, {
                 supported: this.fullScreenOnVideoTagSupported,
                 enabled: Fullscreen.fullscreenEnabled(),
                 optionsDisable: this.options.fullscreenDisable,
@@ -48819,7 +48838,6 @@ class MediaControl extends UICorePlugin {
      * Get a media control element DOM node
      * @param name - The name of the media control element
      * @returns The DOM node to render to or extend
-     * @deprecated  Use {@link MediaControl.putElement} instead
      * @remarks
      * Use this method to render custom media control UI in a plugin
      * @example
@@ -48835,7 +48853,7 @@ class MediaControl extends UICorePlugin {
      */
     mount(name, element) {
         const panel = this.getElementLocation(name);
-        trace(`${T$a} putElement`, { name, panel: !!panel });
+        trace(`${T$b} mount`, { name, panel: !!panel });
         if (panel) {
             const current = panel.find(`[data-${name}]`);
             element.attr(`data-${name}`, '');
@@ -48852,13 +48870,18 @@ class MediaControl extends UICorePlugin {
             return;
         }
     }
+    /**
+     * @deprecated  Use {@link MediaControl.mount} instead
+     * @param name
+     * @param element
+     */
     putElement(name, element) {
         this.mount(name, 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
+     * @param show - Visibility state
      */
     toggleElement(area, show) {
         this.$el.find(`[data-${area}]`).toggle(show);
@@ -49026,7 +49049,7 @@ class MediaControl extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$a} render`, {
+        trace(`${T$b} render`, {
             needsUpdate: this.hasUpdate,
             metadataLoaded: this.metadataLoaded,
         });
@@ -49074,6 +49097,7 @@ class MediaControl extends UICorePlugin {
                 width: this.options.width,
                 height: this.options.height,
             });
+            // TODO check out
             this.hideVolumeBar(0);
         }, 0);
         this.parseColors();
@@ -49155,7 +49179,7 @@ class MediaControl extends UICorePlugin {
         return isFinite(this.core.activePlayback.getDuration());
     }
     getElementLocation(name) {
-        trace(`${T$a} getElementLocation`, {
+        trace(`${T$b} getElementLocation`, {
             name,
             right: this.settings.right,
             left: this.settings.left,
@@ -49202,7 +49226,7 @@ const streamsMomentoIcon = "<svg id=\"Слой_1\" data-name=\"Слой 1\" xmln
 const streamsWhiteNightsIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"50\" height=\"50\" viewBox=\"0 0 50 50\">\n  <defs>\n    <clipPath id=\"clip-Icon\">\n      <rect width=\"50\" height=\"50\"/>\n    </clipPath>\n  </defs>\n  <g id=\"Icon\" clip-path=\"url(#clip-Icon)\">\n    <g id=\"icon2\" transform=\"translate(-0.041 0)\">\n      <path id=\"Контур_77\" data-name=\"Контур 77\" d=\"M6.493,13v8.266h6.275V19.74H8.31V17.714h4.006V16.3H8.31V14.53h4.365V13Zm7.5,0v8.266h1.7V15.732h.023l3.438,5.534h1.818V13h-1.7v5.545h-.023L15.8,13Z\" fill=\"#fff\"/>\n      <path id=\"Контур_76\" data-name=\"Контур 76\" d=\"M29.949,29.1V26.774H31.94a1.4,1.4,0,0,1,.938.272,1.1,1.1,0,0,1,.313.874,1.155,1.155,0,0,1-.313.9,1.375,1.375,0,0,1-.938.278ZM28.132,25.36v8.266h1.817V30.4h1.818a1.353,1.353,0,0,1,.984.3,1.637,1.637,0,0,1,.394.949c.046.333.079.681.1,1.042a3.2,3.2,0,0,0,.185.938h1.819a1.218,1.218,0,0,1-.191-.423,3.611,3.611,0,0,1-.093-.527c-.019-.185-.033-.367-.041-.544s-.016-.332-.023-.463a5.052,5.052,0,0,0-.087-.625,2.109,2.109,0,0,0-.2-.573,1.586,1.586,0,0,0-.359-.451,1.414,1.414,0,0,0-.556-.284v-.023a1.926,1.926,0,0,0,1-.81,2.494,2.494,0,0,0,.307-1.262,2.308,2.308,0,0,0-.165-.88,2.128,2.128,0,0,0-.486-.724,2.3,2.3,0,0,0-.764-.492,2.67,2.67,0,0,0-1-.179ZM43.506,30.5V25.36H41.689V30.5a2.065,2.065,0,0,1-.37,1.36,1.7,1.7,0,0,1-1.343.434,2.086,2.086,0,0,1-.886-.156,1.283,1.283,0,0,1-.758-.978,3.748,3.748,0,0,1-.058-.66V25.36H36.456V30.5a3.16,3.16,0,0,0,.92,2.5,3.807,3.807,0,0,0,2.6.81,3.82,3.82,0,0,0,2.593-.816,3.132,3.132,0,0,0,.937-2.492Z\" fill=\"#fff\"/>\n      <path id=\"Контур_80\" data-name=\"Контур 80\" d=\"M22.646,31.2H4.689a4.505,4.505,0,0,1-4.5-4.5V8.5A4.505,4.505,0,0,1,4.689,4h18.2a4.505,4.505,0,0,1,4.5,4.5v8.445l-.893.1a3.184,3.184,0,0,0-2.846,3.177V30.5l-.465.7ZM4.689,6a2.5,2.5,0,0,0-2.5,2.5V26.7a2.5,2.5,0,0,0,2.5,2.5H21.65V20.22a5.18,5.18,0,0,1,3.739-4.992V8.5a2.5,2.5,0,0,0-2.5-2.5Z\" fill=\"#fff\"/>\n      <path id=\"Контур_81\" data-name=\"Контур 81\" d=\"M30.127,47.884a1,1,0,0,1-1-1V43.267H26.846a5.206,5.206,0,0,1-5.2-5.2V20.222a5.206,5.206,0,0,1,5.2-5.2H44.692a5.206,5.206,0,0,1,5.2,5.2V38.068a5.206,5.206,0,0,1-5.2,5.2H35.058l-4.216,4.316A1,1,0,0,1,30.127,47.884ZM26.846,17.022a3.2,3.2,0,0,0-3.2,3.2V38.067a3.2,3.2,0,0,0,3.2,3.2h3.281a1,1,0,0,1,1,1v2.162l2.8-2.86a1,1,0,0,1,.715-.3H44.692a3.2,3.2,0,0,0,3.2-3.2V20.222a3.2,3.2,0,0,0-3.2-3.2Z\" fill=\"#fff\"/>\n    </g>\n  </g>\n</svg>\n";
 
 const VERSION$4 = '0.0.1';
-const T$9 = 'plugins.multicamera';
+const T$a = 'plugins.multicamera';
 /**
  * `PLUGIN` that adds support for loading multiple streams and switching between them using the media control UI.
  * @beta
@@ -49348,7 +49372,7 @@ class MultiCamera extends UICorePlugin {
     }
     onCameraSelect(event) {
         const value = event.currentTarget.dataset.multicameraSelectorSelect;
-        trace(`${T$9} onCameraSelect`, { value });
+        trace(`${T$a} onCameraSelect`, { value });
         if (value !== undefined) {
             this.changeById(parseInt(value, 10));
         }
@@ -49474,13 +49498,13 @@ class MultiCamera extends UICorePlugin {
         }
     }
     changeById(id) {
-        trace(`${T$9} changeById`, { id });
+        trace(`${T$a} changeById`, { id });
         queueMicrotask(() => {
             const playbackOptions = this.core.options.playback || {};
             // TODO figure out what this does
             playbackOptions.recycleVideo = Browser.isMobile;
             this.currentCamera = this.findElementById(id) ?? null;
-            trace(`${T$9} changeById`, { id, currentCamera: this.currentCamera, multicamera: this.multicamera });
+            trace(`${T$a} changeById`, { id, currentCamera: this.currentCamera, multicamera: this.multicamera });
             if (!this.currentCamera) {
                 return;
             }
@@ -49497,7 +49521,7 @@ class MultiCamera extends UICorePlugin {
             // TODO remove?
             // for html5 playback:
             this.options.dvrEnabled = this.currentCamera.dvr;
-            trace(`${T$9} changeById`, { currentCamera: this.currentCamera });
+            trace(`${T$a} changeById`, { currentCamera: this.currentCamera });
             // TODO
             this.core.configure({
                 playback: playbackOptions,
@@ -49555,7 +49579,7 @@ const pipIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"no
 const buttonHtml$2 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\">\n    <%= pipIcon %>\n</button>\n";
 
 const VERSION$3 = '0.0.1';
-const T$8 = `plugins.pip`;
+const T$9 = `plugins.pip`;
 /**
  * `PLUGIN` that enables picture in picture mode.
  * @beta
@@ -49613,7 +49637,7 @@ class PictureInPicture extends UICorePlugin {
         });
     }
     isPiPSupported() {
-        trace(`${T$8} isPiPSupported`, {
+        trace(`${T$9} isPiPSupported`, {
             pictureInPictureEnabled: !!document.pictureInPictureEnabled,
             requestPictureInPicture: !!HTMLVideoElement.prototype.requestPictureInPicture,
         });
@@ -49629,12 +49653,12 @@ class PictureInPicture extends UICorePlugin {
         this.$el.html(PictureInPicture.buttonTemplate({ pipIcon }));
         const mediaControl = this.core.getPlugin('media_control');
         if (mediaControl) {
-            mediaControl.putElement('pip', this.$el);
+            mediaControl.mount('pip', this.$el);
         }
         return this;
     }
     togglePictureInPicture() {
-        trace(`${T$8} togglePictureInPicture`);
+        trace(`${T$9} togglePictureInPicture`);
         if (this.videoElement !== document.pictureInPictureElement) {
             this.requestPictureInPicture();
         }
@@ -49643,13 +49667,13 @@ class PictureInPicture extends UICorePlugin {
         }
     }
     requestPictureInPicture() {
-        trace(`${T$8} requestPictureInPicture`, {
+        trace(`${T$9} requestPictureInPicture`, {
             videoElement: !!this.videoElement,
         });
         this.videoElement.requestPictureInPicture();
     }
     exitPictureInPicture() {
-        trace(`${T$8} exitPictureInPicture`);
+        trace(`${T$9} exitPictureInPicture`);
         document.exitPictureInPicture();
     }
 }
@@ -49676,7 +49700,7 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: 2.0, label: '2x' },
 ];
 const DEFAULT_PLAYBACK_RATE = 1;
-const T$7 = 'plugins.playback_rate';
+const T$8 = 'plugins.playback_rate';
 /**
  * `PLUGIN` that allows changing the playback speed of the video.
  * @beta
@@ -49762,7 +49786,7 @@ class PlaybackRate extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
     }
     onCoreReady() {
-        trace(`${T$7} onCoreReady`);
+        trace(`${T$8} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         const gear = this.core.getPlugin('bottom_gear');
@@ -49771,7 +49795,7 @@ class PlaybackRate extends UICorePlugin {
         this.listenTo(gear, GearEvents.RENDERED, this.onGearRendered);
     }
     onActiveContainerChange() {
-        trace(`${T$7} onActiveContainerChange`);
+        trace(`${T$8} onActiveContainerChange`);
         this.metadataLoaded = false;
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_STOP, this.onStop);
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_PLAY, this.onPlay);
@@ -49779,15 +49803,15 @@ class PlaybackRate extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_LOADEDMETADATA, this.onMetaDataLoaded);
     }
     onMediaControlRendered() {
-        trace(`${T$7} onMediaControlRendered`);
+        trace(`${T$8} onMediaControlRendered`);
         this.render();
     }
     onGearRendered() {
-        trace(`${T$7} onGearRendered`);
+        trace(`${T$8} onGearRendered`);
         this.mount();
     }
     mount() {
-        trace(`${T$7} mount`, {
+        trace(`${T$8} mount`, {
             shouldMount: this.shouldMount(),
         });
         if (!this.shouldMount()) {
@@ -49804,7 +49828,7 @@ class PlaybackRate extends UICorePlugin {
         })));
     }
     onMetaDataLoaded() {
-        trace(`${T$7} onMetaDataLoaded`, {
+        trace(`${T$8} onMetaDataLoaded`, {
             playbackType: this.core.activePlayback.getPlaybackType(),
             dvrEnabled: this.core.activePlayback.dvrEnabled,
         });
@@ -49826,14 +49850,14 @@ class PlaybackRate extends UICorePlugin {
             this.core.activePlayback?.setPlaybackRate(this.selectedRate);
         }
         else {
-            trace(`${T$7} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
+            trace(`${T$8} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
                 playbackRate,
                 selectedRate: this.selectedRate,
             });
         }
     }
     shouldMount() {
-        trace(`${T$7} shouldMount`, {
+        trace(`${T$8} shouldMount`, {
             playbackType: this.core.activePlayback?.getPlaybackType(),
             dvrEnabled: this.core.activePlayback?.dvrEnabled,
         });
@@ -49850,7 +49874,7 @@ class PlaybackRate extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$7} render`, {
+        trace(`${T$8} render`, {
             shouldMount: this.shouldMount(),
         });
         this.$el.html(PlaybackRate.listTemplate({
@@ -49896,13 +49920,13 @@ class PlaybackRate extends UICorePlugin {
         }
     }
     syncRate() {
-        trace(`${T$7} syncRate`, {
+        trace(`${T$8} syncRate`, {
             selectedRate: this.selectedRate,
         });
         this.core.activePlayback?.setPlaybackRate(this.selectedRate);
     }
     resetPlaybackRate() {
-        trace(`${T$7} resetPlaybackRate`, {
+        trace(`${T$8} resetPlaybackRate`, {
             selectedRate: this.selectedRate,
         });
         this.core.activePlayback?.setPlaybackRate(DEFAULT_PLAYBACK_RATE);
@@ -49937,7 +49961,7 @@ class PlaybackRate extends UICorePlugin {
             ?.label || `x${rate}`);
     }
     highlightCurrentRate() {
-        trace(`${T$7} highlightCurrentRate`, {
+        trace(`${T$8} highlightCurrentRate`, {
             selectedRate: this.selectedRate,
         });
         this.allRateElements().removeClass('current');
@@ -49948,7 +49972,7 @@ class PlaybackRate extends UICorePlugin {
             .addClass('gcore-skin-active');
     }
     updateGearOptionLabel() {
-        trace(`${T$7} updateGearOptionLabel`, {
+        trace(`${T$8} updateGearOptionLabel`, {
             selectedRate: this.selectedRate,
         });
         this.mount();
@@ -49960,7 +49984,7 @@ const posterHTML = "<div class=\"play-wrapper\" data-poster></div>\n";
 //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 LICENSE file.
-const T$6 = 'plugins.poster';
+const T$7 = 'plugins.poster';
 /**
  * `PLUGIN` that displays a poster image in the background and a big play button on top when playback is stopped
  * @beta
@@ -50066,13 +50090,13 @@ class Poster extends UIContainerPlugin {
      * Disables the plugin, unmounting it from the DOM
      */
     disable() {
-        trace(`${T$6} disable`);
+        trace(`${T$7} disable`);
         this.hasStartedPlaying = false;
         this.playRequested = false;
         super.disable();
     }
     onError(error) {
-        trace(`${T$6} onError`, {
+        trace(`${T$7} onError`, {
             error,
             enabled: this.enabled,
         });
@@ -50085,18 +50109,18 @@ class Poster extends UIContainerPlugin {
         }
     }
     onPlay() {
-        trace(`${T$6} onPlay`);
+        trace(`${T$7} onPlay`);
         this.hasStartedPlaying = true;
         this.playRequested = false;
         this.update();
     }
     onPlayIntent() {
-        trace(`${T$6} onPlayIntent`);
+        trace(`${T$7} onPlayIntent`);
         this.playRequested = true;
         this.update();
     }
     onStop() {
-        trace(`${T$6} onStop`, {
+        trace(`${T$7} onStop`, {
             enabled: this.enabled,
         });
         this.hasStartedPlaying = false;
@@ -50104,7 +50128,7 @@ class Poster extends UIContainerPlugin {
         this.update();
     }
     updatePlayButton(show) {
-        trace(`${T$6} updatePlayButton`, {
+        trace(`${T$7} updatePlayButton`, {
             show,
             chromeless: this.options.chromeless,
             allowUserInteraction: this.options.allowUserInteraction,
@@ -50133,7 +50157,7 @@ class Poster extends UIContainerPlugin {
         this.$el.removeClass('clickable');
     }
     clicked() {
-        trace(`${T$6} clicked`, {
+        trace(`${T$7} clicked`, {
             hasStartedPlaying: this.hasStartedPlaying,
             chromeless: this.options.chromeless,
             allowUserInteraction: this.options.allowUserInteraction,
@@ -50154,7 +50178,7 @@ class Poster extends UIContainerPlugin {
         return !this.container.playback.isAudioOnly;
     }
     update() {
-        trace(`${T$6} update`, {
+        trace(`${T$7} update`, {
             shouldRender: this.shouldRender,
         });
         if (!this.shouldRender) {
@@ -50167,7 +50191,7 @@ class Poster extends UIContainerPlugin {
         this.updatePoster();
     }
     updatePoster() {
-        trace(`${T$6} updatePoster`, {
+        trace(`${T$7} updatePoster`, {
             hasStartedPlaying: this.hasStartedPlaying,
         });
         if (!this.hasStartedPlaying) {
@@ -50182,7 +50206,7 @@ class Poster extends UIContainerPlugin {
         this.$el.show();
     }
     hidePoster() {
-        trace(`${T$6} hidePoster`, {
+        trace(`${T$7} hidePoster`, {
             shouldHideOnPlay: this.shouldHideOnPlay(),
         });
         if (!this.options.disableMediaControl) {
@@ -50232,13 +50256,13 @@ class Poster extends UIContainerPlugin {
     }
 }
 
-const buttonHtml = "<button class='gplayer-lite-btn gcore-skin-text-color gear-option' aria-haspopup=\"menu\">\n    <span class=\"gear-option_icon<%= isHd ? '' : ' hidden' %>\"><%= hdIcon %></span>\n    <span class=\"gear-option_label\"><%= i18n.t('quality') %></span>\n    <span class='gear-option_value'><%= currentText %></span>\n    <span class=\"gear-option_arrow-right-icon\"><%= arrowRightIcon %></span>\n</button>\n";
+const buttonHtml = "<button class='gplayer-lite-btn gcore-skin-text-color gear-option' aria-haspopup=\"menu\" id=\"quality-levels\">\n    <span class=\"gear-option_icon<%= isHd ? '' : ' hidden' %>\"><%= hdIcon %></span>\n    <span class=\"gear-option_label\"><%= i18n.t('quality') %></span>\n    <span class='gear-option_value'><%= currentText %></span>\n    <span class=\"gear-option_arrow-right-icon\"><%= arrowRightIcon %></span>\n</button>\n";
 
 const listHtml = "<button class=\"gplayer-lite-btn go-back gcore-skin-text-color\" id=\"level-selector-back-button\">\n    <span class=\"arrow-left-icon\"><%= arrowLeftIcon %></span>\n    <%= i18n.t('quality') %>\n</button>\n<ul class=\"gear-sub-menu quality-levels\" id=\"level-selector-menu\" role=\"menu\">\n    <% if (!removeAuto) { %>\n        <li>\n            <a href=\"#\"\n                class=\"gear-sub-menu_btn gcore-skin-text-color\"\n                data-id=\"-1\"\n                id=\"level_selector_auto\"\n               aria-checked=\"<%= current === -1 %>\"\n               role=\"menuitemradio\"\n            >\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= i18n.t('auto') %>\n            </a>\n        </li>\n    <% } %>\n    <% for (const item of levels.slice().reverse()) {\n        var disabled = maxLevel >= 0 && item.level > maxLevel\n        var checked = item.level === current\n    %>\n        <li class=\"<%= disabled ? ' disabled' : ''%><%=checked ? ' current' : ''%>\">\n            <a href=\"#\"\n                class=\"gear-sub-menu_btn gcore-skin-text-color<%= checked ? ' gcore-skin-active' : '' %>\"\n                data-id=\"<%= item.level %>\"\n                aria-disabled=\"<%= disabled %>\"\n                aria-checked=\"<%= checked %>\"\n                role=\"menuitemradio\"\n                id=\"level_selector_<%= item.width > item.height ? item.height : item.width %>\"\n            >\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= labels[item.level] %>\n            </a>\n        </li>\n    <% } %>\n</ul>\n";
 
 const hdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M14.9562 8.22232H13.9961V15.1873H14.9562C15.8914 15.1873 16.766 14.8253 17.4195 14.1676C18.0786 13.5037 18.4415 12.6281 18.4415 11.7026C18.4415 9.7837 16.8781 8.22253 14.9561 8.22253L14.9562 8.22232Z\"\n    fill=\"#C9C9C9\"/>\n  <path\n    d=\"M22.0801 4H1.91994C0.859222 4 0 4.86406 0 5.91994V17.4878C0 18.5437 0.859222 19.4078 1.91994 19.4078H22.0801C23.1408 19.4078 24 18.5437 24 17.4878V5.91994C24 4.86406 23.1408 4 22.0801 4ZM10.3975 15.3473C10.3975 15.6124 10.1827 15.8272 9.91754 15.8272C9.65216 15.8272 9.43761 15.6122 9.43761 15.3473V12.0239H5.55956V15.3473C5.55956 15.6124 5.34481 15.8272 5.07963 15.8272C4.81425 15.8272 4.5997 15.6122 4.5997 15.3473L4.59949 7.74042C4.59949 7.47524 4.81425 7.26049 5.07943 7.26049C5.34481 7.26049 5.55936 7.47544 5.55936 7.74042V11.0636H9.43741V7.74042C9.43741 7.47524 9.65216 7.26049 9.91734 7.26049C10.1827 7.26049 10.3973 7.47544 10.3973 7.74042L10.3975 15.3473ZM18.1005 14.8438C17.2652 15.6844 16.1486 16.1472 14.9561 16.1472H13.5161C13.2507 16.1472 13.0361 15.9323 13.0361 15.6673V7.74263C13.0361 7.47745 13.2509 7.26269 13.5161 7.26269H14.9561C17.4072 7.26269 19.4013 9.25438 19.4013 11.7027C19.4013 12.8835 18.9392 13.9991 18.1005 14.844V14.8438Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
-const T$5 = 'plugins.quality_levels';
+const T$6 = 'plugins.quality_levels';
 const VERSION$2 = 'v2.22.5';
 /**
  * `PLUGIN` that provides a UI to select the desired quality level of the playback.
@@ -50315,14 +50339,14 @@ class QualityLevels extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
     }
     onCoreReady() {
-        trace(`${T$5} onCoreReady`);
+        trace(`${T$6} onCoreReady`);
         const gear = this.core.getPlugin('bottom_gear');
         assert(gear, 'bottom_gear plugin is required');
         this.currentText = this.core.i18n.t('auto');
         this.listenTo(gear, GearEvents.RENDERED, this.onGearRendered);
     }
     onGearRendered() {
-        trace(`${T$5} onGearRendered`);
+        trace(`${T$6} onGearRendered`);
         this.render();
     }
     onActiveContainerChange() {
@@ -50351,7 +50375,7 @@ class QualityLevels extends UICorePlugin {
         }
     }
     onStop() {
-        trace(`${T$5} onStop`);
+        trace(`${T$6} onStop`);
         this.listenToOnce(this.core.activePlayback, Events$1.PLAYBACK_PLAY, () => {
             if (this.core.activePlayback.getPlaybackType() === 'live') {
                 if (this.selectedLevelId !== -1) {
@@ -50447,7 +50471,7 @@ class QualityLevels extends UICorePlugin {
         return false;
     }
     goBack() {
-        trace(`${T$5} goBack`);
+        trace(`${T$6} goBack`);
         this.core.getPlugin('bottom_gear').refresh();
     }
     setLevel(index) {
@@ -50482,11 +50506,11 @@ class QualityLevels extends UICorePlugin {
         return this.levelLabels[index] ?? formatLevelLabel(this.levels[index]);
     }
     onBitrate(info) {
-        trace(`${T$5} updateCurrentLevel`, { info });
+        trace(`${T$6} updateCurrentLevel`, { info });
         this.highlightCurrentLevel();
     }
     highlightCurrentLevel() {
-        trace(`${T$5} highlightCurrentLevel`, {
+        trace(`${T$6} highlightCurrentLevel`, {
             selectedLevelId: this.selectedLevelId,
         });
         this.allLevelElements()
@@ -50886,7 +50910,7 @@ const spinnerHTML = "<div data-bounce1></div>\n<div data-bounce2></div>\n<div da
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 // https://github.com/clappr/clappr-plugins/blob/ffaa9d27005fa5a8a7c243ffc47eb5655b84b371/LICENSE
-const T$4 = 'plugins.spinner';
+const T$5 = 'plugins.spinner';
 /**
  * Custom events emitted by the plugin
  * @public
@@ -50956,18 +50980,18 @@ class SpinnerThreeBounce extends UIContainerPlugin {
         this.hasBuffering = false;
     }
     onPlay() {
-        trace(`${T$4} onPlay`);
+        trace(`${T$5} onPlay`);
         this._hide();
     }
     onStop() {
-        trace(`${T$4} onStop`, {
+        trace(`${T$5} onStop`, {
             hasFatalError: this.hasFatalError,
         });
         this._hide();
     }
     onError(e) {
         this.hasFatalError = e.code === PlaybackErrorCode.MediaSourceUnavailable;
-        trace(`${T$4} onError`, {
+        trace(`${T$5} onError`, {
             e,
             hasFatalError: this.hasFatalError,
             error: e.code,
@@ -50982,7 +51006,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
      * @param delay - The delay in milliseconds before the spinner is shown.
      */
     show(delay = 300) {
-        trace(`${T$4} show`);
+        trace(`${T$5} show`);
         this.userShown = true;
         this._show(delay);
     }
@@ -51002,7 +51026,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
         }
     }
     _hide() {
-        trace(`${T$4} _hide`, {
+        trace(`${T$5} _hide`, {
             userShown: this.userShown,
         });
         if (this.userShown) {
@@ -51019,7 +51043,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
      * @internal
      */
     render() {
-        trace(`${T$4} render`, {
+        trace(`${T$5} render`, {
             buffering: this.container.buffering,
         });
         this.$el.html(this.template());
@@ -51037,7 +51061,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
     }
 }
 
-const T$3 = 'plugins.source_controller';
+const T$4 = 'plugins.source_controller';
 const INITIAL_RETRY_DELAY = 1000;
 const MAX_RETRY_DELAY = 5000;
 const RETRY_DELAY_BLUR = 500;
@@ -51179,11 +51203,11 @@ class SourceController extends CorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
     onCoreReady() {
-        trace(`${T$3} onCoreReady`);
+        trace(`${T$4} onCoreReady`);
         this.core.getPlugin('error_screen')?.disable(); //  TODO test
     }
     onActiveContainerChanged() {
-        trace(`${T$3} onActiveContainerChanged`, {
+        trace(`${T$4} onActiveContainerChanged`, {
             retrying: this.active,
             currentSource: this.sourcesList[this.currentSourceIndex],
         });
@@ -51204,7 +51228,7 @@ class SourceController extends CorePlugin {
     }
     bindContainerEventListeners() {
         this.core.activePlayback.on(Events$1.PLAYBACK_ERROR, (error) => {
-            trace(`${T$3} on PLAYBACK_ERROR`, {
+            trace(`${T$4} on PLAYBACK_ERROR`, {
                 error: {
                     code: error?.code,
                     description: error?.description,
@@ -51225,7 +51249,7 @@ class SourceController extends CorePlugin {
             }
         });
         this.core.activePlayback.on(Events$1.PLAYBACK_PLAY, () => {
-            trace(`${T$3} on PLAYBACK_PLAY`, {
+            trace(`${T$4} on PLAYBACK_PLAY`, {
                 currentSource: this.sourcesList[this.currentSourceIndex],
                 retrying: this.active,
             });
@@ -51241,7 +51265,7 @@ class SourceController extends CorePlugin {
         this.sourcesDelay = {};
     }
     retryPlayback() {
-        trace(`${T$3} retryPlayback enter`, {
+        trace(`${T$4} retryPlayback enter`, {
             currentSourceIndex: this.currentSourceIndex,
             currentSource: this.sourcesList[this.currentSourceIndex],
         });
@@ -51249,20 +51273,20 @@ class SourceController extends CorePlugin {
         this.switching = true;
         this.core.activeContainer?.getPlugin('spinner')?.show(0);
         this.getNextMediaSource().then((nextSource) => {
-            trace(`${T$3} retryPlayback syncing...`, {
+            trace(`${T$4} retryPlayback syncing...`, {
                 nextSource,
             });
             const rnd = RETRY_DELAY_BLUR * Math.random();
             this.sync(() => {
-                trace(`${T$3} retryPlayback loading...`);
+                trace(`${T$4} retryPlayback loading...`);
                 this.switching = false;
                 this.core.load(nextSource.source, nextSource.mimeType);
-                trace(`${T$3} retryPlayback loaded`, {
+                trace(`${T$4} retryPlayback loaded`, {
                     nextSource,
                 });
                 setTimeout(() => {
                     this.core.activePlayback.play();
-                    trace(`${T$3} retryPlayback playing`);
+                    trace(`${T$4} retryPlayback playing`);
                 }, rnd);
             });
         });
@@ -51295,7 +51319,7 @@ const stringHTML = "<div class=\"cc-line\" id=\"cc-line\">\n  <p></p>\n</div>\n"
 
 const VERSION = '2.19.14';
 const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected';
-const T$2 = 'plugins.cc';
+const T$3 = 'plugins.cc';
 /**
  * `PLUGIN` that provides a UI to select the subtitles when available.
  * @beta
@@ -51378,14 +51402,14 @@ class ClosedCaptions extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
     }
     onCoreReady() {
-        trace(`${T$2} onCoreReady`);
+        trace(`${T$3} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hideMenu);
     }
     onContainerChanged() {
-        trace(`${T$2} onContainerChanged`);
+        trace(`${T$3} onContainerChanged`);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_FULLSCREEN, this.playerResize);
         this.listenTo(this.core.activeContainer, 'container:advertisement:start', this.onStartAd);
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_SUBTITLE_AVAILABLE, this.onSubtitleAvailable);
@@ -51405,11 +51429,11 @@ class ClosedCaptions extends UICorePlugin {
         });
     }
     onSubtitleAvailable() {
-        trace(`${T$2} onSubtitleAvailable`);
+        trace(`${T$3} onSubtitleAvailable`);
         this.applyTracks();
     }
     onSubtitleChanged({ id }) {
-        trace(`${T$2} onSubtitleChanged`, { id });
+        trace(`${T$3} onSubtitleChanged`, { id });
         if (id === -1) {
             this.clearSubtitleText();
         }
@@ -51459,7 +51483,7 @@ class ClosedCaptions extends UICorePlugin {
         this.stopListening(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
     }
     playerResize() {
-        trace(`${T$2} playerResize`);
+        trace(`${T$3} playerResize`);
         const shouldShow = this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
             this.track &&
@@ -51533,7 +51557,7 @@ class ClosedCaptions extends UICorePlugin {
         this.$line = $(ClosedCaptions.templateString());
         this.resizeFont();
         this.core.activeContainer.$el.append(this.$line);
-        mediaControl.putElement('cc', this.$el);
+        mediaControl.mount('cc', this.$el);
         this.updateSelection();
         this.renderIcon();
         return this;
@@ -51549,7 +51573,7 @@ class ClosedCaptions extends UICorePlugin {
     }
     onItemSelect(event) {
         const id = event.target.dataset.ccSelect ?? '-1';
-        trace(`${T$2} onItemSelect`, { id });
+        trace(`${T$3} onItemSelect`, { id });
         localStorage.setItem(LOCAL_STORAGE_CC_ID, id);
         this.selectItem(this.findById(Number(id)));
         return false;
@@ -51569,7 +51593,7 @@ class ClosedCaptions extends UICorePlugin {
         this.$('[data-cc] ul').hide();
     }
     toggleMenu() {
-        trace(`${T$2} toggleMenu`);
+        trace(`${T$3} toggleMenu`);
         this.$('[data-cc] ul').toggle();
     }
     itemElement(id) {
@@ -51616,7 +51640,7 @@ class ClosedCaptions extends UICorePlugin {
             .removeClass('current')
             .find('a')
             .removeClass('gcore-skin-active');
-        trace(`${T$2} highlightCurrentSubtitles`, {
+        trace(`${T$3} highlightCurrentSubtitles`, {
             track: this.track?.id,
         });
         const currentLevelElement = this.itemElement(this.track ? this.track.id : -1);
@@ -51634,7 +51658,7 @@ class ClosedCaptions extends UICorePlugin {
 // An example implementation of client side performancestatistics
 const WATCH_CUTOFF = 5;
 const STALL_MEASURE_PERIOD = 10;
-const T$1 = 'plugins.telemetry';
+const T$2 = 'plugins.telemetry';
 /**
  * Telemetry event type
  * @beta
@@ -51744,7 +51768,7 @@ class Telemetry extends ContainerPlugin {
     }
     onReady() {
         this.sendInit();
-        trace(`${T$1} onReady`, {
+        trace(`${T$2} onReady`, {
             autoPlay: this.options.autoPlay,
         });
         if (this.options.autoPlay) {
@@ -51925,7 +51949,7 @@ const parseSRT = /*@__PURE__*/getDefaultExportFromCjs$1(parseSrtExports);
 
 const pluginHtml = "<div class=\"thumbnails-text\"></div>\n<% if (backdropHeight) { %>\n    <div class=\"backdrop\" style=\"height: <%= backdropHeight %>px;\">\n        <div class=\"carousel\"></div>\n    </div>\n<% }; %>\n<% if (spotlightHeight) { %>\n    <div class=\"spotlight\" style=\"height: <%= spotlightHeight %>px;\">\n    </div>\n<% }; %>\n";
 
-const T = 'plugins.thumbnails';
+const T$1 = 'plugins.thumbnails';
 /**
  * `PLUGIN` that displays the thumbnails of the video when available.
  * @beta
@@ -52230,7 +52254,7 @@ class Thumbnails extends UICorePlugin {
     // calculate how far along the carousel should currently be slid
     // depending on where the user is hovering on the progress bar
     _updateCarousel() {
-        trace(`${T} _updateCarousel`, {
+        trace(`${T$1} _updateCarousel`, {
             backdropHeight: this._getOptions().backdropHeight,
         });
         if (!this._getOptions().backdropHeight) {
@@ -52289,7 +52313,7 @@ class Thumbnails extends UICorePlugin {
         }
     }
     _updateSpotlightThumb() {
-        trace(`${T} _updateSpotlightThumb`, {
+        trace(`${T$1} _updateSpotlightThumb`, {
             spotlightHeight: this._getOptions().spotlightHeight,
         });
         if (!this._getOptions().spotlightHeight) {
@@ -52334,7 +52358,7 @@ class Thumbnails extends UICorePlugin {
         return 0;
     }
     _renderPlugin() {
-        trace(`${T} _renderPlugin`, {
+        trace(`${T$1} _renderPlugin`, {
             show: this._show,
             thumbsLoaded: this._thumbsLoaded,
             thumbs: this._thumbs.length,
@@ -52352,7 +52376,7 @@ class Thumbnails extends UICorePlugin {
         }
     }
     _createElements() {
-        trace(`${T} _createElements`);
+        trace(`${T$1} _createElements`);
         this.$el.html(Thumbnails.template({
             backdropHeight: this._getOptions().backdropHeight,
             spotlightHeight: this._getOptions().spotlightHeight,
@@ -52375,100 +52399,101 @@ var VolumeFadeEvents;
 (function (VolumeFadeEvents) {
     VolumeFadeEvents["FADE"] = "core:volume:fade";
 })(VolumeFadeEvents || (VolumeFadeEvents = {}));
+const T = 'plugins.volume_fade';
+const DEFAULT_DURATION = 600;
 /**
  * `PLUGIN` that applies fade effect to the player's volume change.
  * @beta
+ *
+ * @remarks
+ * Depends on {@link MediaControl} plugin.
+ * Configuration options - {@link VolumeFadeSettings}
  */
 class VolumeFade extends UICorePlugin {
-    _aboveBorderVolume = 0;
-    container = null;
-    delay = 0;
-    interval = null;
+    activeVolume = 0;
+    duration = 0;
+    timerId = null;
     /**
      * @internal
      */
     get name() {
         return 'volume_fade';
     }
+    constructor(core) {
+        super(core);
+        if (typeof this.options.volumeFade?.level === 'number') {
+            this.activeVolume = this.options.volumeFade.level;
+        }
+    }
     /**
      * @internal
      */
     bindEvents() {
-        // TODO on container changed
         this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
-        if (this.core.mediaControl) {
-            this.listenTo(this.core.mediaControl, 'mediacontrol:volume:user', this._onUserChangeVolume);
-        }
-        // this.listenTo(this.core, 'core:volume:config', this._onVolumeConfig);
-    }
-    unBindEvents() {
-        this.core.$el.off('mouseleave.volume');
-        this.core.$el.off('mouseenter.volume');
-    }
-    _onUserChangeVolume(volume) {
-        this._aboveBorderVolume = volume;
-    }
-    _onVolumeConfig(value) {
-        this._aboveBorderVolume = value;
-        this.container?.setVolume(0);
     }
     onCoreReady() {
-        this.unBindEvents();
-        this.container = this.core.activeContainer;
-        if (this.core && this.core.$el) {
-            // TODO find out why options.playerElement instead of this.core.$el or this.container.$el
-            $(this.options.playerElement).on('mouseenter.volume', () => {
-                this.onEnter();
-            });
-            $(this.options.playerElement).on('mouseleave.volume', () => {
-                this.onLeave();
-            });
-        }
-        if (!this._aboveBorderVolume) {
-            this._aboveBorderVolume = this.container?.volume && !isNaN(this.container.volume) ? this.container.volume : 80;
-        }
-        if (this.options.mute || Browser.isMobile) {
+        const mediaControl = this.core.getPlugin('media_control');
+        if (Browser.isMobile) {
             this.destroy();
             return;
         }
-        this.delay = this.options.volumeFade && this.options.volumeFade.delay || 600;
-        this.container?.setVolume(0);
+        if (mediaControl) {
+            this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_VOLUME, this.onVolumeChange);
+        }
+        $(this.core.$el).on('mouseenter', () => this.onEnter());
+        $(this.core.$el).on('mouseleave', () => this.onLeave());
+        if (!this.activeVolume) {
+            this.activeVolume =
+                this.core.activeContainer?.volume &&
+                    !isNaN(this.core.activeContainer.volume)
+                    ? this.core.activeContainer.volume
+                    : 80;
+        }
+        this.duration = this.options.volumeFade?.duration || DEFAULT_DURATION;
+        // TODO check if mute must be respected
+        this.core.activeContainer?.setVolume(this.activeVolume);
+        this.core.activePlayback.volume(0);
+    }
+    onVolumeChange(volume) {
+        trace(`${T} onVolumeChange`, { volume });
+        this.activeVolume = volume;
     }
     onEnter() {
-        this.numberTo(this.delay);
+        trace(`${T} onEnter`);
+        this.fade(this.duration, 1);
     }
-    numberTo(duration, contra = 0) {
-        this.clearCurrentInterval();
+    onLeave() {
+        trace(`${T} onLeave`);
+        this.fade(this.duration, 0);
+    }
+    fade(duration, to) {
+        this.stopFade();
         const start = new Date().getTime();
-        this.interval = setInterval(() => {
-            let now = (new Date().getTime()) - start;
-            if (now > duration) {
-                now = duration;
-            }
-            const progress = Math.abs(contra - now / duration);
+        const from = 1 - to;
+        this.timerId = setInterval(() => {
+            const delta = new Date().getTime() - start;
+            const progress = Math.min(1, delta / duration);
+            const normVol = progress * to + (1 - progress) * from;
+            const volume = normVol * this.activeVolume;
+            this.core.activePlayback.volume(volume);
             try {
-                this.container?.setVolume(progress * this._aboveBorderVolume);
-                this.core.trigger(VolumeFadeEvents.FADE, progress * this._aboveBorderVolume);
+                this.core.trigger(VolumeFadeEvents.FADE, volume);
             }
             catch (error) {
-                // LogManager.exception(error);
                 reportError(error);
-                this.clearCurrentInterval();
             }
-            if (progress >= 1 || progress <= 0) {
-                this.clearCurrentInterval();
+            if (progress >= 1) {
+                this.stopFade();
             }
         }, 10);
     }
-    clearCurrentInterval() {
-        if (this.interval !== null) {
-            clearInterval(this.interval);
-            this.interval = null;
+    stopFade() {
+        trace(`${T} stopFade`);
+        if (this.timerId !== null) {
+            clearInterval(this.timerId);
+            this.timerId = null;
         }
     }
-    onLeave() {
-        this.numberTo(this.delay, 1);
-    }
 }
 
-export { AudioTracks as AudioSelector, AudioTracks, BigMuteButton, BottomGear, NerdStats as ClapprNerdStats, ClapprStats, ClickToPause, Clips, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, QualityLevels as LevelSelector, LogTracer, Logger, Logo, MediaControl, MultiCamera, NerdStats, PictureInPicture, PlaybackErrorCode, PlaybackRate, Player, PlayerEvent, Poster, QualityLevels, SeekTime, SentryTracer, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents, reportError, setTracer, trace, version };
+export { AudioTracks as AudioSelector, AudioTracks, BigMuteButton, BottomGear, NerdStats as ClapprNerdStats, ClapprStats, ClapprStatsChronograph, ClapprStatsCounter, ClapprStatsEvents, ClickToPause, Clips, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, ExtendedEvents, Favicon, GearEvents, GoogleAnalytics, QualityLevels as LevelSelector, LogTracer, Logger, Logo, MediaControl, MultiCamera, NerdStats, PictureInPicture, PlaybackErrorCode, PlaybackRate, Player, PlayerEvent, Poster, QualityLevels, SeekTime, SentryTracer, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents, reportError, setTracer, trace, version };