@gcorevideo/player 2.22.13 → 2.22.15

package/dist/index.js

@@ -42928,6 +42928,9 @@ class Player {
      * ```
      */
     attachTo(playerElement) {
+        trace(`${T$h} attachTo`, {
+            player: !!this.player,
+        });
         assert.ok(!this.player, 'Player already initialized');
         assert.ok(playerElement, 'Player container element is required');
         if (this.config.debug === 'all' || this.config.debug === 'clappr') {
@@ -43139,9 +43142,9 @@ class Player {
         trace(`${T$h} initPlayer`, {
             autoPlay: coreOptions.autoPlay,
             sources: coreOptions.sources,
+            player: !!this.player,
             // TODO selected options
         });
-        assert.ok(!this.player, 'Player already initialized');
         const player = new Player$1(coreOptions);
         this.player = player;
         this.bindCoreListeners();
@@ -43304,7 +43307,7 @@ class Player {
     }
 }
 
-var version$1 = "2.22.13";
+var version$1 = "2.22.15";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -45952,7 +45955,7 @@ function rankConnectionSpeed(dlSpeed) {
 
 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' id=\"nerd-stats-button\">\n    <span class=\"stats-icon\"><%= icon %></span>\n    <span><%= i18n.t('statistics') %></span>\n</button>\n";
+const buttonHtml$3 = "<button class='nerd-button gplayer-lite-btn gcore-skin-text-color gear-option' id=\"nerd-stats-button\">\n    <span class=\"gear-option_icon\"><%= icon %></span>\n    <span class=\"gear-option_label\"><%= i18n.t('statistics') %></span>\n</button>\n";
 
 const statsIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M9.16675 14.1667H10.8334V9.16666H9.16675V14.1667ZM10.0001 7.5C10.2362 7.5 10.4342 7.42 10.5942 7.26C10.7542 7.1 10.834 6.90222 10.8334 6.66666C10.8334 6.43055 10.7534 6.2325 10.5934 6.0725C10.4334 5.9125 10.2356 5.83278 10.0001 5.83333C9.76397 5.83333 9.56591 5.91333 9.40591 6.07333C9.24591 6.23333 9.16619 6.43111 9.16675 6.66666C9.16675 6.90278 9.24675 7.10083 9.40675 7.26083C9.56675 7.42083 9.76453 7.50055 10.0001 7.5ZM10.0001 18.3333C8.8473 18.3333 7.76397 18.1144 6.75008 17.6767C5.73619 17.2389 4.85425 16.6453 4.10425 15.8958C3.35425 15.1458 2.76064 14.2639 2.32341 13.25C1.88619 12.2361 1.6673 11.1528 1.66675 10C1.66675 8.84722 1.88564 7.76389 2.32341 6.75C2.76119 5.73611 3.3548 4.85416 4.10425 4.10416C4.85425 3.35416 5.73619 2.76055 6.75008 2.32333C7.76397 1.88611 8.8473 1.66722 10.0001 1.66666C11.1529 1.66666 12.2362 1.88555 13.2501 2.32333C14.264 2.76111 15.1459 3.35472 15.8959 4.10416C16.6459 4.85416 17.2398 5.73611 17.6776 6.75C18.1154 7.76389 18.334 8.84722 18.3334 10C18.3334 11.1528 18.1145 12.2361 17.6767 13.25C17.239 14.2639 16.6454 15.1458 15.8959 15.8958C15.1459 16.6458 14.264 17.2397 13.2501 17.6775C12.2362 18.1153 11.1529 18.3339 10.0001 18.3333ZM10.0001 16.6667C11.8612 16.6667 13.4376 16.0208 14.7292 14.7292C16.0209 13.4375 16.6667 11.8611 16.6667 10C16.6667 8.13889 16.0209 6.5625 14.7292 5.27083C13.4376 3.97916 11.8612 3.33333 10.0001 3.33333C8.13897 3.33333 6.56258 3.97916 5.27091 5.27083C3.97925 6.5625 3.33341 8.13889 3.33341 10C3.33341 11.8611 3.97925 13.4375 5.27091 14.7292C6.56258 16.0208 8.13897 16.6667 10.0001 16.6667Z\" fill=\"#FFFFFF\"/>\n</svg>\n";
 
@@ -46645,7 +46648,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$d = 'plugins.click_to_pause_custom';
+const T$d = 'plugins.click_to_pause';
 /**
  * A small `PLUGIN` that toggles the playback state on click over the video container
  * @beta
@@ -46908,18 +46911,18 @@ 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";
+const templateHtml$1 = "<ul class=\"context-menu-list\" role=\"menu\" id=\"context-menu-options\">\n    <% for (const item of options) { %>\n    <li class=\"context-menu-list-item <%= item.class %>\">\n        <button role=\"menuitem\" data-name=\"<%= item.name %>\">\n            <% if (iconic) { %>\n            <span class=\"context-menu-list-item_icon\"><%= item.icon || '' %></span>\n            <% } %>\n            <% if (item.labelKey) { %>\n                <%= i18n.t(item.labelKey) %>\n            <% } else { %>\n                <%= item.label %>\n            <% } %>\n        </button>\n    </li>\n    <% } %>\n</ul>\n";
 
 /**
  * `PLUGIN` that displays a small context menu when clicked on the player container.
  * @beta
  * @remarks
  * Configuration options - {@link ContextMenuPluginSettings}
+ *
+ * Should not be used together with {@link ClickToPause} plugin
  */
 class ContextMenu extends UIContainerPlugin {
-    _label = '';
-    _url = '';
-    menuOptions = [];
+    open = false;
     /**
      * @internal
      */
@@ -46939,34 +46942,16 @@ class ContextMenu extends UIContainerPlugin {
         return { class: 'context-menu' };
     }
     static template = tmpl(templateHtml$1);
-    get label() {
-        return this._label || 'Gcore player ver. ' + version().gplayer;
-    }
-    get url() {
-        return this._url || 'https://gcore.com/';
-    }
-    get exposeVersion() {
-        return {
-            label: this.label,
-            name: 'version',
-        };
-    }
     /**
      * @internal
      */
     get events() {
         return {
-            'click [data-version]': 'onOpenMainPage',
+            'click [role="menuitem"]': 'runAction',
         };
     }
     constructor(container) {
         super(container);
-        if (this.options.contextMenu && this.options.contextMenu.label) {
-            this._label = this.options.contextMenu.label;
-        }
-        if (this.options.contextMenu && this.options.contextMenu.url) {
-            this._url = this.options.contextMenu.url;
-        }
         this.render();
         $('body').on('click', this.hideOnBodyClick);
     }
@@ -46974,8 +46959,8 @@ class ContextMenu extends UIContainerPlugin {
      * @internal
      */
     bindEvents() {
-        this.listenTo(this.container, Events$1.CONTAINER_CONTEXTMENU, this.toggleContextMenu);
-        this.listenTo(this.container, Events$1.CONTAINER_CLICK, this.hide);
+        this.listenTo(this.container, Events$1.CONTAINER_CONTEXTMENU, this.onContextMenu);
+        this.listenTo(this.container, Events$1.CONTAINER_CLICK, this.onContainerClick);
     }
     /**
      * @internal
@@ -46984,34 +46969,55 @@ class ContextMenu extends UIContainerPlugin {
         $('body').off('click', this.hideOnBodyClick);
         return super.destroy();
     }
-    toggleContextMenu(event) {
+    onContainerClick() {
+        this.hide();
+    }
+    onContextMenu(event) {
+        if (!this.options.contextMenu?.options?.length) {
+            return;
+        }
         event.preventDefault();
+        event.stopPropagation();
         const offset = this.container?.$el.offset();
         this.show(event.pageY - offset.top, event.pageX - offset.left);
     }
     show(top, left) {
-        this.hide();
-        if (this.options.contextMenu &&
-            this.options.contextMenu.preventShowContextMenu) {
-            return;
-        }
+        this.open = true;
         this.$el.css({ top, left });
         this.$el.show();
     }
     hide() {
+        this.open = false;
         this.$el.hide();
     }
-    onOpenMainPage() {
-        window.open(this.url, '_blank');
+    runAction(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const itemName = event.currentTarget.dataset.name;
+        if (!itemName) {
+            return;
+        }
+        const item = this.options.contextMenu?.options.find((option) => option.name === itemName);
+        if (item?.handler) {
+            item.handler();
+        }
+        this.hide();
     }
     /**
      * @internal
      */
     render() {
-        this.menuOptions = [this.exposeVersion];
-        this.$el.html(ContextMenu.template({ options: this.menuOptions }));
+        if (!this.options.contextMenu?.options?.length) {
+            return this;
+        }
+        const options = this.options.contextMenu.options;
+        this.$el.html(ContextMenu.template({
+            options,
+            i18n: this.container.i18n,
+            iconic: options.some((option) => option.icon),
+        }));
         this.container.$el.append(this.$el); // TODO append to the container, turn into a container plugin
-        this.hide();
+        this.$el.hide();
         return this;
     }
     hideOnBodyClick = () => {
@@ -47990,8 +47996,10 @@ class MediaControl extends UICorePlugin {
     kibo;
     lastMouseX = 0;
     lastMouseY = 0;
-    needsUpdate = false;
+    metadataLoaded = false;
+    hasUpdate = false;
     persistConfig;
+    renderTimerId = null;
     rendered = false;
     settings = INITIAL_SETTINGS;
     userDisabled = false;
@@ -48177,8 +48185,10 @@ class MediaControl extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_ENDED, this.ended);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_VOLUME, this.onVolumeChanged);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_OPTIONS_CHANGE, this.setInitialVolume);
-        // wait until the metadata has loaded and then check if fullscreen on video tag is supported
-        this.listenToOnce(this.core.activeContainer, Events$1.CONTAINER_LOADEDMETADATA, this.onLoadedMetadata);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_LOADEDMETADATA, this.onLoadedMetadata);
+        this.listenTo(this.core, Events$1.CONTAINER_DESTROYED, () => {
+            this.cancelRenderTimer();
+        });
     }
     /**
      * Hides the media control UI
@@ -48221,13 +48231,17 @@ class MediaControl extends UICorePlugin {
             // TODO sort out, use single utility function
             this.fullScreenOnVideoTagSupported = true;
         }
-        this.updateSettings();
-        if (this.core.activeContainer.getPlaybackType() === Playback.LIVE) {
-            this.$el.addClass('live');
-        }
-        else {
-            this.$el.removeClass('live');
-        }
+        this.renderTimerId = setTimeout(() => {
+            this.renderTimerId = null;
+            this.metadataLoaded = true;
+            this.render();
+            if (this.core.activeContainer.getPlaybackType() === Playback.LIVE) {
+                this.$el.addClass('live');
+            }
+            else {
+                this.$el.removeClass('live');
+            }
+        }, 25);
     }
     updateVolumeUI() {
         // this will be called after a render
@@ -48451,6 +48465,7 @@ class MediaControl extends UICorePlugin {
     }
     onActiveContainerChanged() {
         this.fullScreenOnVideoTagSupported = false;
+        this.metadataLoaded = false;
         // set the new container to match the volume of the last one
         this.setInitialVolume();
         this.changeTogglePlay();
@@ -48672,7 +48687,7 @@ class MediaControl extends UICorePlugin {
         const settingsChanged = serializeSettings(this.settings) !== serializeSettings(newSettings);
         if (settingsChanged) {
             this.settings = newSettings;
-            this.needsUpdate = true;
+            this.hasUpdate = true;
             this.render();
         }
     }
@@ -48901,6 +48916,7 @@ class MediaControl extends UICorePlugin {
      * @internal
      */
     destroy() {
+        this.cancelRenderTimer();
         $(document).unbind('mouseup', this.stopDrag);
         $(document).unbind('mousemove', this.updateDrag);
         $(document).unbind('touchend', this.stopDrag);
@@ -48908,6 +48924,12 @@ class MediaControl extends UICorePlugin {
         this.unbindKeyEvents();
         return super.destroy();
     }
+    cancelRenderTimer() {
+        if (this.renderTimerId) {
+            clearTimeout(this.renderTimerId);
+            this.renderTimerId = null;
+        }
+    }
     configure() {
         this.trigger(Events$1.MEDIACONTROL_OPTIONS_CHANGE);
     }
@@ -48915,8 +48937,8 @@ class MediaControl extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$a} render`, { needsUpdate: this.needsUpdate });
-        if (!this.needsUpdate) {
+        trace(`${T$a} render`, { needsUpdate: this.hasUpdate, metadataLoaded: this.metadataLoaded });
+        if (!this.hasUpdate || !this.metadataLoaded) {
             return this;
         }
         const timeout = this.options.hideMediaControlDelay || 2000;
@@ -48966,7 +48988,7 @@ class MediaControl extends UICorePlugin {
         this.core.$el.append(this.el);
         this.rendered = true;
         this.updateVolumeUI();
-        this.needsUpdate = false;
+        this.hasUpdate = false;
         // TODO setTimeout?
         this.trigger(Events$1.MEDIACONTROL_RENDERED);
         return this;
@@ -49541,7 +49563,7 @@ class PictureInPicture extends UICorePlugin {
     }
 }
 
-const buttonHtml$1 = "<button class='gplayer-lite-btn gcore-skin-text-color gear-option' id=\"playback-rate-button\">\n    <span class=\"gear-option_speed-icon\"><%= speedIcon %></span>\n    <span class=\"gear-option_label\"><%= i18n.t('playback_rate') %></span>\n    <span class=\"gear-option_arrow-right-icon\"><%= arrowRightIcon %></span>\n    <span class='gear-option_value'><%= title %></span>\n</button>\n";
+const buttonHtml$1 = "<button class='gplayer-lite-btn gcore-skin-text-color gear-option' id=\"playback-rate-button\">\n    <span class=\"gear-option_speed-icon gear-option_icon\"><%= speedIcon %></span>\n    <span class=\"gear-option_label\"><%= i18n.t('playback_rate') %></span>\n    <span class='gear-option_value'><%= title %></span>\n    <span class=\"gear-option_arrow-right-icon\"><%= arrowRightIcon %></span>\n</button>\n";
 
 const listHtml$1 = "<button class=\"gplayer-lite-btn go-back gcore-skin-text-color\" id=\"playback-rate-back-button\">\n    <span class=\"arrow-left-icon\"><%= arrowLeftIcon %></span>\n    <%= i18n.t('playback_rate') %>\n</button>\n<ul class=\"gear-sub-menu\" id=\"playback-rate-menu\">\n    <% for (const item of playbackRates) { %>\n        <li<%= item.value === current ? ' class=\"current\"' : '' %>>\n            <a href=\"#\" class=\"gear-sub-menu_btn gcore-skin-text-color<%= item.value === current ? ' gcore-skin-active' : '' %>\" data-rate=\"<%= item.value %>\">\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= item.label %>\n            </a>\n        </li>\n    <% } %>\n</ul>";
 
@@ -49600,7 +49622,6 @@ class PlaybackRate extends UICorePlugin {
     // private prevSelectedRate: string | undefined
     selectedRate = DEFAULT_PLAYBACK_RATE;
     metadataLoaded = false;
-    // private playbackSettingsUpdateReceived = false
     mountTimerId = null;
     /**
      * @internal
@@ -49661,14 +49682,8 @@ class PlaybackRate extends UICorePlugin {
     onActiveContainerChange() {
         trace(`${T$7} onActiveContainerChange`);
         this.metadataLoaded = false;
-        // this.playbackSettingsUpdateReceived = false
         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,
-        //   Events.PLAYBACK_SETTINGSUPDATE,
-        //   this.onSettingsUpdate,
-        // )
         this.listenTo(this.core.activePlayback, PlaybackEvents.PLAYBACK_RATE_CHANGED, this.onPlaybackRateChange);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_LOADEDMETADATA, this.onMetaDataLoaded);
     }
@@ -49697,27 +49712,13 @@ class PlaybackRate extends UICorePlugin {
             i18n: this.core.i18n,
         })));
     }
-    // private onSettingsUpdate() {
-    //   trace(`${T} onSettingsUpdate`, {
-    //     playbackType: this.core.activePlayback.getPlaybackType(),
-    //     dvrEnabled: this.core.activePlayback.dvrEnabled,
-    //   })
-    //   this.playbackSettingsUpdateReceived = true
-    //   if (this.metadataLoaded) {
-    //     if (this.mountTimerId) {
-    //       clearTimeout(this.mountTimerId)
-    //       this.mountTimerId = null
-    //     }
-    //     this.mount()
-    //   }
-    // }
     onMetaDataLoaded() {
         trace(`${T$7} onMetaDataLoaded`, {
             playbackType: this.core.activePlayback.getPlaybackType(),
             dvrEnabled: this.core.activePlayback.dvrEnabled,
         });
-        this.metadataLoaded = true;
         this.mountTimerId = setTimeout(() => {
+            this.metadataLoaded = true;
             this.mountTimerId = null;
             this.mount();
         }, 25);
@@ -50140,7 +50141,7 @@ class Poster extends UIContainerPlugin {
     }
 }
 
-const buttonHtml = "<button class='gplayer-lite-btn gcore-skin-text-color gear-option' aria-haspopup=\"menu\">\n    <span class=\"gear-option_hd-icon<%= isHd ? '' : ' hidden' %>\"><%= hdIcon %></span>\n    <span><%= i18n.t('quality') %></span>\n    <span class=\"gear-option_arrow-right-icon\"><%= arrowRightIcon %></span>\n    <span class='gear-option_value'><%= currentText %></span>\n</button>\n";
+const buttonHtml = "<button class='gplayer-lite-btn gcore-skin-text-color gear-option' aria-haspopup=\"menu\">\n    <span class=\"gear-option_icon<%= isHd ? '' : ' hidden' %>\"><%= hdIcon %></span>\n    <span class=\"gear-option_label\"><%= i18n.t('quality') %></span>\n    <span class='gear-option_value'><%= currentText %></span>\n    <span class=\"gear-option_arrow-right-icon\"><%= arrowRightIcon %></span>\n</button>\n";
 
 const listHtml = "<button class=\"gplayer-lite-btn go-back gcore-skin-text-color\" id=\"level-selector-back-button\">\n    <span class=\"arrow-left-icon\"><%= arrowLeftIcon %></span>\n    <%= i18n.t('quality') %>\n</button>\n<ul class=\"gear-sub-menu quality-levels\" id=\"level-selector-menu\" role=\"menu\">\n    <% if (!removeAuto) { %>\n        <li>\n            <a href=\"#\" class='gear-sub-menu_btn gcore-skin-text-color' data-id=\"-1\" id=\"level_selector_auto\">\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= i18n.t('auto') %>\n            </a>\n        </li>\n    <% } %>\n    <% for (const item of levels.slice().reverse()) {\n        var disabled = maxLevel >= 0 && item.level > maxLevel\n        var checked = item.level === current\n    %>\n        <li class=\"<%= disabled ? ' disabled' : ''%><%=checked ? ' current' : ''%>\">\n            <a href=\"#\"\n                class=\"gear-sub-menu_btn gcore-skin-text-color<%= checked ? ' gcore-skin-active' : '' %>\"\n                data-id=\"<%= item.level %>\"\n                data-disabled=\"<%= disabled %>\"\n                data-checked=\"<%= checked %>\"\n                role=\"menuitemradio\"\n                id=\"level_selector_<%= item.width > item.height ? item.height : item.width %>\"\n            >\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= labels[item.level] %>\n            </a>\n        </li>\n    <% } %>\n</ul>\n";