@gcorevideo/player 2.22.18 → 2.22.20

package/dist/index.js

@@ -12680,7 +12680,7 @@ var PlaybackEvents;
 // https://github.com/clappr/clappr/blob/8752995ea439321ac7ca3cd35e8c64de7a3c3d17/LICENSE
 const AUTO$1 = -1;
 const { now: now$2 } = Utils;
-const T$l = 'playback.dash';
+const T$k = 'playback.dash';
 class DashPlayback extends BasePlayback {
     _levels = null;
     _currentLevel = null;
@@ -12955,10 +12955,10 @@ class DashPlayback extends BasePlayback {
     }
     _onPlaybackError = (event) => {
         // TODO
-        trace(`${T$l} _onPlaybackError`, { event });
+        trace(`${T$k} _onPlaybackError`, { event });
     };
     _onDASHJSSError = (event) => {
-        trace(`${T$l} _onDASHJSSError`, { event });
+        trace(`${T$k} _onDASHJSSError`, { event });
         this._stopTimeUpdateTimer();
         // Note that the other error types are deprecated
         const e = event.error;
@@ -12993,7 +12993,7 @@ class DashPlayback extends BasePlayback {
         }
     };
     triggerError(error) {
-        trace(`${T$l} triggerError`, { error });
+        trace(`${T$k} triggerError`, { error });
         // this triggers Events.ERROR to be handled by the UI
         this.trigger(Events$1.PLAYBACK_ERROR, this.createError(error, {
             useCodePrefix: false,
@@ -13032,10 +13032,10 @@ class DashPlayback extends BasePlayback {
     }
     get dvrEnabled() {
         if (!this._dash) {
-            trace(`${T$l} dvrEnable no dash player instance`);
+            trace(`${T$k} dvrEnable no dash player instance`);
             return false;
         }
-        trace(`${T$l} get.dvrEnabled`, {
+        trace(`${T$k} get.dvrEnabled`, {
             dvrWindowSize: this._dash?.getDVRWindowSize(),
             minDvrSize: this._minDvrSize,
             playbackType: this.getPlaybackType(),
@@ -13057,7 +13057,7 @@ class DashPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_PROGRESS, progress, {});
     }
     play() {
-        trace(`${T$l} play`, { dash: !!this._dash });
+        trace(`${T$k} play`, { dash: !!this._dash });
         if (!this._dash) {
             this._setup();
         }
@@ -13143,7 +13143,7 @@ class DashPlayback extends BasePlayback {
     }
     // @ts-expect-error
     get currentAudioTrack() {
-        trace(`${T$l} get currentAudioTrack`);
+        trace(`${T$k} get currentAudioTrack`);
         assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized');
         const t = this._dash.getCurrentTrackFor('audio');
         if (!t) {
@@ -41844,7 +41844,7 @@ const AUTO = -1;
 const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-const T$k = 'playback.hls';
+const T$j = 'playback.hls';
 class HlsPlayback extends BasePlayback {
     _ccIsSetup = false;
     _ccTracksUpdated = false;
@@ -42073,7 +42073,7 @@ class HlsPlayback extends BasePlayback {
             maxBufferLength: 2,
             maxMaxBufferLength: 4,
         }, this.options.playback.hlsjsConfig);
-        trace(`${T$k} _createHLSInstance`, { config });
+        trace(`${T$j} _createHLSInstance`, { config });
         this._hls = new Hls(config);
     }
     _attachHLSMedia() {
@@ -42164,7 +42164,7 @@ class HlsPlayback extends BasePlayback {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$k} _recover failed to recover`, {
+            trace(`${T$j} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42250,7 +42250,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$k} _onHLSJSError`, {
+        trace(`${T$j} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -42298,7 +42298,7 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$k} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$j} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
@@ -42311,7 +42311,7 @@ class HlsPlayback extends BasePlayback {
                             evt,
                             data,
                         });
-                        trace(`${T$k} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$j} _onHLSJSError trying to recover from media error`, {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
@@ -42341,7 +42341,7 @@ class HlsPlayback extends BasePlayback {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$k} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$j} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42675,11 +42675,11 @@ class HlsPlayback extends BasePlayback {
         this._hls.audioTrack = Number(id); // TODO or find index by .id == id?
     }
     _onAudioTracksUpdated(_, data) {
-        trace(`${T$k} onAudioTracksUpdated`);
+        trace(`${T$j} onAudioTracksUpdated`);
         this.trigger(Events$1.PLAYBACK_AUDIO_AVAILABLE, data.audioTracks.map(toClapprTrack));
     }
     _onAudioTrackSwitched(_, data) {
-        trace(`${T$k} onAudioTrackSwitched`);
+        trace(`${T$j} onAudioTrackSwitched`);
         // @ts-ignore
         const track = this._hls.audioTracks[data.id];
         this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack(track));
@@ -42700,7 +42700,7 @@ function toClapprTrack(t) {
     };
 }
 
-const T$j = 'playback.html5_video';
+const T$i = 'playback.html5_video';
 const STALL_TIMEOUT = 15000;
 class HTML5Video extends BasePlayback {
     stallTimerId = null;
@@ -42708,7 +42708,7 @@ class HTML5Video extends BasePlayback {
      * @internal
      */
     createError(errorData, options) {
-        trace(`${T$j} createError`, {
+        trace(`${T$i} createError`, {
             errorData: { ...errorData },
         });
         const i18n = this.i18n ||
@@ -42724,11 +42724,11 @@ class HTML5Video extends BasePlayback {
         return super.createError(errorData, { ...options, useCodePrefix: false });
     }
     _onWaiting() {
-        trace(`${T$j} _onWaiting`);
+        trace(`${T$i} _onWaiting`);
         super._onWaiting();
     }
     _onEnded() {
-        trace(`${T$j} _onEnded`);
+        trace(`${T$i} _onEnded`);
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
             this.stallTimerId = null;
@@ -42736,12 +42736,12 @@ class HTML5Video extends BasePlayback {
         super._onEnded();
     }
     _handleBufferingEvents() {
-        trace(`${T$j} _handleBufferingEvents`, {
+        trace(`${T$i} _handleBufferingEvents`, {
             networkState: this.el.networkState,
         });
         if (!this.stallTimerId) {
             this.stallTimerId = setTimeout(() => {
-                trace(`${T$j} _handleBufferingEvents stall timeout`, {
+                trace(`${T$i} _handleBufferingEvents stall timeout`, {
                     buffering: this.buffering,
                     ended: this.ended,
                 });
@@ -42759,7 +42759,7 @@ class HTML5Video extends BasePlayback {
         super._handleBufferingEvents();
     }
     _onPlaying() {
-        trace(`${T$j} _onPlaying`);
+        trace(`${T$i} _onPlaying`);
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
             this.stallTimerId = null;
@@ -42767,7 +42767,7 @@ class HTML5Video extends BasePlayback {
         super._onPlaying();
     }
     _onPause() {
-        trace(`${T$j} _onPause`);
+        trace(`${T$i} _onPause`);
         super._onPause();
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
@@ -42777,7 +42777,7 @@ class HTML5Video extends BasePlayback {
     get audioTracks() {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$j} get audioTracks`, { supported });
+        trace(`${T$i} get audioTracks`, { supported });
         const retval = [];
         if (supported) {
             for (let i = 0; i < tracks.length; i++) {
@@ -42796,7 +42796,7 @@ class HTML5Video extends BasePlayback {
     get currentAudioTrack() {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$j} get currentAudioTrack`, {
+        trace(`${T$i} get currentAudioTrack`, {
             supported,
         });
         if (supported) {
@@ -42817,7 +42817,7 @@ class HTML5Video extends BasePlayback {
     switchAudioTrack(id) {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$j} switchAudioTrack`, {
+        trace(`${T$i} switchAudioTrack`, {
             supported,
         });
         if (supported) {
@@ -42836,7 +42836,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$i = 'GPlayer';
+const T$h = 'GPlayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -42924,7 +42924,7 @@ class Player {
      * ```
      */
     attachTo(playerElement) {
-        trace(`${T$i} attachTo`, {
+        trace(`${T$h} attachTo`, {
             player: !!this.player,
         });
         assert.ok(!this.player, 'Player already initialized');
@@ -42934,7 +42934,7 @@ class Player {
         }
         const coreOpts = this.buildCoreOptions(playerElement);
         const { core, container } = Player.getRegisteredPlugins();
-        trace(`${T$i} init`, {
+        trace(`${T$h} init`, {
             registeredPlaybacks: Loader.registeredPlaybacks.map((p) => p.prototype.name),
         });
         coreOpts.plugins = {
@@ -42948,7 +42948,7 @@ class Player {
      * Destroys the player, releasing all resources and unmounting its UI from the DOM.
      */
     destroy() {
-        trace(`${T$i} destroy`, {
+        trace(`${T$h} destroy`, {
             player: !!this.player,
         });
         if (this.player) {
@@ -43135,7 +43135,7 @@ class Player {
         this.config = $.extend(true, this.config, config);
     }
     initPlayer(coreOptions) {
-        trace(`${T$i} initPlayer`, {
+        trace(`${T$h} initPlayer`, {
             autoPlay: coreOptions.autoPlay,
             sources: coreOptions.sources,
             player: !!this.player,
@@ -43160,7 +43160,7 @@ class Player {
         }
     }
     triggerAutoPlay() {
-        trace(`${T$i} triggerAutoPlay`);
+        trace(`${T$h} triggerAutoPlay`);
         setTimeout(() => {
             this.player?.play({
                 autoPlay: true,
@@ -43178,7 +43178,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$i} onReady`, {
+            trace(`${T$h} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -43212,7 +43212,7 @@ class Player {
     buildCoreOptions(rootNode) {
         const sources = this.buildMediaSourcesList();
         const source = sources[0];
-        trace(`${T$i} buildCoreOptions`, {
+        trace(`${T$h} buildCoreOptions`, {
             source,
             sources,
         });
@@ -43273,7 +43273,7 @@ class Player {
         assert.ok(this.player, 'Player is not initialized');
         const core = this.player.core;
         core.on(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, ({ orientation }) => {
-            trace(`${T$i} on CORE_SCREEN_ORIENTATION_CHANGED`, {
+            trace(`${T$h} on CORE_SCREEN_ORIENTATION_CHANGED`, {
                 orientation,
                 rootNode: {
                     width: this.rootNode?.clientWidth,
@@ -43288,14 +43288,14 @@ class Player {
             }
         }, null);
         core.on(Events$1.CORE_RESIZE, ({ width, height }) => {
-            trace(`${T$i} on CORE_RESIZE`, {
+            trace(`${T$h} on CORE_RESIZE`, {
                 width,
                 height,
             });
             this.safeTriggerEvent(PlayerEvent.Resize, { width, height });
         }, null);
         core.on(Events$1.CORE_FULLSCREEN, (isFullscreen) => {
-            trace(`${T$i} CORE_FULLSCREEN`, {
+            trace(`${T$h} CORE_FULLSCREEN`, {
                 isFullscreen,
             });
             this.safeTriggerEvent(PlayerEvent.Fullscreen, isFullscreen);
@@ -43303,7 +43303,7 @@ class Player {
     }
 }
 
-var version$1 = "2.22.18";
+var version$1 = "2.22.20";
 
 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');
         }
     }
 }
@@ -43495,7 +43502,7 @@ const volumeOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fil
 
 const pluginHtml$6 = "<div class=\"big-mute-icon-wrapper\" data-big-mute>\n    <div class=\"big-mute-icon gcore-skin-border-color\" data-big-mute-icon></div>\n</div>\n";
 
-const T$h = 'plugins.big_mute_button';
+const T$g = 'plugins.big_mute_button';
 // TODO rewrite as a container plugin
 /**
  * `PLUGIN` that displays a big mute button over the video when it's muted.
@@ -43536,7 +43543,7 @@ class BigMuteButton extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
         this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
         this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
-        trace(`${T$h} bindEvents`, {
+        trace(`${T$g} bindEvents`, {
             mediacontrol: !!this.core.mediaControl,
         });
         this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mediaControlRendered);
@@ -43561,12 +43568,12 @@ class BigMuteButton extends UICorePlugin {
     }
     mediaControlRendered() {
         const container = this.core.activeContainer;
-        trace(`${T$h} mediaControlRendered`, {
+        trace(`${T$g} mediaControlRendered`, {
             container: !!container,
         });
         if (container) {
             this.listenTo(container.playback, Events$1.PLAYBACK_PLAY, () => {
-                trace(`${T$h} PLAYBACK_PLAY`);
+                trace(`${T$g} PLAYBACK_PLAY`);
                 this.render();
             });
         }
@@ -43590,7 +43597,7 @@ class BigMuteButton extends UICorePlugin {
         }
         const { autoPlay, wasMuted } = this.options;
         const volume = container.volume;
-        trace(`${T$h} shouldRender`, {
+        trace(`${T$g} shouldRender`, {
             autoPlay,
             wasMuted,
             volume,
@@ -43602,7 +43609,7 @@ class BigMuteButton extends UICorePlugin {
      */
     render() {
         if (this.shouldRender()) {
-            trace(`${T$h} render`, {
+            trace(`${T$g} render`, {
                 el: !!this.$el,
             });
             this.$el.html(BigMuteButton.template());
@@ -43641,14 +43648,14 @@ 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";
 
 const gearHdIcon = "<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_1567)\">\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    <rect x=\"13\" width=\"11\" height=\"7\" rx=\"1\" fill=\"#F6413B\"/>\n    <path\n      d=\"M14.6962 6V1.63636H15.3546V3.53267H17.53V1.63636H18.1905V6H17.53V4.0973H15.3546V6H14.6962ZM20.562 6H19.1493V1.63636H20.6067C21.0343 1.63636 21.4015 1.72372 21.7083 1.89844C22.0151 2.07173 22.2502 2.32102 22.4135 2.64631C22.5783 2.97017 22.6607 3.35866 22.6607 3.81179C22.6607 4.26634 22.5776 4.65696 22.4114 4.98366C22.2466 5.31037 22.008 5.56179 21.6955 5.73793C21.383 5.91264 21.0051 6 20.562 6ZM19.8077 5.42472H20.5257C20.8581 5.42472 21.1344 5.36222 21.3546 5.23722C21.5748 5.1108 21.7395 4.92827 21.8489 4.68963C21.9583 4.44957 22.013 4.15696 22.013 3.81179C22.013 3.46946 21.9583 3.17898 21.8489 2.94034C21.7409 2.7017 21.5797 2.5206 21.3652 2.39702C21.1507 2.27344 20.8844 2.21165 20.5662 2.21165H19.8077V5.42472Z\"\n      fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_28_1567\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
 
 const VERSION$6 = '2.19.12';
-const T$g = 'plugins.bottom_gear';
+const T$f = 'plugins.bottom_gear';
 /**
  * Events triggered by the plugin
  * @beta
@@ -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 = {}));
@@ -43798,20 +43805,20 @@ class BottomGear extends UICorePlugin {
     addItem(name, $subMenu) {
         const $existingItem = this.$el.find(`#gear-options li[data-${name}`);
         if ($existingItem.length) {
-            trace(`${T$g} addItem already exists`, { name });
+            trace(`${T$f} addItem already exists`, { name });
             return $existingItem;
         }
         const $item = $('<li></li>')
             .attr(`data-${name}`, '')
             .appendTo(this.$el.find('#gear-options'));
         if ($subMenu) {
-            trace(`${T$g} addItem adding submenu`, { name });
+            trace(`${T$f} addItem adding submenu`, { name });
             $subMenu
                 .addClass('gear-sub-menu-wrapper')
                 .hide()
                 .appendTo(this.$el.find('#gear-options-wrapper'));
             $item.on('click', (e) => {
-                trace(`${T$g} addItem submenu clicked`, { name });
+                trace(`${T$f} addItem submenu clicked`, { name });
                 e.stopPropagation();
                 $subMenu.show();
                 this.$el.find('#gear-options').hide();
@@ -43820,15 +43827,15 @@ class BottomGear extends UICorePlugin {
         return $item;
     }
     onActiveContainerChanged() {
-        trace(`${T$g} onActiveContainerChanged`);
+        trace(`${T$f} onActiveContainerChanged`);
         this.bindContainerEvents();
     }
     bindContainerEvents() {
-        trace(`${T$g} bindContainerEvents`);
+        trace(`${T$f} bindContainerEvents`);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
     }
     highDefinitionUpdate(isHd) {
-        trace(`${T$g} highDefinitionUpdate`, { isHd });
+        trace(`${T$f} highDefinitionUpdate`, { isHd });
         this.isHd = isHd;
         this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon);
     }
@@ -43836,7 +43843,7 @@ class BottomGear extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$g} render`);
+        trace(`${T$f} render`);
         const mediaControl = this.core.getPlugin('media_control');
         if (!mediaControl) {
             return this; // TODO test
@@ -43868,48 +43875,48 @@ class BottomGear extends UICorePlugin {
         this.$el.find('#gear-options-wrapper').hide();
     }
     onCoreReady() {
-        trace(`${T$g} onCoreReady`);
+        trace(`${T$f} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.onMediaControlRendered);
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hide);
     }
     onMediaControlRendered() {
-        trace(`${T$g} onMediaControlRendered`);
+        trace(`${T$f} 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();
@@ -46342,18 +46346,18 @@ const PLAYBACK_NAMES = {
     hls: 'HLS.js',
     html5_video: 'Native',
 };
-const T$f = 'plugins.nerd_stats';
+const T$e = '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,
@@ -46522,7 +46526,7 @@ class NerdStats extends UICorePlugin {
             .text(this.metrics.general.resolution.height);
     }
     estimateQuality() {
-        trace(`${T$f} estimateQuality`);
+        trace(`${T$e} estimateQuality`);
         const videoQualityNames = [
             'SD (480p)',
             'HD (720p)',
@@ -46547,7 +46551,7 @@ class NerdStats extends UICorePlugin {
             prefix + videoQualityNames[liveQuality - 1];
     }
     updateMetrics(metrics) {
-        trace(`${T$f} updateMetrics`, { custom: this.speedtestMetrics });
+        trace(`${T$e} updateMetrics`, { custom: this.speedtestMetrics });
         Object.assign(this.metrics, metrics);
         this.updateEstimatedQuality();
         this.$el
@@ -46649,7 +46653,7 @@ class NerdStats extends UICorePlugin {
         return this;
     }
     attach() {
-        trace(`${T$f} attach`);
+        trace(`${T$e} attach`);
         const gear = this.core.getPlugin('bottom_gear');
         gear
             .addItem('nerd_stats')
@@ -46716,7 +46720,7 @@ function newMetrics() {
 // 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 at https://github.com/clappr/clappr-plugins/blob/master/LICENSE.
-const T$e = 'plugins.click_to_pause';
+const T$d = 'plugins.click_to_pause';
 /**
  * A small `PLUGIN` that toggles the playback state on click over the video container
  * @beta
@@ -46728,7 +46732,7 @@ class ClickToPause extends ContainerPlugin {
      * @internal
      */
     get name() {
-        return 'click_to_pause_custom';
+        return 'click_to_pause';
     }
     /**
      * @internal
@@ -46746,7 +46750,7 @@ class ClickToPause extends ContainerPlugin {
     click() {
         const isLivePlayback = this.container.getPlaybackType() === Playback.LIVE;
         const isDvrEnabled = this.container.isDvrEnabled();
-        trace(`${T$e} click`, {
+        trace(`${T$d} click`, {
             isLivePlayback,
             isDvrEnabled,
         });
@@ -46861,7 +46865,7 @@ function buildSvg(clips, duration, barWidth) {
 
 const clipsHTML = "<div class=\"media-clip-text\" id=\"clips-text\"></div>";
 
-const T$d = 'plugins.clips';
+const T$c = 'plugins.clips';
 const VERSION$5 = '2.22.16';
 const CLAPPR_VERSION = '0.11.4';
 /**
@@ -46911,7 +46915,7 @@ class Clips extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
     }
     render() {
-        trace(`${T$d} render`);
+        trace(`${T$c} render`);
         if (!this.options.clips) {
             return this;
         }
@@ -46938,19 +46942,19 @@ class Clips extends UICorePlugin {
         return super.enable();
     }
     onCoreReady() {
-        trace(`${T$d} onCoreReady`);
+        trace(`${T$c} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.parseClips(this.options.clips.text);
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.onMcRender);
     }
     onMcRender() {
-        trace(`${T$d} onMcRender`);
+        trace(`${T$c} onMcRender`);
         const mediaControl = this.core.getPlugin('media_control');
         mediaControl.mount('clips', this.$el);
     }
     onContainerChanged() {
-        trace(`${T$d} onContainerChanged`);
+        trace(`${T$c} onContainerChanged`);
         // TODO figure out the conditions of changing the container (without destroying the previous one)
         if (this.oldContainer) {
             this.stopListening(this.oldContainer, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
@@ -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,32 +47200,47 @@ 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>";
@@ -48033,8 +48050,6 @@ const DEFAULT_SETTINGS = {
     right: [
         'audiotracks',
         'cc',
-        // 'dvr',
-        // 'duration',
         'fullscreen',
         'gear',
         'multicamera',
@@ -48051,10 +48066,10 @@ const T$a = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
     'playstop',
-    'dvr',
     'volume',
     'position',
     'duration',
+    'dvr',
 ];
 const { Config, Fullscreen, formatTime: formatTime$1, extend, removeArrayItem } = Utils;
 function orderByOrderPattern(arr, order) {
@@ -48701,8 +48716,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) {
@@ -48756,7 +48770,7 @@ class MediaControl extends UICorePlugin {
             right: [],
         }, this.core.activeContainer.settings);
         trace(`${T$a} updateSettings`, { newSettings });
-        newSettings.left.push('clips'); // TODO
+        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 &&
@@ -48819,7 +48833,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 +48848,7 @@ class MediaControl extends UICorePlugin {
      */
     mount(name, element) {
         const panel = this.getElementLocation(name);
-        trace(`${T$a} putElement`, { name, panel: !!panel });
+        trace(`${T$a} mount`, { name, panel: !!panel });
         if (panel) {
             const current = panel.find(`[data-${name}]`);
             element.attr(`data-${name}`, '');
@@ -48852,13 +48865,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);
@@ -49074,6 +49092,7 @@ class MediaControl extends UICorePlugin {
                 width: this.options.width,
                 height: this.options.height,
             });
+            // TODO check out
             this.hideVolumeBar(0);
         }, 0);
         this.parseColors();
@@ -49629,7 +49648,7 @@ 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;
     }
@@ -51533,7 +51552,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;
@@ -52471,4 +52490,4 @@ class VolumeFade extends UICorePlugin {
     }
 }
 
-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, 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 };