@gcorevideo/player 2.22.3 → 2.22.5

package/dist/plugins/index.js

@@ -8858,14 +8858,6 @@ Loader.registerPlayback(HTMLImg);
 Loader.registerPlayback(HTML5Audio);
 Loader.registerPlayback(HTML5Video);
 
-/**
- * @public
- * @param msg
- * @param data
- */
-function trace(msg, data = {}) {
-}
-
 const global$1 = (typeof global !== "undefined" ? global :
   typeof self !== "undefined" ? self :
   typeof window !== "undefined" ? window : {});
@@ -9775,11 +9767,12 @@ function ifError(err) {
 // export const CLAPPR_VERSION: string = process.env.CLAPPR_VERSION || '0.11.3';
 const CLAPPR_VERSION = '0.11.3';
 
-const pluginHtml$7 = "<button data-audiotracks-button class='gcore-skin-button-color' id=\"audiotracks-button\">\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"></span>\n</button>\n<ul class='gcore-skin-bg-color' id=\"audiotracks-select\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-audiotracks-select=\"<%= track.id %>\">\n                <%= track.label %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
+const pluginHtml$7 = "<button data-audiotracks-button class='gcore-skin-button-color' id=\"audiotracks-button\">\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"><%= icon %></span>\n</button>\n<ul class='gcore-skin-bg-color menu hidden' id=\"audiotracks-select\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-audiotracks-select=\"<%= track.id %>\">\n                <%= track.label %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
 
 const audioArrow = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"9px\" height=\"6px\" viewBox=\"0 0 9 6\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n     xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->\n  <title>quality-arrow</title>\n  <desc>Created with Sketch.</desc>\n  <defs></defs>\n  <g id=\"quality-arrow\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n    <path\n      d=\"M5.07079194,5.78553848 C4.91457318,5.94277844 4.70551573,6.00941824 4.50028717,5.99893557 C4.2950586,6.00941824 4.08676693,5.94277844 3.92978239,5.78553848 L0.221118462,1.2997069 C-0.0737061539,1.00469478 -0.0737061539,0.526236029 0.221118462,0.231972666 C0.515177299,-0.0630394586 1.23500883,0.00734414472 1.64852907,0.00734414472 L7.77475484,0.00734414472 C8.21201421,0.00734414472 8.48539703,-0.0630394586 8.77945587,0.231972666 C9.07351471,0.526236029 9.07351471,1.00469478 8.77945587,1.2997069 L5.07079194,5.78553848 Z\"\n      fill=\"#FFFFFE\"></path>\n  </g>\n</svg>\n";
 
-const VERSION$6 = '0.0.1';
+const VERSION$6 = '2.22.4';
+// const T = 'plugins.audiotracks'
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @beta
@@ -9790,14 +9783,14 @@ const VERSION$6 = '0.0.1';
  *
  * - {@link MediaControl}
  */
-class AudioSelector extends UICorePlugin {
+class AudioTracks extends UICorePlugin {
     currentTrack = null;
     tracks = [];
     /**
      * @internal
      */
     get name() {
-        return 'audio_selector';
+        return 'audio_selector'; // TODO rename to audiotracks
     }
     /**
      * @internal
@@ -9826,52 +9819,43 @@ class AudioSelector extends UICorePlugin {
     get events() {
         return {
             'click [data-audiotracks-select]': 'onTrackSelect',
-            'click [data-audiotracks-button]': 'onShowLevelSelectMenu',
+            'click #audiotracks-button': 'toggleContextMenu',
         };
     }
     /**
      * @internal
      */
     bindEvents() {
-        this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
+        this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady);
         this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectTrackMenu);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, () => {
+            mediaControl.putElement('audiotracks', this.$el);
+        });
+        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
     }
