@gcorevideo/player 2.22.4 → 2.22.7

package/dist/plugins/index.js

@@ -10278,7 +10278,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);
@@ -10306,7 +10305,8 @@ class BottomGear extends UICorePlugin {
         this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hide);
     }
     onMediaControlRendered() {
-        this.render();
+        const mediaControl = this.core.getPlugin('media_control');
+        mediaControl.putElement('gear', this.$el);
     }
 }
 
@@ -13153,31 +13153,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) {
-        }
-        return false;
-    }
-};
 function getPageX(event) {
     if (event.pageX) {
         return event.pageX;
@@ -13345,7 +13320,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.22.4";
+var version$1 = "2.22.7";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -13927,397 +13902,125 @@ class GoogleAnalytics extends ContainerPlugin {
     }
 }
 
-const buttonHtml$2 = "<button class='gplayer-lite-btn gcore-skin-text-color gear-option'>\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 listHtml$1 = "<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\" id=\"level-selector-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        <li class=\"<%= maxLevel >= 0 && item.level > maxLevel ? 'disabled ' : ''%><%=item.level === current ? 'current ' : ''%>\">\n            <a href=\"#\"\n                class=\"gear-sub-menu_btn gcore-skin-text-color<%= item.level === current ? ' gcore-skin-active' : '' %>\"\n                data-id=\"<%= item.level %>\"\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";
-
-const hdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M14.9562 8.22232H13.9961V15.1873H14.9562C15.8914 15.1873 16.766 14.8253 17.4195 14.1676C18.0786 13.5037 18.4415 12.6281 18.4415 11.7026C18.4415 9.7837 16.8781 8.22253 14.9561 8.22253L14.9562 8.22232Z\"\n    fill=\"#C9C9C9\"/>\n  <path\n    d=\"M22.0801 4H1.91994C0.859222 4 0 4.86406 0 5.91994V17.4878C0 18.5437 0.859222 19.4078 1.91994 19.4078H22.0801C23.1408 19.4078 24 18.5437 24 17.4878V5.91994C24 4.86406 23.1408 4 22.0801 4ZM10.3975 15.3473C10.3975 15.6124 10.1827 15.8272 9.91754 15.8272C9.65216 15.8272 9.43761 15.6122 9.43761 15.3473V12.0239H5.55956V15.3473C5.55956 15.6124 5.34481 15.8272 5.07963 15.8272C4.81425 15.8272 4.5997 15.6122 4.5997 15.3473L4.59949 7.74042C4.59949 7.47524 4.81425 7.26049 5.07943 7.26049C5.34481 7.26049 5.55936 7.47544 5.55936 7.74042V11.0636H9.43741V7.74042C9.43741 7.47524 9.65216 7.26049 9.91734 7.26049C10.1827 7.26049 10.3973 7.47544 10.3973 7.74042L10.3975 15.3473ZM18.1005 14.8438C17.2652 15.6844 16.1486 16.1472 14.9561 16.1472H13.5161C13.2507 16.1472 13.0361 15.9323 13.0361 15.6673V7.74263C13.0361 7.47745 13.2509 7.26269 13.5161 7.26269H14.9561C17.4072 7.26269 19.4013 9.25438 19.4013 11.7027C19.4013 12.8835 18.9392 13.9991 18.1005 14.844V14.8438Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
-
-const arrowRightIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M8.70725 20.7073C8.51225 20.9023 8.25625 21.0002 8.00025 21.0002C7.74425 21.0002 7.48825 20.9023 7.29325 20.7073C6.90225 20.3162 6.90225 19.6842 7.29325 19.2932L14.5863 12.0002L7.29325 4.70725C6.90225 4.31625 6.90225 3.68425 7.29325 3.29325C7.68425 2.90225 8.31625 2.90225 8.70725 3.29325L16.7073 11.2933C17.0983 11.6842 17.0983 12.3162 16.7073 12.7072L8.70725 20.7073Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
-
-const arrowLeftIcon = "<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=\"M16.7073 19.2932C17.0983 19.6842 17.0983 20.3162 16.7073 20.7073C16.5123 20.9023 16.2563 21.0002 16.0003 21.0002C15.7443 21.0002 15.4882 20.9023 15.2933 20.7073L7.29325 12.7072C6.90225 12.3162 6.90225 11.6842 7.29325 11.2933L15.2933 3.29325C15.6842 2.90225 16.3163 2.90225 16.7073 3.29325C17.0983 3.68425 17.0983 4.31625 16.7073 4.70725L9.41425 12.0002L16.7073 19.2932Z\"\n        fill=\"#C9C9C9\"/>\n</svg>\n";
+function calculateSize(original) {
+    const transformed = {
+        media: {
+            width: 0,
+            height: 0
+        },
+        letterboxing: {
+            horizontal: 0,
+            vertical: 0
+        }
+    };
+    // Freeze viewport height and scale video to fit vertically
+    transformed.media.width = (original.media.width * original.dom.height / original.media.height);
+    transformed.media.height = (original.media.height * transformed.media.width / original.media.width);
+    // If it didnt't fit, freeze viewport width and scale video to fit horizontally
+    if (transformed.media.width > original.dom.width) {
+        transformed.media.height = (original.media.height * original.dom.width / original.media.width);
+        transformed.media.width = (original.media.width * transformed.media.height / original.media.height);
+    }
+    // Calculate paddings for vertical or horizontal letterboxing
+    if (transformed.media.width < original.dom.width) {
+        transformed.letterboxing.horizontal = Math.floor((original.dom.width - transformed.media.width) / 2);
+    }
+    else {
+        if (transformed.media.height < original.dom.height) {
+            transformed.letterboxing.vertical = Math.floor((original.dom.height - transformed.media.height) / 2);
+        }
+    }
+    transformed.media.width = Math.floor(transformed.media.width);
+    transformed.media.height = Math.floor(transformed.media.height);
+    return transformed;
+}
 
-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 logoHTML = "<div class=\"clappr-logo control-need-disable\">\n    <img class=\"clappr-logo-img\"/>\n</div>\n";
 
-const T$a = 'plugins.level_selector';
-const VERSION$4 = '2.19.4';
 /**
- * `PLUGIN` that provides a UI to select the desired quality level of the playback.
+ * `PLUGIN` that adds custom logo to the player.
  * @beta
- *
- * @remarks
- * Depends on:
- *
- * - {@link MediaControl}
- *
- * - {@link BottomGear}
- *
- * 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}
- *
- * @example
- * ```ts
- * new Player({
- *   levelSelector: {
- *     restrictResolution: 360,
- *     labels: { 360: 'SD', 720: 'HD' },
- *   },
- * })
- * ```
  */
-class LevelSelector extends UICorePlugin {
-    levels = [];
-    levelLabels = [];
-    removeAuto = false;
-    isHd = false;
-    currentText = '';
-    selectedLevelId = -1;
-    static buttonTemplate = tmpl(buttonHtml$2);
-    static listTemplate = tmpl(listHtml$1);
-    /**
-     * @internal
-     */
+class Logo extends UIContainerPlugin {
+    hasStartedPlaying = false;
+    $logoContainer = null;
     get name() {
-        return 'level_selector';
+        return 'logo';
     }
-    /**
-     * @internal
-     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    /**
-     * @internal
-     */
-    static get version() {
-        return VERSION$4;
+    get template() {
+        return tmpl(logoHTML);
     }
-    /**
-     * @internal
-     */
     get attributes() {
         return {
-            class: 'level-selector',
-            'data-level-selector': '',
+            'class': 'player-logo',
+            'data-logo': ''
         };
     }
-    get events() {
-        return {
-            'click .gear-sub-menu_btn': 'onSelect',
-            'click .go-back': 'goBack',
-        };
+    get shouldRender() {
+        return !!this.options.logo && !!this.options.logo.path;
     }
-    /**
-     * @internal
-     */
     bindEvents() {
-        this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady);
-        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
+        window.addEventListener('resize', this.setPosition);
+        this.listenTo(this.container, Events.CONTAINER_RESIZE, this.setPosition);
+        this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop);
+        this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay);
+        this.listenTo(this.container, Events.CONTAINER_LOADEDMETADATA, this.setPosition);
     }
-    onCoreReady() {
-        const gear = this.core.getPlugin('bottom_gear');
-        assert(gear, 'bottom_gear plugin is required');
-        this.currentText = this.core.i18n.t('auto');
-        this.listenTo(gear, GearEvents.RENDERED, this.onGearRendered);
+    stopListening() {
+        window.removeEventListener('resize', this.setPosition);
+        // @ts-ignore
+        return super.stopListening();
     }
-    onGearRendered() {
-        this.render();
+    onPlay() {
+        this.hasStartedPlaying = true;
+        this.setPosition();
     }
-    onActiveContainerChange() {
-        this.removeAuto = false;
-        this.isHd = false;
-        const activePlayback = this.core.activePlayback;
-        this.listenTo(activePlayback, Events.PLAYBACK_LEVELS_AVAILABLE, this.onLevelsAvailable);
-        this.listenTo(activePlayback, Events.PLAYBACK_LEVEL_SWITCH_START, this.onLevelSwitchStart);
-        this.listenTo(activePlayback, Events.PLAYBACK_LEVEL_SWITCH_END, this.onLevelSwitchEnd);
-        this.listenTo(activePlayback, Events.PLAYBACK_BITRATE, this.onBitrate);
-        this.listenTo(activePlayback, Events.PLAYBACK_STOP, this.onStop);
-        this.listenTo(activePlayback, Events.PLAYBACK_HIGHDEFINITIONUPDATE, (isHd) => {
-            this.isHd = isHd;
-            this.updateHd();
-        });
-        if (activePlayback.levels?.length > 0) {
-            this.onLevelsAvailable(activePlayback.levels);
-        }
+    onStop() {
+        this.hasStartedPlaying = false;
+        this.update();
     }
-    updateHd() {
-        if (this.isHd) {
-            this.$el.find('.gear-option_hd-icon').removeClass('hidden');
+    update() {
+        if (!this.shouldRender) {
+            return;
+        }
+        if (!this.hasStartedPlaying) {
+            this.$el.hide();
         }
         else {
-            this.$el.find('.gear-option_hd-icon').addClass('hidden');
+            this.$el.show();
         }
     }
-    onStop() {
-        this.listenToOnce(this.core.activePlayback, Events.PLAYBACK_PLAY, () => {
-            if (this.core.activePlayback.getPlaybackType() === 'live') {
-                if (this.selectedLevelId !== -1) {
-                    this.core.activePlayback.currentLevel = this.selectedLevelId;
-                }
-            }
-        });
-    }
-    shouldRender() {
-        const activePlayback = this.core.activePlayback;
-        if (!activePlayback) {
-            return false;
-        }
-        const supportsCurrentLevel = 'currentLevel' in activePlayback;
-        if (!supportsCurrentLevel) {
-            return false;
+    constructor(container) {
+        super(container);
+        this.setPosition = this.setPosition.bind(this);
+        this.hasStartedPlaying = false;
+        if (!this.options.logo) {
+            this.disable();
+            return;
         }
-        // Only care if we have at least 2 to choose from
-        return !!(this.levels && this.levels.length > 1);
+        this.render();
     }
-    /**
-     * @internal
-     */
     render() {
-        if (!this.shouldRender()) {
+        if (!this.shouldRender) {
             return this;
         }
-        this.renderDropdown();
-        this.updateButton();
+        this.$el.html(this.template());
+        this.setLogoImgAttrs();
+        this.container.$el.append(this.$el.get(0));
+        this.update();
         return this;
     }
-    renderDropdown() {
-        this.$el.html(LevelSelector.listTemplate({
-            arrowLeftIcon,
-            checkIcon,
-            current: this.selectedLevelId,
-            labels: this.levelLabels,
-            levels: this.levels,
-            maxLevel: this.maxLevel,
-            removeAuto: this.removeAuto,
-            i18n: this.core.i18n,
-        }));
-    }
-    updateButton() {
-        this.core.getPlugin('bottom_gear')
-            ?.addItem('quality', this.$el)
-            .html(LevelSelector.buttonTemplate({
-            arrowRightIcon,
-            currentText: this.currentText,
-            isHd: this.isHd,
-            hdIcon,
-            i18n: this.core.i18n,
-        }));
-    }
-    get maxLevel() {
-        const maxRes = this.core.options.levelSelector?.restrictResolution;
-        return maxRes
-            ? this.levels.find((level) => (level.height > level.width ? level.width : level.height) ===
-                maxRes)?.level ?? -1
-            : -1;
-    }
-    onLevelsAvailable(levels) {
-        const maxResolution = this.core.options.levelSelector?.restrictResolution;
-        this.levels = levels;
-        this.makeLevelsLabels();
-        if (maxResolution) {
-            this.removeAuto = true;
-            const initialLevel = levels
-                .filter((level) => (level.width > level.height ? level.height : level.width) <=
-                maxResolution)
-                .pop();
-            this.setLevel(initialLevel?.level ?? 0);
-        }
-        this.render();
-    }
-    makeLevelsLabels() {
-        const labels = this.core.options.levelSelector?.labels ?? {};
-        this.levelLabels = [];
-        for (const level of this.levels) {
-            const ll = level.width > level.height ? level.height : level.width;
-            const label = labels[ll] || `${ll}p`;
-            this.levelLabels.push(label);
-        }
-    }
-    onSelect(event) {
-        const selectedLevel = parseInt(event.currentTarget?.dataset?.id ?? '-1', 10);
-        this.setLevel(selectedLevel);
-        event.stopPropagation();
-        event.preventDefault();
-        return false;
-    }
-    goBack() {
-        this.core.getPlugin('bottom_gear').refresh();
-    }
-    setLevel(index) {
-        this.selectedLevelId = index;
-        this.core.activePlayback.currentLevel = this.selectedLevelId;
-        this.highlightCurrentLevel();
-    }
-    allLevelElements() {
-        return this.$('#level-selector-menu li');
-    }
-    levelElement(id = -1) {
-        return this.$(`#level-selector-menu a[data-id="${id}"]`).parent();
-    }
-    onLevelSwitchStart() {
-        this.levelElement(this.selectedLevelId).addClass('changing');
-    }
-    onLevelSwitchEnd() {
-        this.levelElement(this.selectedLevelId).removeClass('changing');
-    }
-    updateText(level) {
-        this.currentText = this.getLevelLabel(level);
-        this.updateButton();
-    }
-    getLevelLabel(id) {
-        if (id < 0) {
-            return this.core.i18n.t('auto');
-        }
-        const index = this.levels.findIndex((l) => l.level === id);
-        if (index < 0) {
-            return this.core.i18n.t('auto');
-        }
-        return this.levelLabels[index] ?? formatLevelLabel(this.levels[index]);
-    }
-    onBitrate(info) {
-        this.highlightCurrentLevel();
-    }
-    highlightCurrentLevel() {
-        trace(`${T$a} highlightCurrentLevel`, {
-            selectedLevelId: this.selectedLevelId,
-        });
-        this.allLevelElements()
-            .removeClass('current')
-            .find('a')
-            .removeClass('gcore-skin-active');
-        const currentLevelElement = this.levelElement(this.selectedLevelId);
-        currentLevelElement
-            .addClass('current')
-            .find('a')
-            .addClass('gcore-skin-active');
-        this.updateText(this.selectedLevelId);
-    }
-}
-function formatLevelLabel(level) {
-    const h = level.width > level.height ? level.height : level.width;
-    return `${h}p`;
-}
-
-function calculateSize(original) {
-    const transformed = {
-        media: {
-            width: 0,
-            height: 0
-        },
-        letterboxing: {
-            horizontal: 0,
-            vertical: 0
-        }
-    };
-    // Freeze viewport height and scale video to fit vertically
-    transformed.media.width = (original.media.width * original.dom.height / original.media.height);
-    transformed.media.height = (original.media.height * transformed.media.width / original.media.width);
-    // If it didnt't fit, freeze viewport width and scale video to fit horizontally
-    if (transformed.media.width > original.dom.width) {
-        transformed.media.height = (original.media.height * original.dom.width / original.media.width);
-        transformed.media.width = (original.media.width * transformed.media.height / original.media.height);
-    }
-    // Calculate paddings for vertical or horizontal letterboxing
-    if (transformed.media.width < original.dom.width) {
-        transformed.letterboxing.horizontal = Math.floor((original.dom.width - transformed.media.width) / 2);
-    }
-    else {
-        if (transformed.media.height < original.dom.height) {
-            transformed.letterboxing.vertical = Math.floor((original.dom.height - transformed.media.height) / 2);
-        }
-    }
-    transformed.media.width = Math.floor(transformed.media.width);
-    transformed.media.height = Math.floor(transformed.media.height);
-    return transformed;
-}
-
-const logoHTML = "<div class=\"clappr-logo control-need-disable\">\n    <img class=\"clappr-logo-img\"/>\n</div>\n";
-
-/**
- * `PLUGIN` that adds custom logo to the player.
- * @beta
- */
-class Logo extends UIContainerPlugin {
-    hasStartedPlaying = false;
-    $logoContainer = null;
-    get name() {
-        return 'logo';
-    }
-    get supportedVersion() {
-        return { min: CLAPPR_VERSION };
-    }
-    get template() {
-        return tmpl(logoHTML);
-    }
-    get attributes() {
-        return {
-            'class': 'player-logo',
-            'data-logo': ''
-        };
-    }
-    get shouldRender() {
-        return !!this.options.logo && !!this.options.logo.path;
-    }
-    bindEvents() {
-        window.addEventListener('resize', this.setPosition);
-        this.listenTo(this.container, Events.CONTAINER_RESIZE, this.setPosition);
-        this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop);
-        this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay);
-        this.listenTo(this.container, Events.CONTAINER_LOADEDMETADATA, this.setPosition);
-    }
-    stopListening() {
-        window.removeEventListener('resize', this.setPosition);
-        // @ts-ignore
-        return super.stopListening();
-    }
-    onPlay() {
-        this.hasStartedPlaying = true;
-        this.setPosition();
-    }
-    onStop() {
-        this.hasStartedPlaying = false;
-        this.update();
-    }
-    update() {
-        if (!this.shouldRender) {
-            return;
-        }
-        if (!this.hasStartedPlaying) {
-            this.$el.hide();
-        }
-        else {
-            this.$el.show();
-        }
-    }
-    constructor(container) {
-        super(container);
-        this.setPosition = this.setPosition.bind(this);
-        this.hasStartedPlaying = false;
-        if (!this.options.logo) {
-            this.disable();
-            return;
-        }
-        this.render();
-    }
-    render() {
-        if (!this.shouldRender) {
-            return this;
-        }
-        this.$el.html(this.template());
-        this.setLogoImgAttrs();
-        this.container.$el.append(this.$el.get(0));
-        this.update();
-        return this;
-    }
-    setLogoImgAttrs() {
-        const { logo: { path: imgUrl, width = 60, height = 60 } } = this.options;
-        this.$logoContainer = this.$el.find('.clappr-logo');
-        const $logo = this.$logoContainer.find('.clappr-logo-img');
-        $logo.attr({
-            'src': `${imgUrl}`,
-            'style': `width: ${width}px;height: ${height}px;`
-        });
+    setLogoImgAttrs() {
+        const { logo: { path: imgUrl, width = 60, height = 60 } } = this.options;
+        this.$logoContainer = this.$el.find('.clappr-logo');
+        const $logo = this.$logoContainer.find('.clappr-logo-img');
+        $logo.attr({
+            'src': `${imgUrl}`,
+            'style': `width: ${width}px;height: ${height}px;`
+        });
     }
     setLogoWidth(size) {
         let { logo: { width = 60, height = 60, objectFit = 'contain' } } = this.options;
@@ -14606,7 +14309,35 @@ 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) {
+        }
+        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";
 
@@ -14620,21 +14351,24 @@ 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$9 = 'plugins.media_control';
+const T$a = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
     'playstop',
@@ -14655,11 +14389,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;
@@ -14670,7 +14410,7 @@ class MediaControl extends UICorePlugin {
     displayedSeekBarPercentage = null;
     draggingSeekBar = false;
     draggingVolumeBar = false;
-    fullScreenOnVideoTagSupported = null;
+    fullScreenOnVideoTagSupported = false;
     hideId = null;
     hideVolumeId = null;
     intendedVolume = 100;
@@ -14678,9 +14418,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;
@@ -14691,7 +14432,6 @@ class MediaControl extends UICorePlugin {
     $multiCameraSelector = null;
     $playPauseToggle = null;
     $playStopToggle = null;
-    $playbackRate = null;
     $position = null;
     $seekBarContainer = null;
     $seekBarHover = null;
@@ -14903,7 +14643,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();
@@ -15134,22 +14875,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.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.MEDIACONTROL_CONTAINERCHANGED); // TODO check
+        this.trigger(Events.MEDIACONTROL_CONTAINERCHANGED); // TODO figure out
         if (this.core.activeContainer.$el) {
             this.core.activeContainer.$el.addClass('container-skin-1');
         }
@@ -15320,6 +15060,7 @@ class MediaControl extends UICorePlugin {
         }
     }
     updateSettings() {
+        trace(`${T$a} updateSettings`, { settings: this.settings });
         const newSettings = $.extend(true, {
             left: [],
             default: [],
@@ -15332,10 +15073,14 @@ 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,
+                optionsDisable: this.options.fullscreenDisable,
+            });
             // remove fullscreen from settings if it is not available
             removeArrayItem(newSettings.default, 'fullscreen');
             removeArrayItem(newSettings.left, 'fullscreen');
@@ -15350,6 +15095,7 @@ class MediaControl extends UICorePlugin {
         const settingsChanged = serializeSettings(this.settings) !== serializeSettings(newSettings);
         if (settingsChanged) {
             this.settings = newSettings;
+            this.needsUpdate = true;
             this.render();
         }
     }
@@ -15374,7 +15120,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]');
@@ -15406,8 +15151,6 @@ class MediaControl extends UICorePlugin {
                 return null;
             case 'clipText':
                 return this.$clipText;
-            case 'playbackRate':
-                return this.$playbackRate;
             case 'seekBarContainer':
                 return this.$seekBarContainer;
         }
@@ -15430,13 +15173,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
@@ -15534,8 +15270,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;
             });
         });
@@ -15601,9 +15337,12 @@ class MediaControl extends UICorePlugin {
      * @internal
      */
     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();
@@ -15649,7 +15388,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.MEDIACONTROL_RENDERED);
         return this;
     }
@@ -15715,6 +15455,7 @@ class MediaControl extends UICorePlugin {
             element.el.css({ 'pointer-events': 'none' });
         });
     }
+    // TODO drop
     isSeekEnabledForHtml5Playback() {
         if (this.core.getPlaybackType() === Playback.LIVE) {
             return this.options.dvrEnabled;
@@ -15722,7 +15463,7 @@ class MediaControl extends UICorePlugin {
         return isFinite(this.core.activePlayback.getDuration());
     }
     getElementLocation(name) {
-        trace(`${T$9} getElementLocation`, {
+        trace(`${T$a} getElementLocation`, {
             right: this.settings.right,
             left: this.settings.left,
             default: this.settings.default,
@@ -15768,8 +15509,8 @@ 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$8 = 'plugins.multicamera';
+const VERSION$4 = '0.0.1';
+const T$9 = 'plugins.multicamera';
 /**
  * `PLUGIN` that adds support for loading multiple streams and switching between them using the media control UI.
  * @beta
@@ -15787,7 +15528,7 @@ class MultiCamera extends UICorePlugin {
         return { min: CLAPPR_VERSION };
     }
     static get version() {
-        return VERSION$3;
+        return VERSION$4;
     }
     get template() {
         return tmpl(pluginHtml$3);
@@ -16041,7 +15782,7 @@ class MultiCamera extends UICorePlugin {
             // TODO figure out what this does
             playbackOptions.recycleVideo = Browser.isMobile;
             this.currentCamera = this.findElementById(id) ?? null;
-            trace(`${T$8} changeById`, { currentCamera: this.currentCamera, multicamera: this.multicamera });
+            trace(`${T$9} changeById`, { currentCamera: this.currentCamera, multicamera: this.multicamera });
             if (!this.currentCamera) {
                 return;
             }
@@ -16057,7 +15798,7 @@ class MultiCamera extends UICorePlugin {
             // TODO remove?
             // for html5 playback:
             this.options.dvrEnabled = this.currentCamera.dvr;
-            trace(`${T$8} changeById`, { currentCamera: this.currentCamera });
+            trace(`${T$9} changeById`, { currentCamera: this.currentCamera });
             // TODO
             this.core.configure({
                 playback: playbackOptions,
@@ -16112,10 +15853,10 @@ class MultiCamera extends UICorePlugin {
 
 const pipIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M21.05 3.00001C21.302 3.00001 21.5435 3.10003 21.7217 3.27833C21.9 3.45646 22 3.69802 22 3.95003V10.6H20.1V4.90003H4.90001V18.2H10.6V20.1H3.95001C3.69802 20.1 3.45647 20 3.27832 19.8217C3.10002 19.6436 3 19.402 3 19.15V3.95001C3 3.69802 3.10002 3.45647 3.27832 3.27832C3.45644 3.10002 3.69801 3 3.95001 3L21.05 3.00001ZM21.05 12.5C21.302 12.5 21.5435 12.6 21.7217 12.7783C21.9 12.9565 22 13.198 22 13.45V19.15C22 19.402 21.9 19.6436 21.7217 19.8217C21.5436 20 21.302 20.1 21.05 20.1H13.45C13.198 20.1 12.9564 20 12.7783 19.8217C12.6 19.6436 12.5 19.402 12.5 19.15V13.45C12.5 13.198 12.6 12.9565 12.7783 12.7783C12.9564 12.6 13.198 12.5 13.45 12.5H21.05ZM7.47178 6.12823L9.60928 8.26572L11.5501 6.32492V11.5499H6.32509L8.26589 9.60911L6.12839 7.47161L7.47178 6.12823Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
-const buttonHtml$1 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\">\n    <%= pipIcon %>\n</button>\n";
+const buttonHtml$2 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\">\n    <%= pipIcon %>\n</button>\n";
 
-const VERSION$2 = '0.0.1';
-const T$7 = `plugins.pip`;
+const VERSION$3 = '0.0.1';
+const T$8 = `plugins.pip`;
 /**
  * `PLUGIN` that enables picture in picture mode.
  * @beta
@@ -16143,9 +15884,9 @@ class PictureInPicture extends UICorePlugin {
      * @internal
      */
     static get version() {
-        return VERSION$2;
+        return VERSION$3;
     }
-    static buttonTemplate = tmpl(buttonHtml$1);
+    static buttonTemplate = tmpl(buttonHtml$2);
     /**
      * @internal
      */
@@ -16198,7 +15939,7 @@ class PictureInPicture extends UICorePlugin {
         }
     }
     requestPictureInPicture() {
-        trace(`${T$7} requestPictureInPicture`, {
+        trace(`${T$8} requestPictureInPicture`, {
             videoElement: !!this.videoElement,
         });
         this.videoElement.requestPictureInPicture();
@@ -16208,12 +15949,18 @@ class PictureInPicture extends UICorePlugin {
     }
 }
 
-const buttonHtml = "<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\"><%= 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 listHtml = "<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>";
+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>";
 
 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";
 
+const arrowRightIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M8.70725 20.7073C8.51225 20.9023 8.25625 21.0002 8.00025 21.0002C7.74425 21.0002 7.48825 20.9023 7.29325 20.7073C6.90225 20.3162 6.90225 19.6842 7.29325 19.2932L14.5863 12.0002L7.29325 4.70725C6.90225 4.31625 6.90225 3.68425 7.29325 3.29325C7.68425 2.90225 8.31625 2.90225 8.70725 3.29325L16.7073 11.2933C17.0983 11.6842 17.0983 12.3162 16.7073 12.7072L8.70725 20.7073Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
+
+const arrowLeftIcon = "<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=\"M16.7073 19.2932C17.0983 19.6842 17.0983 20.3162 16.7073 20.7073C16.5123 20.9023 16.2563 21.0002 16.0003 21.0002C15.7443 21.0002 15.4882 20.9023 15.2933 20.7073L7.29325 12.7072C6.90225 12.3162 6.90225 11.6842 7.29325 11.2933L15.2933 3.29325C15.6842 2.90225 16.3163 2.90225 16.7073 3.29325C17.0983 3.68425 17.0983 4.31625 16.7073 4.70725L9.41425 12.0002L16.7073 19.2932Z\"\n        fill=\"#C9C9C9\"/>\n</svg>\n";
+
+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";
+
 var PlaybackEvents;
 (function (PlaybackEvents) {
     /**
@@ -16234,7 +15981,7 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: 2.0, label: '2x' },
 ];
 const DEFAULT_PLAYBACK_RATE = 1;
-const T$6 = 'plugins.playback_rate';
+const T$7 = 'plugins.playback_rate';
 /**
  * `PLUGIN` that allows changing the playback speed of the video.
  * @beta
@@ -16262,12 +16009,11 @@ const T$6 = '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;
@@ -16283,14 +16029,16 @@ class PlaybackRate extends UICorePlugin {
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    static buttonTemplate = tmpl(buttonHtml);
-    static listTemplate = tmpl(listHtml);
+    static buttonTemplate = tmpl(buttonHtml$1);
+    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
@@ -16334,9 +16082,15 @@ class PlaybackRate extends UICorePlugin {
         this.render();
     }
     onGearRendered() {
-        this.addGearItem();
+        this.mount();
     }
-    addGearItem() {
+    mount() {
+        trace(`${T$7} mount`, {
+            shouldMount: this.shouldMount(),
+        });
+        if (!this.shouldMount()) {
+            return;
+        }
         this.core
             .getPlugin('bottom_gear')
             ?.addItem('rate', this.$el)
@@ -16362,12 +16116,12 @@ class PlaybackRate extends UICorePlugin {
             this.core.activePlayback?.setPlaybackRate(this.selectedRate);
         }
         else {
-            trace(`${T$6} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
+            trace(`${T$7} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
                 selectedRate: this.selectedRate,
             });
         }
     }
-    shouldRender() {
+    shouldMount() {
         if (!this.core.activePlayback) {
             return false;
         }
@@ -16381,12 +16135,9 @@ class PlaybackRate extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$6} render`, {
-            shouldRender: this.shouldRender(),
+        trace(`${T$7} render`, {
+            shouldMount: this.shouldMount(),
         });
-        if (!this.shouldRender()) {
-            return this;
-        }
         this.$el.html(PlaybackRate.listTemplate({
             arrowLeftIcon,
             checkIcon,
@@ -16394,7 +16145,7 @@ class PlaybackRate extends UICorePlugin {
             i18n: this.core.i18n,
             playbackRates: this.playbackRates,
         }));
-        this.addGearItem();
+        this.mount();
         return this;
     }
     // private onStartAd() {
@@ -16417,11 +16168,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) {
@@ -16429,8 +16190,6 @@ class PlaybackRate extends UICorePlugin {
         const rate = parseFloat(event.currentTarget.dataset.rate || '');
         if (rate) {
             this.setSelectedRate(rate);
-            this.highlightCurrentRate();
-            this.updateGearOptionLabel();
         }
         return false;
     }
@@ -16440,14 +16199,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)
@@ -16456,7 +16224,10 @@ class PlaybackRate extends UICorePlugin {
             .addClass('gcore-skin-active');
     }
     updateGearOptionLabel() {
-        this.addGearItem();
+        trace(`${T$7} updateGearOptionLabel`, {
+            selectedRate: this.selectedRate,
+        });
+        this.mount();
     }
 }
 
@@ -16465,7 +16236,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';
+const T$6 = 'plugins.poster';
 /**
  * `PLUGIN` that displays a poster image in the background and a big play button on top when playback is stopped
  * @beta
@@ -16576,7 +16347,7 @@ class Poster extends UIContainerPlugin {
         super.disable();
     }
     onError(error) {
-        trace(`${T$5} onError`, {
+        trace(`${T$6} onError`, {
             enabled: this.enabled,
         });
         this.hasFatalError = error.level === PlayerError.Levels.FATAL;
@@ -16597,7 +16368,7 @@ class Poster extends UIContainerPlugin {
         this.update();
     }
     onStop() {
-        trace(`${T$5} onStop`, {
+        trace(`${T$6} onStop`, {
             enabled: this.enabled,
         });
         this.hasStartedPlaying = false;
@@ -16605,7 +16376,7 @@ class Poster extends UIContainerPlugin {
         this.update();
     }
     updatePlayButton(show) {
-        trace(`${T$5} updatePlayButton`, {
+        trace(`${T$6} updatePlayButton`, {
             chromeless: this.options.chromeless,
             allowUserInteraction: this.options.allowUserInteraction,
         });
@@ -16633,7 +16404,7 @@ class Poster extends UIContainerPlugin {
         this.$el.removeClass('clickable');
     }
     clicked() {
-        trace(`${T$5} clicked`, {
+        trace(`${T$6} clicked`, {
             hasStartedPlaying: this.hasStartedPlaying,
             chromeless: this.options.chromeless,
             allowUserInteraction: this.options.allowUserInteraction,
@@ -16654,7 +16425,7 @@ class Poster extends UIContainerPlugin {
         return !this.container.playback.isAudioOnly;
     }
     update() {
-        trace(`${T$5} update`, {
+        trace(`${T$6} update`, {
             shouldRender: this.shouldRender,
         });
         if (!this.shouldRender) {
@@ -16667,7 +16438,7 @@ class Poster extends UIContainerPlugin {
         this.updatePoster();
     }
     updatePoster() {
-        trace(`${T$5} updatePoster`, {
+        trace(`${T$6} updatePoster`, {
             hasStartedPlaying: this.hasStartedPlaying,
         });
         if (!this.hasStartedPlaying) {
@@ -16682,7 +16453,7 @@ class Poster extends UIContainerPlugin {
         this.$el.show();
     }
     hidePoster() {
-        trace(`${T$5} hidePoster`, {
+        trace(`${T$6} hidePoster`, {
             shouldHideOnPlay: this.shouldHideOnPlay(),
         });
         if (!this.options.disableMediaControl) {
@@ -16732,6 +16503,275 @@ 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 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";
+
+const hdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M14.9562 8.22232H13.9961V15.1873H14.9562C15.8914 15.1873 16.766 14.8253 17.4195 14.1676C18.0786 13.5037 18.4415 12.6281 18.4415 11.7026C18.4415 9.7837 16.8781 8.22253 14.9561 8.22253L14.9562 8.22232Z\"\n    fill=\"#C9C9C9\"/>\n  <path\n    d=\"M22.0801 4H1.91994C0.859222 4 0 4.86406 0 5.91994V17.4878C0 18.5437 0.859222 19.4078 1.91994 19.4078H22.0801C23.1408 19.4078 24 18.5437 24 17.4878V5.91994C24 4.86406 23.1408 4 22.0801 4ZM10.3975 15.3473C10.3975 15.6124 10.1827 15.8272 9.91754 15.8272C9.65216 15.8272 9.43761 15.6122 9.43761 15.3473V12.0239H5.55956V15.3473C5.55956 15.6124 5.34481 15.8272 5.07963 15.8272C4.81425 15.8272 4.5997 15.6122 4.5997 15.3473L4.59949 7.74042C4.59949 7.47524 4.81425 7.26049 5.07943 7.26049C5.34481 7.26049 5.55936 7.47544 5.55936 7.74042V11.0636H9.43741V7.74042C9.43741 7.47524 9.65216 7.26049 9.91734 7.26049C10.1827 7.26049 10.3973 7.47544 10.3973 7.74042L10.3975 15.3473ZM18.1005 14.8438C17.2652 15.6844 16.1486 16.1472 14.9561 16.1472H13.5161C13.2507 16.1472 13.0361 15.9323 13.0361 15.6673V7.74263C13.0361 7.47745 13.2509 7.26269 13.5161 7.26269H14.9561C17.4072 7.26269 19.4013 9.25438 19.4013 11.7027C19.4013 12.8835 18.9392 13.9991 18.1005 14.844V14.8438Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
+
+const T$5 = 'plugins.quality_levels';
+const VERSION$2 = 'v2.22.5';
+/**
+ * `PLUGIN` that provides a UI to select the desired quality level of the playback.
+ * @beta
+ *
+ * @remarks
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * - {@link BottomGear}
+ *
+ * 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 QualityLevelsPluginSettings}
+ *
+ * @example
+ * ```ts
+ * new Player({
+ *   qualityLevels: {
+ *     restrictResolution: 360,
+ *     labels: { 360: 'SD', 720: 'HD' },
+ *   },
+ * })
+ * ```
+ */
+class QualityLevels extends UICorePlugin {
+    levels = [];
+    levelLabels = [];
+    removeAuto = false;
+    isHd = false;
+    currentText = '';
+    selectedLevelId = -1;
+    static buttonTemplate = tmpl(buttonHtml);
+    static listTemplate = tmpl(listHtml);
+    /**
+     * @internal
+     */
+    get name() {
+        return 'level_selector';
+    }
+    /**
+     * @internal
+     */
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    /**
+     * @internal
+     */
+    static get version() {
+        return VERSION$2;
+    }
+    /**
+     * @internal
+     */
+    get attributes() {
+        return {
+            class: 'level-selector',
+            'data-level-selector': '',
+        };
+    }
+    get events() {
+        return {
+            'click .gear-sub-menu_btn': 'onSelect',
+            'click .go-back': 'goBack',
+        };
+    }
+    /**
+     * @internal
+     */
+    bindEvents() {
+        this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
+    }
+    onCoreReady() {
+        const gear = this.core.getPlugin('bottom_gear');
+        assert(gear, 'bottom_gear plugin is required');
+        this.currentText = this.core.i18n.t('auto');
+        this.listenTo(gear, GearEvents.RENDERED, this.onGearRendered);
+    }
+    onGearRendered() {
+        this.render();
+    }
+    onActiveContainerChange() {
+        this.removeAuto = false;
+        this.isHd = false;
+        const activePlayback = this.core.activePlayback;
+        this.listenTo(activePlayback, Events.PLAYBACK_LEVELS_AVAILABLE, this.onLevelsAvailable);
+        this.listenTo(activePlayback, Events.PLAYBACK_LEVEL_SWITCH_START, this.onLevelSwitchStart);
+        this.listenTo(activePlayback, Events.PLAYBACK_LEVEL_SWITCH_END, this.onLevelSwitchEnd);
+        this.listenTo(activePlayback, Events.PLAYBACK_BITRATE, this.onBitrate);
+        this.listenTo(activePlayback, Events.PLAYBACK_STOP, this.onStop);
+        this.listenTo(activePlayback, Events.PLAYBACK_HIGHDEFINITIONUPDATE, (isHd) => {
+            this.isHd = isHd;
+            this.updateHd();
+        });
+        if (activePlayback.levels?.length > 0) {
+            this.onLevelsAvailable(activePlayback.levels);
+        }
+    }
+    updateHd() {
+        if (this.isHd) {
+            this.$el.find('.gear-option_hd-icon').removeClass('hidden');
+        }
+        else {
+            this.$el.find('.gear-option_hd-icon').addClass('hidden');
+        }
+    }
+    onStop() {
+        this.listenToOnce(this.core.activePlayback, Events.PLAYBACK_PLAY, () => {
+            if (this.core.activePlayback.getPlaybackType() === 'live') {
+                if (this.selectedLevelId !== -1) {
+                    this.core.activePlayback.currentLevel = this.selectedLevelId;
+                }
+            }
+        });
+    }
+    shouldRender() {
+        const activePlayback = this.core.activePlayback;
+        if (!activePlayback) {
+            return false;
+        }
+        const supportsCurrentLevel = 'currentLevel' in activePlayback;
+        if (!supportsCurrentLevel) {
+            return false;
+        }
+        // Only care if we have at least 2 to choose from
+        return !!(this.levels && this.levels.length > 1);
+    }
+    /**
+     * @internal
+     */
+    render() {
+        if (!this.shouldRender()) {
+            return this;
+        }
+        this.renderDropdown();
+        this.updateButton();
+        return this;
+    }
+    renderDropdown() {
+        this.$el.html(QualityLevels.listTemplate({
+            arrowLeftIcon,
+            checkIcon,
+            current: this.selectedLevelId,
+            labels: this.levelLabels,
+            levels: this.levels,
+            maxLevel: this.maxLevel,
+            removeAuto: this.removeAuto,
+            i18n: this.core.i18n,
+        }));
+    }
+    updateButton() {
+        this.core.getPlugin('bottom_gear')
+            ?.addItem('quality', this.$el)
+            .html(QualityLevels.buttonTemplate({
+            arrowRightIcon,
+            currentText: this.currentText,
+            isHd: this.isHd,
+            hdIcon,
+            i18n: this.core.i18n,
+        }));
+    }
+    get pluginOptions() {
+        return (this.core.options.qualityLevels || this.core.options.levelSelector || {});
+    }
+    get maxLevel() {
+        const maxRes = this.pluginOptions.restrictResolution;
+        return maxRes
+            ? this.levels.find((level) => (level.height > level.width ? level.width : level.height) ===
+                maxRes)?.level ?? -1
+            : -1;
+    }
+    onLevelsAvailable(levels) {
+        const maxResolution = this.pluginOptions.restrictResolution;
+        this.levels = levels;
+        this.makeLevelsLabels();
+        if (maxResolution) {
+            this.removeAuto = true;
+            const initialLevel = levels
+                .filter((level) => (level.width > level.height ? level.height : level.width) <=
+                maxResolution)
+                .pop();
+            this.setLevel(initialLevel?.level ?? 0);
+        }
+        this.render();
+    }
+    makeLevelsLabels() {
+        const labels = this.pluginOptions.labels ?? {};
+        this.levelLabels = [];
+        for (const level of this.levels) {
+            const ll = level.width > level.height ? level.height : level.width;
+            const label = labels[ll] || `${ll}p`;
+            this.levelLabels.push(label);
+        }
+    }
+    onSelect(event) {
+        const selectedLevel = parseInt(event.currentTarget?.dataset?.id ?? '-1', 10);
+        this.setLevel(selectedLevel);
+        event.stopPropagation();
+        event.preventDefault();
+        return false;
+    }
+    goBack() {
+        this.core.getPlugin('bottom_gear').refresh();
+    }
+    setLevel(index) {
+        this.selectedLevelId = index;
+        this.core.activePlayback.currentLevel = this.selectedLevelId;
+        this.highlightCurrentLevel();
+    }
+    allLevelElements() {
+        return this.$('#level-selector-menu li');
+    }
+    levelElement(id = -1) {
+        return this.$(`#level-selector-menu a[data-id="${id}"]`).parent();
+    }
+    onLevelSwitchStart() {
+        this.levelElement(this.selectedLevelId).addClass('changing');
+    }
+    onLevelSwitchEnd() {
+        this.levelElement(this.selectedLevelId).removeClass('changing');
+    }
+    updateText(level) {
+        this.currentText = this.getLevelLabel(level);
+        this.updateButton();
+    }
+    getLevelLabel(id) {
+        if (id < 0) {
+            return this.core.i18n.t('auto');
+        }
+        const index = this.levels.findIndex((l) => l.level === id);
+        if (index < 0) {
+            return this.core.i18n.t('auto');
+        }
+        return this.levelLabels[index] ?? formatLevelLabel(this.levels[index]);
+    }
+    onBitrate(info) {
+        this.highlightCurrentLevel();
+    }
+    highlightCurrentLevel() {
+        trace(`${T$5} highlightCurrentLevel`, {
+            selectedLevelId: this.selectedLevelId,
+        });
+        this.allLevelElements()
+            .removeClass('current')
+            .find('a')
+            .removeClass('gcore-skin-active');
+        const currentLevelElement = this.levelElement(this.selectedLevelId);
+        currentLevelElement
+            .addClass('current')
+            .find('a')
+            .addClass('gcore-skin-active');
+        this.updateText(this.selectedLevelId);
+    }
+}
+function formatLevelLabel(level) {
+    const h = level.width > level.height ? level.height : level.width;
+    return `${h}p`;
+}
+
 const seekTimeHTML = "<span data-seek-time></span>\n<span data-duration></span>\n";
 
 // Copyright 2014 Globo.com Player authors. All rights reserved.
@@ -18691,4 +18731,4 @@ class VolumeFade extends UICorePlugin {
     }
 }
 
-export { AudioTracks as AudioSelector, AudioTracks, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, LevelSelector, Logo, MediaControl, MultiCamera, PictureInPicture, PlaybackRate, Poster, SeekTime, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };
+export { AudioTracks as AudioSelector, AudioTracks, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, QualityLevels as LevelSelector, Logo, MediaControl, MultiCamera, PictureInPicture, PlaybackRate, Poster, QualityLevels, SeekTime, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };