@gcorevideo/player 2.22.4 → 2.22.5

package/lib/index.plugins.d.ts

@@ -12,13 +12,14 @@ export * from "./plugins/dvr-controls/DvrControls.js";
 export * from "./plugins/error-screen/ErrorScreen.js";
 export * from "./plugins/favicon/Favicon.js";
 export * from "./plugins/google-analytics/GoogleAnalytics.js";
-export * from "./plugins/level-selector/LevelSelector.js";
 export * from "./plugins/logo/Logo.js";
 export * from "./plugins/media-control/MediaControl.js";
 export * from "./plugins/multi-camera/MultiCamera.js";
 export * from "./plugins/picture-in-picture/PictureInPicture.js";
 export * from "./plugins/playback-rate/PlaybackRate.js";
 export * from "./plugins/poster/Poster.js";
+export * from "./plugins/level-selector/QualityLevels.js";
+export { QualityLevels as LevelSelector } from "./plugins/level-selector/QualityLevels.js";
 export * from "./plugins/seek-time/SeekTime.js";
 export * from "./plugins/share/Share.js";
 export * from "./plugins/skip-time/SkipTime.js";

package/lib/index.plugins.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.plugins.d.ts","sourceRoot":"","sources":["../src/index.plugins.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAEnC,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,WAAW,IAAI,aAAa,EAAE,MAAM,2CAA2C,CAAC;AACzF,cAAc,4CAA4C,CAAC;AAC3D,cAAc,qCAAqC,CAAC;AACpD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,uCAAuC,CAAC;AACtD,cAAc,0CAA0C,CAAC;AACzD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAE7C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,wBAAwB,CAAC;AACvC,cAAc,yCAAyC,CAAC;AACxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,kDAAkD,CAAC;AACjE,cAAc,yCAAyC,CAAC;AACxD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,sDAAsD,CAAC;AACrE,OAAO,EAAE,kBAAkB,IAAI,OAAO,EAAE,MAAM,sDAAsD,CAAC;AACrG,cAAc,iDAAiD,CAAC;AAChE,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,uCAAuC,CAAC;AACpF,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.plugins.d.ts","sourceRoot":"","sources":["../src/index.plugins.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAEnC,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,WAAW,IAAI,aAAa,EAAE,MAAM,2CAA2C,CAAC;AACzF,cAAc,4CAA4C,CAAC;AAC3D,cAAc,qCAAqC,CAAC;AACpD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,uCAAuC,CAAC;AACtD,cAAc,0CAA0C,CAAC;AACzD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAE7C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,yCAAyC,CAAC;AACxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,kDAAkD,CAAC;AACjE,cAAc,yCAAyC,CAAC;AACxD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,aAAa,IAAI,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAC3F,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,sDAAsD,CAAC;AACrE,OAAO,EAAE,kBAAkB,IAAI,OAAO,EAAE,MAAM,sDAAsD,CAAC;AACrG,cAAc,iDAAiD,CAAC;AAChE,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,uCAAuC,CAAC;AACpF,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,qCAAqC,CAAC"}

package/lib/index.plugins.js

@@ -13,13 +13,14 @@ export * from "./plugins/error-screen/ErrorScreen.js";
 export * from "./plugins/favicon/Favicon.js";
 // _ ga-events
 export * from "./plugins/google-analytics/GoogleAnalytics.js";
-export * from "./plugins/level-selector/LevelSelector.js";
 export * from "./plugins/logo/Logo.js";
 export * from "./plugins/media-control/MediaControl.js";
 export * from "./plugins/multi-camera/MultiCamera.js";
 export * from "./plugins/picture-in-picture/PictureInPicture.js";
 export * from "./plugins/playback-rate/PlaybackRate.js";
 export * from "./plugins/poster/Poster.js";
+export * from "./plugins/level-selector/QualityLevels.js";
+export { QualityLevels as LevelSelector } from "./plugins/level-selector/QualityLevels.js";
 export * from "./plugins/seek-time/SeekTime.js";
 export * from "./plugins/share/Share.js";
 export * from "./plugins/skip-time/SkipTime.js";

package/lib/plugins/level-selector/LevelSelector.d.ts

@@ -1,10 +1,10 @@
 import { UICorePlugin } from '@clappr/core';
 import '../../../assets/level-selector/style.scss';
 /**
- * Configuration options for the {@link LevelSelector | level selector} plugin.
+ * Configuration options for the {@link QualityLevels} plugin.
  * @beta
  */
-export interface LevelSelectorPluginSettings {
+export interface QualityLevelsPluginSettings {
     /**
      * The maximum resolution to allow in the level selector.
      */
@@ -31,19 +31,19 @@ export interface LevelSelectorPluginSettings {
  *
  * 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}
+ * Configuration options - {@link QualityLevelsPluginSettings}
  *
  * @example
  * ```ts
  * new Player({
- *   levelSelector: {
+ *   qualityLevels: {
  *     restrictResolution: 360,
  *     labels: { 360: 'SD', 720: 'HD' },
  *   },
  * })
  * ```
  */
-export declare class LevelSelector extends UICorePlugin {
+export declare class QualityLevels extends UICorePlugin {
     private levels;
     private levelLabels;
     private removeAuto;
@@ -93,6 +93,7 @@ export declare class LevelSelector extends UICorePlugin {
     render(): this;
     private renderDropdown;
     private updateButton;
+    private get pluginOptions();
     private get maxLevel();
     private onLevelsAvailable;
     private makeLevelsLabels;

package/lib/plugins/level-selector/LevelSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LevelSelector.d.ts","sourceRoot":"","sources":["../../../src/plugins/level-selector/LevelSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,YAAY,EAAE,MAAM,cAAc,CAAA;AAgB7D,OAAO,2CAA2C,CAAA;AAMlD;;;GAGG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAChC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAO,CAAC,MAAM,CAAqB;IAEnC,OAAO,CAAC,WAAW,CAAe;IAElC,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,eAAe,CAAK;IAE5B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAChB;IAEtB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAuC;IAE3E;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED,IAAa,MAAM;;;MAKlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,uBAAuB;IAoC/B,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,YAAY;IAcpB;;OAEG;IACM,MAAM;IAUf,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,YAAY;IAcpB,OAAO,KAAK,QAAQ,GASnB;IAED,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,qBAAqB;CAkB9B"}
+{"version":3,"file":"LevelSelector.d.ts","sourceRoot":"","sources":["../../../src/plugins/level-selector/LevelSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,YAAY,EAAE,MAAM,cAAc,CAAA;AAgB7D,OAAO,2CAA2C,CAAA;AAMlD;;;GAGG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAChC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAO,CAAC,MAAM,CAAqB;IAEnC,OAAO,CAAC,WAAW,CAAe;IAElC,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,eAAe,CAAK;IAE5B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAChB;IAEtB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAuC;IAE3E;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED,IAAa,MAAM;;;MAKlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,uBAAuB;IAoC/B,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,YAAY;IAcpB;;OAEG;IACM,MAAM;IAUf,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,YAAY;IAcpB,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,QAAQ,GASnB;IAED,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,qBAAqB;CAkB9B"}

package/lib/plugins/level-selector/LevelSelector.js

@@ -25,19 +25,19 @@ const VERSION = '2.19.4';
  *
  * 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}
+ * Configuration options - {@link QualityLevelsPluginSettings}
  *
  * @example
  * ```ts
  * new Player({
- *   levelSelector: {
+ *   qualityLevels: {
  *     restrictResolution: 360,
  *     labels: { 360: 'SD', 720: 'HD' },
  *   },
  * })
  * ```
  */
-export class LevelSelector extends UICorePlugin {
+export class QualityLevels extends UICorePlugin {
     levels = [];
     levelLabels = [];
     removeAuto = false;
@@ -156,7 +156,7 @@ export class LevelSelector extends UICorePlugin {
         return this;
     }
     renderDropdown() {
-        this.$el.html(LevelSelector.listTemplate({
+        this.$el.html(QualityLevels.listTemplate({
             arrowLeftIcon,
             checkIcon,
             current: this.selectedLevelId,
@@ -171,7 +171,7 @@ export class LevelSelector extends UICorePlugin {
         ;
         this.core.getPlugin('bottom_gear')
             ?.addItem('quality', this.$el)
-            .html(LevelSelector.buttonTemplate({
+            .html(QualityLevels.buttonTemplate({
             arrowRightIcon,
             currentText: this.currentText,
             isHd: this.isHd,
@@ -179,15 +179,18 @@ export class LevelSelector extends UICorePlugin {
             i18n: this.core.i18n,
         }));
     }
+    get pluginOptions() {
+        return this.core.options.qualityLevels || this.core.options.levelSelector;
+    }
     get maxLevel() {
-        const maxRes = this.core.options.levelSelector?.restrictResolution;
+        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.core.options.levelSelector?.restrictResolution;
+        const maxResolution = this.pluginOptions.restrictResolution;
         this.levels = levels;
         this.makeLevelsLabels();
         if (maxResolution) {
@@ -201,7 +204,7 @@ export class LevelSelector extends UICorePlugin {
         this.render();
     }
     makeLevelsLabels() {
-        const labels = this.core.options.levelSelector?.labels ?? {};
+        const labels = this.pluginOptions.labels ?? {};
         this.levelLabels = [];
         for (const level of this.levels) {
             const ll = level.width > level.height ? level.height : level.width;

package/lib/plugins/level-selector/QualityLevels.d.ts

@@ -0,0 +1,112 @@
+import { UICorePlugin } from '@clappr/core';
+import '../../../assets/level-selector/style.scss';
+/**
+ * Configuration options for the {@link QualityLevels} plugin.
+ * @beta
+ */
+export interface QualityLevelsPluginSettings {
+    /**
+     * The maximum resolution to allow in the level selector.
+     */
+    restrictResolution?: number;
+    /**
+     * The labels to show in the level selector.
+     * @example
+     * ```ts
+     * { 360: 'SD', 720: 'HD' }
+     * ```
+     */
+    labels?: Record<number, string>;
+}
+/**
+ * `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' },
+ *   },
+ * })
+ * ```
+ */
+export declare class QualityLevels extends UICorePlugin {
+    private levels;
+    private levelLabels;
+    private removeAuto;
+    private isHd;
+    private currentText;
+    private selectedLevelId;
+    private static readonly buttonTemplate;
+    private static readonly listTemplate;
+    /**
+     * @internal
+     */
+    get name(): string;
+    /**
+     * @internal
+     */
+    get supportedVersion(): {
+        min: string;
+    };
+    /**
+     * @internal
+     */
+    static get version(): string;
+    /**
+     * @internal
+     */
+    get attributes(): {
+        class: string;
+        'data-level-selector': string;
+    };
+    get events(): {
+        'click .gear-sub-menu_btn': string;
+        'click .go-back': string;
+    };
+    /**
+     * @internal
+     */
+    bindEvents(): void;
+    private onCoreReady;
+    private onGearRendered;
+    private onActiveContainerChange;
+    private updateHd;
+    private onStop;
+    private shouldRender;
+    /**
+     * @internal
+     */
+    render(): this;
+    private renderDropdown;
+    private updateButton;
+    private get pluginOptions();
+    private get maxLevel();
+    private onLevelsAvailable;
+    private makeLevelsLabels;
+    private onSelect;
+    private goBack;
+    private setLevel;
+    private allLevelElements;
+    private levelElement;
+    private onLevelSwitchStart;
+    private onLevelSwitchEnd;
+    private updateText;
+    private getLevelLabel;
+    private onBitrate;
+    private highlightCurrentLevel;
+}
+//# sourceMappingURL=QualityLevels.d.ts.map

package/lib/plugins/level-selector/QualityLevels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QualityLevels.d.ts","sourceRoot":"","sources":["../../../src/plugins/level-selector/QualityLevels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,YAAY,EAAE,MAAM,cAAc,CAAA;AAgB7D,OAAO,2CAA2C,CAAA;AAMlD;;;GAGG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAChC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAO,CAAC,MAAM,CAAqB;IAEnC,OAAO,CAAC,WAAW,CAAe;IAElC,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,eAAe,CAAK;IAE5B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAChB;IAEtB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAuC;IAE3E;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED,IAAa,MAAM;;;MAKlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,uBAAuB;IAoC/B,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,YAAY;IAcpB;;OAEG;IACM,MAAM;IAUf,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,YAAY;IAcpB,OAAO,KAAK,aAAa,GAIxB;IAED,OAAO,KAAK,QAAQ,GASnB;IAED,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,qBAAqB;CAkB9B"}

package/lib/plugins/level-selector/QualityLevels.js

@@ -0,0 +1,280 @@
+import { Events, template, UICorePlugin } from '@clappr/core';
+import { trace } from '@gcorevideo/utils';
+import assert from 'assert';
+import { CLAPPR_VERSION } from '../../build.js';
+import { GearEvents } from '../bottom-gear/BottomGear.js';
+import buttonHtml from '../../../assets/level-selector/button.ejs';
+import listHtml from '../../../assets/level-selector/list.ejs';
+import hdIcon from '../../../assets/icons/new/hd.svg';
+import arrowRightIcon from '../../../assets/icons/new/arrow-right.svg';
+import arrowLeftIcon from '../../../assets/icons/new/arrow-left.svg';
+import checkIcon from '../../../assets/icons/new/check.svg';
+import '../../../assets/level-selector/style.scss';
+const T = 'plugins.quality_levels';
+const VERSION = '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' },
+ *   },
+ * })
+ * ```
+ */
+export class QualityLevels extends UICorePlugin {
+    levels = [];
+    levelLabels = [];
+    removeAuto = false;
+    isHd = false;
+    currentText = '';
+    selectedLevelId = -1;
+    static buttonTemplate = template(buttonHtml);
+    static listTemplate = template(listHtml);
+    /**
+     * @internal
+     */
+    get name() {
+        return 'level_selector';
+    }
+    /**
+     * @internal
+     */
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    /**
+     * @internal
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * @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() {
+        trace(`${T} 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} 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() {
+        trace(`${T} 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() {
+        trace(`${T} 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} updateCurrentLevel`, { info });
+        this.highlightCurrentLevel();
+    }
+    highlightCurrentLevel() {
+        trace(`${T} 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`;
+}

package/lib/plugins/vast-ads/VastAds.d.ts

@@ -52,6 +52,7 @@ export declare class VastAds extends UICorePlugin {
     private _validateData;
     private playerResize;
     private _stopPauserollListeners;
+    private get pluginOptions();
     private _pauserollListeners;
     unBindEvents(): void;
     private containerChanged;

package/lib/plugins/vast-ads/VastAds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VastAds.d.ts","sourceRoot":"","sources":["../../../src/plugins/vast-ads/VastAds.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,IAAI,EAIJ,QAAQ,EAER,YAAY,EAEb,MAAM,cAAc,CAAA;AAarB,OAAO,qCAAqC,CAAA;AAQ5C,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAO,CAAC,mBAAmB,CAAiC;IAE5D,OAAO,CAAC,qBAAqB,CAAwC;IAErE,OAAO,CAAC,oBAAoB,CAAwC;IAEpE,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,mBAAmB,CAAI;IAE/B,OAAO,CAAC,UAAU,CAAyB;IAE3C,OAAO,CAAC,SAAS,CAAyB;IAE1C,OAAO,CAAC,eAAe,CAA2B;IAElD,OAAO,CAAC,gBAAgB,CAAI;IAE5B,OAAO,CAAC,YAAY,CAAY;IAEhC,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,SAAS,CAAwB;IAEzC,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,mBAAmB,CAA2B;IAEtD,OAAO,CAAC,aAAa,CAAiC;IAEtD,OAAO,CAAC,gBAAgB,CAAI;IAE5B,OAAO,CAAC,IAAI,CAA2B;IAEvC,OAAO,CAAC,OAAO,CAAK;IAEpB,OAAO,CAAC,uBAAuB,CAAI;IAEnC,OAAO,CAAC,0BAA0B,CAAI;IAEtC,OAAO,CAAC,YAAY,CAAoB;IAExC,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,SAAS,CAA2B;IAE5C,OAAO,CAAC,UAAU,CAA2B;IAE7C,OAAO,CAAC,aAAa,CAA2B;IAEhD,OAAO,CAAC,YAAY,CAA2B;IAE/C,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,MAAM,KAAK,OAAO,WAEjB;IAED,IAAI,YAAY,QAEf;IAED,IAAa,UAAU;;;MAKtB;gBAEW,IAAI,EAAE,IAAI;IAqEb,UAAU;IA8FnB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,oBAAoB;IAkE5B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,qBAAqB;IAwD7B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,uBAAuB;IAuC/B,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,mBAAmB;IAiD3B,YAAY;IASZ,OAAO,CAAC,gBAAgB;IA0BxB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IA6BpB,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAG3B;IAED,IAAI,QAAQ,IAAI,QAAQ,GAAG,IAAI,CAE9B;IAED,OAAO,CAAC,kBAAkB;IAU1B,gBAAgB,CAAC,CAAC,EAAE,MAAM;IAQ1B,cAAc;IAsBd,eAAe;IAkBf,WAAW;IAiBX,OAAO,CAAC,UAAU;IA+ClB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAiHhB,MAAM;IAqBf,OAAO,CAAC,QAAQ;CAGjB"}
+{"version":3,"file":"VastAds.d.ts","sourceRoot":"","sources":["../../../src/plugins/vast-ads/VastAds.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,IAAI,EAIJ,QAAQ,EAER,YAAY,EAEb,MAAM,cAAc,CAAA;AAarB,OAAO,qCAAqC,CAAA;AAQ5C,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAO,CAAC,mBAAmB,CAAiC;IAE5D,OAAO,CAAC,qBAAqB,CAAwC;IAErE,OAAO,CAAC,oBAAoB,CAAwC;IAEpE,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,mBAAmB,CAAI;IAE/B,OAAO,CAAC,UAAU,CAAyB;IAE3C,OAAO,CAAC,SAAS,CAAyB;IAE1C,OAAO,CAAC,eAAe,CAA2B;IAElD,OAAO,CAAC,gBAAgB,CAAI;IAE5B,OAAO,CAAC,YAAY,CAAY;IAEhC,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,SAAS,CAAwB;IAEzC,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,mBAAmB,CAA2B;IAEtD,OAAO,CAAC,aAAa,CAAiC;IAEtD,OAAO,CAAC,gBAAgB,CAAI;IAE5B,OAAO,CAAC,IAAI,CAA2B;IAEvC,OAAO,CAAC,OAAO,CAAK;IAEpB,OAAO,CAAC,uBAAuB,CAAI;IAEnC,OAAO,CAAC,0BAA0B,CAAI;IAEtC,OAAO,CAAC,YAAY,CAAoB;IAExC,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,SAAS,CAA2B;IAE5C,OAAO,CAAC,UAAU,CAA2B;IAE7C,OAAO,CAAC,aAAa,CAA2B;IAEhD,OAAO,CAAC,YAAY,CAA2B;IAE/C,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,MAAM,KAAK,OAAO,WAEjB;IAED,IAAI,YAAY,QAEf;IAED,IAAa,UAAU;;;MAKtB;gBAEW,IAAI,EAAE,IAAI;IAqEb,UAAU;IA8FnB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,oBAAoB;IAkE5B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,qBAAqB;IAwD7B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,uBAAuB;IAuC/B,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,uBAAuB;IAO/B,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,mBAAmB;IAiD3B,YAAY;IASZ,OAAO,CAAC,gBAAgB;IA0BxB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IA6BpB,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAG3B;IAED,IAAI,QAAQ,IAAI,QAAQ,GAAG,IAAI,CAE9B;IAED,OAAO,CAAC,kBAAkB;IAU1B,gBAAgB,CAAC,CAAC,EAAE,MAAM;IAQ1B,cAAc;IAsBd,eAAe;IAkBf,WAAW;IAiBX,OAAO,CAAC,UAAU;IA+ClB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAiHhB,MAAM;IAqBf,OAAO,CAAC,QAAQ;CAGjB"}

package/lib/plugins/vast-ads/VastAds.js

@@ -345,8 +345,11 @@ export class VastAds extends UICorePlugin {
         // @ts-ignore
         this.stopListening(this.playback, Events.PLAYBACK_PAUSE);
     }
+    get pluginOptions() {
+        return this.options.vastAds;
+    }
     _pauserollListeners() {
-        if (!this._validateData(this._options.VastAds.pauseroll)) {
+        if (!this._validateData(this.pluginOptions.pauseroll)) {
             return;
         }
         this._stopPauserollListeners();
@@ -571,11 +574,11 @@ export class VastAds extends UICorePlugin {
         // const currentRoll = type;
         this.destroyRoll();
         if (currentRoll === 'preroll') {
-            this.options.vastAds[currentRoll] = [];
+            this.pluginOptions[currentRoll] = [];
         }
         this.currentState = '';
         this.$el.hide();
-        if (!this.options.disableClickOnPause) {
+        if (!this.options.disableClickOnPause) { // TODO sort out
             this._clickToPausePlugin?.enable();
         }
         try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.22.4",
+  "version": "2.22.5",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/index.plugins.ts

@@ -14,13 +14,14 @@ export * from "./plugins/error-screen/ErrorScreen.js";
 export * from "./plugins/favicon/Favicon.js";
 // _ ga-events
 export * from "./plugins/google-analytics/GoogleAnalytics.js";
-export * from "./plugins/level-selector/LevelSelector.js";
 export * from "./plugins/logo/Logo.js";
 export * from "./plugins/media-control/MediaControl.js";
 export * from "./plugins/multi-camera/MultiCamera.js";
 export * from "./plugins/picture-in-picture/PictureInPicture.js";
 export * from "./plugins/playback-rate/PlaybackRate.js";
 export * from "./plugins/poster/Poster.js";
+export * from "./plugins/level-selector/QualityLevels.js";
+export { QualityLevels as LevelSelector } from "./plugins/level-selector/QualityLevels.js";
 export * from "./plugins/seek-time/SeekTime.js";
 export * from "./plugins/share/Share.js";
 export * from "./plugins/skip-time/SkipTime.js";