@gcorevideo/player 2.22.5 → 2.22.7

package/dist/index.js

@@ -13091,8 +13091,8 @@ class DashPlayback extends BasePlayback {
         return super.destroy();
     }
     _updatePlaybackType() {
-        assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to update the playback type');
         const prevPlaybackType = this._playbackType;
+        // @ts-ignore
         this._playbackType = this._dash.isDynamic() ? Playback.LIVE : Playback.VOD;
         if (prevPlaybackType !== this._playbackType) {
             this._updateSettings();
@@ -43299,7 +43299,7 @@ class Player {
     }
 }
 
-var version$1 = "2.22.5";
+var version$1 = "2.22.7";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43843,7 +43843,6 @@ class BottomGear extends UICorePlugin {
             .find('#gear-sub-menu-wrapper')
             .hide();
         // TODO make non-clickable when there are no items
-        mediaControl.putElement('gear', this.$el);
         setTimeout(() => {
             this.trigger(GearEvents.RENDERED);
         }, 0);
@@ -43873,7 +43872,8 @@ class BottomGear extends UICorePlugin {
     }
     onMediaControlRendered() {
         trace(`${T$f} onMediaControlRendered`);
-        this.render();
+        const mediaControl = this.core.getPlugin('media_control');
+        mediaControl.putElement('gear', this.$el);
     }
 }
 
@@ -46738,32 +46738,6 @@ function strtimeToMiliseconds(str) {
     }
     return (h + m + s);
 }
