@gcorevideo/player 2.20.7 → 2.20.8

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) {
@@ -42893,7 +42917,7 @@ class Player {
         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 +42942,7 @@ class Player {
         }
     }
     triggerAutoPlay() {
-        trace(`${T$e} triggerAutoPlay`);
+        trace(`${T$g} triggerAutoPlay`);
         setTimeout(() => {
             this.player?.play({
                 autoPlay: true,
@@ -42936,7 +42960,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$e} onReady`, {
+            trace(`${T$g} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -42970,7 +42994,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 +43055,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 +43070,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 +43085,7 @@ class Player {
     }
 }
 
-var version$1 = "2.20.7";
+var version$1 = "2.20.8";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43085,7 +43109,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 +43143,7 @@ class AudioSelector extends UICorePlugin {
     static get version() {
         return VERSION$6;
     }
-    static template = tmpl(pluginHtml$8);
+    static template = tmpl(pluginHtml$7);
     /**
      * @internal
      */
@@ -43392,9 +43416,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 +43442,7 @@ class BigMuteButton extends UICorePlugin {
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    static template = tmpl(pluginHtml$7);
+    static template = tmpl(pluginHtml$6);
     /**
      * @internal
      */
@@ -43436,7 +43460,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 +43485,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 +43514,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 +43526,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 +43565,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";
 
@@ -43835,7 +43859,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',
@@ -43869,7 +43893,7 @@ class MediaControl extends UICorePlugin {
     buttonsColor = null;
     currentDurationValue = 0;
     currentPositionValue = 0;
-    currentSeekBarPercentage = null;
+    currentSeekBarPercentage = 0;
     disabledClickableList = [];
     displayedDuration = null;
     displayedPosition = null;
@@ -43987,6 +44011,9 @@ class MediaControl extends UICorePlugin {
             'mouseleave .media-control-layer[data-controls]': 'resetUserKeepVisible',
         };
     }
+    get currentSeekPos() {
+        return this.currentSeekBarPercentage;
+    }
     /**
      * Current volume [0..100]
      */
@@ -44083,7 +44110,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 +44120,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 +44376,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 +44942,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 +44973,7 @@ class BottomGear extends UICorePlugin {
     static get version() {
         return VERSION$5;
     }
-    static template = tmpl(pluginHtml$6);
+    static template = tmpl(pluginHtml$5);
     /**
      * @internal
      */
@@ -44983,7 +44998,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 +45016,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 +45043,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();
@@ -47114,7 +47131,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";
 
@@ -47229,7 +47246,7 @@ class ClapprNerdStats extends UICorePlugin {
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    static template = tmpl(pluginHtml$5);
+    static template = tmpl(pluginHtml$4);
     /**
      * @internal
      */
@@ -47283,7 +47300,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;
@@ -47804,7 +47821,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 +47851,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 +47869,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,
         });
@@ -48148,6 +48165,7 @@ class ContextMenu extends UIContainerPlugin {
 
 const dvrHTML = "<div class=\"live-info\"><%= live %></div>\n<button type=\"button\" class=\"live-button\" aria-label=\"<%= backToLive %>\"><%= backToLive %></button>\n";
 
+const T$b = 'plugins.dvr_controls';
 /**
  * Adds the DVR controls to the media control UI
  * @beta
@@ -48178,7 +48196,7 @@ class DvrControls extends UICorePlugin {
      */
     get events() {
         return {
-            'click .live-button': 'click'
+            'click .live-button': 'click',
         };
     }
     /**
@@ -48186,8 +48204,8 @@ class DvrControls extends UICorePlugin {
      */
     get attributes() {
         return {
-            'class': 'dvr-controls',
-            'data-dvr-controls': ''
+            class: 'dvr-controls',
+            'data-dvr-controls': '',
         };
     }
     constructor(core) {
@@ -48206,23 +48224,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 +48267,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,7 +48300,7 @@ 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.
  * @beta
@@ -48310,11 +48337,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 +48363,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 +48379,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,7 +48647,7 @@ 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.
@@ -48697,9 +48724,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 +48755,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 +48800,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 +48816,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 +48857,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 +48882,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 +48918,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 +49163,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,7 +49172,7 @@ const streamsMomentoIcon = "<svg id=\"Слой_1\" data-name=\"Слой 1\" xmln
 const streamsWhiteNightsIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"50\" height=\"50\" viewBox=\"0 0 50 50\">\n  <defs>\n    <clipPath id=\"clip-Icon\">\n      <rect width=\"50\" height=\"50\"/>\n    </clipPath>\n  </defs>\n  <g id=\"Icon\" clip-path=\"url(#clip-Icon)\">\n    <g id=\"icon2\" transform=\"translate(-0.041 0)\">\n      <path id=\"Контур_77\" data-name=\"Контур 77\" d=\"M6.493,13v8.266h6.275V19.74H8.31V17.714h4.006V16.3H8.31V14.53h4.365V13Zm7.5,0v8.266h1.7V15.732h.023l3.438,5.534h1.818V13h-1.7v5.545h-.023L15.8,13Z\" fill=\"#fff\"/>\n      <path id=\"Контур_76\" data-name=\"Контур 76\" d=\"M29.949,29.1V26.774H31.94a1.4,1.4,0,0,1,.938.272,1.1,1.1,0,0,1,.313.874,1.155,1.155,0,0,1-.313.9,1.375,1.375,0,0,1-.938.278ZM28.132,25.36v8.266h1.817V30.4h1.818a1.353,1.353,0,0,1,.984.3,1.637,1.637,0,0,1,.394.949c.046.333.079.681.1,1.042a3.2,3.2,0,0,0,.185.938h1.819a1.218,1.218,0,0,1-.191-.423,3.611,3.611,0,0,1-.093-.527c-.019-.185-.033-.367-.041-.544s-.016-.332-.023-.463a5.052,5.052,0,0,0-.087-.625,2.109,2.109,0,0,0-.2-.573,1.586,1.586,0,0,0-.359-.451,1.414,1.414,0,0,0-.556-.284v-.023a1.926,1.926,0,0,0,1-.81,2.494,2.494,0,0,0,.307-1.262,2.308,2.308,0,0,0-.165-.88,2.128,2.128,0,0,0-.486-.724,2.3,2.3,0,0,0-.764-.492,2.67,2.67,0,0,0-1-.179ZM43.506,30.5V25.36H41.689V30.5a2.065,2.065,0,0,1-.37,1.36,1.7,1.7,0,0,1-1.343.434,2.086,2.086,0,0,1-.886-.156,1.283,1.283,0,0,1-.758-.978,3.748,3.748,0,0,1-.058-.66V25.36H36.456V30.5a3.16,3.16,0,0,0,.92,2.5,3.807,3.807,0,0,0,2.6.81,3.82,3.82,0,0,0,2.593-.816,3.132,3.132,0,0,0,.937-2.492Z\" fill=\"#fff\"/>\n      <path id=\"Контур_80\" data-name=\"Контур 80\" d=\"M22.646,31.2H4.689a4.505,4.505,0,0,1-4.5-4.5V8.5A4.505,4.505,0,0,1,4.689,4h18.2a4.505,4.505,0,0,1,4.5,4.5v8.445l-.893.1a3.184,3.184,0,0,0-2.846,3.177V30.5l-.465.7ZM4.689,6a2.5,2.5,0,0,0-2.5,2.5V26.7a2.5,2.5,0,0,0,2.5,2.5H21.65V20.22a5.18,5.18,0,0,1,3.739-4.992V8.5a2.5,2.5,0,0,0-2.5-2.5Z\" fill=\"#fff\"/>\n      <path id=\"Контур_81\" data-name=\"Контур 81\" d=\"M30.127,47.884a1,1,0,0,1-1-1V43.267H26.846a5.206,5.206,0,0,1-5.2-5.2V20.222a5.206,5.206,0,0,1,5.2-5.2H44.692a5.206,5.206,0,0,1,5.2,5.2V38.068a5.206,5.206,0,0,1-5.2,5.2H35.058l-4.216,4.316A1,1,0,0,1,30.127,47.884ZM26.846,17.022a3.2,3.2,0,0,0-3.2,3.2V38.067a3.2,3.2,0,0,0,3.2,3.2h3.281a1,1,0,0,1,1,1v2.162l2.8-2.86a1,1,0,0,1,.715-.3H44.692a3.2,3.2,0,0,0,3.2-3.2V20.222a3.2,3.2,0,0,0-3.2-3.2Z\" fill=\"#fff\"/>\n    </g>\n  </g>\n</svg>\n";
 
 const VERSION$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.
  * @beta
@@ -49156,7 +49193,7 @@ class MultiCamera extends UICorePlugin {
         return VERSION$3;
     }
     get template() {
-        return tmpl(pluginHtml$4);
+        return tmpl(pluginHtml$3);
     }
     get attributes() {
         return {
@@ -49281,7 +49318,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 +49444,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 +49467,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 +49525,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 +49573,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 +49595,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 +49604,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 +49631,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 +49643,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 +49663,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 +49693,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 +49730,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 +49784,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 +49811,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');
@@ -52044,4 +52068,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, 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 };