@gcorevideo/player 2.20.7 → 2.20.9

package/dist/index.js

@@ -7761,7 +7761,7 @@ var UNKNOWN_ERROR = {
 };
 
 // TODO: rename this Playback to HTML5Playback (breaking change, only after 0.3.0)
-var HTML5Video = /*#__PURE__*/function (_Playback) {
+var HTML5Video$1 = /*#__PURE__*/function (_Playback) {
   function HTML5Video() {
     var _this;
     _classCallCheck(this, HTML5Video);
@@ -8553,7 +8553,7 @@ var HTML5Video = /*#__PURE__*/function (_Playback) {
     }
   }]);
 }(Playback);
-HTML5Video._mimeTypesForUrl = function () {
+HTML5Video$1._mimeTypesForUrl = function () {
   var resourceUrl = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var mimeTypesByExtension = arguments.length > 1 ? arguments[1] : undefined;
   var mimeType = arguments.length > 2 ? arguments[2] : undefined;
@@ -8561,15 +8561,15 @@ HTML5Video._mimeTypesForUrl = function () {
   var mimeTypes = mimeType || extension && mimeTypesByExtension[extension.toLowerCase()] || [];
   return mimeTypes.constructor === Array ? mimeTypes : [mimeTypes];
 };
-HTML5Video._canPlay = function (type, mimeTypesByExtension, resourceUrl, mimeType) {
-  var mimeTypes = HTML5Video._mimeTypesForUrl(resourceUrl, mimeTypesByExtension, mimeType);
+HTML5Video$1._canPlay = function (type, mimeTypesByExtension, resourceUrl, mimeType) {
+  var mimeTypes = HTML5Video$1._mimeTypesForUrl(resourceUrl, mimeTypesByExtension, mimeType);
   var media = document.createElement(type);
   return !!mimeTypes.filter(function (mediaType) {
     return !!media.canPlayType(mediaType).replace(/no/, '');
   })[0];
 };
-HTML5Video.canPlay = function (resourceUrl, mimeType) {
-  return HTML5Video._canPlay('audio', AUDIO_MIMETYPES, resourceUrl, mimeType) || HTML5Video._canPlay('video', MIMETYPES, resourceUrl, mimeType);
+HTML5Video$1.canPlay = function (resourceUrl, mimeType) {
+  return HTML5Video$1._canPlay('audio', AUDIO_MIMETYPES, resourceUrl, mimeType) || HTML5Video$1._canPlay('video', MIMETYPES, resourceUrl, mimeType);
 };
 
 // TODO: remove this playback and change HTML5Video to HTML5Playback (breaking change, only after 0.3.0)
@@ -8614,7 +8614,7 @@ var HTML5Audio = /*#__PURE__*/function (_HTML5Video) {
       return Playback.AOD;
     }
   }]);
-}(HTML5Video);
+}(HTML5Video$1);
 HTML5Audio.canPlay = function (resourceUrl, mimeType) {
   var mimetypes = {
     'wav': ['audio/wav'],
@@ -8622,7 +8622,7 @@ HTML5Audio.canPlay = function (resourceUrl, mimeType) {
     'aac': ['audio/mp4;codecs="mp4a.40.5"'],
     'oga': ['audio/ogg']
   };
-  return HTML5Video._canPlay('audio', mimetypes, resourceUrl, mimeType);
+  return HTML5Video$1._canPlay('audio', mimetypes, resourceUrl, mimeType);
 };
 
 var css_248z$1 = "[data-html-img] {\n  max-width: 100%;\n  max-height: 100%; }\n";
@@ -9024,7 +9024,7 @@ Loader.registerPlugin(SourcesPlugin);
 Loader.registerPlayback(NoOp);
 Loader.registerPlayback(HTMLImg);
 Loader.registerPlayback(HTML5Audio);
-Loader.registerPlayback(HTML5Video);
+Loader.registerPlayback(HTML5Video$1);
 
 const global$1 = (typeof global !== "undefined" ? global :
   typeof self !== "undefined" ? self :
@@ -12628,7 +12628,7 @@ var PlaybackErrorCode;
  * @internal
  * TODO use custom HTML5Video playback with this layer applied
  */
-class BasePlayback extends HTML5Video {
+class BasePlayback extends HTML5Video$1 {
     createError(errorData, options) {
         const i18n = this.i18n ||
             // @ts-ignore
@@ -12649,18 +12649,35 @@ class BasePlayback extends HTML5Video {
         }
         return super.createError(errorData, options);
     }
+    /**
+     * Sets the playback rate.
+     * @param rate - The playback rate to set.
+     */
+    setPlaybackRate(rate) {
+        this.el.playbackRate = rate;
+    }
     _onPlaying() {
         super._onPlaying();
         this.trigger(Events$1.PLAYBACK_MEDIACONTROL_ENABLE);
     }
 }
 
+var PlaybackEvents;
+(function (PlaybackEvents) {
+    /**
+     * Emitted when the playback rate changes.
+     * Payload:
+     * - playbackRate number
+     */
+    PlaybackEvents["PLAYBACK_RATE_CHANGED"] = "playback:rate-changed";
+})(PlaybackEvents || (PlaybackEvents = {}));
+
 // 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 AUTO$2 = -1;
 const { now: now$2 } = Utils;
-const T$g = 'playback.dash';
+const T$i = 'playback.dash';
 // @ts-expect-error
 class DashPlayback extends BasePlayback {
     _levels = null;
@@ -12838,8 +12855,8 @@ class DashPlayback extends BasePlayback {
                 }
             }
         });
-        this._dash.on(DASHJS.MediaPlayer.events.PLAYBACK_RATE_CHANGED, () => {
-            this.trigger('dash:playback-rate-changed');
+        this._dash.on(DASHJS.MediaPlayer.events.PLAYBACK_RATE_CHANGED, (e) => {
+            this.trigger(PlaybackEvents.PLAYBACK_RATE_CHANGED, e.playbackRate);
         });
     }
     render() {
@@ -12930,10 +12947,10 @@ class DashPlayback extends BasePlayback {
     }
     _onPlaybackError = (event) => {
         // TODO
-        trace(`${T$g} _onPlaybackError`, { event });
+        trace(`${T$i} _onPlaybackError`, { event });
     };
     _onDASHJSSError = (event) => {
-        trace(`${T$g} _onDASHJSSError`, { event });
+        trace(`${T$i} _onDASHJSSError`, { event });
         this._stopTimeUpdateTimer();
         // Note that the other error types are deprecated
         const e = event.error;
@@ -12968,7 +12985,7 @@ class DashPlayback extends BasePlayback {
         }
     };
     triggerError(error) {
-        trace(`${T$g} triggerError`, { error });
+        trace(`${T$i} triggerError`, { error });
         // this triggers Events.ERROR to be handled by the UI
         this.trigger(Events$1.PLAYBACK_ERROR, this.createError(error, {
             useCodePrefix: false,
@@ -13007,7 +13024,7 @@ class DashPlayback extends BasePlayback {
     }
     get dvrEnabled() {
         if (!this._dash) {
-            trace(`${T$g} dvrEnable no dash player instance`);
+            trace(`${T$i} dvrEnable no dash player instance`);
             return false;
         }
         return (this._dash?.getDVRWindowSize() >= this._minDvrSize &&
@@ -13029,7 +13046,7 @@ class DashPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_PROGRESS, progress, {});
     }
     play() {
-        trace(`${T$g} play`, { dash: !!this._dash });
+        trace(`${T$i} play`, { dash: !!this._dash });
         if (!this._dash) {
             this._setup();
         }
@@ -13105,6 +13122,9 @@ class DashPlayback extends BasePlayback {
         assert.ok(ret, 'Invalid quality level');
         return ret;
     }
+    setPlaybackRate(rate) {
+        this._dash?.setPlaybackRate(rate);
+    }
 }
 DashPlayback.canPlay = function (resource, mimeType) {
     if (!isDashSource(resource, mimeType)) {
@@ -41776,7 +41796,7 @@ const AUTO$1 = -1;
 const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-const T$f = 'playback.hls';
+const T$h = 'playback.hls';
 // @ts-expect-error
 class HlsPlayback extends BasePlayback {
     _ccIsSetup = false;
@@ -42006,7 +42026,7 @@ class HlsPlayback extends BasePlayback {
             maxBufferLength: 2,
             maxMaxBufferLength: 4,
         }, this.options.playback.hlsjsConfig);
-        trace(`${T$f} _createHLSInstance`, { config });
+        trace(`${T$h} _createHLSInstance`, { config });
         this._hls = new Hls(config);
     }
     _attachHLSMedia() {
@@ -42095,7 +42115,7 @@ class HlsPlayback extends BasePlayback {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$f} _recover failed to recover`, {
+            trace(`${T$h} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42181,7 +42201,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$f} _onHLSJSError`, {
+        trace(`${T$h} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -42229,7 +42249,7 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$f} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$h} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
@@ -42242,7 +42262,7 @@ class HlsPlayback extends BasePlayback {
                             evt,
                             data,
                         });
-                        trace(`${T$f} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$h} _onHLSJSError trying to recover from media error`, {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
@@ -42272,7 +42292,7 @@ class HlsPlayback extends BasePlayback {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$f} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$h} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42596,13 +42616,17 @@ HlsPlayback.canPlay = function (resource, mimeType) {
     return Hls.isSupported();
 };
 
+class HTML5Video extends BasePlayback {
+}
+
 // TODO consider allowing the variation of the order of playback modules
 function registerPlaybacks() {
+    Loader.registerPlayback(HTML5Video); // TODO check it overrides the default HTML5Video
     Loader.registerPlayback(HlsPlayback);
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$e = 'GPlayer';
+const T$g = 'GPlayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -42697,7 +42721,7 @@ class Player {
         }
         const coreOpts = this.buildCoreOptions(playerElement);
         const { core, container } = Player.getRegisteredPlugins();
-        trace(`${T$e} init`, {
+        trace(`${T$g} init`, {
             registeredPlaybacks: Loader.registeredPlaybacks.map((p) => p.name),
         });
         coreOpts.plugins = {
@@ -42711,7 +42735,7 @@ class Player {
      * Destroys the player, releasing all resources and unmounting its UI from the DOM.
      */
     destroy() {
-        trace(`${T$e} destroy`, {
+        trace(`${T$g} destroy`, {
             player: !!this.player,
         });
         if (this.player) {
@@ -42870,6 +42894,23 @@ class Player {
         }
         Loader.registerPlugin(plugin);
     }
+    /**
+     * Unregisters a plugin registered earlier with {@link Player.registerPlugin}.
+     * @remarks
+     * It can be also used to unregister a built-in default plugin.
+     *
+     * Currently, the plugins that are always registered are:
+     *
+     * - {@link https://github.com/clappr/clappr-core/blob/3126c3a38a6eee9d5aba3918b194e6380fa1178c/src/plugins/strings/strings.js | 'strings'}, which supports internationalization of the player UI
+     *
+     * - {@link https://github.com/clappr/clappr-core/blob/3126c3a38a6eee9d5aba3918b194e6380fa1178c/src/plugins/sources/sources.js | 'sources'}, which lets to specify multiple media sources and selects the first suitable playback module
+     *
+     * @param name - name of the plugin
+     */
+    static unregisterPlugin(name) {
+        Player.corePlugins = Player.corePlugins.filter((p) => p.prototype.name !== name);
+        Loader.unregisterPlugin(name);
+    }
     static getRegisteredPlugins() {
         for (const plugin of Player.corePlugins) {
             Loader.registerPlugin(plugin);
@@ -42877,23 +42918,11 @@ class Player {
         return Loader.registeredPlugins;
     }
     static corePlugins = [];
-    /**
-     * Unregisters a plugin registered earlier with {@link Player.registerPlugin}.
-     * @param plugin - a plugin class
-     */
-    static unregisterPlugin(plugin) {
-        assert.ok(plugin.type === 'core' || plugin.type === 'container', 'Invalid plugin type');
-        if (plugin.type === 'core') {
-            Player.corePlugins = Player.corePlugins.filter((p) => p !== plugin);
-            return;
-        }
-        Loader.unregisterPlugin(plugin);
-    }
     setConfig(config) {
         this.config = $.extend(true, this.config, config);
     }
     initPlayer(coreOptions) {
-        trace(`${T$e} initPlayer`, {
+        trace(`${T$g} initPlayer`, {
             autoPlay: coreOptions.autoPlay,
             sources: coreOptions.sources,
             // TODO selected options
@@ -42918,7 +42947,7 @@ class Player {
         }
     }
     triggerAutoPlay() {
-        trace(`${T$e} triggerAutoPlay`);
+        trace(`${T$g} triggerAutoPlay`);
         setTimeout(() => {
             this.player?.play({
                 autoPlay: true,
@@ -42936,7 +42965,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$e} onReady`, {
+            trace(`${T$g} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -42970,7 +42999,7 @@ class Player {
     buildCoreOptions(rootNode) {
         const sources = this.buildMediaSourcesList();
         const source = sources[0];
-        trace(`${T$e} buildCoreOptions`, {
+        trace(`${T$g} buildCoreOptions`, {
             source,
             sources,
         });
@@ -43031,7 +43060,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$e} on CORE_SCREEN_ORIENTATION_CHANGED`, {
+            trace(`${T$g} on CORE_SCREEN_ORIENTATION_CHANGED`, {
                 orientation,
                 rootNode: {
                     width: this.rootNode?.clientWidth,
@@ -43046,14 +43075,14 @@ class Player {
             }
         }, null);
         core.on(Events$1.CORE_RESIZE, ({ width, height }) => {
-            trace(`${T$e} on CORE_RESIZE`, {
+            trace(`${T$g} on CORE_RESIZE`, {
                 width,
                 height,
             });
             this.safeTriggerEvent(PlayerEvent.Resize, { width, height });
         }, null);
         core.on(Events$1.CORE_FULLSCREEN, (isFullscreen) => {
-            trace(`${T$e} CORE_FULLSCREEN`, {
+            trace(`${T$g} CORE_FULLSCREEN`, {
                 isFullscreen,
             });
             this.safeTriggerEvent(PlayerEvent.Fullscreen, isFullscreen);
@@ -43061,7 +43090,7 @@ class Player {
     }
 }
 
-var version$1 = "2.20.7";
+var version$1 = "2.20.9";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43085,7 +43114,7 @@ function version() {
     };
 }
 
-const pluginHtml$8 = "<button data-track-selector-button class='gcore-skin-button-color'>\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"></span>\n</button>\n<ul class='gcore-skin-bg-color'>\n    <% for (var i = 0; i < tracks.length; i++) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-track-selector-select=\"<%= tracks[i].id %>\">\n                <%= tracks[i].label || tracks[i].name %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
+const pluginHtml$7 = "<button data-track-selector-button class='gcore-skin-button-color'>\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"></span>\n</button>\n<ul class='gcore-skin-bg-color'>\n    <% for (var i = 0; i < tracks.length; i++) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-track-selector-select=\"<%= tracks[i].id %>\">\n                <%= tracks[i].label || tracks[i].name %>\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";
 
@@ -43119,7 +43148,7 @@ class AudioSelector extends UICorePlugin {
     static get version() {
         return VERSION$6;
     }
-    static template = tmpl(pluginHtml$8);
+    static template = tmpl(pluginHtml$7);
     /**
      * @internal
      */
@@ -43392,9 +43421,9 @@ class AudioSelector extends UICorePlugin {
 
 const volumeOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M5.50025 8.00025C4.67125 8.00025 4.00025 8.67225 4.00025 9.50025V14.5003C4.00025 15.3283 4.67125 16.0003 5.50025 16.0003H7.24824C7.65024 16.0003 8.03627 16.1613 8.31727 16.4483L12.5443 20.7413C12.7083 20.9073 12.9262 20.9963 13.1492 20.9963C13.2572 20.9963 13.3672 20.9763 13.4722 20.9333C13.7932 20.8013 14.0003 20.4923 14.0003 20.1462V16.3283C14.0003 16.1963 13.9473 16.0683 13.8543 15.9753L6.02528 8.14625C5.93228 8.05325 5.80425 8.00025 5.67225 8.00025H5.50025ZM14.0003 3.85426C14.0003 3.50826 13.7932 3.19927 13.4722 3.06727C13.1502 2.93627 12.7873 3.01226 12.5443 3.25926L9.33827 6.51527C9.14627 6.71127 9.14626 7.02625 9.34126 7.22025L13.5733 11.4522C13.7313 11.6102 14.0003 11.4982 14.0003 11.2752V3.85426ZM20.8543 20.8543C20.7563 20.9513 20.6283 21.0003 20.5003 21.0003C20.3723 21.0003 20.2442 20.9513 20.1462 20.8543L3.14625 3.85426C2.95125 3.65826 2.95125 3.34225 3.14625 3.14625C3.34225 2.95125 3.65826 2.95125 3.85426 3.14625L20.8543 20.1462C21.0493 20.3422 21.0493 20.6583 20.8543 20.8543Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
-const pluginHtml$7 = "<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 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$d = 'plugins.big_mute_button';
+const T$f = 'plugins.big_mute_button';
 // TODO rewrite as a container plugin
 /**
  * Displays a big mute button over the video when it's muted.
@@ -43418,7 +43447,7 @@ class BigMuteButton extends UICorePlugin {
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    static template = tmpl(pluginHtml$7);
+    static template = tmpl(pluginHtml$6);
     /**
      * @internal
      */
@@ -43436,7 +43465,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$d} bindEvents`, {
+        trace(`${T$f} bindEvents`, {
             mediacontrol: !!this.core.mediaControl,
         });
         this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mediaControlRendered);
@@ -43461,12 +43490,12 @@ class BigMuteButton extends UICorePlugin {
     }
     mediaControlRendered() {
         const container = this.core.activeContainer;
-        trace(`${T$d} mediaControlRendered`, {
+        trace(`${T$f} mediaControlRendered`, {
             container: !!container,
         });
         if (container) {
             this.listenTo(container.playback, Events$1.PLAYBACK_PLAY, () => {
-                trace(`${T$d} PLAYBACK_PLAY`);
+                trace(`${T$f} PLAYBACK_PLAY`);
                 this.render();
             });
         }
@@ -43490,7 +43519,7 @@ class BigMuteButton extends UICorePlugin {
         }
         const { autoPlay, wasMuted } = this.options;
         const volume = container.volume;
-        trace(`${T$d} shouldRender`, {
+        trace(`${T$f} shouldRender`, {
             autoPlay,
             wasMuted,
             volume,
@@ -43502,7 +43531,7 @@ class BigMuteButton extends UICorePlugin {
      */
     render() {
         if (this.shouldRender()) {
-            trace(`${T$d} render`, {
+            trace(`${T$f} render`, {
                 el: !!this.$el,
             });
             this.$el.html(BigMuteButton.template());
@@ -43541,7 +43570,7 @@ class BigMuteButton extends UICorePlugin {
     }
 }
 
-const pluginHtml$6 = "<div class=\"media-control-gear\" data-<%= name %>>\n    <button type=\"button\" class=\"button-gear gplayer-lite-btn gcore-skin-button-color\" data-gear-button=\"-1\">\n        <span class=\"gear-icon\"><%= icon %></span>\n    </button>\n    <div class=\"gear-wrapper gcore-skin-bg-color\">\n        <ul class=\"gear-options-list\">\n            <% items.forEach(function (gear) { %>\n                <li data-<%= gear %>></li>\n            <% }); %>\n        </ul>\n    </div>\n</div>\n";
+const pluginHtml$5 = "<div class=\"media-control-gear\" data-<%= name %>>\n    <button type=\"button\" class=\"button-gear gplayer-lite-btn gcore-skin-button-color\" data-gear-button=\"-1\">\n        <span class=\"gear-icon\"><%= icon %></span>\n    </button>\n    <div class=\"gear-wrapper gcore-skin-bg-color\">\n        <ul class=\"gear-options-list\">\n            <% items.forEach(function (gear) { %>\n                <li data-<%= gear %>></li>\n            <% }); %>\n        </ul>\n    </div>\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";
 
@@ -43550,9 +43579,6 @@ const gearHdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\
 /* eslint-disable */
 // Kibo is released under the MIT License. Copyright (c) 2013 marquete.
 // see https://github.com/marquete/kibo
-/**
- * @internal
- */
 class Kibo {
     element;
     lastKeyCode = -1;
@@ -43835,7 +43861,7 @@ var MediaControlEvents;
      */
     MediaControlEvents["MEDIACONTROL_GEAR_RENDERED"] = "mediacontrol:gear:rendered";
 })(MediaControlEvents || (MediaControlEvents = {}));
-const T$c = 'plugins.media_control';
+const T$e = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
     'playstop',
@@ -43852,7 +43878,7 @@ function orderByOrderPattern(arr, order) {
     return [...ordered, ...rest];
 }
 /**
- * The MediaControl provides a foundation for developing custom media controls UI.
+ * PLUGIN that provides a foundation for developing custom media controls UI.
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
@@ -43869,7 +43895,7 @@ class MediaControl extends UICorePlugin {
     buttonsColor = null;
     currentDurationValue = 0;
     currentPositionValue = 0;
-    currentSeekBarPercentage = null;
+    currentSeekBarPercentage = 0;
     disabledClickableList = [];
     displayedDuration = null;
     displayedPosition = null;
@@ -43934,14 +43960,14 @@ class MediaControl extends UICorePlugin {
     }
     /**
      * @internal
-     * @deprecated
+     * @deprecated Use core.activeContainer directly
      */
     get container() {
         return this.core.activeContainer;
     }
     /**
      * @internal
-     * @deprecated
+     * @deprecated Use core.activePlayback directly
      */
     get playback() {
         return this.core.activePlayback;
@@ -43987,6 +44013,9 @@ class MediaControl extends UICorePlugin {
             'mouseleave .media-control-layer[data-controls]': 'resetUserKeepVisible',
         };
     }
+    get currentSeekPos() {
+        return this.currentSeekBarPercentage;
+    }
     /**
      * Current volume [0..100]
      */
@@ -44083,7 +44112,7 @@ class MediaControl extends UICorePlugin {
      * Hides the media control UI
      */
     disable() {
-        trace(`${T$c} disable`);
+        trace(`${T$e} disable`);
         this.userDisabled = true; // TODO distinguish between user and system (e.g., unplayable) disabled?
         this.hide();
         this.unbindKeyEvents();
@@ -44093,7 +44122,7 @@ class MediaControl extends UICorePlugin {
      * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
      */
     enable() {
-        trace(`${T$c} enable`);
+        trace(`${T$e} enable`);
         if (this.options.chromeless) {
             return;
         }
@@ -44349,8 +44378,7 @@ class MediaControl extends UICorePlugin {
         this.changeTogglePlay();
         this.bindContainerEvents();
         this.settingsUpdate();
-        this.core.activeContainer &&
-            this.core.activeContainer.trigger(Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.core.activeContainer.isDvrInUse());
+        this.core.activeContainer.trigger(Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.core.activeContainer.isDvrInUse());
         // TODO test
         if (this.core.activeContainer.mediaControlDisabled) {
             this.disable();
@@ -44916,18 +44944,7 @@ MediaControl.extend = function (properties) {
 };
 
 const VERSION$5 = '2.19.12';
-const T$b = 'plugins.bottom_gear';
-/**
- * Custom events emitted by the plugin
- * @beta
- */
-var GearEvents;
-(function (GearEvents) {
-    /**
-     * Emitted when the gear menu is rendered
-     */
-    GearEvents["MEDIACONTROL_GEAR_RENDERED"] = "mediacontrol:gear:rendered";
-})(GearEvents || (GearEvents = {}));
+const T$d = 'plugins.bottom_gear';
 /**
  * Adds the gear button that triggers extra options menu on the right side of the {@link MediaControl | media control} UI
  * @beta
@@ -44958,7 +44975,7 @@ class BottomGear extends UICorePlugin {
     static get version() {
         return VERSION$5;
     }
-    static template = tmpl(pluginHtml$6);
+    static template = tmpl(pluginHtml$5);
     /**
      * @internal
      */
@@ -44983,7 +45000,6 @@ class BottomGear extends UICorePlugin {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
-        this.listenTo(this.core, 'gear:refresh', this.refresh); // TODO use direct plugin method call
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
     }
@@ -45002,15 +45018,15 @@ class BottomGear extends UICorePlugin {
         this.$el.find('.gear-wrapper').html(content);
     }
     onActiveContainerChanged() {
-        trace(`${T$b} onActiveContainerChanged`);
+        trace(`${T$d} onActiveContainerChanged`);
         this.bindContainerEvents();
     }
     bindContainerEvents() {
-        trace(`${T$b} bindContainerEvents`);
+        trace(`${T$d} bindContainerEvents`);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
     }
     highDefinitionUpdate(isHd) {
-        trace(`${T$b} highDefinitionUpdate`, { isHd });
+        trace(`${T$d} highDefinitionUpdate`, { isHd });
         this.isHd = isHd;
         this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon);
     }
@@ -45029,11 +45045,14 @@ class BottomGear extends UICorePlugin {
         const icon = this.isHd ? gearHdIcon : gearIcon;
         this.$el.html(BottomGear.template({ icon, items }));
         mediaControl.getElement('gear')?.html(this.el);
-        this.core.trigger('gear:rendered'); // @deprecated
-        mediaControl.trigger(GearEvents.MEDIACONTROL_GEAR_RENDERED); // TODO drop
         mediaControl.trigger(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED);
         return this;
     }
+    /**
+     * Re-renders the gear menu.
+     * It fires the {@link MediaControlEvents.MEDIACONTROL_GEAR_RENDERED | MEDIACONTROL_GEAR_RENDERED} event,
+     * which the plugins that attach to the gear menu can listen to to re-render themselves.
+     */
     refresh() {
         this.render();
         this.$el.find('.gear-wrapper').show();
@@ -46691,7 +46710,7 @@ class Speedtest {
             this._state = 1;
         }
         if (this._state !== 1) {
-            throw 'You can\'t add a server after server selection';
+            throw "You can't add a server after server selection";
         }
         this._settings.mpot = true;
         this._serverList.push(server);
@@ -46710,7 +46729,7 @@ class Speedtest {
     setSelectedServer(server) {
         this._checkServerDefinition(server);
         if (this._state === 3) {
-            throw 'You can\'t select a server while the test is running';
+            throw "You can't select a server while the test is running";
         }
         this._selectedServer = server;
         this._state = 2;
@@ -46724,7 +46743,7 @@ class Speedtest {
                 throw 'Server already selected';
             }
             if (this._state >= 3) {
-                throw 'You can\'t select a server while the test is running';
+                throw "You can't select a server while the test is running";
             }
         }
         if (this._selectServerCalled) {
@@ -46734,7 +46753,7 @@ class Speedtest {
             this._selectServerCalled = true;
         }
         /*this function goes through a list of servers. For each server, the ping is measured, then the server with the function result is called with the best server, or null if all the servers were down.
-             */
+         */
         const select = (serverList, result) => {
             //pings the specified URL, then calls the function result. Result will receive a parameter which is either the time it took to ping the URL, or -1 if something went wrong.
             const PING_TIMEOUT = 2000;
@@ -46836,7 +46855,7 @@ class Speedtest {
                 }
                 result(bestServer);
             };
-            serverList.forEach(server => {
+            serverList.forEach((server) => {
                 checkServer(server, done);
             });
             if (i === serverList.length) {
@@ -46929,12 +46948,12 @@ class Speedtest {
             if (typeof this._originalExtra !== 'undefined') {
                 this._settings.telemetry_extra = JSON.stringify({
                     server: this._selectedServer.name,
-                    extra: this._originalExtra
+                    extra: this._originalExtra,
                 });
             }
             else {
                 this._settings.telemetry_extra = JSON.stringify({
-                    server: this._selectedServer.name
+                    server: this._selectedServer.name,
                 });
             }
         }
@@ -46944,7 +46963,7 @@ class Speedtest {
     }
     abort() {
         if (this._state < 3) {
-            throw new Error('You cannot abort a test that\'s not started yet');
+            throw new Error("You cannot abort a test that's not started yet");
         }
         if (this._state < 4) {
             this.worker?.postMessage('abort');
@@ -47114,7 +47133,7 @@ function rankConnectionSpeed(dlSpeed) {
     return 0;
 }
 
-const pluginHtml$5 = "<% general = metrics.general %>\n<% counters = metrics.counters %>\n<% timers = metrics.timers %>\n<% extra = metrics.extra %>\n<% custom = metrics.custom %>\n\n<div class=\"stats-box\">\n    <div class=\"stats-box-top\">\n        <a class=\"close-button gplayer-lite-btn\" data-close-button>\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <g clip-path=\"url(#clip0_184_1489)\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M7.41376 6.00013L13.7068 -0.292872C14.0978 -0.683872 14.0978 -1.31587 13.7068 -1.70687C13.3158 -2.09787 12.6838 -2.09787 12.2928 -1.70687L5.99976 4.58613L-0.293238 -1.70687C-0.684238 -2.09787 -1.31624 -2.09787 -1.70724 -1.70687C-2.09824 -1.31587 -2.09824 -0.683872 -1.70724 -0.292872L4.58576 6.00013L-1.70724 12.2931C-2.09824 12.6841 -2.09824 13.3161 -1.70724 13.7071C-1.51224 13.9021 -1.25624 14.0001 -1.00024 14.0001C-0.744238 14.0001 -0.488238 13.9021 -0.293238 13.7071L5.99976 7.41413L12.2928 13.7071C12.4878 13.9021 12.7438 14.0001 12.9998 14.0001C13.2558 14.0001 13.5118 13.9021 13.7068 13.7071C14.0978 13.3161 14.0978 12.6841 13.7068 12.2931L7.41376 6.00013Z\"\n                          fill=\"white\"/>\n                </g>\n                <defs>\n                    <clipPath id=\"clip0_184_1489\">\n                        <rect width=\"12\" height=\"12\" fill=\"white\"/>\n                    </clipPath>\n                </defs>\n            </svg>\n        </a>\n    </div>\n    <div class=\"stats-box-main\">\n        <ul>\n            <li class=\"title\"><span>General</span></li>\n            <li>\n                Display resolution:\n                <div><span><%= general.displayResolution %></span></div>\n            </li>\n            <li>\n                Volume:\n                <div><span><%= general.volume %></span></div>\n            </li>\n            <li>\n                Connection speed:\n                <div><span id=\"dlText\"><%= custom.connectionSpeed %></span> Mbps</div>\n            </li>\n            <li class=\"canvas-wrapper\">\n                <canvas id=\"speedTestCanvas\" width=\"190\" height=\"20\"></canvas>\n            </li>\n            <li>\n                Ping:\n                <div><span id=\"pingText\"><%= custom.ping %></span> ms</div>\n            </li>\n            <li>\n                Jitter:\n                <div><span id=\"jitterText\"><%= custom.jitter %></span> ms</div>\n            </li>\n        </ul>\n\n        <ul>\n            <li class=\"title\"><span>Counters</span></li>\n            <li>\n                Plays:\n                <div><span><%= counters.play %></span></div>\n            </li>\n            <li>\n                Pauses:\n                <div><span><%= counters.pause %></span></div>\n            </li>\n            <li>\n                Errors:\n                <div><span><%= counters.error %></span></div>\n            </li>\n            <li>\n                Bufferings:\n                <div><span><%= counters.buffering %></span></div>\n            </li>\n            <li>\n                Decoded frames:\n                <div><span><%= counters.decodedFrames %></span></div>\n            </li>\n            <li>\n                Dropped frames:\n                <div><span><%= counters.droppedFrames %></span></div>\n            </li>\n            <li>\n                Frames per second:\n                <div><span><%= counters.fps %></span></div>\n            </li>\n            <li>\n                Bitrate changes:\n                <div><span><%= counters.changeLevel %></span></div>\n            </li>\n            <li>\n                Seeks:\n                <div><span><%= counters.seek %></span></div>\n            </li>\n            <li>\n                Fullscreen:\n                <div><span><%= counters.fullscreen %></span></div>\n            </li>\n            <li>\n                DVR seeks:\n                <div><span><%= counters.dvrUsage %></span></div>\n            </li>\n        </ul>\n\n        <ul>\n            <li class=\"title\"><span>Timers</span></li>\n            <li>\n                Startup time:\n                <div><span><%= timers.startup %></span></div>\n            </li>\n            <li>\n                Watching time:\n                <div><span><%= timers.watch %></span></div>\n            </li>\n            <li>\n                Pause time:\n                <div><span><%= timers.pause %></span></div>\n            </li>\n            <li>\n                Buffering time:\n                <div><span><%= timers.buffering %></span></div>\n            </li>\n            <li>\n                Session time:\n                <div><span><%= timers.session %></span></div>\n            </li>\n            <!--    <li>-->\n            <!--      Latency:-->\n            <!--      <div><span><%= timers.latency %></span></div>-->\n            <!--    </li>-->\n        </ul>\n\n        <ul>\n            <li class=\"title\"><span>Extra</span></li>\n            <li>\n                Playback:\n                <div><span><%= extra.playbackName %></span></div>\n            </li>\n            <li>\n                Playback type:\n                <div><span><%= extra.playbackType %></span></div>\n            </li>\n            <li>\n                Buffer size:\n                <div><span><%= extra.buffersize %></span></div>\n            </li>\n            <li>\n                Video duration:\n                <div><span><%= extra.duration %></span></div>\n            </li>\n            <li>\n                Current time:\n                <div><span><%= extra.currentTime %></span></div>\n            </li>\n            <li>\n                Bitrate weighted mean:\n                <div><span><%= extra.bitrateWeightedMean %></span></div>\n            </li>\n            <li>\n                Bitrate most used:\n                <div><span><%= extra.bitrateMostUsed %></span></div>\n            </li>\n            <li>\n                % Watched:\n                <div><span><%= extra.watchedPercentage %></span></div>\n            </li>\n            <li>\n                % Buffering:\n                <div><span><%= extra.bufferingPercentage %></span></div>\n            </li>\n        </ul>\n    </div>\n    <div class=\"speedtest-summary\">\n        <div class=\"speedtest-summary-header\">Your internet quality summary</div>\n        <div class=\"speedtest-summary-block\">\n            <div class=\"speedtest-summary-subblock\">\n                <div class=\"speedtest-summary-subblock-content\">\n                    <div class=\"speedtest-quality\">\n                        <div class=\"speedtest-quality-header\">VOD: <%= custom.vodQuality %></div>\n                        <div class=\"speedtest-quality-content\" data-streaming-type=\"vod\">\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"speedtest-summary-subblock\">\n                <div class=\"speedtest-summary-subblock-content\">\n                    <div class=\"speedtest-quality\">\n                        <div class=\"speedtest-quality-header\">Live: <%= custom.liveQuality %></div>\n                        <div class=\"speedtest-quality-content\" data-streaming-type=\"live\">\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"speedtest-footer\">\n        <!--    <a class=\"speedtest-footer-about-link\" href=\"\" target=\"_blank\">I am not a nerd, what's this all about?</a>-->\n        <button class=\"gplayer-lite-btn speedtest-btn speedtest-footer-refresh\" data-refresh-button type=\"button\">\n            <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\">\n                <path\n                        d=\"M6.03968 0.124998C3.64268 0.124998 1.67268 1.9565 1.48068 4.2915H1.00018C0.925833 4.29146 0.853156 4.31353 0.791378 4.35489C0.729601 4.39625 0.681511 4.45503 0.653218 4.52378C0.624925 4.59253 0.617705 4.66814 0.632476 4.74101C0.647248 4.81387 0.683343 4.88069 0.736177 4.933L1.57618 5.766C1.64641 5.83561 1.74129 5.87467 1.84018 5.87467C1.93906 5.87467 2.03395 5.83561 2.10418 5.766L2.94418 4.933C2.99701 4.88069 3.03311 4.81387 3.04788 4.74101C3.06265 4.66814 3.05543 4.59253 3.02714 4.52378C2.99884 4.45503 2.95075 4.39625 2.88898 4.35489C2.8272 4.31353 2.75452 4.29146 2.68018 4.2915H2.23368C2.42368 2.376 4.05268 0.874998 6.03968 0.874998C6.6948 0.873639 7.33932 1.04039 7.91158 1.35931C8.48384 1.67822 8.9647 2.13863 9.30818 2.6965C9.33331 2.73978 9.36686 2.7776 9.40684 2.80771C9.44682 2.83783 9.49243 2.85963 9.54097 2.87184C9.58951 2.88405 9.64001 2.88643 9.68948 2.87881C9.73895 2.8712 9.7864 2.85377 9.82902 2.82753C9.87165 2.80129 9.90859 2.76679 9.93767 2.72605C9.96675 2.68531 9.98739 2.63916 9.99835 2.59032C10.0093 2.54148 10.0104 2.49095 10.0015 2.44168C9.99264 2.39242 9.974 2.34544 9.94668 2.3035C9.53615 1.63664 8.96146 1.08621 8.27752 0.704805C7.59359 0.323402 6.82277 0.123774 6.03968 0.124998ZM10.4207 4.2335C10.3505 4.16419 10.2558 4.12532 10.1572 4.12532C10.0585 4.12532 9.96386 4.16419 9.89368 4.2335L9.05018 5.0665C8.9972 5.11874 8.96096 5.18557 8.94608 5.25847C8.93119 5.33137 8.93833 5.40705 8.96658 5.47588C8.99483 5.54472 9.04292 5.60359 9.10473 5.64501C9.16654 5.68644 9.23927 5.70853 9.31368 5.7085H9.76318C9.57218 7.6235 7.93768 9.125 5.94118 9.125C5.28399 9.12683 4.63729 8.96035 4.06269 8.64141C3.48808 8.32247 3.00473 7.86169 2.65868 7.303C2.63281 7.26107 2.59893 7.22465 2.55899 7.19582C2.51904 7.16699 2.47381 7.14631 2.42587 7.13495C2.37793 7.1236 2.32823 7.1218 2.27959 7.12966C2.23096 7.13752 2.18435 7.15488 2.14243 7.18075C2.05776 7.233 1.99731 7.31674 1.97438 7.41355C1.95146 7.51037 1.96793 7.61233 2.02018 7.697C2.43345 8.36457 3.01076 8.91521 3.69713 9.29647C4.38349 9.67772 5.15604 9.87689 5.94118 9.875C8.34518 9.875 10.3237 8.045 10.5162 5.7085H11.0002C11.0746 5.70853 11.1473 5.68644 11.2091 5.64501C11.2709 5.60359 11.319 5.54472 11.3473 5.47588C11.3755 5.40705 11.3827 5.33137 11.3678 5.25847C11.3529 5.18557 11.3167 5.11874 11.2637 5.0665L10.4207 4.2335Z\"\n                        fill=\"white\"/>\n            </svg>\n            Refresh\n        </button>\n    </div>\n</div>\n";
+const pluginHtml$4 = "<% general = metrics.general %>\n<% counters = metrics.counters %>\n<% timers = metrics.timers %>\n<% extra = metrics.extra %>\n<% custom = metrics.custom %>\n\n<div class=\"stats-box\">\n    <div class=\"stats-box-top\">\n        <a class=\"close-button gplayer-lite-btn\" data-close-button>\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <g clip-path=\"url(#clip0_184_1489)\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M7.41376 6.00013L13.7068 -0.292872C14.0978 -0.683872 14.0978 -1.31587 13.7068 -1.70687C13.3158 -2.09787 12.6838 -2.09787 12.2928 -1.70687L5.99976 4.58613L-0.293238 -1.70687C-0.684238 -2.09787 -1.31624 -2.09787 -1.70724 -1.70687C-2.09824 -1.31587 -2.09824 -0.683872 -1.70724 -0.292872L4.58576 6.00013L-1.70724 12.2931C-2.09824 12.6841 -2.09824 13.3161 -1.70724 13.7071C-1.51224 13.9021 -1.25624 14.0001 -1.00024 14.0001C-0.744238 14.0001 -0.488238 13.9021 -0.293238 13.7071L5.99976 7.41413L12.2928 13.7071C12.4878 13.9021 12.7438 14.0001 12.9998 14.0001C13.2558 14.0001 13.5118 13.9021 13.7068 13.7071C14.0978 13.3161 14.0978 12.6841 13.7068 12.2931L7.41376 6.00013Z\"\n                          fill=\"white\"/>\n                </g>\n                <defs>\n                    <clipPath id=\"clip0_184_1489\">\n                        <rect width=\"12\" height=\"12\" fill=\"white\"/>\n                    </clipPath>\n                </defs>\n            </svg>\n        </a>\n    </div>\n    <div class=\"stats-box-main\">\n        <ul>\n            <li class=\"title\"><span>General</span></li>\n            <li>\n                Display resolution:\n                <div><span><%= general.displayResolution %></span></div>\n            </li>\n            <li>\n                Volume:\n                <div><span><%= general.volume %></span></div>\n            </li>\n            <li>\n                Connection speed:\n                <div><span id=\"dlText\"><%= custom.connectionSpeed %></span> Mbps</div>\n            </li>\n            <li class=\"canvas-wrapper\">\n                <canvas id=\"speedTestCanvas\" width=\"190\" height=\"20\"></canvas>\n            </li>\n            <li>\n                Ping:\n                <div><span id=\"pingText\"><%= custom.ping %></span> ms</div>\n            </li>\n            <li>\n                Jitter:\n                <div><span id=\"jitterText\"><%= custom.jitter %></span> ms</div>\n            </li>\n        </ul>\n\n        <ul>\n            <li class=\"title\"><span>Counters</span></li>\n            <li>\n                Plays:\n                <div><span><%= counters.play %></span></div>\n            </li>\n            <li>\n                Pauses:\n                <div><span><%= counters.pause %></span></div>\n            </li>\n            <li>\n                Errors:\n                <div><span><%= counters.error %></span></div>\n            </li>\n            <li>\n                Bufferings:\n                <div><span><%= counters.buffering %></span></div>\n            </li>\n            <li>\n                Decoded frames:\n                <div><span><%= counters.decodedFrames %></span></div>\n            </li>\n            <li>\n                Dropped frames:\n                <div><span><%= counters.droppedFrames %></span></div>\n            </li>\n            <li>\n                Frames per second:\n                <div><span><%= counters.fps %></span></div>\n            </li>\n            <li>\n                Bitrate changes:\n                <div><span><%= counters.changeLevel %></span></div>\n            </li>\n            <li>\n                Seeks:\n                <div><span><%= counters.seek %></span></div>\n            </li>\n            <li>\n                Fullscreen:\n                <div><span><%= counters.fullscreen %></span></div>\n            </li>\n            <li>\n                DVR seeks:\n                <div><span><%= counters.dvrUsage %></span></div>\n            </li>\n        </ul>\n\n        <ul>\n            <li class=\"title\"><span>Timers</span></li>\n            <li>\n                Startup time:\n                <div><span><%= timers.startup %></span></div>\n            </li>\n            <li>\n                Watching time:\n                <div><span><%= timers.watch %></span></div>\n            </li>\n            <li>\n                Pause time:\n                <div><span><%= timers.pause %></span></div>\n            </li>\n            <li>\n                Buffering time:\n                <div><span><%= timers.buffering %></span></div>\n            </li>\n            <li>\n                Session time:\n                <div><span><%= timers.session %></span></div>\n            </li>\n            <!--    <li>-->\n            <!--      Latency:-->\n            <!--      <div><span><%= timers.latency %></span></div>-->\n            <!--    </li>-->\n        </ul>\n\n        <ul>\n            <li class=\"title\"><span>Extra</span></li>\n            <li>\n                Playback:\n                <div><span><%= extra.playbackName %></span></div>\n            </li>\n            <li>\n                Playback type:\n                <div><span><%= extra.playbackType %></span></div>\n            </li>\n            <li>\n                Buffer size:\n                <div><span><%= extra.buffersize %></span></div>\n            </li>\n            <li>\n                Video duration:\n                <div><span><%= extra.duration %></span></div>\n            </li>\n            <li>\n                Current time:\n                <div><span><%= extra.currentTime %></span></div>\n            </li>\n            <li>\n                Bitrate weighted mean:\n                <div><span><%= extra.bitrateWeightedMean %></span></div>\n            </li>\n            <li>\n                Bitrate most used:\n                <div><span><%= extra.bitrateMostUsed %></span></div>\n            </li>\n            <li>\n                % Watched:\n                <div><span><%= extra.watchedPercentage %></span></div>\n            </li>\n            <li>\n                % Buffering:\n                <div><span><%= extra.bufferingPercentage %></span></div>\n            </li>\n        </ul>\n    </div>\n    <div class=\"speedtest-summary\">\n        <div class=\"speedtest-summary-header\">Your internet quality summary</div>\n        <div class=\"speedtest-summary-block\">\n            <div class=\"speedtest-summary-subblock\">\n                <div class=\"speedtest-summary-subblock-content\">\n                    <div class=\"speedtest-quality\">\n                        <div class=\"speedtest-quality-header\">VOD: <%= custom.vodQuality %></div>\n                        <div class=\"speedtest-quality-content\" data-streaming-type=\"vod\">\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"speedtest-summary-subblock\">\n                <div class=\"speedtest-summary-subblock-content\">\n                    <div class=\"speedtest-quality\">\n                        <div class=\"speedtest-quality-header\">Live: <%= custom.liveQuality %></div>\n                        <div class=\"speedtest-quality-content\" data-streaming-type=\"live\">\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"speedtest-footer\">\n        <!--    <a class=\"speedtest-footer-about-link\" href=\"\" target=\"_blank\">I am not a nerd, what's this all about?</a>-->\n        <button class=\"gplayer-lite-btn speedtest-btn speedtest-footer-refresh\" data-refresh-button type=\"button\">\n            <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\">\n                <path\n                        d=\"M6.03968 0.124998C3.64268 0.124998 1.67268 1.9565 1.48068 4.2915H1.00018C0.925833 4.29146 0.853156 4.31353 0.791378 4.35489C0.729601 4.39625 0.681511 4.45503 0.653218 4.52378C0.624925 4.59253 0.617705 4.66814 0.632476 4.74101C0.647248 4.81387 0.683343 4.88069 0.736177 4.933L1.57618 5.766C1.64641 5.83561 1.74129 5.87467 1.84018 5.87467C1.93906 5.87467 2.03395 5.83561 2.10418 5.766L2.94418 4.933C2.99701 4.88069 3.03311 4.81387 3.04788 4.74101C3.06265 4.66814 3.05543 4.59253 3.02714 4.52378C2.99884 4.45503 2.95075 4.39625 2.88898 4.35489C2.8272 4.31353 2.75452 4.29146 2.68018 4.2915H2.23368C2.42368 2.376 4.05268 0.874998 6.03968 0.874998C6.6948 0.873639 7.33932 1.04039 7.91158 1.35931C8.48384 1.67822 8.9647 2.13863 9.30818 2.6965C9.33331 2.73978 9.36686 2.7776 9.40684 2.80771C9.44682 2.83783 9.49243 2.85963 9.54097 2.87184C9.58951 2.88405 9.64001 2.88643 9.68948 2.87881C9.73895 2.8712 9.7864 2.85377 9.82902 2.82753C9.87165 2.80129 9.90859 2.76679 9.93767 2.72605C9.96675 2.68531 9.98739 2.63916 9.99835 2.59032C10.0093 2.54148 10.0104 2.49095 10.0015 2.44168C9.99264 2.39242 9.974 2.34544 9.94668 2.3035C9.53615 1.63664 8.96146 1.08621 8.27752 0.704805C7.59359 0.323402 6.82277 0.123774 6.03968 0.124998ZM10.4207 4.2335C10.3505 4.16419 10.2558 4.12532 10.1572 4.12532C10.0585 4.12532 9.96386 4.16419 9.89368 4.2335L9.05018 5.0665C8.9972 5.11874 8.96096 5.18557 8.94608 5.25847C8.93119 5.33137 8.93833 5.40705 8.96658 5.47588C8.99483 5.54472 9.04292 5.60359 9.10473 5.64501C9.16654 5.68644 9.23927 5.70853 9.31368 5.7085H9.76318C9.57218 7.6235 7.93768 9.125 5.94118 9.125C5.28399 9.12683 4.63729 8.96035 4.06269 8.64141C3.48808 8.32247 3.00473 7.86169 2.65868 7.303C2.63281 7.26107 2.59893 7.22465 2.55899 7.19582C2.51904 7.16699 2.47381 7.14631 2.42587 7.13495C2.37793 7.1236 2.32823 7.1218 2.27959 7.12966C2.23096 7.13752 2.18435 7.15488 2.14243 7.18075C2.05776 7.233 1.99731 7.31674 1.97438 7.41355C1.95146 7.51037 1.96793 7.61233 2.02018 7.697C2.43345 8.36457 3.01076 8.91521 3.69713 9.29647C4.38349 9.67772 5.15604 9.87689 5.94118 9.875C8.34518 9.875 10.3237 8.045 10.5162 5.7085H11.0002C11.0746 5.70853 11.1473 5.68644 11.2091 5.64501C11.2709 5.60359 11.319 5.54472 11.3473 5.47588C11.3755 5.40705 11.3827 5.33137 11.3678 5.25847C11.3529 5.18557 11.3167 5.11874 11.2637 5.0665L10.4207 4.2335Z\"\n                        fill=\"white\"/>\n            </svg>\n            Refresh\n        </button>\n    </div>\n</div>\n";
 
 const buttonHtml$3 = "<button class='nerd-button gplayer-lite-btn gcore-skin-text-color gear-option'>\n    <span class=\"stats-icon\"></span>\n    <span>Statistics</span>\n</button>\n";
 
@@ -47189,7 +47208,7 @@ const drawSummary = (customMetrics, vodContainer, liveContainer) => {
 };
 // const T = 'plugins.clappr_nerd_stats';
 /**
- * Displays useful network-related statistics.
+ * PLUGIN that displays useful network-related statistics.
  * @beta
  *
  * @remarks
@@ -47229,7 +47248,7 @@ class ClapprNerdStats extends UICorePlugin {
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    static template = tmpl(pluginHtml$5);
+    static template = tmpl(pluginHtml$4);
     /**
      * @internal
      */
@@ -47283,7 +47302,7 @@ class ClapprNerdStats extends UICorePlugin {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenToOnce(this.core, Events$1.CORE_READY, this.init);
-        this.listenTo(mediaControl, GearEvents.MEDIACONTROL_GEAR_RENDERED, this.addToBottomGear);
+        this.listenTo(mediaControl, MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, this.addToBottomGear);
     }
     init() {
         this.container = this.core.activeContainer;
@@ -47449,7 +47468,7 @@ function newMetrics() {
 // TODO: fix
 const updateMetrics = () => { };
 /**
- * Collects useful statistics about playback performance.
+ * PLIGIN that collects useful statistics about playback performance.
  * @beta
  * @remarks
  * This plugin does not render anything and is supposed to be extended or used together with other plugins that actually render something.
@@ -47512,9 +47531,10 @@ class ClapprStats extends ContainerPlugin {
     }
     /**
      * Registers a callback to receive the metrics.
-     * @param updateMetricsFn
+     * @param updateMetricsFn - The callback to receive the metrics
      */
     setUpdateMetrics(updateMetricsFn) {
+        // TODO use events instead
         this.updateFn = updateMetricsFn;
     }
     _defaultReport(metrics) {
@@ -47562,7 +47582,7 @@ class ClapprStats extends ContainerPlugin {
     }
     /**
      * Returns the collected metrics.
-     * @returns The collected metrics
+     * @returns Currently collected metrics
      */
     exportMetrics() {
         return structuredClone(this.metrics);
@@ -47804,7 +47824,7 @@ class ClapprStats extends ContainerPlugin {
 //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$a = 'plugins.click_to_pause_custom';
+const T$c = 'plugins.click_to_pause_custom';
 /**
  * Adds a behavior of toggling the playback state on click over the container
  * @beta
@@ -47834,7 +47854,7 @@ class ClickToPause extends ContainerPlugin {
     click() {
         const isLivePlayback = this.container.getPlaybackType() === Playback.LIVE;
         const isDvrEnabled = this.container.isDvrEnabled();
-        trace(`${T$a} click`, {
+        trace(`${T$c} click`, {
             isLivePlayback,
             isDvrEnabled,
         });
@@ -47852,7 +47872,7 @@ class ClickToPause extends ContainerPlugin {
     settingsUpdate() {
         const isLivePlayback = this.container.getPlaybackType() === Playback.LIVE;
         const pointerEnabled = !isLivePlayback || this.container.isDvrEnabled();
-        trace(`${T$a} settingsUpdate`, {
+        trace(`${T$c} settingsUpdate`, {
             isLivePlayback,
             pointerEnabled,
         });
@@ -47881,7 +47901,7 @@ class ClickToPause extends ContainerPlugin {
 }
 
 /**
- * Adds a behavior of showing a text over the seekbar to indicate the current clip.
+ * PLUGIN that shows text over the seekbar to indicate the current clip.
  * @beta
  * @remarks
  * Depends on:
@@ -48148,8 +48168,10 @@ class ContextMenu extends UIContainerPlugin {
 
 const dvrHTML = "<div class=\"live-info\"><%= live %></div>\n<button type=\"button\" class=\"live-button\" aria-label=\"<%= backToLive %>\"><%= backToLive %></button>\n";
 
+const T$b = 'plugins.dvr_controls';
 /**
- * Adds the DVR controls to the media control UI
+ * PLUGIN that adds the DVR controls to the media control UI
+ *
  * @beta
  *
  * @remarks
@@ -48157,7 +48179,7 @@ const dvrHTML = "<div class=\"live-info\"><%= live %></div>\n<button type=\"butt
  *
  * - {@link MediaControl}
  *
- * The plugin renders the live stream indicator and the DVR seek bar, if DVR is enabled, in the media control UI.
+ * The plugin renders live stream indicator and the DVR seek bar, if DVR is enabled, in the media control UI.
  */
 class DvrControls extends UICorePlugin {
     static template = tmpl(dvrHTML);
@@ -48178,7 +48200,7 @@ class DvrControls extends UICorePlugin {
      */
     get events() {
         return {
-            'click .live-button': 'click'
+            'click .live-button': 'click',
         };
     }
     /**
@@ -48186,8 +48208,8 @@ class DvrControls extends UICorePlugin {
      */
     get attributes() {
         return {
-            'class': 'dvr-controls',
-            'data-dvr-controls': ''
+            class: 'dvr-controls',
+            'data-dvr-controls': '',
         };
     }
     constructor(core) {
@@ -48206,23 +48228,25 @@ class DvrControls extends UICorePlugin {
     }
     bindContainerEvents() {
         this.listenToOnce(this.core.activeContainer, Events$1.CONTAINER_TIMEUPDATE, this.render);
-        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.dvrChanged);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrChanged);
     }
-    dvrChanged(dvrEnabled) {
+    onDvrChanged(dvrEnabled) {
+        trace(`${T$b} onDvrChanged`, {
+            dvrEnabled,
+        });
         if (this.core.getPlaybackType() !== Playback.LIVE) {
             return;
         }
         this.settingsUpdate();
         this.core.mediaControl.$el.addClass('live');
         if (dvrEnabled) {
-            this.core.mediaControl.$playbackRate.removeClass('playbackrate-enable');
+            // TODO
             this.core.mediaControl.$el
                 .addClass('dvr')
                 .find('.media-control-indicator[data-position], .media-control-indicator[data-duration]')
                 .hide();
         }
         else {
-            this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
             this.core.mediaControl.$el.removeClass('dvr');
         }
     }
@@ -48247,24 +48271,31 @@ class DvrControls extends UICorePlugin {
         this.bindEvents();
     }
     shouldRender() {
-        const useDvrControls = this.core.options.useDvrControls === undefined || !!this.core.options.useDvrControls;
+        const useDvrControls = this.core.options.useDvrControls === undefined ||
+            !!this.core.options.useDvrControls;
         return useDvrControls && this.core.getPlaybackType() === Playback.LIVE;
     }
     /**
      * @internal
      */
     render() {
+        trace(`${T$b} render`, {
+            dvrEnabled: this.core.activePlayback?.dvrEnabled,
+        });
+        if (!this.shouldRender()) {
+            return this;
+        }
         this.$el.html(DvrControls.template({
             live: this.core.i18n.t('live'),
-            backToLive: this.core.i18n.t('back_to_live')
+            backToLive: this.core.i18n.t('back_to_live'),
         }));
-        if (this.shouldRender()) {
-            const mediaControl = this.core.getPlugin('media_control');
-            assert(mediaControl, 'media_control plugin is required');
-            // TODO don't tap into the $el directly
-            mediaControl.$el.addClass('live');
-            mediaControl.$('.media-control-left-panel[data-media-control]').append(this.$el);
-        }
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
+        // TODO don't tap into the $el directly
+        mediaControl.$el.addClass('live');
+        mediaControl
+            .$('.media-control-left-panel[data-media-control]')
+            .append(this.$el);
         return this;
     }
 }
@@ -48273,9 +48304,9 @@ const reloadIcon = "<svg fill=\"#FFFFFF\" height=\"24\" viewBox=\"0 0 24 24\" wi
 
 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>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$9 = 'plugins.error_screen';
+const T$a = 'plugins.error_screen';
 /**
- * Displays an error nicely in the overlay on top of the player.
+ * PLUGIN that displays errors nicely in the overlay on top of the player.
  * @beta
  */
 class ErrorScreen extends UICorePlugin {
@@ -48310,11 +48341,11 @@ class ErrorScreen extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
     onPlay() {
-        trace(`${T$9} onPlay`);
+        trace(`${T$a} onPlay`);
         this.unmount();
     }
     unmount() {
-        trace(`${T$9} unmount`);
+        trace(`${T$a} unmount`);
         this.err = null;
         this.$el.remove();
     }
@@ -48336,7 +48367,7 @@ class ErrorScreen extends UICorePlugin {
         }, 0);
     }
     onActiveContainerChanged() {
-        trace(`${T$9} onActiveContainerChanged`, {
+        trace(`${T$a} onActiveContainerChanged`, {
             reloading: this.core.options.reloading,
         });
         this.err = null;
@@ -48352,7 +48383,7 @@ class ErrorScreen extends UICorePlugin {
         }
     }
     onError(err) {
-        trace(`${T$9} onError`, { err });
+        trace(`${T$a} onError`, { err });
         if (err.UI) {
             if (this.err) {
                 this.unmount();
@@ -48620,10 +48651,10 @@ const arrowLeftIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fil
 
 const checkIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n        d=\"M20.5793 4.19296C20.1216 3.86696 19.4777 3.96396 19.1424 4.40896L9.37295 17.3809L4.81634 12.107C4.45222 11.683 3.80218 11.6289 3.36709 11.9839C2.932 12.3389 2.87543 12.97 3.2416 13.393L8.64165 19.643C8.83708 19.869 9.12506 20 9.42849 20C9.4398 20 9.45114 20 9.46246 19.999C9.77926 19.989 10.0724 19.838 10.2586 19.59L20.8015 5.58996C21.1368 5.14496 21.0371 4.51896 20.5793 4.19296Z\"\n        fill=\"#C9C9C9\"/>\n</svg>\n";
 
-const T$8 = 'plugins.level_selector';
+const T$9 = 'plugins.level_selector';
 const VERSION$4 = '2.19.4';
 /**
- * A {@link MediaControl | media control} plugin that provides a UI to control the quality level of the playback.
+ * PLUGIN that provides a UI to select the desired quality level of the playback.
  * @beta
  *
  * @remarks
@@ -48633,9 +48664,7 @@ const VERSION$4 = '2.19.4';
  *
  * - {@link BottomGear}
  *
- * The plugin is rendered as an item in the gear menu.
- *
- * When clicked, it shows a list of quality levels to choose from.
+ * The plugin is rendered as an item in the gear menu, which, when clicked, shows a list of quality levels to choose from.
  *
  * Configuration options - {@link LevelSelectorPluginSettings}
  *
@@ -48697,9 +48726,18 @@ class LevelSelector 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.bindPlaybackEvents);
+    }
+    onCoreReady() {
+        trace(`${T$9} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.bindPlaybackEvents);
+        this.listenTo(mediaControl, MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, this.onGearRendered);
+    }
+    onGearRendered() {
+        trace(`${T$9} onGearRendered`);
+        this.deferRender();
     }
     bindPlaybackEvents() {
         this.removeAuto = false;
@@ -48719,9 +48757,9 @@ class LevelSelector extends UICorePlugin {
         }
     }
     onStop() {
-        trace(`${T$8} onStop`);
+        trace(`${T$9} onStop`);
         this.listenToOnce(this.core.activePlayback, Events$1.PLAYBACK_PLAY, () => {
-            trace(`${T$8} on PLAYBACK_PLAY after stop`, {
+            trace(`${T$9} on PLAYBACK_PLAY after stop`, {
                 selectedLevelId: this.selectedLevelId,
             });
             if (this.core.activePlayback.getPlaybackType() === 'live') {
@@ -48764,7 +48802,7 @@ class LevelSelector extends UICorePlugin {
             this.$el.html(html);
             const gear = this.core.getPlugin('bottom_gear');
             if (!gear) {
-                trace(`${T$8} renderButton: bottom_gear plugin not found`);
+                trace(`${T$9} renderButton: bottom_gear plugin not found`);
             }
             gear?.getElement('quality')?.html(this.el);
         }
@@ -48780,7 +48818,7 @@ class LevelSelector extends UICorePlugin {
         });
         this.$el.html(html);
         const gear = this.core.getPlugin('bottom_gear');
-        trace(`${T$8} renderDropdown: bottom_gear plugin not found`);
+        trace(`${T$9} renderDropdown: bottom_gear plugin not found`);
         gear?.setContent(this.el);
     }
     get maxLevel() {
@@ -48821,13 +48859,14 @@ class LevelSelector extends UICorePlugin {
         return false;
     }
     goBack() {
-        trace(`${T$8} goBack`);
+        trace(`${T$9} goBack`);
         this.isOpen = false;
-        this.core.trigger('gear:refresh');
-        this.deferRender();
+        setTimeout(() => {
+            this.core.getPlugin('bottom_gear').refresh();
+        }, 0);
     }
     setLevel(index) {
-        trace(`${T$8} setIndexLevel`, { index });
+        trace(`${T$9} setIndexLevel`, { index });
         this.selectedLevelId = index;
         if (!this.core.activePlayback) {
             return;
@@ -48845,7 +48884,7 @@ class LevelSelector extends UICorePlugin {
         this.deferRender();
     }
     onShowLevelSelectMenu() {
-        trace(`${T$8} onShowLevelSelectMenu`);
+        trace(`${T$9} onShowLevelSelectMenu`);
         this.isOpen = true;
         this.renderDropdown();
         this.highlightCurrentLevel();
@@ -48881,11 +48920,11 @@ class LevelSelector extends UICorePlugin {
         return this.levelLabels[index] ?? formatLevelLabel(this.levels[index]);
     }
     updateCurrentLevel(info) {
-        trace(`${T$8} updateCurrentLevel`, { info });
+        trace(`${T$9} updateCurrentLevel`, { info });
         this.highlightCurrentLevel();
     }
     highlightCurrentLevel() {
-        trace(`${T$8} highlightCurrentLevel`, {
+        trace(`${T$9} highlightCurrentLevel`, {
             selectedLevelId: this.selectedLevelId,
         });
         this.allLevelElements().removeClass('current');
@@ -49126,7 +49165,7 @@ class Logo extends UIContainerPlugin {
     }
 }
 
-const pluginHtml$4 = "<button data-multicamera-button class='gcore-skin-button-color'>\n    <span class=\"multicamera-icon\"></span>\n</button>\n\n<ul class=\"gcore-skin-bg-color\">\n    <% for (var i = 0; i < streams.length; i++) { %>\n        <% if(!streams[i].live && multisources_mode === 'only_live') { %>\n            <% continue; %>\n        <% } %>\n        <li>\n            <div class=\"multicamera-item\" data-multicamera-selector-live=\"<%= streams[i].live %>\"\n                 data-multicamera-selector-select=\"<%= streams[i].id %>\">\n                <div class=\"multicamera-screenshot\">\n                    <% if (streams[i].screenshot) { %>\n                        <img src=\"<%= streams[i].screenshot %>\" alt=\"<%= streams[i].title %>\"/>\n                    <% } %>\n                </div>\n                <div class=\"multicamera-text gcore-skin-text-color\">\n                    <% if (streams[i].title) { %>\n                        <div class=\"multicamera-title gcore-skin-text-color\"><%= streams[i].title %></div>\n                    <% } %>\n                    <% if (streams[i].description) { %>\n                        <div class=\"multicamera-description gcore-skin-text-color\"><%= streams[i].description %></div>\n                    <% } %>\n                </div>\n            </div>\n        </li>\n    <% } %>\n</ul>\n";
+const pluginHtml$3 = "<button data-multicamera-button class='gcore-skin-button-color'>\n    <span class=\"multicamera-icon\"></span>\n</button>\n\n<ul class=\"gcore-skin-bg-color\">\n    <% for (var i = 0; i < streams.length; i++) { %>\n        <% if(!streams[i].live && multisources_mode === 'only_live') { %>\n            <% continue; %>\n        <% } %>\n        <li>\n            <div class=\"multicamera-item\" data-multicamera-selector-live=\"<%= streams[i].live %>\"\n                 data-multicamera-selector-select=\"<%= streams[i].id %>\">\n                <div class=\"multicamera-screenshot\">\n                    <% if (streams[i].screenshot) { %>\n                        <img src=\"<%= streams[i].screenshot %>\" alt=\"<%= streams[i].title %>\"/>\n                    <% } %>\n                </div>\n                <div class=\"multicamera-text gcore-skin-text-color\">\n                    <% if (streams[i].title) { %>\n                        <div class=\"multicamera-title gcore-skin-text-color\"><%= streams[i].title %></div>\n                    <% } %>\n                    <% if (streams[i].description) { %>\n                        <div class=\"multicamera-description gcore-skin-text-color\"><%= streams[i].description %></div>\n                    <% } %>\n                </div>\n            </div>\n        </li>\n    <% } %>\n</ul>\n";
 
 const streamsIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n    <path fill=\"#FFF\" fill-rule=\"nonzero\" d=\"M24 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-1a.5.5 0 0 1-.5-.5v-10A2.5 2.5 0 0 0 18.5 3h-14a.5.5 0 0 1-.5-.5v-1A1.5 1.5 0 0 1 5.5 0h17A1.5 1.5 0 0 1 24 1.5M12.724 12.447l-5 2.5a.505.505 0 0 1-.487-.021A.503.503 0 0 1 7 14.5v-5c0-.173.09-.334.237-.426a.505.505 0 0 1 .487-.021l5 2.5a.5.5 0 0 1 0 .894M18.5 4h-17C.673 4 0 4.673 0 5.5v13c0 .827.673 1.5 1.5 1.5h17c.827 0 1.5-.673 1.5-1.5v-13c0-.827-.673-1.5-1.5-1.5\"/>\n</svg>\n";
 
@@ -49135,9 +49174,9 @@ 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$3 = '0.0.1';
-const T$7 = 'plugins.multicamera';
+const T$8 = 'plugins.multicamera';
 /**
- * The plugin adds support for loading multiple streams and switching between them using the media control UI.
+ * PLUGIN that adds support for loading multiple streams and switching between them using the media control UI.
  * @beta
  */
 class MultiCamera extends UICorePlugin {
@@ -49156,7 +49195,7 @@ class MultiCamera extends UICorePlugin {
         return VERSION$3;
     }
     get template() {
-        return tmpl(pluginHtml$4);
+        return tmpl(pluginHtml$3);
     }
     get attributes() {
         return {
@@ -49281,7 +49320,7 @@ class MultiCamera extends UICorePlugin {
     }
     onCameraSelect(event) {
         const value = event.currentTarget.dataset.multicameraSelectorSelect;
-        trace(`${T$7} onCameraSelect`, { value });
+        trace(`${T$8} onCameraSelect`, { value });
         if (value !== undefined) {
             this.changeById(parseInt(value, 10));
         }
@@ -49407,13 +49446,13 @@ class MultiCamera extends UICorePlugin {
         }
     }
     changeById(id) {
-        trace(`${T$7} changeById`, { id });
+        trace(`${T$8} 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$7} changeById`, { id, currentCamera: this.currentCamera, multicamera: this.multicamera });
+            trace(`${T$8} changeById`, { id, currentCamera: this.currentCamera, multicamera: this.multicamera });
             if (!this.currentCamera) {
                 return;
             }
@@ -49430,7 +49469,7 @@ class MultiCamera extends UICorePlugin {
             // TODO remove?
             // for html5 playback:
             this.options.dvrEnabled = this.currentCamera.dvr;
-            trace(`${T$7} changeById`, { currentCamera: this.currentCamera });
+            trace(`${T$8} changeById`, { currentCamera: this.currentCamera });
             // TODO
             this.core.configure({
                 playback: playbackOptions,
@@ -49488,7 +49527,7 @@ const pipIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"no
 const buttonHtml$1 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\">\n    <span><%= pipIcon %></span>\n</button>\n";
 
 const VERSION$2 = '0.0.1';
-const T$6 = `plugins.pip`;
+const T$7 = `plugins.pip`;
 /**
  * Enables picture in picture mode.
  * @beta
@@ -49536,7 +49575,7 @@ class PictureInPicture extends UICorePlugin {
         this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
     }
     isPiPSupported() {
-        trace(`${T$6} isPiPSupported`, {
+        trace(`${T$7} isPiPSupported`, {
             pictureInPictureEnabled: document.pictureInPictureEnabled,
             requestPictureInPicture: HTMLVideoElement.prototype.requestPictureInPicture,
         });
@@ -49558,7 +49597,7 @@ class PictureInPicture extends UICorePlugin {
         return this;
     }
     togglePictureInPicture() {
-        trace(`${T$6} togglePictureInPicture`);
+        trace(`${T$7} togglePictureInPicture`);
         if (this.videoElement !== document.pictureInPictureElement) {
             this.requestPictureInPicture();
         }
@@ -49567,19 +49606,17 @@ class PictureInPicture extends UICorePlugin {
         }
     }
     requestPictureInPicture() {
-        trace(`${T$6} requestPictureInPicture`, {
+        trace(`${T$7} requestPictureInPicture`, {
             videoElement: !!this.videoElement,
         });
         this.videoElement.requestPictureInPicture();
     }
     exitPictureInPicture() {
-        trace(`${T$6} exitPictureInPicture`);
+        trace(`${T$7} exitPictureInPicture`);
         document.exitPictureInPicture();
     }
 }
 
-const pluginHtml$3 = "<button class=\"gcore-skin-button-color\" data-playback-rate-button>\n    <span><%= title %></span>\n</button>\n<ul>\n    <% for (var i = 0; i < playbackRates.length; i++) { %>\n        <li data-playback-rate-select=\"<%= playbackRates[i].value %>\"><a\n                    data-playback-rate-a=\"<%= playbackRates[i].value %>\" href=\"#\"><%= playbackRates[i].label %></a></li>\n    <% }; %>\n</ul>\n";
-
 const buttonHtml = "<button class='gplayer-lite-btn gcore-skin-text-color gear-option'>\n    <span class=\"gear-option_speed-icon\"><%= speedIcon %></span>\n    <span>Playback speed</span>\n    <span class=\"gear-option_arrow-right-icon\"><%= arrowRightIcon %></span>\n    <span class='gear-option_value'><%= title %></span>\n</button>\n";
 
 const listHtml = "<button class=\"gplayer-lite-btn go-back gcore-skin-text-color\">\n    <span class=\"arrow-left-icon\"><%= arrowLeftIcon %></span>\n    Playback speed\n</button>\n<ul class=\"gear-sub-menu\">\n    <% for (var i = playbackRates.length - 1; i >= 0; i--) { %>\n        <li>\n            <a href=\"#\" class='gear-sub-menu_btn gcore-skin-text-color' data-rate=\"<%= playbackRates[i].value %>\">\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= playbackRates[i].label %>\n            </a>\n        </li>\n    <% } %>\n</ul>\n";
@@ -49596,10 +49633,9 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: '2.0', label: '2x' }
 ];
 const DEFAULT_PLAYBACK_RATE = '1.0';
-// TODO
-const MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
+const T$6 = 'plugins.playback_rate';
 /**
- * Allows changing the playback speed of the video.
+ * PLUGIN that allows changing the playback speed of the video.
  * @beta
  *
  * @remarks
@@ -49609,12 +49645,13 @@ const MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
  *
  * - {@link BottomGear | bottom_gear}
  *
- * It renders a button in the gear menu, which opens a dropdown with the available playback rates.
+ * It renders a button in the gear menu, which opens a dropdown with the options to change the playback rate.
  */
 class PlaybackRate extends UICorePlugin {
-    currentPlayback = null;
     playbackRates = DEFAULT_PLAYBACK_RATES;
+    // Saved when an ad starts to restore after it finishes
     prevSelectedRate;
+    rendered = false;
     selectedRate = DEFAULT_PLAYBACK_RATE;
     /**
      * @internal
@@ -49628,9 +49665,13 @@ class PlaybackRate extends UICorePlugin {
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    static template = tmpl(pluginHtml$3);
     static buttonTemplate = tmpl(buttonHtml);
     static listTemplate = tmpl(listHtml);
+    constructor(core) {
+        super(core);
+        this.playbackRates = core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
+        this.selectedRate = core.options.playbackRate?.defaultValue || DEFAULT_PLAYBACK_RATE;
+    }
     /**
      * @internal
      */
@@ -49654,27 +49695,36 @@ class PlaybackRate extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        this.listenTo(this.core, 'gear:rendered', this.render);
-        // TODO this.core.getPlugin('media_control'), bottom_gear
-        this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-        this.listenTo(this.core.mediaControl, MEDIACONTROL_PLAYBACKRATE, this.updatePlaybackRate);
-        this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
-        this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
-        if (this.core.activeContainer) {
-            this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_BUFFERFULL, this.updateLiveStatus);
-        }
-        if (this.currentPlayback) {
-            this.listenTo(this.currentPlayback, Events$1.PLAYBACK_STOP, this.onStop);
-            this.listenTo(this.currentPlayback, Events$1.PLAYBACK_PLAY, this.onPlay);
-            // TODO import dash playback events
-            this.listenTo(this.currentPlayback, 'dash:playback-rate-changed', this.onDashRateChange);
-        }
+        this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
     }
-    unBindEvents() {
-        this.stopListening(this.core, 'gear:rendered', this.render);
-        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-        this.stopListening(this.core, 'core:advertisement:start', this.onStartAd);
-        this.stopListening(this.core, 'core:advertisement:finish', this.onFinishAd);
+    onCoreReady() {
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
+        const gear = this.core.getPlugin('bottom_gear');
+        assert(gear, 'bottom_gear plugin is required');
+        this.listenTo(mediaControl, MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, this.onGearRendered);
+    }
+    onActiveContainerChange() {
+        this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_STOP, this.onStop);
+        this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_PLAY, this.onPlay);
+        this.listenTo(this.core.activePlayback, PlaybackEvents.PLAYBACK_RATE_CHANGED, this.onPlaybackRateChange);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrStateChanged);
+    }
+    onGearRendered() {
+        trace(`${T$6} onGearRendered`, {
+            rendered: this.rendered,
+        });
+        this.rendered = false;
+        this.render();
+    }
+    onDvrStateChanged(dvrEnabled) {
+        trace(`${T$6} onDvrStateChanged`, {
+            dvrEnabled,
+        });
+        if (dvrEnabled) {
+            this.render();
+        }
     }
     allRateElements() {
         return this.$('ul.gear-sub-menu li');
@@ -49682,68 +49732,53 @@ class PlaybackRate extends UICorePlugin {
     rateElement(rate = "1") {
         return this.$(`ul.gear-sub-menu a[data-rate="${rate}"]`).parent();
     }
-    onDashRateChange() {
-        // TODO consider removing
-        this.currentPlayback._dash?.setPlaybackRate(this.selectedRate);
-    }
-    updateLiveStatus() {
-        if (this.core.getPlaybackType() === Playback.LIVE) {
-            if (this.core.mediaControl.currentSeekBarPercentage <= 98.9) {
-                this.core.mediaControl.$playbackRate.removeClass('playbackrate-enable');
-                this.core.mediaControl.$el.addClass('dvr');
-                return;
-            }
-            this.updatePlaybackRate(DEFAULT_PLAYBACK_RATE);
-            this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
-            this.core.mediaControl.$el.removeClass('dvr');
+    onPlaybackRateChange(playbackRate) {
+        const selectedRate = parseInt(this.selectedRate, 10);
+        if (playbackRate !== selectedRate) {
+            trace(`${T$6} onPlaybackRateChange setting target rate`, {
+                playbackRate,
+                selectedRate,
+            });
+            this.core.activePlayback?.setPlaybackRate(selectedRate);
         }
     }
-    reload() {
-        this.unBindEvents();
-        this.bindEvents();
-    }
     shouldRender() {
         if (!this.core.activeContainer) {
             return false;
         }
-        this.currentPlayback = this.core.activePlayback;
-        return !(this.currentPlayback?.tagName !== 'video' && this.currentPlayback?.tagName !== 'audio');
+        if (this.core.getPlaybackType() === Playback.LIVE && !this.core.activePlayback.dvrEnabled) {
+            return false;
+        }
+        return 'setPlaybackRate' in this.core.activePlayback;
     }
     /**
      * @internal
      */
     render() {
-        const container = this.core.activeContainer;
-        if (this.core.getPlaybackType() === Playback.LIVE && !container.isDvrEnabled()) {
+        trace(`${T$6} render`, {
+            rendered: this.rendered,
+            shouldRender: this.shouldRender(),
+        });
+        if (!this.shouldRender()) {
             return this;
         }
-        const cfg = this.core.options.playbackRateConfig || {};
-        if (!this.playbackRates) {
-            this.playbackRates = cfg.options || DEFAULT_PLAYBACK_RATES;
-        }
-        if (!this.selectedRate) {
-            this.selectedRate = cfg.defaultValue || DEFAULT_PLAYBACK_RATE;
-        }
-        if (this.shouldRender()) {
-            const button = PlaybackRate.buttonTemplate({
-                title: this.getTitle(),
-                speedIcon,
-                arrowRightIcon,
-            });
-            this.$el.html(button);
-            // if (this.core.getPlaybackType() === Playback.LIVE) {
-            //   this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
-            // }
-            // this.core.mediaControl.$playbackRate.append(this.el);
-            this.core.mediaControl.$el?.find('.gear-options-list [data-rate]').html(this.el);
-            // this.updateText();
+        if (this.rendered) {
+            return this;
         }
+        const button = PlaybackRate.buttonTemplate({
+            title: this.getTitle(),
+            speedIcon,
+            arrowRightIcon,
+        });
+        this.$el.html(button);
+        this.core.getPlugin('bottom_gear')?.getElement('rate')?.html(this.el);
+        this.rendered = true;
         return this;
     }
     onStartAd() {
         this.prevSelectedRate = this.selectedRate;
-        this.setSelectedRate('1.0');
-        this.listenToOnce(this.currentPlayback, Events$1.PLAYBACK_PLAY, this.onFinishAd);
+        this.resetPlaybackRate();
+        this.listenToOnce(this.core.activePlayback, Events$1.PLAYBACK_PLAY, this.onFinishAd);
     }
     onFinishAd() {
         if (this.prevSelectedRate) {
@@ -49751,16 +49786,16 @@ class PlaybackRate extends UICorePlugin {
         }
     }
     onPlay() {
-        if (!this.core.mediaControl.$el.hasClass('dvr')) {
-            if (this.core.getPlaybackType() === Playback.LIVE) {
-                this.updatePlaybackRate(DEFAULT_PLAYBACK_RATE);
-                this.core.mediaControl.$playbackRate.addClass('playbackrate-enable');
-            }
+        if (this.core.getPlaybackType() === Playback.LIVE && !this.core.activePlayback.dvrEnabled) {
+            this.resetPlaybackRate();
         }
         else {
             this.setSelectedRate(this.selectedRate);
         }
     }
+    resetPlaybackRate() {
+        this.setSelectedRate(DEFAULT_PLAYBACK_RATE);
+    }
     onStop() {
     }
     onRateSelect(event) {
@@ -49778,30 +49813,21 @@ class PlaybackRate extends UICorePlugin {
             arrowLeftIcon,
             checkIcon,
         }));
-        this.core.mediaControl.$el?.find('.gear-wrapper').html(this.el);
+        this.core.getPlugin('bottom_gear')?.setContent(this.el);
         this.highlightCurrentRate();
     }
     goBack() {
-        this.core.trigger('gear:refresh');
-    }
-    updatePlaybackRate(rate) {
-        this.setSelectedRate(rate);
+        setTimeout(() => {
+            this.core.getPlugin('bottom_gear').refresh();
+        }, 0);
     }
     setSelectedRate(rate) {
         // Set <video playbackRate="..."
-        this.core.$el.find('video,audio').get(0).playbackRate = rate;
+        this.core.activePlayback?.setPlaybackRate(rate);
         this.selectedRate = rate;
-        // TODO
-        // Player.player.trigger('playbackRateChanged', rate);
     }
     getTitle() {
-        let title = this.selectedRate;
-        this.playbackRates.forEach((r) => {
-            if (r.value === this.selectedRate) {
-                title = r.label;
-            }
-        });
-        return title;
+        return this.playbackRates.find((r) => r.value === this.selectedRate)?.label || this.selectedRate;
     }
     highlightCurrentRate() {
         this.allRateElements().removeClass('current');
@@ -49817,7 +49843,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$5 = 'plugins.poster_custom';
+const T$5 = 'plugins.poster';
 /**
  * Displays a poster image in the background and a big play button on top when playback is stopped
  * @beta
@@ -49855,7 +49881,7 @@ class Poster extends UIContainerPlugin {
      * @internal
      */
     get name() {
-        return 'poster_custom';
+        return 'poster';
     }
     /**
      * @internal
@@ -50256,7 +50282,8 @@ const fbIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32px\"
 const twIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32px\" height=\"32px\" viewBox=\"0 0 32 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->\n    <title>twitter</title>\n    <desc>Created with Sketch.</desc>\n    <defs></defs>\n    <g id=\"twitter\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g fill-rule=\"nonzero\" id=\"Shape\">\n            <path d=\"M32,30 C32,31.104 31.104,32 30,32 L2,32 C0.896,32 0,31.104 0,30 L0,2 C0,0.896 0.896,0 2,0 L30,0 C31.104,0 32,0.896 32,2 L32,30 Z\" fill=\"#55ACEE\"></path>\n            <path class=\"icon-hover\" d=\"M25.987,9.894 C25.251,10.216 24.462,10.431 23.63,10.529 C24.48,10.031 25.13,9.24 25.436,8.298 C24.644,8.759 23.766,9.095 22.831,9.276 C22.083,8.491 21.017,8 19.838,8 C17.572,8 15.738,9.807 15.738,12.038 C15.738,12.352 15.774,12.663 15.842,12.96 C12.435,12.788 9.413,11.181 7.39,8.739 C7.038,9.336 6.834,10.029 6.834,10.771 C6.834,12.17 7.56,13.406 8.658,14.131 C7.987,14.109 7.354,13.928 6.802,13.625 C6.801,13.642 6.801,13.659 6.801,13.677 C6.801,15.632 8.215,17.266 10.091,17.637 C9.748,17.727 9.386,17.779 9.01,17.779 C8.746,17.779 8.49,17.755 8.24,17.707 C8.76,19.311 10.274,20.478 12.068,20.512 C10.67,21.594 8.9,22.24 6.979,22.24 C6.649,22.24 6.321,22.222 6,22.184 C7.814,23.329 9.971,23.997 12.287,23.997 C19.828,23.997 23.953,17.843 23.953,12.506 C23.953,12.333 23.948,12.156 23.941,11.985 C24.741,11.414 25.438,10.703 25.987,9.894 Z\" fill=\"#FFFFFF\"></path>\n        </g>\n    </g>\n</svg>";
 
 /**
- * The plugin adds a share button to the media control UI.
+ * PLUGIN that adds a share button to the media control UI.
+ * @beta
  */
 class Share extends UICorePlugin {
     hide = false;
@@ -50376,7 +50403,8 @@ class Share extends UICorePlugin {
 const pluginHtml$1 = "<div class=\"skip-container\" data-skip-container>\n    <div class=\"skip-item\" data-skip-left>\n    </div>\n    <div class=\"skip-item\" data-skip-mid>\n    </div>\n    <div class=\"skip-item\" data-skip-right>\n    </div>\n</div>\n";
 
 /**
- * The plugin adds skip controls to the media control UI.
+ * PLUGIN that adds skip controls to the media control UI.
+ * @beta
  */
 class SkipTime extends UICorePlugin {
     get name() {
@@ -50469,6 +50497,7 @@ const spinnerHTML = "<div data-bounce1></div>\n<div data-bounce2></div>\n<div da
 const T$4 = 'plugins.spinner';
 /**
  * Custom events emitted by the plugin
+ * @beta
  */
 var SpinnerEvents;
 (function (SpinnerEvents) {
@@ -50479,10 +50508,12 @@ var SpinnerEvents;
     SpinnerEvents["SYNC"] = "plugins:spinner:sync";
 })(SpinnerEvents || (SpinnerEvents = {}));
 /**
- * Shows a pending operation indicator when playback is buffering or in other appropriate cases
+ * PLUGIN that shows a pending operation indicator when playback is buffering or in a similar state
  * @beta
  * @remarks
- * The plugin emits
+ * Events emitted- {@link SpinnerEvents}
+ * Other plugins can use {@link SpinnerThreeBounce.show | show} and {@link SpinnerThreeBounce.hide | hide} methods to
+ * implement custom pending/progress indication scenarios.
  */
 class SpinnerThreeBounce extends UIContainerPlugin {
     userShown = false;
@@ -50562,7 +50593,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
     /**
      * Shows the spinner.
      *
-     * When called, the spinner will not hide (due to its built-in logic) until {@link SpinnerThreeBounce#hide} is called
+     * When called, the spinner will not hide (due to its built-in logic) until {@link SpinnerThreeBounce.hide} is called
      */
     show(delay = 300) {
         trace(`${T$4} show`);
@@ -50743,7 +50774,7 @@ class SourceController extends CorePlugin {
         }
         this.bindContainerEventListeners();
         if (this.active) {
-            this.core.activeContainer?.getPlugin('poster_custom')?.disable();
+            this.core.activeContainer?.getPlugin('poster')?.disable();
             spinner?.show(0);
         }
     }
@@ -50764,7 +50795,7 @@ class SourceController extends CorePlugin {
             }
             switch (error.code) {
                 case PlaybackErrorCode.MediaSourceUnavailable:
-                    this.core.activeContainer?.getPlugin('poster_custom')?.disable();
+                    this.core.activeContainer?.getPlugin('poster')?.disable();
                     this.retryPlayback();
                     break;
             }
@@ -50776,7 +50807,7 @@ class SourceController extends CorePlugin {
             });
             if (this.active) {
                 this.reset();
-                this.core.activeContainer?.getPlugin('poster_custom')?.enable();
+                this.core.activeContainer?.getPlugin('poster')?.enable();
                 this.core.activeContainer?.getPlugin('spinner')?.hide();
             }
         });
@@ -51220,7 +51251,7 @@ var TelemetryEvent;
     TelemetryEvent[TelemetryEvent["Stall"] = 4] = "Stall";
 })(TelemetryEvent || (TelemetryEvent = {}));
 /**
- * Collects and reports the performance statistics.
+ * PLUGIN that collects and reports the performance statistics.
  * @beta
  * @remarks
  * This plugin is experimental and its API is likely to change.
@@ -52044,4 +52075,4 @@ class VolumeFade extends UICorePlugin {
     }
 }
 
-export { AudioSelector, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, Kibo, LevelSelector, LogTracer, Logger, Logo, MediaControl, MediaControlEvents, MultiCamera, PictureInPicture, PlaybackErrorCode, PlaybackRate, Player, PlayerEvent, Poster, SeekTime, SentryTracer, Share, SkipTime, SourceController, SpinnerEvents, SpinnerThreeBounce, Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents, reportError, setTracer, trace, version };
+export { AudioSelector, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ContextMenu, DvrControls, ErrorScreen, Favicon, GoogleAnalytics, LevelSelector, LogTracer, Logger, Logo, MediaControl, MediaControlEvents, MultiCamera, PictureInPicture, PlaybackErrorCode, PlaybackRate, Player, PlayerEvent, Poster, SeekTime, SentryTracer, Share, SkipTime, SourceController, SpinnerEvents, SpinnerThreeBounce, Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents, reportError, setTracer, trace, version };