@gcorevideo/player 2.22.4 → 2.22.7

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/playback/dash-playback/DashPlayback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashPlayback.d.ts","sourceRoot":"","sources":["../../../src/playback/dash-playback/DashPlayback.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DashPlayback.d.ts","sourceRoot":"","sources":["../../../src/playback/dash-playback/DashPlayback.ts"],"names":[],"mappings":"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"}

package/lib/playback/dash-playback/DashPlayback.js

@@ -423,8 +423,8 @@ export default class DashPlayback extends BasePlayback {
         return super.destroy();
     }
     _updatePlaybackType() {
-        assert.ok(this._dash, 'An instance of dashjs MediaPlayer is required to update the playback type');
         const prevPlaybackType = this._playbackType;
+        // @ts-ignore
         this._playbackType = this._dash.isDynamic() ? Playback.LIVE : Playback.VOD;
         if (prevPlaybackType !== this._playbackType) {
             this._updateSettings();

package/lib/plugins/bottom-gear/BottomGear.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuC,MAAM,cAAc,CAAA;AAOhF,OAAO,uCAAuC,CAAA;AAC9C,OAAO,gDAAgD,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAM5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,IAAI,CAAQ;IAEpB;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IASnB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IAyB1D,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAsBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,sBAAsB;CAI/B"}
+{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuC,MAAM,cAAc,CAAA;AAOhF,OAAO,uCAAuC,CAAA;AAC9C,OAAO,gDAAgD,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAM5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,IAAI,CAAQ;IAEpB;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IASnB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IAyB1D,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAqBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,sBAAsB;CAK/B"}

package/lib/plugins/bottom-gear/BottomGear.js

@@ -207,7 +207,6 @@ export class BottomGear extends UICorePlugin {
             .find('#gear-sub-menu-wrapper')
             .hide();
         // TODO make non-clickable when there are no items
-        mediaControl.putElement('gear', this.$el);
         setTimeout(() => {
             this.trigger(GearEvents.RENDERED);
         }, 0);
@@ -237,6 +236,7 @@ export class BottomGear extends UICorePlugin {
     }
     onMediaControlRendered() {
         trace(`${T} onMediaControlRendered`);
-        this.render();
+        const mediaControl = this.core.getPlugin('media_control');
+        mediaControl.putElement('gear', this.$el);
     }
 }

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`;
+}