-    bindPlaybackEvents() {
+    onActiveContainerChanged() {
         this.currentTrack = null;
-        this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop);
-        this.setupAudioTrackListeners();
-    }
-    setupAudioTrackListeners() {
-        this.listenTo(this.core.activePlayback, Events.PLAYBACK_AUDIO_AVAILABLE, (tracks) => {
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_AUDIO_AVAILABLE, (tracks) => {
             this.currentTrack =
-                tracks.find((track) => track.kind === 'main') ?? null;
-            this.fillTracks(tracks);
+                tracks.find((track) => track.kind === 'main') ?? null; // TODO test
+            this.tracks = tracks;
+            this.render();
         });
-        this.listenTo(this.core.activePlayback, Events.PLAYBACK_AUDIO_CHANGED, (track) => {
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_AUDIO_CHANGED, (track) => {
             this.currentTrack = track;
             this.highlightCurrentTrack();
             this.buttonElement().removeClass('changing');
             this.updateText();
         });
     }
-    onStop() {
-    }
-    onActiveContainerChanged() {
-        this.bindPlaybackEvents();
-    }
     shouldRender() {
-        if (!this.core.activePlayback) {
-            return false;
-        }
-        this.tracks = this.core.activePlayback.audioTracks;
+        // Render is called from the parent class constructor so tracks aren't available
         // Only care if we have at least 2 to choose from
-        return this.tracks && this.tracks.length > 1;
+        return this.tracks?.length > 1;
     }
     /**
      * @internal
@@ -9880,43 +9864,35 @@ class AudioSelector extends UICorePlugin {
         if (!this.shouldRender()) {
             return this;
         }
-        const mediaControl = this.core.getPlugin('media_control');
-        this.$el.html(AudioSelector.template({ tracks: this.tracks, title: this.getTitle() }));
-        this.$('.audio-arrow').append(audioArrow);
-        mediaControl.putElement('audiotracks', this.el);
+        this.core.getPlugin('media_control');
+        this.$el.html(AudioTracks.template({
+            tracks: this.tracks,
+            title: this.getTitle(),
+            icon: audioArrow,
+        }));
         this.updateText();
         this.highlightCurrentTrack();
         return this;
     }
-    fillTracks(tracks) {
-        this.tracks = tracks;
-        this.render();
-    }
-    findTrackBy(id) {
-        return this.tracks.find((track) => track.id === id);
-    }
     onTrackSelect(event) {
         const id = event.target?.dataset?.audiotracksSelect;
         if (id) {
             this.selectAudioTrack(id);
         }
-        this.toggleContextMenu();
+        this.hideMenu();
         event.stopPropagation();
         return false;
     }
     selectAudioTrack(id) {
         this.startTrackSwitch();
-        this.core.activePlayback.switchAudioTrack(id);
+        this.core.activeContainer.switchAudioTrack(id);
         this.updateText();
     }
-    onShowLevelSelectMenu() {
-        this.toggleContextMenu();
-    }
-    hideSelectTrackMenu() {
-        this.$('ul').hide();
+    hideMenu() {
+        this.$el.find('#audiotracks-select').addClass('hidden');
     }
     toggleContextMenu() {
-        this.$('ul').toggle();
+        this.$el.find('#audiotracks-select').toggleClass('hidden');
     }
     buttonElement() {
         return this.$('button');
@@ -9925,11 +9901,14 @@ class AudioSelector extends UICorePlugin {
         return this.$('button .audio-text');
     }
     trackElement(id) {
-        return this.$('ul a' +
-            (id !== undefined ? '[data-audiotracks-select="' + id + '"]' : '')).parent();
+        return this.$('#audiotracks-select a' +
+            (id !== undefined ? `[data-audiotracks-select="${id}"]` : '')).parent();
     }
     getTitle() {
-        return this.currentTrack?.label || '';
+        if (!this.currentTrack) {
+            return '';
+        }
+        return this.currentTrack.label || this.currentTrack.language;
     }
     startTrackSwitch() {
         this.buttonElement().addClass('changing');
@@ -9952,6 +9931,14 @@ class AudioSelector extends UICorePlugin {
     }
 }
 
+/**
+ * @public
+ * @param msg
+ * @param data
+ */
+function trace(msg, data = {}) {
+}
+
 const volumeOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M5.50025 8.00025C4.67125 8.00025 4.00025 8.67225 4.00025 9.50025V14.5003C4.00025 15.3283 4.67125 16.0003 5.50025 16.0003H7.24824C7.65024 16.0003 8.03627 16.1613 8.31727 16.4483L12.5443 20.7413C12.7083 20.9073 12.9262 20.9963 13.1492 20.9963C13.2572 20.9963 13.3672 20.9763 13.4722 20.9333C13.7932 20.8013 14.0003 20.4923 14.0003 20.1462V16.3283C14.0003 16.1963 13.9473 16.0683 13.8543 15.9753L6.02528 8.14625C5.93228 8.05325 5.80425 8.00025 5.67225 8.00025H5.50025ZM14.0003 3.85426C14.0003 3.50826 13.7932 3.19927 13.4722 3.06727C13.1502 2.93627 12.7873 3.01226 12.5443 3.25926L9.33827 6.51527C9.14627 6.71127 9.14626 7.02625 9.34126 7.22025L13.5733 11.4522C13.7313 11.6102 14.0003 11.4982 14.0003 11.2752V3.85426ZM20.8543 20.8543C20.7563 20.9513 20.6283 21.0003 20.5003 21.0003C20.3723 21.0003 20.2442 20.9513 20.1462 20.8543L3.14625 3.85426C2.95125 3.65826 2.95125 3.34225 3.14625 3.14625C3.34225 2.95125 3.65826 2.95125 3.85426 3.14625L20.8543 20.1462C21.0493 20.3422 21.0493 20.6583 20.8543 20.8543Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
 const pluginHtml$6 = "<div class=\"big-mute-icon-wrapper\" data-big-mute>\n    <div class=\"big-mute-icon gcore-skin-border-color\" data-big-mute-icon></div>\n</div>\n";
@@ -13358,7 +13345,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.3";
+var version$1 = "2.22.5";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -13940,387 +13927,115 @@ 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();
-        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();
+        this.$el.html(this.template());
+        this.setLogoImgAttrs();
+        this.container.$el.append(this.$el.get(0));
+        this.update();
         return this;
     }
     setLogoImgAttrs() {
@@ -14647,7 +14362,7 @@ const DEFAULT_SETTINGS = {
     default: [],
     seekEnabled: true,
 };
-const T$9 = 'plugins.media_control';
+const T$a = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
     'playstop',
@@ -15735,7 +15450,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,
@@ -15781,8 +15496,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
@@ -15800,7 +15515,7 @@ class MultiCamera extends UICorePlugin {
         return { min: CLAPPR_VERSION };
     }
     static get version() {
-        return VERSION$3;
+        return VERSION$4;
     }
     get template() {
         return tmpl(pluginHtml$3);
@@ -16054,7 +15769,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;
             }
@@ -16070,7 +15785,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,
@@ -16125,10 +15840,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
@@ -16156,9 +15871,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
      */
@@ -16211,7 +15926,7 @@ class PictureInPicture extends UICorePlugin {
         }
     }
     requestPictureInPicture() {
-        trace(`${T$7} requestPictureInPicture`, {
+        trace(`${T$8} requestPictureInPicture`, {
             videoElement: !!this.videoElement,
         });
         this.videoElement.requestPictureInPicture();
@@ -16221,12 +15936,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) {
     /**
@@ -16247,7 +15968,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
@@ -16296,8 +16017,8 @@ 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 =
@@ -16375,7 +16096,7 @@ 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,
             });
         }
@@ -16394,7 +16115,7 @@ class PlaybackRate extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$6} render`, {
+        trace(`${T$7} render`, {
             shouldRender: this.shouldRender(),
         });
         if (!this.shouldRender()) {
@@ -16478,7 +16199,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
@@ -16589,7 +16310,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;
@@ -16610,7 +16331,7 @@ class Poster extends UIContainerPlugin {
         this.update();
     }
     onStop() {
-        trace(`${T$5} onStop`, {
+        trace(`${T$6} onStop`, {
             enabled: this.enabled,
         });
         this.hasStartedPlaying = false;
@@ -16618,7 +16339,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,
         });
@@ -16646,7 +16367,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,
@@ -16667,7 +16388,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) {
@@ -16680,7 +16401,7 @@ class Poster extends UIContainerPlugin {
         this.updatePoster();
     }
     updatePoster() {
-        trace(`${T$5} updatePoster`, {
+        trace(`${T$6} updatePoster`, {
             hasStartedPlaying: this.hasStartedPlaying,
         });
         if (!this.hasStartedPlaying) {
@@ -16695,7 +16416,7 @@ class Poster extends UIContainerPlugin {
         this.$el.show();
     }
     hidePoster() {
-        trace(`${T$5} hidePoster`, {
+        trace(`${T$6} hidePoster`, {
             shouldHideOnPlay: this.shouldHideOnPlay(),
         });
         if (!this.options.disableMediaControl) {
@@ -16745,6 +16466,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.
@@ -18704,4 +18694,4 @@ class VolumeFade extends UICorePlugin {
     }
 }
 
-export { AudioSelector, 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 };