@gcorevideo/player 2.20.7 → 2.20.9

package/dist/plugins/index.js

@@ -31427,7 +31427,7 @@ function timelineConfig() {
 // export const CLAPPR_VERSION: string = process.env.CLAPPR_VERSION || '0.11.3';
 const CLAPPR_VERSION = '0.11.3';
 
-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";
 
@@ -32366,7 +32366,7 @@ class AudioSelector extends UICorePlugin {
     static get version() {
         return VERSION$6;
     }
-    static template = tmpl(pluginHtml$8);
+    static template = tmpl(pluginHtml$7);
     /**
      * @internal
      */
@@ -32647,9 +32647,9 @@ function trace(msg, data = {}) {
 
 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$a = 'plugins.big_mute_button';
+const T$c = 'plugins.big_mute_button';
 // TODO rewrite as a container plugin
 /**
  * Displays a big mute button over the video when it's muted.
@@ -32673,7 +32673,7 @@ class BigMuteButton extends UICorePlugin {
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    static template = tmpl(pluginHtml$7);
+    static template = tmpl(pluginHtml$6);
     /**
      * @internal
      */
@@ -32691,7 +32691,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$a} bindEvents`, {
+        trace(`${T$c} bindEvents`, {
             mediacontrol: !!this.core.mediaControl,
         });
         this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mediaControlRendered);
@@ -32748,7 +32748,7 @@ class BigMuteButton extends UICorePlugin {
      */
     render() {
         if (this.shouldRender()) {
-            trace(`${T$a} render`, {
+            trace(`${T$c} render`, {
                 el: !!this.$el,
             });
             this.$el.html(BigMuteButton.template());
@@ -32787,7 +32787,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";
 
@@ -32796,9 +32796,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;
@@ -33096,7 +33093,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.
@@ -33113,7 +33110,7 @@ class MediaControl extends UICorePlugin {
     buttonsColor = null;
     currentDurationValue = 0;
     currentPositionValue = 0;
-    currentSeekBarPercentage = null;
+    currentSeekBarPercentage = 0;
     disabledClickableList = [];
     displayedDuration = null;
     displayedPosition = null;
@@ -33178,14 +33175,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;
@@ -33231,6 +33228,9 @@ class MediaControl extends UICorePlugin {
             'mouseleave .media-control-layer[data-controls]': 'resetUserKeepVisible',
         };
     }
+    get currentSeekPos() {
+        return this.currentSeekBarPercentage;
+    }
     /**
      * Current volume [0..100]
      */
@@ -33590,8 +33590,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();
@@ -34157,17 +34156,6 @@ MediaControl.extend = function (properties) {
 };
 
 const VERSION$5 = '2.19.12';
-/**
- * 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 = {}));
 /**
  * Adds the gear button that triggers extra options menu on the right side of the {@link MediaControl | media control} UI
  * @beta
@@ -34198,7 +34186,7 @@ class BottomGear extends UICorePlugin {
     static get version() {
         return VERSION$5;
     }
-    static template = tmpl(pluginHtml$6);
+    static template = tmpl(pluginHtml$5);
     /**
      * @internal
      */
@@ -34223,7 +34211,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
     }
@@ -34266,11 +34253,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();
@@ -35930,7 +35920,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);
@@ -35949,7 +35939,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;
@@ -35963,7 +35953,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) {
@@ -35973,7 +35963,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;
@@ -36071,7 +36061,7 @@ class Speedtest {
                 }
                 result(bestServer);
             };
-            serverList.forEach(server => {
+            serverList.forEach((server) => {
                 checkServer(server, done);
             });
             if (i === serverList.length) {
@@ -36160,12 +36150,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,
                 });
             }
         }
@@ -36175,7 +36165,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');
@@ -36345,7 +36335,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";
 
@@ -36420,7 +36410,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
@@ -36460,7 +36450,7 @@ class ClapprNerdStats extends UICorePlugin {
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    static template = tmpl(pluginHtml$5);
+    static template = tmpl(pluginHtml$4);
     /**
      * @internal
      */
@@ -36514,7 +36504,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;
@@ -36676,7 +36666,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.
@@ -36739,9 +36729,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) {
@@ -36789,7 +36780,7 @@ class ClapprStats extends ContainerPlugin {
     }
     /**
      * Returns the collected metrics.
-     * @returns The collected metrics
+     * @returns Currently collected metrics
      */
     exportMetrics() {
         return structuredClone(this.metrics);
@@ -37099,7 +37090,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:
@@ -37255,7 +37246,7 @@ class ClipsPlugin extends UICorePlugin {
 
 const templateHtml$1 = "<ul class=\"context-menu-list\">\n    <% if(options) { %>\n        <% for (var i = 0; i < options.length; i++) { %>\n        <li class=\"context-menu-list-item <%= options[i].class %>\"\n            data-<%= options[i].name %>><%= options[i].label %></li>\n        <% } %>\n    <% } %>\n</ul>\n";
 
-var version$1 = "2.20.7";
+var version$1 = "2.20.9";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -37390,8 +37381,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
@@ -37399,7 +37392,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);
@@ -37420,7 +37413,7 @@ class DvrControls extends UICorePlugin {
      */
     get events() {
         return {
-            'click .live-button': 'click'
+            'click .live-button': 'click',
         };
     }
     /**
@@ -37428,8 +37421,8 @@ class DvrControls extends UICorePlugin {
      */
     get attributes() {
         return {
-            'class': 'dvr-controls',
-            'data-dvr-controls': ''
+            class: 'dvr-controls',
+            'data-dvr-controls': '',
         };
     }
     constructor(core) {
@@ -37448,23 +37441,22 @@ 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) {
         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');
         }
     }
@@ -37489,24 +37481,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;
     }
 }
@@ -37515,9 +37514,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 {
@@ -37576,7 +37575,7 @@ class ErrorScreen extends UICorePlugin {
         }, 0);
     }
     onActiveContainerChanged() {
-        trace(`${T$9} onActiveContainerChanged`, {
+        trace(`${T$a} onActiveContainerChanged`, {
             reloading: this.core.options.reloading,
         });
         this.err = null;
@@ -37859,10 +37858,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
@@ -37872,9 +37871,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}
  *
@@ -37936,9 +37933,16 @@ 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() {
         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() {
+        this.deferRender();
     }
     bindPlaybackEvents() {
         this.removeAuto = false;
@@ -37959,7 +37963,7 @@ class LevelSelector extends UICorePlugin {
     }
     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') {
@@ -38056,8 +38060,9 @@ class LevelSelector extends UICorePlugin {
     }
     goBack() {
         this.isOpen = false;
-        this.core.trigger('gear:refresh');
-        this.deferRender();
+        setTimeout(() => {
+            this.core.getPlugin('bottom_gear').refresh();
+        }, 0);
     }
     setLevel(index) {
         this.selectedLevelId = index;
@@ -38114,7 +38119,7 @@ class LevelSelector extends UICorePlugin {
         this.highlightCurrentLevel();
     }
     highlightCurrentLevel() {
-        trace(`${T$8} highlightCurrentLevel`, {
+        trace(`${T$9} highlightCurrentLevel`, {
             selectedLevelId: this.selectedLevelId,
         });
         this.allLevelElements().removeClass('current');
@@ -38355,7 +38360,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";
 
@@ -38364,9 +38369,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 {
@@ -38385,7 +38390,7 @@ class MultiCamera extends UICorePlugin {
         return VERSION$3;
     }
     get template() {
-        return tmpl(pluginHtml$4);
+        return tmpl(pluginHtml$3);
     }
     get attributes() {
         return {
@@ -38636,7 +38641,7 @@ class MultiCamera extends UICorePlugin {
             // TODO figure out what this does
             playbackOptions.recycleVideo = Browser.isMobile;
             this.currentCamera = this.findElementById(id) ?? null;
-            trace(`${T$7} changeById`, { currentCamera: this.currentCamera, multicamera: this.multicamera });
+            trace(`${T$8} changeById`, { currentCamera: this.currentCamera, multicamera: this.multicamera });
             if (!this.currentCamera) {
                 return;
             }
@@ -38652,7 +38657,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,
@@ -38710,7 +38715,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
@@ -38784,7 +38789,7 @@ class PictureInPicture extends UICorePlugin {
         }
     }
     requestPictureInPicture() {
-        trace(`${T$6} requestPictureInPicture`, {
+        trace(`${T$7} requestPictureInPicture`, {
             videoElement: !!this.videoElement,
         });
         this.videoElement.requestPictureInPicture();
@@ -38794,14 +38799,22 @@ class PictureInPicture extends UICorePlugin {
     }
 }
 
-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";
 
 const speedIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M11.9854 23.9999C11.4272 23.9999 10.9571 23.5293 10.9571 22.9704C10.9571 22.4115 11.4272 21.9409 11.9854 21.9409C17.4492 21.9409 21.9143 17.4704 21.9143 11.9999C21.9143 6.52948 17.4492 2.05899 11.9854 2.05899C11.4272 2.05899 10.9571 1.58836 10.9571 1.02949C10.9571 0.470625 11.4272 0 11.9854 0C18.5949 0 24 5.38224 24 12.0291C24 18.6766 18.5949 24 11.9854 24V23.9999ZM10.2227 17.853L17.4785 13.4413C18.0072 13.1178 18.301 12.5885 18.301 11.9707C18.301 11.353 17.9779 10.8237 17.4785 10.5002L10.2227 6.08852C9.69405 5.76499 9.01826 5.76499 8.4896 6.05919C7.96094 6.35338 7.60828 6.94157 7.60828 7.5591V16.3824C7.60828 17.0002 7.93142 17.5883 8.4896 17.8824C8.75393 18.0294 9.04779 18.1177 9.34139 18.1177C9.63523 18.1177 9.95838 18.0294 10.2227 17.853V17.853ZM15.9216 11.9707L9.66457 15.7647V8.17661L15.9216 11.9707ZM8.22516 22.3529C8.4602 21.8236 8.25447 21.2058 7.7258 20.9705C7.19714 20.7353 6.69755 20.4413 6.2277 20.0882C5.75764 19.7646 5.11137 19.8822 4.78824 20.3235C4.46509 20.7941 4.58251 21.4412 5.02327 21.7647C5.58146 22.1764 6.19819 22.5293 6.81519 22.8235C6.96211 22.8824 7.10903 22.9117 7.25574 22.9117C7.66699 22.941 8.04893 22.7057 8.22513 22.3528L8.22516 22.3529ZM3.58381 19.0882C4.05387 18.7647 4.17127 18.1177 3.84814 17.647C3.52502 17.1764 3.23115 16.6765 2.99635 16.1471C2.76132 15.6178 2.14456 15.4118 1.6157 15.6472C1.08704 15.8825 0.881306 16.5 1.11634 17.0295C1.41018 17.6472 1.7626 18.2648 2.14459 18.8236C2.35032 19.1178 2.67325 19.2646 2.99638 19.2646C3.20191 19.2942 3.40763 19.2353 3.58384 19.0882L3.58381 19.0882ZM1.14563 13.9707C1.70382 13.9118 2.14435 13.4118 2.08576 12.853C2.05645 12.5588 2.05645 12.2648 2.05645 11.9706C2.05645 11.6764 2.05645 11.4117 2.08576 11.1178C2.14456 10.5589 1.70381 10.059 1.14563 10.0001C0.587439 9.94122 0.0881057 10.3825 0.0293019 10.9414C1.96979e-07 11.2942 0 11.6178 0 11.9709C0 12.3237 0.0293018 12.6768 0.0588091 13.0297C0.117618 13.5589 0.558169 13.9709 1.08706 13.9709C1.08686 13.9707 1.11636 13.9707 1.14567 13.9707L1.14563 13.9707ZM2.96687 7.79432C3.2019 7.26502 3.49553 6.76482 3.81866 6.2944C4.1418 5.82377 4.02439 5.17672 3.55432 4.8532C3.08427 4.52967 2.438 4.64722 2.11486 5.11786C1.73292 5.67672 1.38047 6.2942 1.08661 6.91193C0.851579 7.44123 1.08661 8.05897 1.58597 8.29426C1.73289 8.35314 1.87981 8.38247 2.02652 8.38247C2.40888 8.41181 2.7906 8.1767 2.96686 7.7943L2.96687 7.79432ZM6.22757 3.85328C6.69762 3.52974 7.19696 3.23554 7.69635 2.97089C8.22501 2.73558 8.43074 2.11807 8.19571 1.58857C7.96068 1.05927 7.34392 0.85329 6.81505 1.08861C6.19806 1.3828 5.58128 1.73565 5.02314 2.14741C4.55308 2.47094 4.43568 3.11797 4.78811 3.5886C4.99384 3.8828 5.31676 4.02969 5.6399 4.02969C5.84583 4.05902 6.05135 4.00014 6.22757 3.85325V3.85328Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
+var PlaybackEvents;
+(function (PlaybackEvents) {
+    /**
+     * Emitted when the playback rate changes.
+     * Payload:
+     * - playbackRate number
+     */
+    PlaybackEvents["PLAYBACK_RATE_CHANGED"] = "playback:rate-changed";
+})(PlaybackEvents || (PlaybackEvents = {}));
+
 const DEFAULT_PLAYBACK_RATES = [
     { value: '0.5', label: '0.5x' },
     { value: '0.75', label: '0.75x' },
@@ -38812,10 +38825,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
@@ -38825,12 +38837,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
@@ -38844,9 +38857,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
      */
@@ -38870,27 +38887,33 @@ 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) {
+        if (dvrEnabled) {
+            this.render();
+        }
     }
     allRateElements() {
         return this.$('ul.gear-sub-menu li');
@@ -38898,68 +38921,49 @@ 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) {
+            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) {
@@ -38967,16 +38971,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) {
@@ -38994,30 +38998,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');
@@ -39033,7 +39028,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
@@ -39071,7 +39066,7 @@ class Poster extends UIContainerPlugin {
      * @internal
      */
     get name() {
-        return 'poster_custom';
+        return 'poster';
     }
     /**
      * @internal
@@ -39467,7 +39462,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;
@@ -39587,7 +39583,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() {
@@ -39700,6 +39697,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) {
@@ -39710,10 +39708,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;
@@ -39791,7 +39791,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) {
         this.userShown = true;
@@ -39968,7 +39968,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);
         }
     }
@@ -39989,7 +39989,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;
             }
@@ -40001,7 +40001,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();
             }
         });
@@ -40432,7 +40432,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.
@@ -41251,4 +41251,4 @@ class VolumeFade extends UICorePlugin {
     }
 }
 
-export { AudioSelector, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, Kibo, LevelSelector, Logo, MediaControl, MediaControlEvents, MultiCamera, PictureInPicture, PlaybackRate, Poster, SeekTime, Share, SkipTime, SourceController, SpinnerEvents, SpinnerThreeBounce, Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };
+export { AudioSelector, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ContextMenu, DvrControls, ErrorScreen, Favicon, GoogleAnalytics, LevelSelector, Logo, MediaControl, MediaControlEvents, MultiCamera, PictureInPicture, PlaybackRate, Poster, SeekTime, Share, SkipTime, SourceController, SpinnerEvents, SpinnerThreeBounce, Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };