@gcorevideo/player 2.22.3 → 2.22.5

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/lib/testUtils.d.ts

@@ -91,6 +91,7 @@ export declare function createMockPlayback(name?: string): Events<string | symbo
     canAutoPlay: import("vitest").Mock<(...args: any[]) => any>;
     onResize: import("vitest").Mock<(...args: any[]) => any>;
     setPlaybackRate: import("vitest").Mock<(...args: any[]) => any>;
+    switchAudioTrack: import("vitest").Mock<(...args: any[]) => any>;
     trigger: <T extends string | symbol>(event: T, ...args: any[]) => boolean;
 };
 export declare function createMockContainer(playback?: any): Events<string | symbol, any> & {
@@ -105,6 +106,7 @@ export declare function createMockContainer(playback?: any): Events<string | sym
     isPlaying: import("vitest").Mock<(...args: any[]) => any>;
     play: import("vitest").Mock<(...args: any[]) => any>;
     seek: import("vitest").Mock<(...args: any[]) => any>;
+    switchAudioTrack: import("vitest").Mock<(...args: any[]) => any>;
     trigger: <T extends string | symbol>(event: T, ...args: any[]) => boolean;
 };
 export declare function createMockMediaControl(core: any): UICorePlugin;

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAA2B;;;;;;;;;;;;;;;;EAqBvC;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiC/C;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;EAiBvE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAiB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAY7C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAA2B;;;;;;;;;;;;;;;;EAqBvC;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC/C;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;EAkBvE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAiB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAY7C"}

package/lib/testUtils.js

@@ -124,6 +124,7 @@ export function createMockPlayback(name = 'mock') {
         canAutoPlay: vi.fn().mockImplementation(() => true),
         onResize: vi.fn().mockImplementation(() => true),
         setPlaybackRate: vi.fn(),
+        switchAudioTrack: vi.fn(),
         trigger: emitter.emit,
     });
 }
@@ -142,6 +143,7 @@ export function createMockContainer(playback = createMockPlayback()) {
         isPlaying: vi.fn().mockReturnValue(false),
         play: vi.fn(),
         seek: vi.fn(),
+        switchAudioTrack: vi.fn(),
         trigger: emitter.emit,
     });
 }

package/package.json

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

package/src/index.plugins.ts

@@ -1,6 +1,7 @@
 import '../assets/style/main.scss';
 
 export * from "./plugins/audio-selector/AudioSelector.js";
+export { AudioTracks as AudioSelector } from "./plugins/audio-selector/AudioSelector.js";
 export * from "./plugins/big-mute-button/BigMuteButton.js";
 export * from "./plugins/bottom-gear/BottomGear.js";
 export * from "./plugins/clappr-nerd-stats/ClapprNerdStats.js";
@@ -13,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";

package/src/plugins/audio-selector/AudioSelector.ts

@@ -1,6 +1,5 @@
 import { Events, UICorePlugin, template } from '@clappr/core'
 import { AudioTrack } from '@clappr/core/types/base/playback/playback.js'
-import { trace } from '@gcorevideo/utils'
 import assert from 'assert'
 
 import { CLAPPR_VERSION } from '../../build.js'
@@ -11,9 +10,9 @@ import audioArrow from '../../../assets/icons/old/quality-arrow.svg'
 import { ZeptoResult } from '../../types.js'
 import { MediaControl } from '../media-control/MediaControl.js'
 
-const VERSION: string = '0.0.1'
+const VERSION: string = '2.22.4'
 
-const T = 'plugins.audio_selector'
+// const T = 'plugins.audiotracks'
 
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
@@ -25,7 +24,7 @@ const T = 'plugins.audio_selector'
  *
  * - {@link MediaControl}
  */
-export class AudioSelector extends UICorePlugin {
+export class AudioTracks extends UICorePlugin {
   private currentTrack: AudioTrack | null = null
 
   private tracks: AudioTrack[] = []
@@ -34,7 +33,7 @@ export class AudioSelector extends UICorePlugin {
    * @internal
    */
   get name() {
-    return 'audio_selector'
+    return 'audio_selector' // TODO rename to audiotracks
   }
 
   /**
@@ -59,7 +58,6 @@ export class AudioSelector extends UICorePlugin {
   override get attributes() {
     return {
       class: 'media-control-audiotracks',
-
     }
   }
 
@@ -69,7 +67,7 @@ export class AudioSelector extends UICorePlugin {
   override get events() {
     return {
       'click [data-audiotracks-select]': 'onTrackSelect',
-      'click [data-audiotracks-button]': 'onShowLevelSelectMenu',
+      'click #audiotracks-button': 'toggleContextMenu',
     }
   }
 
@@ -77,7 +75,7 @@ export class AudioSelector extends UICorePlugin {
    * @internal
    */
   override bindEvents() {
-    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
+    this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady)
     this.listenTo(
       this.core,
       Events.CORE_ACTIVE_CONTAINER_CHANGED,
@@ -86,41 +84,30 @@ export class AudioSelector extends UICorePlugin {
   }
 
   private onCoreReady() {
-    trace(`${T} onCoreReady`)
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
-    this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render)
-    this.listenTo(
-      mediaControl,
-      Events.MEDIACONTROL_HIDE,
-      this.hideSelectTrackMenu,
-    )
+    this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, () => {
+      mediaControl.putElement('audiotracks', this.$el)
+    })
+    this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu)
   }
 
-  private bindPlaybackEvents() {
-    trace(`${T} bindPlaybackEvents`)
+  private onActiveContainerChanged() {
     this.currentTrack = null
-    this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop)
-    this.setupAudioTrackListeners()
-  }
-
-  private setupAudioTrackListeners() {
     this.listenTo(
-      this.core.activePlayback,
-      Events.PLAYBACK_AUDIO_AVAILABLE,
+      this.core.activeContainer,
+      Events.CONTAINER_AUDIO_AVAILABLE,
       (tracks: AudioTrack[]) => {
-        trace(`${T} on PLAYBACK_AUDIO_AVAILABLE`, { audioTracks: tracks })
         this.currentTrack =
-          tracks.find((track) => track.kind === 'main') ?? null
-        this.fillTracks(tracks)
+          tracks.find((track) => track.kind === 'main') ?? null // TODO test
+        this.tracks = tracks
+        this.render()
       },
     )
-
     this.listenTo(
-      this.core.activePlayback,
-      Events.PLAYBACK_AUDIO_CHANGED,
+      this.core.activeContainer,
+      Events.CONTAINER_AUDIO_CHANGED,
       (track: AudioTrack) => {
-        trace(`${T} PLAYBACK_AUDIO_CHANGED`, { audioTrack: track })
         this.currentTrack = track
         this.highlightCurrentTrack()
         this.buttonElement().removeClass('changing')
@@ -129,24 +116,10 @@ export class AudioSelector extends UICorePlugin {
     )
   }
 
-  private onStop() {
-    trace(`${T} onStop`)
-  }
-
-  private onActiveContainerChanged() {
-    trace(`${T} onActiveContainerChanged`)
-    this.bindPlaybackEvents()
-  }
-
   private 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
   }
 
   /**
@@ -159,52 +132,40 @@ export class AudioSelector extends UICorePlugin {
 
     const mediaControl = this.core.getPlugin('media_control') as MediaControl
     this.$el.html(
-      AudioSelector.template({ tracks: this.tracks, title: this.getTitle() }),
+      AudioTracks.template({
+        tracks: this.tracks,
+        title: this.getTitle(),
+        icon: audioArrow,
+      }),
     )
-    this.$('.audio-arrow').append(audioArrow)
-    mediaControl.putElement('audiotracks', this.el)
-
     this.updateText()
     this.highlightCurrentTrack()
 
     return this
   }
 
-  private fillTracks(tracks: AudioTrack[]) {
-    this.tracks = tracks
-    this.render()
-  }
-
-  private findTrackBy(id: string) {
-    return this.tracks.find((track) => track.id === id)
-  }
-
   private onTrackSelect(event: MouseEvent) {
     const id = (event.target as HTMLElement)?.dataset?.audiotracksSelect
     if (id) {
       this.selectAudioTrack(id)
     }
-    this.toggleContextMenu()
+    this.hideMenu()
     event.stopPropagation()
     return false
   }
 
   private selectAudioTrack(id: string) {
     this.startTrackSwitch()
-    this.core.activePlayback.switchAudioTrack(id)
+    this.core.activeContainer.switchAudioTrack(id)
     this.updateText()
   }
 
-  private onShowLevelSelectMenu() {
-    this.toggleContextMenu()
-  }
-
-  private hideSelectTrackMenu() {
-    ;(this.$('ul') as ZeptoResult).hide()
+  private hideMenu() {
+    this.$el.find('#audiotracks-select').addClass('hidden')
   }
 
   private toggleContextMenu() {
-    ;(this.$('ul') as ZeptoResult).toggle()
+    this.$el.find('#audiotracks-select').toggleClass('hidden')
   }
 
   private buttonElement(): ZeptoResult {
@@ -218,14 +179,17 @@ export class AudioSelector extends UICorePlugin {
   private trackElement(id?: string): ZeptoResult {
     return (
       this.$(
-        'ul a' +
-          (id !== undefined ? '[data-audiotracks-select="' + id + '"]' : ''),
+        '#audiotracks-select a' +
+          (id !== undefined ? `[data-audiotracks-select="${id}"]` : ''),
       ) as ZeptoResult
     ).parent()
   }
 
   private getTitle(): string {
-    return this.currentTrack?.label || ''
+    if (!this.currentTrack) {
+      return ''
+    }
+    return this.currentTrack.label || this.currentTrack.language
   }
 
   private startTrackSwitch() {