@gcorevideo/player 2.22.3 → 2.22.5

package/dist/index.js

@@ -12680,7 +12680,7 @@ var PlaybackEvents;
 // https://github.com/clappr/clappr/blob/8752995ea439321ac7ca3cd35e8c64de7a3c3d17/LICENSE
 const AUTO$1 = -1;
 const { now: now$2 } = Utils;
-const T$l = 'playback.dash';
+const T$k = 'playback.dash';
 class DashPlayback extends BasePlayback {
     _levels = null;
     _currentLevel = null;
@@ -12956,10 +12956,10 @@ class DashPlayback extends BasePlayback {
     }
     _onPlaybackError = (event) => {
         // TODO
-        trace(`${T$l} _onPlaybackError`, { event });
+        trace(`${T$k} _onPlaybackError`, { event });
     };
     _onDASHJSSError = (event) => {
-        trace(`${T$l} _onDASHJSSError`, { event });
+        trace(`${T$k} _onDASHJSSError`, { event });
         this._stopTimeUpdateTimer();
         // Note that the other error types are deprecated
         const e = event.error;
@@ -12994,7 +12994,7 @@ class DashPlayback extends BasePlayback {
         }
     };
     triggerError(error) {
-        trace(`${T$l} triggerError`, { error });
+        trace(`${T$k} triggerError`, { error });
         // this triggers Events.ERROR to be handled by the UI
         this.trigger(Events$1.PLAYBACK_ERROR, this.createError(error, {
             useCodePrefix: false,
@@ -13033,7 +13033,7 @@ class DashPlayback extends BasePlayback {
     }
     get dvrEnabled() {
         if (!this._dash) {
-            trace(`${T$l} dvrEnable no dash player instance`);
+            trace(`${T$k} dvrEnable no dash player instance`);
             return false;
         }
         return (this._dash?.getDVRWindowSize() >= this._minDvrSize &&
@@ -13055,7 +13055,7 @@ class DashPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_PROGRESS, progress, {});
     }
     play() {
-        trace(`${T$l} play`, { dash: !!this._dash });
+        trace(`${T$k} play`, { dash: !!this._dash });
         if (!this._dash) {
             this._setup();
         }
@@ -13141,7 +13141,7 @@ class DashPlayback extends BasePlayback {
     }
     // @ts-expect-error
     get currentAudioTrack() {
-        trace(`${T$l} get currentAudioTrack`);
+        trace(`${T$k} get currentAudioTrack`);
         assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized');
         const t = this._dash.getCurrentTrackFor('audio');
         if (!t) {
@@ -41842,7 +41842,7 @@ const AUTO = -1;
 const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-const T$k = 'playback.hls';
+const T$j = 'playback.hls';
 class HlsPlayback extends BasePlayback {
     _ccIsSetup = false;
     _ccTracksUpdated = false;
@@ -42071,7 +42071,7 @@ class HlsPlayback extends BasePlayback {
             maxBufferLength: 2,
             maxMaxBufferLength: 4,
         }, this.options.playback.hlsjsConfig);
-        trace(`${T$k} _createHLSInstance`, { config });
+        trace(`${T$j} _createHLSInstance`, { config });
         this._hls = new Hls(config);
     }
     _attachHLSMedia() {
@@ -42162,7 +42162,7 @@ class HlsPlayback extends BasePlayback {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$k} _recover failed to recover`, {
+            trace(`${T$j} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42248,7 +42248,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$k} _onHLSJSError`, {
+        trace(`${T$j} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -42296,7 +42296,7 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$k} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$j} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
@@ -42309,7 +42309,7 @@ class HlsPlayback extends BasePlayback {
                             evt,
                             data,
                         });
-                        trace(`${T$k} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$j} _onHLSJSError trying to recover from media error`, {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
@@ -42339,7 +42339,7 @@ class HlsPlayback extends BasePlayback {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$k} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$j} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42674,11 +42674,11 @@ class HlsPlayback extends BasePlayback {
         this._hls.audioTrack = Number(id); // TODO or find index by .id == id?
     }
     _onAudioTracksUpdated(_, data) {
-        trace(`${T$k} onAudioTracksUpdated`);
+        trace(`${T$j} onAudioTracksUpdated`);
         this.trigger(Events$1.PLAYBACK_AUDIO_AVAILABLE, data.audioTracks.map(toClapprTrack));
     }
     _onAudioTrackSwitched(_, data) {
-        trace(`${T$k} onAudioTrackSwitched`);
+        trace(`${T$j} onAudioTrackSwitched`);
         // @ts-ignore
         const track = this._hls.audioTracks[data.id];
         this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack(track));
@@ -42699,7 +42699,7 @@ function toClapprTrack(t) {
     };
 }
 
-const T$j = 'playback.html5_video';
+const T$i = 'playback.html5_video';
 const STALL_TIMEOUT = 15000;
 class HTML5Video extends BasePlayback {
     stallTimerId = null;
@@ -42707,7 +42707,7 @@ class HTML5Video extends BasePlayback {
      * @internal
      */
     createError(errorData, options) {
-        trace(`${T$j} createError`, {
+        trace(`${T$i} createError`, {
             errorData: { ...errorData },
         });
         const i18n = this.i18n ||
@@ -42723,11 +42723,11 @@ class HTML5Video extends BasePlayback {
         return super.createError(errorData, { ...options, useCodePrefix: false });
     }
     _onWaiting() {
-        trace(`${T$j} _onWaiting`);
+        trace(`${T$i} _onWaiting`);
         super._onWaiting();
     }
     _onEnded() {
-        trace(`${T$j} _onEnded`);
+        trace(`${T$i} _onEnded`);
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
             this.stallTimerId = null;
@@ -42735,12 +42735,12 @@ class HTML5Video extends BasePlayback {
         super._onEnded();
     }
     _handleBufferingEvents() {
-        trace(`${T$j} _handleBufferingEvents`, {
+        trace(`${T$i} _handleBufferingEvents`, {
             networkState: this.el.networkState,
         });
         if (!this.stallTimerId) {
             this.stallTimerId = setTimeout(() => {
-                trace(`${T$j} _handleBufferingEvents stall timeout`, {
+                trace(`${T$i} _handleBufferingEvents stall timeout`, {
                     buffering: this.buffering,
                     ended: this.ended,
                 });
@@ -42758,7 +42758,7 @@ class HTML5Video extends BasePlayback {
         super._handleBufferingEvents();
     }
     _onPlaying() {
-        trace(`${T$j} _onPlaying`);
+        trace(`${T$i} _onPlaying`);
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
             this.stallTimerId = null;
@@ -42766,7 +42766,7 @@ class HTML5Video extends BasePlayback {
         super._onPlaying();
     }
     _onPause() {
-        trace(`${T$j} _onPause`);
+        trace(`${T$i} _onPause`);
         super._onPause();
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
@@ -42776,7 +42776,7 @@ class HTML5Video extends BasePlayback {
     get audioTracks() {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$j} get audioTracks`, { supported });
+        trace(`${T$i} get audioTracks`, { supported });
         const retval = [];
         if (supported) {
             for (let i = 0; i < tracks.length; i++) {
@@ -42795,7 +42795,7 @@ class HTML5Video extends BasePlayback {
     get currentAudioTrack() {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$j} get currentAudioTrack`, {
+        trace(`${T$i} get currentAudioTrack`, {
             supported,
         });
         if (supported) {
@@ -42816,7 +42816,7 @@ class HTML5Video extends BasePlayback {
     switchAudioTrack(id) {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$j} switchAudioTrack`, {
+        trace(`${T$i} switchAudioTrack`, {
             supported,
         });
         if (supported) {
@@ -42835,7 +42835,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$i = 'GPlayer';
+const T$h = 'GPlayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -42930,7 +42930,7 @@ class Player {
         }
         const coreOpts = this.buildCoreOptions(playerElement);
         const { core, container } = Player.getRegisteredPlugins();
-        trace(`${T$i} init`, {
+        trace(`${T$h} init`, {
             registeredPlaybacks: Loader.registeredPlaybacks.map((p) => p.prototype.name),
         });
         coreOpts.plugins = {
@@ -42944,7 +42944,7 @@ class Player {
      * Destroys the player, releasing all resources and unmounting its UI from the DOM.
      */
     destroy() {
-        trace(`${T$i} destroy`, {
+        trace(`${T$h} destroy`, {
             player: !!this.player,
         });
         if (this.player) {
@@ -43131,7 +43131,7 @@ class Player {
         this.config = $.extend(true, this.config, config);
     }
     initPlayer(coreOptions) {
-        trace(`${T$i} initPlayer`, {
+        trace(`${T$h} initPlayer`, {
             autoPlay: coreOptions.autoPlay,
             sources: coreOptions.sources,
             // TODO selected options
@@ -43156,7 +43156,7 @@ class Player {
         }
     }
     triggerAutoPlay() {
-        trace(`${T$i} triggerAutoPlay`);
+        trace(`${T$h} triggerAutoPlay`);
         setTimeout(() => {
             this.player?.play({
                 autoPlay: true,
@@ -43174,7 +43174,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$i} onReady`, {
+            trace(`${T$h} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -43208,7 +43208,7 @@ class Player {
     buildCoreOptions(rootNode) {
         const sources = this.buildMediaSourcesList();
         const source = sources[0];
-        trace(`${T$i} buildCoreOptions`, {
+        trace(`${T$h} buildCoreOptions`, {
             source,
             sources,
         });
@@ -43269,7 +43269,7 @@ class Player {
         assert.ok(this.player, 'Player is not initialized');
         const core = this.player.core;
         core.on(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, ({ orientation }) => {
-            trace(`${T$i} on CORE_SCREEN_ORIENTATION_CHANGED`, {
+            trace(`${T$h} on CORE_SCREEN_ORIENTATION_CHANGED`, {
                 orientation,
                 rootNode: {
                     width: this.rootNode?.clientWidth,
@@ -43284,14 +43284,14 @@ class Player {
             }
         }, null);
         core.on(Events$1.CORE_RESIZE, ({ width, height }) => {
-            trace(`${T$i} on CORE_RESIZE`, {
+            trace(`${T$h} on CORE_RESIZE`, {
                 width,
                 height,
             });
             this.safeTriggerEvent(PlayerEvent.Resize, { width, height });
         }, null);
         core.on(Events$1.CORE_FULLSCREEN, (isFullscreen) => {
-            trace(`${T$i} CORE_FULLSCREEN`, {
+            trace(`${T$h} CORE_FULLSCREEN`, {
                 isFullscreen,
             });
             this.safeTriggerEvent(PlayerEvent.Fullscreen, isFullscreen);
@@ -43299,7 +43299,7 @@ class Player {
     }
 }
 
-var version$1 = "2.22.3";
+var version$1 = "2.22.5";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43323,12 +43323,12 @@ function version() {
     };
 }
 
-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 T$h = 'plugins.audio_selector';
+const VERSION$6 = '2.22.4';
+// const T = 'plugins.audiotracks'
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @beta
@@ -43339,14 +43339,14 @@ const T$h = 'plugins.audio_selector';
  *
  * - {@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
@@ -43375,58 +43375,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$1.CORE_READY, this.onCoreReady);
+        this.listenToOnce(this.core, Events$1.CORE_READY, this.onCoreReady);
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
     onCoreReady() {
-        trace(`${T$h} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
-        this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hideSelectTrackMenu);
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, () => {
+            mediaControl.putElement('audiotracks', this.$el);
+        });
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hideMenu);
     }
-    bindPlaybackEvents() {
-        trace(`${T$h} bindPlaybackEvents`);
+    onActiveContainerChanged() {
         this.currentTrack = null;
-        this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_STOP, this.onStop);
-        this.setupAudioTrackListeners();
-    }
-    setupAudioTrackListeners() {
-        this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_AUDIO_AVAILABLE, (tracks) => {
-            trace(`${T$h} on PLAYBACK_AUDIO_AVAILABLE`, { audioTracks: tracks });
+        this.listenTo(this.core.activeContainer, Events$1.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$1.PLAYBACK_AUDIO_CHANGED, (track) => {
-            trace(`${T$h} PLAYBACK_AUDIO_CHANGED`, { audioTrack: track });
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_AUDIO_CHANGED, (track) => {
             this.currentTrack = track;
             this.highlightCurrentTrack();
             this.buttonElement().removeClass('changing');
             this.updateText();
         });
     }
-    onStop() {
-        trace(`${T$h} onStop`);
-    }
-    onActiveContainerChanged() {
-        trace(`${T$h} 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
@@ -43435,43 +43420,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');
@@ -43480,11 +43457,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');
@@ -47514,283 +47494,6 @@ 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";
-
-const checkIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n        d=\"M20.5793 4.19296C20.1216 3.86696 19.4777 3.96396 19.1424 4.40896L9.37295 17.3809L4.81634 12.107C4.45222 11.683 3.80218 11.6289 3.36709 11.9839C2.932 12.3389 2.87543 12.97 3.2416 13.393L8.64165 19.643C8.83708 19.869 9.12506 20 9.42849 20C9.4398 20 9.45114 20 9.46246 19.999C9.77926 19.989 10.0724 19.838 10.2586 19.59L20.8015 5.58996C21.1368 5.14496 21.0371 4.51896 20.5793 4.19296Z\"\n        fill=\"#C9C9C9\"/>\n</svg>\n";
-
-const T$a = 'plugins.level_selector';
-const VERSION$4 = '2.19.4';
-/**
- * `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 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
-     */
-    get name() {
-        return 'level_selector';
-    }
-    /**
-     * @internal
-     */
-    get supportedVersion() {
-        return { min: CLAPPR_VERSION };
-    }
-    /**
-     * @internal
-     */
-    static get version() {
-        return VERSION$4;
-    }
-    /**
-     * @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$1.CORE_READY, this.onCoreReady);
-        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
-    }
-    onCoreReady() {
-        trace(`${T$a} 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() {
-        trace(`${T$a} onGearRendered`);
-        this.render();
-    }
-    onActiveContainerChange() {
-        this.removeAuto = false;
-        this.isHd = false;
-        const activePlayback = this.core.activePlayback;
-        this.listenTo(activePlayback, Events$1.PLAYBACK_LEVELS_AVAILABLE, this.onLevelsAvailable);
-        this.listenTo(activePlayback, Events$1.PLAYBACK_LEVEL_SWITCH_START, this.onLevelSwitchStart);
-        this.listenTo(activePlayback, Events$1.PLAYBACK_LEVEL_SWITCH_END, this.onLevelSwitchEnd);
-        this.listenTo(activePlayback, Events$1.PLAYBACK_BITRATE, this.onBitrate);
-        this.listenTo(activePlayback, Events$1.PLAYBACK_STOP, this.onStop);
-        this.listenTo(activePlayback, Events$1.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() {
-        trace(`${T$a} onStop`);
-        this.listenToOnce(this.core.activePlayback, Events$1.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(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() {
-        trace(`${T$a} 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) {
-        trace(`${T$a} updateCurrentLevel`, { 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: {
@@ -48226,7 +47929,7 @@ const DEFAULT_SETTINGS = {
     default: [],
     seekEnabled: true,
 };
-const T$9 = 'plugins.media_control';
+const T$a = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
     'playstop',
@@ -48464,7 +48167,7 @@ class MediaControl extends UICorePlugin {
      * Hides the media control UI
      */
     disable() {
-        trace(`${T$9} disable`);
+        trace(`${T$a} disable`);
         this.userDisabled = true; // TODO distinguish between user and system (e.g., unplayable) disabled?
         this.hide();
         this.unbindKeyEvents();
@@ -48474,7 +48177,7 @@ class MediaControl extends UICorePlugin {
      * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
      */
     enable() {
-        trace(`${T$9} enable`);
+        trace(`${T$a} enable`);
         if (this.options.chromeless) {
             return;
         }
@@ -49009,7 +48712,7 @@ class MediaControl extends UICorePlugin {
     }
     putElement(name, element) {
         const panel = this.getElementLocation(name);
-        trace(`${T$9} putElement`, { name, panel: !!panel });
+        trace(`${T$a} putElement`, { name, panel: !!panel });
         if (panel) {
             const current = panel.find(`[data-${name}]`);
             element.attr(`data-${name}`, '');
@@ -49197,7 +48900,7 @@ class MediaControl extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$9} render`);
+        trace(`${T$a} render`);
         const timeout = this.options.hideMediaControlDelay || 2000;
         const html = MediaControl.template({ settings: this.settings ?? {} });
         this.$el.html(html);
@@ -49319,7 +49022,7 @@ class MediaControl extends UICorePlugin {
         return isFinite(this.core.activePlayback.getDuration());
     }
     getElementLocation(name) {
-        trace(`${T$9} getElementLocation`, {
+        trace(`${T$a} getElementLocation`, {
             name,
             right: this.settings.right,
             left: this.settings.left,
@@ -49366,8 +49069,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
@@ -49385,7 +49088,7 @@ class MultiCamera extends UICorePlugin {
         return { min: CLAPPR_VERSION };
     }
     static get version() {
-        return VERSION$3;
+        return VERSION$4;
     }
     get template() {
         return tmpl(pluginHtml$3);
@@ -49513,7 +49216,7 @@ class MultiCamera extends UICorePlugin {
     }
     onCameraSelect(event) {
         const value = event.currentTarget.dataset.multicameraSelectorSelect;
-        trace(`${T$8} onCameraSelect`, { value });
+        trace(`${T$9} onCameraSelect`, { value });
         if (value !== undefined) {
             this.changeById(parseInt(value, 10));
         }
@@ -49639,13 +49342,13 @@ class MultiCamera extends UICorePlugin {
         }
     }
     changeById(id) {
-        trace(`${T$8} changeById`, { id });
+        trace(`${T$9} changeById`, { id });
         queueMicrotask(() => {
             const playbackOptions = this.core.options.playback || {};
             // TODO figure out what this does
             playbackOptions.recycleVideo = Browser.isMobile;
             this.currentCamera = this.findElementById(id) ?? null;
-            trace(`${T$8} changeById`, { id, currentCamera: this.currentCamera, multicamera: this.multicamera });
+            trace(`${T$9} changeById`, { id, currentCamera: this.currentCamera, multicamera: this.multicamera });
             if (!this.currentCamera) {
                 return;
             }
@@ -49662,7 +49365,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,
@@ -49717,10 +49420,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
@@ -49748,9 +49451,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
      */
@@ -49778,7 +49481,7 @@ class PictureInPicture extends UICorePlugin {
         });
     }
     isPiPSupported() {
-        trace(`${T$7} isPiPSupported`, {
+        trace(`${T$8} isPiPSupported`, {
             pictureInPictureEnabled: !!document.pictureInPictureEnabled,
             requestPictureInPicture: !!HTMLVideoElement.prototype.requestPictureInPicture,
         });
@@ -49799,7 +49502,7 @@ class PictureInPicture extends UICorePlugin {
         return this;
     }
     togglePictureInPicture() {
-        trace(`${T$7} togglePictureInPicture`);
+        trace(`${T$8} togglePictureInPicture`);
         if (this.videoElement !== document.pictureInPictureElement) {
             this.requestPictureInPicture();
         }
@@ -49808,23 +49511,29 @@ class PictureInPicture extends UICorePlugin {
         }
     }
     requestPictureInPicture() {
-        trace(`${T$7} requestPictureInPicture`, {
+        trace(`${T$8} requestPictureInPicture`, {
             videoElement: !!this.videoElement,
         });
         this.videoElement.requestPictureInPicture();
     }
     exitPictureInPicture() {
-        trace(`${T$7} exitPictureInPicture`);
+        trace(`${T$8} exitPictureInPicture`);
         document.exitPictureInPicture();
     }
 }
 
-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";
+
 const DEFAULT_PLAYBACK_RATES = [
     { value: 0.5, label: '0.5x' },
     { value: 0.75, label: '0.75x' },
@@ -49835,7 +49544,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
@@ -49884,8 +49593,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 =
@@ -49918,7 +49627,7 @@ class PlaybackRate extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
     }
     onCoreReady() {
-        trace(`${T$6} onCoreReady`);
+        trace(`${T$7} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         const gear = this.core.getPlugin('bottom_gear');
@@ -49927,22 +49636,22 @@ class PlaybackRate extends UICorePlugin {
         this.listenTo(gear, GearEvents.RENDERED, this.onGearRendered);
     }
     onActiveContainerChange() {
-        trace(`${T$6} onActiveContainerChange`);
+        trace(`${T$7} onActiveContainerChange`);
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_STOP, this.onStop);
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_PLAY, this.onPlay);
         this.listenTo(this.core.activePlayback, PlaybackEvents.PLAYBACK_RATE_CHANGED, this.onPlaybackRateChange);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_LOADEDMETADATA, this.onMetaDataLoaded);
     }
     onMediaControlRendered() {
-        trace(`${T$6} onMediaControlRendered`);
+        trace(`${T$7} onMediaControlRendered`);
         this.render();
     }
     onGearRendered() {
-        trace(`${T$6} onGearRendered`);
+        trace(`${T$7} onGearRendered`);
         this.addGearItem();
     }
     addGearItem() {
-        trace(`${T$6} addGearItem`);
+        trace(`${T$7} addGearItem`);
         this.core
             .getPlugin('bottom_gear')
             ?.addItem('rate', this.$el)
@@ -49954,7 +49663,7 @@ class PlaybackRate extends UICorePlugin {
         })));
     }
     onMetaDataLoaded() {
-        trace(`${T$6} onMetaDataLoaded`);
+        trace(`${T$7} onMetaDataLoaded`);
         this.render();
     }
     allRateElements() {
@@ -49969,7 +49678,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`, {
                 playbackRate,
                 selectedRate: this.selectedRate,
             });
@@ -49989,7 +49698,7 @@ class PlaybackRate extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$6} render`, {
+        trace(`${T$7} render`, {
             shouldRender: this.shouldRender(),
         });
         if (!this.shouldRender()) {
@@ -50064,7 +49773,7 @@ class PlaybackRate extends UICorePlugin {
             .addClass('gcore-skin-active');
     }
     updateGearOptionLabel() {
-        trace(`${T$6} updateGearOptionLabel`);
+        trace(`${T$7} updateGearOptionLabel`);
         this.addGearItem();
     }
 }
@@ -50074,7 +49783,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
@@ -50180,13 +49889,13 @@ class Poster extends UIContainerPlugin {
      * Disables the plugin, unmounting it from the DOM
      */
     disable() {
-        trace(`${T$5} disable`);
+        trace(`${T$6} disable`);
         this.hasStartedPlaying = false;
         this.playRequested = false;
         super.disable();
     }
     onError(error) {
-        trace(`${T$5} onError`, {
+        trace(`${T$6} onError`, {
             error,
             enabled: this.enabled,
         });
@@ -50199,18 +49908,18 @@ class Poster extends UIContainerPlugin {
         }
     }
     onPlay() {
-        trace(`${T$5} onPlay`);
+        trace(`${T$6} onPlay`);
         this.hasStartedPlaying = true;
         this.playRequested = false;
         this.update();
     }
     onPlayIntent() {
-        trace(`${T$5} onPlayIntent`);
+        trace(`${T$6} onPlayIntent`);
         this.playRequested = true;
         this.update();
     }
     onStop() {
-        trace(`${T$5} onStop`, {
+        trace(`${T$6} onStop`, {
             enabled: this.enabled,
         });
         this.hasStartedPlaying = false;
@@ -50218,7 +49927,7 @@ class Poster extends UIContainerPlugin {
         this.update();
     }
     updatePlayButton(show) {
-        trace(`${T$5} updatePlayButton`, {
+        trace(`${T$6} updatePlayButton`, {
             show,
             chromeless: this.options.chromeless,
             allowUserInteraction: this.options.allowUserInteraction,
@@ -50247,7 +49956,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,
@@ -50268,7 +49977,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) {
@@ -50281,7 +49990,7 @@ class Poster extends UIContainerPlugin {
         this.updatePoster();
     }
     updatePoster() {
-        trace(`${T$5} updatePoster`, {
+        trace(`${T$6} updatePoster`, {
             hasStartedPlaying: this.hasStartedPlaying,
         });
         if (!this.hasStartedPlaying) {
@@ -50296,7 +50005,7 @@ class Poster extends UIContainerPlugin {
         this.$el.show();
     }
     hidePoster() {
-        trace(`${T$5} hidePoster`, {
+        trace(`${T$6} hidePoster`, {
             shouldHideOnPlay: this.shouldHideOnPlay(),
         });
         if (!this.options.disableMediaControl) {
@@ -50346,6 +50055,280 @@ 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$1.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
+    }
+    onCoreReady() {
+        trace(`${T$5} 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() {
+        trace(`${T$5} onGearRendered`);
+        this.render();
+    }
+    onActiveContainerChange() {
+        this.removeAuto = false;
+        this.isHd = false;
+        const activePlayback = this.core.activePlayback;
+        this.listenTo(activePlayback, Events$1.PLAYBACK_LEVELS_AVAILABLE, this.onLevelsAvailable);
+        this.listenTo(activePlayback, Events$1.PLAYBACK_LEVEL_SWITCH_START, this.onLevelSwitchStart);
+        this.listenTo(activePlayback, Events$1.PLAYBACK_LEVEL_SWITCH_END, this.onLevelSwitchEnd);
+        this.listenTo(activePlayback, Events$1.PLAYBACK_BITRATE, this.onBitrate);
+        this.listenTo(activePlayback, Events$1.PLAYBACK_STOP, this.onStop);
+        this.listenTo(activePlayback, Events$1.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() {
+        trace(`${T$5} onStop`);
+        this.listenToOnce(this.core.activePlayback, Events$1.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() {
+        trace(`${T$5} 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) {
+        trace(`${T$5} updateCurrentLevel`, { 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.
@@ -52312,4 +52295,4 @@ class VolumeFade extends UICorePlugin {
     }
 }
 
-export { AudioSelector, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, LevelSelector, LogTracer, Logger, Logo, MediaControl, MultiCamera, PictureInPicture, PlaybackErrorCode, PlaybackRate, Player, PlayerEvent, Poster, SeekTime, SentryTracer, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents, reportError, setTracer, trace, version };
+export { AudioTracks as AudioSelector, AudioTracks, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, QualityLevels as LevelSelector, LogTracer, Logger, Logo, MediaControl, MultiCamera, PictureInPicture, PlaybackErrorCode, PlaybackRate, Player, PlayerEvent, Poster, QualityLevels, SeekTime, SentryTracer, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents, reportError, setTracer, trace, version };