-// TODO refactor
-function isFullscreen(el) {
-    const video = el.nodeName === "video" ? el : el.querySelector('video');
-    if (!video) {
-        return false;
-    }
-    if (Browser.isiOS) {
-        return FullscreenIOS.isFullscreen(video);
-    }
-    return !!(document.fullscreenElement);
-}
-const FullscreenIOS = {
-    isFullscreen: function (el) {
-        try {
-            // @ts-ignore
-            if (el.webkitDisplayingFullscreen !== undefined) {
-                // @ts-ignore
-                return !!(el.webkitDisplayingFullscreen);
-            }
-        }
-        catch (e) {
-            reportError(e);
-        }
-        return false;
-    }
-};
 function getPageX(event) {
     if (event.pageX) {
         return event.pageX;
@@ -47901,7 +47875,36 @@ function keyName(keyCode) {
     return KEY_NAMES_BY_CODE[keyCode] || '';
 }
 
-const mediaControlHTML = "<div class=\"media-control-background\" data-background></div>\n\n<div class=\"media-control-layer gcore-skin-bg-color\" data-controls>\n    <% var renderBar = function(name) { %>\n        <div class=\"bar-container\" data-<%= name %>>\n            <div class=\"bar-background\" data-<%= name %>>\n                <div class=\"bar-fill-1\" data-<%= name %>></div>\n                <div class=\"bar-fill-2 gcore-skin-main-color\" data-<%= name %>></div>\n                <div class=\"bar-hover\" data-<%= name %>></div>\n            </div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderSegmentedBar = function(name, segments) {\n        segments = segments || 10; %>\n    <div class=\"bar-container\" data-<%= name %>>\n        <div class=\"bar-background\" data-<%= name %>>\n            <div class=\"bar-fill-1 gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    </div>\n    <% }; %>\n    <% var renderDrawer = function(name, renderContent) { %>\n        <div class=\"drawer-container\" data-<%= name %>>\n            <div class=\"drawer-icon-container\" data-<%= name %>>\n                <div class=\"drawer-icon media-control-icon gcore-skin-button-color\" data-<%= name %>></div>\n                <span class=\"drawer-text\" data-<%= name %>></span>\n            </div>\n            <% renderContent(name); %>\n        </div>\n    <% }; %>\n    <% var renderIndicator = function(name) { %>\n        <div class=\"media-control-indicator gcore-skin-text-color\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderQuality = function(name) { %>\n        <div class=\"media-control-quality\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderNerd = function(name) { %>\n        <div class=\"media-control-nerd\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderMultiCamera = function(name) { %>\n        <div class=\"media-control-multicamera\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderClipsText = function(name) { %>\n\n        <div class=\"media-clip-container gcore-skin-text-color\" data-<%= name %>>\n            <div class=\"media-clip-point gcore-skin-text-color\" data-<%= name %>>•</div>\n            <div class=\"media-clip-text gcore-skin-text-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderVR = function(name) { %>\n        <div class=\"media-control-vr\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderButton = function(name) { %>\n        <button type=\"button\" class=\"media-control-button media-control-icon gcore-skin-button-color\" data-<%= name %>\n                aria-label=\"<%= name %>\"></button>\n    <% }; %>\n\n    <% var templates = {\n        bar: renderBar,\n        segmentedBar: renderSegmentedBar,\n    };\n    var render = function (settingsList) {\n        settingsList.forEach(function (setting) {\n\n            if (setting === \"seekbar\") {\n                renderBar(setting);\n            } else if (setting === \"volume\") {\n                renderDrawer(setting, settings.volumeBarTemplate ? templates[settings.volumeBarTemplate] : function (name) {\n                    return renderSegmentedBar(name);\n                });\n            } else if (setting === \"duration\" || setting === \"position\") {\n                renderIndicator(setting);\n            } else if (setting === \"quality\") {\n                renderQuality(setting)\n            } else if (setting === \"nerd\") {\n                renderNerd(setting)\n            } else if (setting === \"multicamera\") {\n                renderMultiCamera(setting)\n            } else if (setting === \"vr\") {\n                renderVR(setting)\n            } else if (setting === \"clipsText\") {\n                renderClipsText(setting)\n            } else if ([\"playpause\", \"playstop\", \"fullscreen\"].includes(setting)) {\n                renderButton(setting);\n            }\n        });\n    }; %>\n    <% if (settings.left && settings.left.length) { %>\n        <div class=\"media-control-left-panel\" data-media-control>\n            <% render(settings.left); %>\n        </div>\n    <% } %>\n    <% if (settings.default && settings.default.length) { %>\n        <div class=\"media-control-center-panel\" data-media-control>\n            <% render(settings.default); %>\n        </div>\n    <% } %>\n    <% if (settings.right && settings.right.length) { %>\n        <div class=\"media-control-right-panel\" data-media-control>\n            <% render(settings.right); %>\n        </div>\n    <% } %>\n</div>\n";
+const fullscreenEnabled = Utils.Fullscreen.fullscreenEnabled;
+function isFullscreen(el) {
+    const video = el.nodeName === 'video'
+        ? el
+        : el.querySelector('video');
+    if (!video) {
+        return false;
+    }
+    if (Browser.isiOS) {
+        return FullscreenIOS.isFullscreen(video);
+    }
+    return !!document.fullscreenElement;
+}
+const FullscreenIOS = {
+    isFullscreen: function (el) {
+        try {
+            // @ts-ignore
+            if (el.webkitDisplayingFullscreen !== undefined) {
+                // @ts-ignore
+                return !!el.webkitDisplayingFullscreen;
+            }
+        }
+        catch (e) {
+            reportError(e);
+        }
+        return false;
+    },
+};
+
+const mediaControlHTML = "<div class=\"media-control-background\" data-background></div>\n\n<div class=\"media-control-layer gcore-skin-bg-color\" data-controls>\n    <% var renderBar = function(name) { %>\n        <div class=\"bar-container\" data-<%= name %>>\n            <div class=\"bar-background\" data-<%= name %>>\n                <div class=\"bar-fill-1\" data-<%= name %>></div>\n                <div class=\"bar-fill-2 gcore-skin-main-color\" data-<%= name %>></div>\n                <div class=\"bar-hover\" data-<%= name %>></div>\n            </div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderSegmentedBar = function(name, segments) {\n        segments = segments || 10; %>\n    <div class=\"bar-container\" data-<%= name %>>\n        <div class=\"bar-background\" data-<%= name %>>\n            <div class=\"bar-fill-1 gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    </div>\n    <% }; %>\n    <% var renderDrawer = function(name, renderContent) { %>\n        <div class=\"drawer-container\" data-<%= name %>>\n            <div class=\"drawer-icon-container\" data-<%= name %>>\n                <div class=\"drawer-icon media-control-icon gcore-skin-button-color\" data-<%= name %>></div>\n                <span class=\"drawer-text\" data-<%= name %>></span>\n            </div>\n            <% renderContent(name); %>\n        </div>\n    <% }; %>\n    <% var renderIndicator = function(name) { %>\n        <div class=\"media-control-indicator gcore-skin-text-color\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderQuality = function(name) { %>\n        <div class=\"media-control-quality\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderNerd = function(name) { %>\n        <div class=\"media-control-nerd\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderMultiCamera = function(name) { %>\n        <div class=\"media-control-multicamera\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderClipsText = function(name) { %>\n        <div class=\"media-clip-container gcore-skin-text-color\" data-<%= name %>>\n            <div class=\"media-clip-point gcore-skin-text-color\" data-<%= name %>>•</div>\n            <div class=\"media-clip-text gcore-skin-text-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderVR = function(name) { %>\n        <div class=\"media-control-vr\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderButton = function(name) { %>\n        <button type=\"button\" class=\"media-control-button media-control-icon gcore-skin-button-color\" data-<%= name %>\n            aria-label=\"<%= name %>\"></button>\n    <% }; %>\n\n    <% var templates = {\n        bar: renderBar,\n        segmentedBar: renderSegmentedBar,\n    };\n    var render = function (settingsList) {\n        settingsList.forEach(function (setting) {\n\n            if (setting === \"seekbar\") {\n                renderBar(setting);\n            } else if (setting === \"volume\") {\n                renderDrawer(setting, settings.volumeBarTemplate ? templates[settings.volumeBarTemplate] : function (name) {\n                    return renderSegmentedBar(name);\n                });\n            } else if (setting === \"duration\" || setting === \"position\") {\n                renderIndicator(setting);\n            } else if (setting === \"quality\") {\n                renderQuality(setting)\n            } else if (setting === \"nerd\") {\n                renderNerd(setting)\n            } else if (setting === \"multicamera\") {\n                renderMultiCamera(setting)\n            } else if (setting === \"vr\") {\n                renderVR(setting)\n            } else if (setting === \"clipsText\") {\n                renderClipsText(setting)\n            } else if ([\"playpause\", \"playstop\", \"fullscreen\"].includes(setting)) {\n                renderButton(setting);\n            }\n        });\n    }; %>\n    <% if (settings.left && settings.left.length) { %>\n        <div class=\"media-control-left-panel\" data-media-control>\n            <% render(settings.left); %>\n        </div>\n    <% } %>\n    <% if (settings.default && settings.default.length) { %>\n        <div class=\"media-control-center-panel\" data-media-control>\n            <% render(settings.default); %>\n        </div>\n    <% } %>\n    <% if (settings.right && settings.right.length) { %>\n        <div class=\"media-control-right-panel\" data-media-control>\n            <% render(settings.right); %>\n        </div>\n    <% } %>\n</div>\n";
 
 const volumeMaxIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M14.187 7.71405C13.759 8.06405 13.697 8.69307 14.046 9.12107C14.662 9.87207 15 10.8941 15 11.9961C15 13.0991 14.662 14.1201 14.046 14.8711C13.697 15.2991 13.759 15.9291 14.187 16.2781C14.373 16.4311 14.597 16.5051 14.82 16.5051C15.109 16.5051 15.396 16.3801 15.594 16.1391C16.501 15.0301 17 13.5601 17 11.9961C17 10.4331 16.501 8.96207 15.594 7.85407C15.245 7.42707 14.614 7.36405 14.187 7.71405ZM19.772 5.14408C19.443 4.70008 18.816 4.60907 18.374 4.94007C17.931 5.27007 17.839 5.89605 18.169 6.33905C19.367 7.94705 20 9.90307 20 11.9961C20 14.0891 19.367 16.0451 18.169 17.6531C17.839 18.0971 17.931 18.7231 18.374 19.0531C18.553 19.1871 18.762 19.2511 18.97 19.2511C19.275 19.2511 19.576 19.1121 19.772 18.8491C21.23 16.8921 22 14.5231 22 11.9961C22 9.47007 21.23 7.10108 19.772 5.14408ZM12 3.85108V20.1421C12 20.4881 11.793 20.7971 11.473 20.9291C11.368 20.9721 11.258 20.9921 11.149 20.9921C10.926 20.9921 10.708 20.9031 10.544 20.7371L6.317 16.4431C6.038 16.1591 5.648 15.9961 5.249 15.9961H3.5C2.673 15.9961 2 15.3231 2 14.4961V9.49607C2 8.66907 2.673 7.99607 3.5 7.99607H5.249C5.648 7.99607 6.038 7.83308 6.317 7.54908L10.544 3.25507C10.787 3.00807 11.151 2.93206 11.473 3.06406C11.793 3.19506 12 3.50408 12 3.85108Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
@@ -47915,19 +47918,22 @@ const fullscreenOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"
 // Use of this source code is governed by a BSD-style
 // license that can be found in the {@link https://github.com/clappr/clappr-plugins/blob/master/LICENSE | LICENSE}.
 const DEFAULT_SETTINGS = {
-    left: [],
     right: [
+        'audiotracks',
+        'cc',
+        // 'dvr',
+        // 'duration',
         'fullscreen',
-        'pip',
         'gear',
-        'cc',
         'multicamera',
-        // 'playbackrate',
+        'pip',
         'vr',
-        'audiotracks',
-    ],
+    ]};
+const INITIAL_SETTINGS = {
+    left: [],
+    right: [],
     default: [],
-    seekEnabled: true,
+    seekEnabled: false,
 };
 const T$a = 'plugins.media_control';
 const LEFT_ORDER = [
@@ -47950,11 +47956,17 @@ function orderByOrderPattern(arr, order) {
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
+ *
+ * Configuration options:
+ *
+ * - `mediaControl`: {@link MediaControlSettings} - specifies the allowed media control elements in each area
+ *
+ * - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
+ *
+ * - `chromeless`: boolean
  */
 class MediaControl extends UICorePlugin {
     // private advertisementPlaying = false
-    customAreaElements = {};
-    customAreaHandler;
     buttonsColor = null;
     currentDurationValue = 0;
     currentPositionValue = 0;
@@ -47965,7 +47977,7 @@ class MediaControl extends UICorePlugin {
     displayedSeekBarPercentage = null;
     draggingSeekBar = false;
     draggingVolumeBar = false;
-    fullScreenOnVideoTagSupported = null;
+    fullScreenOnVideoTagSupported = false;
     hideId = null;
     hideVolumeId = null;
     intendedVolume = 100;
@@ -47973,9 +47985,10 @@ class MediaControl extends UICorePlugin {
     kibo;
     lastMouseX = 0;
     lastMouseY = 0;
+    needsUpdate = false;
     persistConfig;
     rendered = false;
-    settings = DEFAULT_SETTINGS;
+    settings = INITIAL_SETTINGS;
     userDisabled = false;
     userKeepVisible = false;
     verticalVolume = false;
@@ -47986,7 +47999,6 @@ class MediaControl extends UICorePlugin {
     $multiCameraSelector = null;
     $playPauseToggle = null;
     $playStopToggle = null;
-    $playbackRate = null;
     $position = null;
     $seekBarContainer = null;
     $seekBarHover = null;
@@ -48200,7 +48212,8 @@ class MediaControl extends UICorePlugin {
         const video = this.core.activePlayback?.el;
         // video.webkitSupportsFullscreen is deprecated but iOS appears to only use this
         // see https://github.com/clappr/clappr/issues/1127
-        if (!Fullscreen.fullscreenEnabled() && video.webkitSupportsFullscreen) {
+        if (!fullscreenEnabled() && video.webkitSupportsFullscreen) {
+            // TODO sort out, use single utility function
             this.fullScreenOnVideoTagSupported = true;
         }
         this.updateSettings();
@@ -48432,22 +48445,21 @@ class MediaControl extends UICorePlugin {
         }
     }
     onActiveContainerChanged() {
-        this.fullScreenOnVideoTagSupported = null;
+        this.fullScreenOnVideoTagSupported = false;
         // set the new container to match the volume of the last one
         this.setInitialVolume();
         this.changeTogglePlay();
         this.bindContainerEvents();
+        // TODO remove?
         this.updateSettings();
-        // TODO remove
-        this.core.activeContainer.trigger(Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.core.activeContainer.isDvrInUse());
-        // TODO test
+        // TODO test, figure out if this is needed
         if (this.core.activeContainer.mediaControlDisabled) {
             this.disable();
         }
         else {
             this.enable();
         }
-        this.trigger(Events$1.MEDIACONTROL_CONTAINERCHANGED); // TODO check
+        this.trigger(Events$1.MEDIACONTROL_CONTAINERCHANGED); // TODO figure out
         if (this.core.activeContainer.$el) {
             this.core.activeContainer.$el.addClass('container-skin-1');
         }
@@ -48618,11 +48630,13 @@ class MediaControl extends UICorePlugin {
         }
     }
     updateSettings() {
+        trace(`${T$a} updateSettings`, { settings: this.settings });
         const newSettings = $.extend(true, {
             left: [],
             default: [],
             right: [],
         }, this.core.activeContainer.settings);
+        trace(`${T$a} updateSettings`, { newSettings });
         // TODO make order controlled via CSS
         newSettings.left = orderByOrderPattern([...newSettings.left, 'clipsText', 'volume'], LEFT_ORDER);
         if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
@@ -48630,10 +48644,15 @@ class MediaControl extends UICorePlugin {
             newSettings.left.push('dvr');
         }
         // actual order of the items appear rendered is controlled by CSS
-        newSettings.right = DEFAULT_SETTINGS.right;
+        newSettings.right = DEFAULT_SETTINGS.right; // TODO get from the options
         if ((!this.fullScreenOnVideoTagSupported &&
-            !Fullscreen.fullscreenEnabled()) ||
+            !fullscreenEnabled()) ||
             this.options.fullscreenDisable) {
+            trace(`${T$a} updateSettings removing fullscreen`, {
+                supported: this.fullScreenOnVideoTagSupported,
+                enabled: Fullscreen.fullscreenEnabled(),
+                optionsDisable: this.options.fullscreenDisable,
+            });
             // remove fullscreen from settings if it is not available
             removeArrayItem(newSettings.default, 'fullscreen');
             removeArrayItem(newSettings.left, 'fullscreen');
@@ -48648,6 +48667,7 @@ class MediaControl extends UICorePlugin {
         const settingsChanged = serializeSettings(this.settings) !== serializeSettings(newSettings);
         if (settingsChanged) {
             this.settings = newSettings;
+            this.needsUpdate = true;
             this.render();
         }
     }
@@ -48672,7 +48692,6 @@ class MediaControl extends UICorePlugin {
         this.$volumeBarBackground = this.$el.find('.bar-background[data-volume]');
         this.$volumeBarFill = this.$el.find('.bar-fill-1[data-volume]');
         this.$volumeBarScrubber = this.$el.find('.bar-scrubber[data-volume]');
-        this.$playbackRate = this.$el.find('.media-control-playbackrate[data-playbackrate]');
         this.$multiCameraSelector = this.$el.find('.media-control-multicamera[data-multicamera]');
         this.$clipText = this.$el.find('.media-clip-text[data-clipstext]'); // TODO
         this.$clipTextContainer = this.$el.find('.media-clip-container[data-clipstext]');
@@ -48704,8 +48723,6 @@ class MediaControl extends UICorePlugin {
                 return null;
             case 'clipText':
                 return this.$clipText;
-            case 'playbackRate':
-                return this.$playbackRate;
             case 'seekBarContainer':
                 return this.$seekBarContainer;
         }
@@ -48729,13 +48746,6 @@ class MediaControl extends UICorePlugin {
             return;
         }
     }
-    handleCustomArea(handler) {
-        this.customAreaHandler = handler;
-        Object.entries(this.customAreaElements).forEach(([name, element]) => {
-            handler(name, element);
-        });
-        this.customAreaElements = {};
-    }
     /**
      * Toggle the visibility of a media control element
      * @param name - The name of the media control element
@@ -48833,8 +48843,8 @@ class MediaControl extends UICorePlugin {
         keys.forEach((i) => {
             this.bindKeyAndShow(i, () => {
                 this.settings.seekEnabled &&
-                    this.container &&
-                    this.container.seekPercentage(Number(i) * 10);
+                    this.core.activeContainer &&
+                    this.core.activeContainer.seekPercentage(Number(i) * 10);
                 return false;
             });
         });
@@ -48900,10 +48910,12 @@ class MediaControl extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$a} render`);
+        trace(`${T$a} render`, { needsUpdate: this.needsUpdate });
+        if (!this.needsUpdate) {
+            return this;
+        }
         const timeout = this.options.hideMediaControlDelay || 2000;
-        const html = MediaControl.template({ settings: this.settings ?? {} });
-        this.$el.html(html);
+        this.$el.html(MediaControl.template({ settings: this.settings }));
         // const style = Styler.getStyleFor(mediaControlStyle, { baseUrl: this.options.baseUrl });
         // this.$el.append(style[0]);
         this.createCachedElements();
@@ -48949,7 +48961,8 @@ class MediaControl extends UICorePlugin {
         this.core.$el.append(this.el);
         this.rendered = true;
         this.updateVolumeUI();
-        // TODO setTimeout
+        this.needsUpdate = false;
+        // TODO setTimeout?
         this.trigger(Events$1.MEDIACONTROL_RENDERED);
         return this;
     }
@@ -49015,6 +49028,7 @@ class MediaControl extends UICorePlugin {
             element.el.css({ 'pointer-events': 'none' });
         });
     }
+    // TODO drop
     isSeekEnabledForHtml5Playback() {
         if (this.core.getPlaybackType() === Playback.LIVE) {
             return this.options.dvrEnabled;
@@ -49572,12 +49586,11 @@ const T$7 = 'plugins.playback_rate';
  *       { value: 1, label: '1x' },
  *     ],
  *     defaultValue: 1,
- *   } as PlaybackRateSettings,
+ *   },
  * })
  * ```
  */
 class PlaybackRate extends UICorePlugin {
-    playbackRates = DEFAULT_PLAYBACK_RATES;
     // Saved when an ad starts to restore after it finishes
     // private prevSelectedRate: string | undefined
     selectedRate = DEFAULT_PLAYBACK_RATE;
@@ -49597,10 +49610,12 @@ class PlaybackRate extends UICorePlugin {
     static listTemplate = tmpl(listHtml$1);
     constructor(core) {
         super(core);
-        this.playbackRates =
-            core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
-        this.selectedRate =
-            core.options.playbackRate?.defaultValue || DEFAULT_PLAYBACK_RATE;
+        if (this.core.options.playbackRate?.defaultValue) {
+            this.setSelectedRate(this.core.options.playbackRate.defaultValue);
+        }
+    }
+    get playbackRates() {
+        return this.core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
     }
     /**
      * @internal
@@ -49648,10 +49663,15 @@ class PlaybackRate extends UICorePlugin {
     }
     onGearRendered() {
         trace(`${T$7} onGearRendered`);
-        this.addGearItem();
+        this.mount();
     }
-    addGearItem() {
-        trace(`${T$7} addGearItem`);
+    mount() {
+        trace(`${T$7} mount`, {
+            shouldMount: this.shouldMount(),
+        });
+        if (!this.shouldMount()) {
+            return;
+        }
         this.core
             .getPlugin('bottom_gear')
             ?.addItem('rate', this.$el)
@@ -49684,7 +49704,7 @@ class PlaybackRate extends UICorePlugin {
             });
         }
     }
-    shouldRender() {
+    shouldMount() {
         if (!this.core.activePlayback) {
             return false;
         }
@@ -49699,11 +49719,8 @@ class PlaybackRate extends UICorePlugin {
      */
     render() {
         trace(`${T$7} render`, {
-            shouldRender: this.shouldRender(),
+            shouldMount: this.shouldMount(),
         });
-        if (!this.shouldRender()) {
-            return this;
-        }
         this.$el.html(PlaybackRate.listTemplate({
             arrowLeftIcon,
             checkIcon,
@@ -49711,7 +49728,7 @@ class PlaybackRate extends UICorePlugin {
             i18n: this.core.i18n,
             playbackRates: this.playbackRates,
         }));
-        this.addGearItem();
+        this.mount();
         return this;
     }
     // private onStartAd() {
@@ -49734,11 +49751,21 @@ class PlaybackRate extends UICorePlugin {
             this.resetPlaybackRate();
         }
         else {
-            this.setSelectedRate(this.selectedRate);
+            this.syncRate();
         }
     }
+    syncRate() {
+        trace(`${T$7} syncRate`, {
+            selectedRate: this.selectedRate,
+        });
+        this.core.activePlayback?.setPlaybackRate(this.selectedRate);
+    }
     resetPlaybackRate() {
-        this.setSelectedRate(DEFAULT_PLAYBACK_RATE);
+        trace(`${T$7} resetPlaybackRate`, {
+            selectedRate: this.selectedRate,
+        });
+        this.core.activePlayback?.setPlaybackRate(DEFAULT_PLAYBACK_RATE);
+        this.selectedRate = DEFAULT_PLAYBACK_RATE;
     }
     onStop() { }
     onSelect(event) {
@@ -49746,8 +49773,6 @@ class PlaybackRate extends UICorePlugin {
         const rate = parseFloat(event.currentTarget.dataset.rate || '');
         if (rate) {
             this.setSelectedRate(rate);
-            this.highlightCurrentRate();
-            this.updateGearOptionLabel();
         }
         return false;
     }
@@ -49757,14 +49782,23 @@ class PlaybackRate extends UICorePlugin {
         }, 0);
     }
     setSelectedRate(rate) {
-        this.core.activePlayback?.setPlaybackRate(rate);
+        if (rate === this.selectedRate) {
+            return;
+        }
         this.selectedRate = rate;
+        this.syncRate();
+        this.highlightCurrentRate();
+        this.updateGearOptionLabel();
     }
     getTitle() {
-        return (this.playbackRates.find((r) => r.value === this.selectedRate)?.label ||
-            `x${this.selectedRate}`);
+        const rate = this.selectedRate;
+        return (this.playbackRates.find((r) => r.value === rate)?.label ||
+            `x${rate}`);
     }
     highlightCurrentRate() {
+        trace(`${T$7} highlightCurrentRate`, {
+            selectedRate: this.selectedRate,
+        });
         this.allRateElements().removeClass('current');
         this.allRateElements().find('a').removeClass('gcore-skin-active');
         this.rateElement(this.selectedRate)
@@ -49773,8 +49807,10 @@ class PlaybackRate extends UICorePlugin {
             .addClass('gcore-skin-active');
     }
     updateGearOptionLabel() {
-        trace(`${T$7} updateGearOptionLabel`);
-        this.addGearItem();
+        trace(`${T$7} updateGearOptionLabel`, {
+            selectedRate: this.selectedRate,
+        });
+        this.mount();
     }
 }