@gcorevideo/player 2.22.0 → 2.22.1

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

@@ -48,7 +48,8 @@ export declare class LevelSelector extends UICorePlugin {
     private levelLabels;
     private removeAuto;
     private isHd;
-    private isOpen;
+    private currentText;
+    private selectedLevelId;
     private static readonly buttonTemplate;
     private static readonly listTemplate;
     /**
@@ -72,11 +73,8 @@ export declare class LevelSelector extends UICorePlugin {
         class: string;
         'data-level-selector': string;
     };
-    private currentText;
-    private selectedLevelId;
     get events(): {
         'click .gear-sub-menu_btn': string;
-        'click .gear-option': string;
         'click .go-back': string;
     };
     /**
@@ -85,30 +83,29 @@ export declare class LevelSelector extends UICorePlugin {
     bindEvents(): void;
     private onCoreReady;
     private onGearRendered;
-    private bindPlaybackEvents;
+    private onActiveContainerChange;
+    private updateHd;
     private onStop;
     private shouldRender;
     /**
      * @internal
      */
     render(): this;
-    private renderButton;
     private renderDropdown;
+    private updateButton;
     private get maxLevel();
-    private fillLevels;
+    private onLevelsAvailable;
     private makeLevelsLabels;
-    private onLevelSelect;
+    private onSelect;
     private goBack;
     private setLevel;
-    private onShowLevelSelectMenu;
     private allLevelElements;
     private levelElement;
     private onLevelSwitchStart;
     private onLevelSwitchEnd;
     private updateText;
     private getLevelLabel;
-    private updateCurrentLevel;
+    private onBitrate;
     private highlightCurrentLevel;
-    private deferRender;
 }
 //# sourceMappingURL=LevelSelector.d.ts.map

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,MAAM,CAAQ;IAEtB,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,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,eAAe,CAAK;IAE5B,IAAa,MAAM;;;;MAMlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,kBAAkB;IAwC1B,OAAO,CAAC,MAAM;IAcd,OAAO,CAAC,YAAY;IAcpB;;OAEG;IACM,MAAM;IAUf,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,cAAc;IAetB,OAAO,KAAK,QAAQ,GASnB;IAED,OAAO,CAAC,UAAU;IAkBlB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,QAAQ;IAmBhB,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,WAAW,CAAmC;CACvD"}
+{"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"}

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

@@ -1,7 +1,8 @@
 import { Events, template, UICorePlugin } from '@clappr/core';
-import { reportError, trace } from '@gcorevideo/utils';
+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';
@@ -9,7 +10,6 @@ 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';
-import { MediaControlEvents } from '../media-control/MediaControl.js';
 const T = 'plugins.level_selector';
 const VERSION = '2.19.4';
 /**
@@ -42,7 +42,8 @@ export class LevelSelector extends UICorePlugin {
     levelLabels = [];
     removeAuto = false;
     isHd = false;
-    isOpen = false;
+    currentText = '';
+    selectedLevelId = -1;
     static buttonTemplate = template(buttonHtml);
     static listTemplate = template(listHtml);
     /**
@@ -72,12 +73,9 @@ export class LevelSelector extends UICorePlugin {
             'data-level-selector': '',
         };
     }
-    currentText = 'Auto';
-    selectedLevelId = -1;
     get events() {
         return {
-            'click .gear-sub-menu_btn': 'onLevelSelect',
-            'click .gear-option': 'onShowLevelSelectMenu',
+            'click .gear-sub-menu_btn': 'onSelect',
             'click .go-back': 'goBack',
         };
     }
@@ -85,42 +83,48 @@ export class LevelSelector extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
-        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.bindPlaybackEvents);
+        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 mediaControl = this.core.getPlugin('media_control');
-        assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, this.onGearRendered);
+        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.deferRender();
+        this.render();
     }
-    bindPlaybackEvents() {
+    onActiveContainerChange() {
         this.removeAuto = false;
         this.isHd = false;
         const activePlayback = this.core.activePlayback;
-        this.listenTo(activePlayback, Events.PLAYBACK_LEVELS_AVAILABLE, this.fillLevels);
+        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.updateCurrentLevel);
+        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.deferRender();
+            this.updateHd();
         });
         if (activePlayback.levels?.length > 0) {
-            this.fillLevels(activePlayback.levels);
+            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, () => {
-            trace(`${T} on PLAYBACK_PLAY after stop`, {
-                selectedLevelId: this.selectedLevelId,
-            });
             if (this.core.activePlayback.getPlaybackType() === 'live') {
                 if (this.selectedLevelId !== -1) {
                     this.core.activePlayback.currentLevel = this.selectedLevelId;
@@ -147,47 +151,42 @@ export class LevelSelector extends UICorePlugin {
         if (!this.shouldRender()) {
             return this;
         }
-        this.renderButton();
+        this.renderDropdown();
+        this.updateButton();
         return this;
     }
-    renderButton() {
-        if (!this.isOpen) {
-            const html = LevelSelector.buttonTemplate({
-                arrowRightIcon,
-                currentText: this.currentText,
-                isHd: this.isHd,
-                hdIcon,
-            });
-            this.$el.html(html);
-            const gear = this.core.getPlugin('bottom_gear');
-            if (!gear) {
-                trace(`${T} renderButton: bottom_gear plugin not found`);
-            }
-            gear?.getElement('quality')?.html(this.el);
-        }
-    }
     renderDropdown() {
-        const html = LevelSelector.listTemplate({
+        this.$el.html(LevelSelector.listTemplate({
             arrowLeftIcon,
             checkIcon,
+            current: this.selectedLevelId,
             labels: this.levelLabels,
             levels: this.levels,
             maxLevel: this.maxLevel,
             removeAuto: this.removeAuto,
-        });
-        this.$el.html(html);
-        const gear = this.core.getPlugin('bottom_gear');
-        trace(`${T} renderDropdown: bottom_gear plugin not found`);
-        gear?.setContent(this.el);
+            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.findIndex((level) => (level.height > level.width ? level.width : level.height) ===
-                maxRes)
+            ? this.levels.find((level) => (level.height > level.width ? level.width : level.height) ===
+                maxRes)?.level ?? -1
             : -1;
     }
-    fillLevels(levels) {
+    onLevelsAvailable(levels) {
         const maxResolution = this.core.options.levelSelector?.restrictResolution;
         this.levels = levels;
         this.makeLevelsLabels();
@@ -199,86 +198,60 @@ export class LevelSelector extends UICorePlugin {
                 .pop();
             this.setLevel(initialLevel?.level ?? 0);
         }
-        this.deferRender();
+        this.render();
     }
     makeLevelsLabels() {
         const labels = this.core.options.levelSelector?.labels ?? {};
         this.levelLabels = [];
-        for (let i = 0; i < this.levels.length; i++) {
-            const level = this.levels[i];
+        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);
         }
     }
-    onLevelSelect(event) {
+    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.isOpen = false;
-        setTimeout(() => {
-            this.core.getPlugin('bottom_gear').refresh();
-        }, 0);
+        this.core.getPlugin('bottom_gear').refresh();
     }
     setLevel(index) {
-        trace(`${T} setIndexLevel`, { index });
         this.selectedLevelId = index;
-        if (!this.core.activePlayback) {
-            return;
-        }
-        if (this.core.activePlayback.currentLevel === this.selectedLevelId) {
-            return;
-        }
         this.core.activePlayback.currentLevel = this.selectedLevelId;
-        try {
-            this.highlightCurrentLevel();
-        }
-        catch (error) {
-            reportError(error);
-        }
-        this.deferRender();
-    }
-    onShowLevelSelectMenu() {
-        trace(`${T} onShowLevelSelectMenu`);
-        this.isOpen = true;
-        this.renderDropdown();
         this.highlightCurrentLevel();
     }
     allLevelElements() {
-        return this.$('ul.gear-sub-menu li');
+        return this.$('#level-selector-menu li');
     }
     levelElement(id = -1) {
-        return this.$(`ul.gear-sub-menu a[data-id="${id}"]`).parent();
+        return this.$(`#level-selector-menu a[data-id="${id}"]`).parent();
     }
     onLevelSwitchStart() {
-        this.core.activePlayback.trigger('playback:level:select:start');
         this.levelElement(this.selectedLevelId).addClass('changing');
     }
     onLevelSwitchEnd() {
         this.levelElement(this.selectedLevelId).removeClass('changing');
     }
     updateText(level) {
-        if (level === undefined || isNaN(level)) {
-            return;
-        }
         this.currentText = this.getLevelLabel(level);
-        this.deferRender();
+        this.updateButton();
     }
     getLevelLabel(id) {
-        if (id === -1) {
-            return 'Auto';
+        if (id < 0) {
+            return this.core.i18n.t('auto');
         }
         const index = this.levels.findIndex((l) => l.level === id);
         if (index < 0) {
-            return 'Auto';
+            return this.core.i18n.t('auto');
         }
         return this.levelLabels[index] ?? formatLevelLabel(this.levels[index]);
     }
-    updateCurrentLevel(info) {
+    onBitrate(info) {
         trace(`${T} updateCurrentLevel`, { info });
         this.highlightCurrentLevel();
     }
@@ -286,28 +259,19 @@ export class LevelSelector extends UICorePlugin {
         trace(`${T} highlightCurrentLevel`, {
             selectedLevelId: this.selectedLevelId,
         });
-        this.allLevelElements().removeClass('current');
-        this.allLevelElements().find('a').removeClass('gcore-skin-active');
+        this.allLevelElements()
+            .removeClass('current')
+            .find('a')
+            .removeClass('gcore-skin-active');
         const currentLevelElement = this.levelElement(this.selectedLevelId);
-        currentLevelElement.addClass('current');
-        currentLevelElement.find('a').addClass('gcore-skin-active');
+        currentLevelElement
+            .addClass('current')
+            .find('a')
+            .addClass('gcore-skin-active');
         this.updateText(this.selectedLevelId);
     }
-    deferRender = debounce(() => this.render(), 0);
 }
 function formatLevelLabel(level) {
     const h = level.width > level.height ? level.height : level.width;
     return `${h}p`;
 }
-function debounce(fn, wait) {
-    let timerId = null;
-    return function () {
-        if (timerId !== null) {
-            clearTimeout(timerId);
-        }
-        timerId = setTimeout(() => {
-            timerId = null;
-            fn();
-        }, wait);
-    };
-}

package/lib/plugins/media-control/MediaControl.d.ts

@@ -5,10 +5,11 @@ import '../../../assets/media-control/media-control.scss';
  * Media control elements, mount points for additional plugins
  * @beta
  */
-export type MediaControlElement = 'audiotracks' | 'cc' | 'clipText' | 'dvr' | 'duration' | 'gear' | 'pip' | 'playbackRate' | 'position' | 'seekBarContainer';
+export type MediaControlElement = 'audiotracks' | 'cc' | 'clipText' | 'dvr' | 'duration' | 'fullscreen' | 'gear' | 'multicamera' | 'pip' | 'playbackRate' | 'position' | 'seekBarContainer' | 'vr' | 'volume';
 /**
  * Custom events emitted by the plugins to communicate with one another
  * @beta
+ * @deprecated
  */
 export declare enum MediaControlEvents {
     /**
@@ -23,6 +24,8 @@ export declare enum MediaControlEvents {
  * The methods exposed are to be used by the other plugins that extend the media control UI.
  */
 export declare class MediaControl extends UICorePlugin {
+    private customAreaElements;
+    private customAreaHandler?;
     private buttonsColor;
     private currentDurationValue;
     private currentPositionValue;
@@ -47,13 +50,11 @@ export declare class MediaControl extends UICorePlugin {
     private userDisabled;
     private userKeepVisible;
     private verticalVolume;
-    private $audioTracksSelector;
     private $clipText;
     private $clipTextContainer;
     private $duration;
     private $fullscreenToggle;
     private $multiCameraSelector;
-    private $pip;
     private $playPauseToggle;
     private $playStopToggle;
     private $playbackRate;
@@ -226,13 +227,14 @@ export declare class MediaControl extends UICorePlugin {
      * ```
      */
     getElement(name: MediaControlElement): ZeptoResult | null;
-    putElement(name: MediaControlElement, element: HTMLElement): void;
+    putElement(name: MediaControlElement, element: ZeptoResult): void;
+    handleCustomArea(handler: (name: string, content: HTMLElement) => void): void;
     /**
      * Toggle the visibility of a media control element
      * @param name - The name of the media control element
      * @param show - Whether to show or hide the element
      */
-    toggleElement(name: MediaControlElement, show: boolean): void;
+    toggleElement(area: MediaControlElement, show: boolean): void;
     private getRightPanel;
     private getLeftPanel;
     private getCenterPanel;

package/lib/plugins/media-control/MediaControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaControl.d.ts","sourceRoot":"","sources":["../../../src/plugins/media-control/MediaControl.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"MediaControl.d.ts","sourceRoot":"","sources":["../../../src/plugins/media-control/MediaControl.ts"],"names":[],"mappings":"AAOA,OAAO,EAEL,YAAY,EAMZ,IAAI,EACL,MAAM,cAAc,CAAA;AASrB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,OAAO,kDAAkD,CAAA;AAWzD;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAC3B,aAAa,GACb,IAAI,GACJ,UAAU,GACV,KAAK,GACL,UAAU,GACV,YAAY,GACZ,MAAM,GACN,aAAa,GACb,KAAK,GACL,cAAc,GACd,UAAU,GACV,kBAAkB,GAClB,IAAI,GACJ,QAAQ,CAAA;AAyBZ;;;;GAIG;AACH,oBAAY,kBAAkB;IAC5B;;OAEG;IACH,0BAA0B,+BAA+B;CAC1D;AA6BD;;;;;GAKG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAG5C,OAAO,CAAC,kBAAkB,CAAkC;IAC5D,OAAO,CAAC,iBAAiB,CAAC,CAA8C;IAExE,OAAO,CAAC,YAAY,CAAsB;IAE1C,OAAO,CAAC,oBAAoB,CAAY;IACxC,OAAO,CAAC,oBAAoB,CAAY;IACxC,OAAO,CAAC,wBAAwB,CAAI;IAEpC,OAAO,CAAC,qBAAqB,CAA0B;IACvD,OAAO,CAAC,iBAAiB,CAAsB;IAC/C,OAAO,CAAC,iBAAiB,CAAsB;IAC/C,OAAO,CAAC,0BAA0B,CAAsB;IAExD,OAAO,CAAC,eAAe,CAAQ;IAC/B,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,OAAO,CAAC,6BAA6B,CAAuB;IAE5D,OAAO,CAAC,MAAM,CAA6C;IAC3D,OAAO,CAAC,YAAY,CAA6C;IAEjE,OAAO,CAAC,cAAc,CAAM;IAE5B,OAAO,CAAC,WAAW,CAAQ;IAE3B,OAAO,CAAC,IAAI,CAAM;IAElB,OAAO,CAAC,UAAU,CAAI;IACtB,OAAO,CAAC,UAAU,CAAI;IAEtB,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,CAAC,QAAQ,CAAQ;IAExB,OAAO,CAAC,QAAQ,CAAyC;IAEzD,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,eAAe,CAAQ;IAE/B,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,SAAS,CAA2B;IAE5C,OAAO,CAAC,kBAAkB,CAA2B;IAErD,OAAO,CAAC,SAAS,CAA2B;IAE5C,OAAO,CAAC,iBAAiB,CAA2B;IAEpD,OAAO,CAAC,oBAAoB,CAA2B;IAEvD,OAAO,CAAC,gBAAgB,CAA2B;IAEnD,OAAO,CAAC,eAAe,CAA2B;IAElD,OAAO,CAAC,aAAa,CAA2B;IAEhD,OAAO,CAAC,SAAS,CAA2B;IAE5C,OAAO,CAAC,iBAAiB,CAA2B;IAEpD,OAAO,CAAC,aAAa,CAA2B;IAEhD,OAAO,CAAC,cAAc,CAA2B;IAEjD,OAAO,CAAC,gBAAgB,CAA2B;IAEnD,OAAO,CAAC,gBAAgB,CAA2B;IAEnD,OAAO,CAAC,mBAAmB,CAA2B;IAEtD,OAAO,CAAC,oBAAoB,CAA2B;IAEvD,OAAO,CAAC,cAAc,CAA2B;IAEjD,OAAO,CAAC,kBAAkB,CAA2B;IAErD,OAAO,CAAC,gBAAgB,CAA2B;IAEnD,OAAO,CAAC,WAAW,CAA2B;IAE9C,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAA6B;IAE7D;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,KAAK,QAAQ,GAMnB;IAED;;;OAGG;IACH,IAAI,SAAS,QAEZ;IAED;;;OAGG;IACH,IAAI,QAAQ,QAEX;IAED;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;MA4BlB;IAED,IAAI,cAAc,WAEjB;IAED;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAInB;IAED;;OAEG;IACH,IAAI,KAAK,YAER;gBAEW,IAAI,EAAE,IAAI;IAoBtB;;OAEG;IACM,oBAAoB;2BAmZZ,MAAM;;;IA5YvB;;OAEG;IACM,UAAU;IAuCnB,OAAO,CAAC,mBAAmB;IA2E3B;;OAEG;IACM,OAAO;IAQhB;;OAEG;IACM,MAAM;IAUf;;OAEG;IACH,gBAAgB;IAOhB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,cAAc;IAwDtB,OAAO,CAAC,gBAAgB;IAsBxB,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,YAAY;IA6BpB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,QAAQ,CAQf;IAED,OAAO,CAAC,UAAU,CAgBjB;IAED,OAAO,CAAC,oBAAoB;IAsB5B,OAAO,CAAC,UAAU;IAIlB;;;;;;OAMG;IACH,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,UAAQ;IA+BhD,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,wBAAwB;IAwChC,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,aAAa;IAyBrB,OAAO,CAAC,uBAAuB;IAc/B,OAAO,CAAC,IAAI;IAkBZ,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,IAAI;IAgCZ,OAAO,CAAC,IAAI;IAmCZ,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,cAAc;IAuDtB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,oBAAoB;IAwC5B;;;;;;;;;;;;;;;;;;OAkBG;IACH,UAAU,CAAC,IAAI,EAAE,mBAAmB,GAAG,WAAW,GAAG,IAAI;IAazD,UAAU,CAAC,IAAI,EAAE,mBAAmB,EAAE,OAAO,EAAE,WAAW;IAmB1D,gBAAgB,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI;IAQtE;;;;OAIG;IACH,aAAa,CAAC,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAE,OAAO;IAItD,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,aAAa;IA8CrB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,WAAW;IAiCnB,OAAO,CAAC,gBAAgB;IAMxB;;OAEG;IACM,OAAO;IAShB,OAAO,CAAC,SAAS;IAIjB;;OAEG;IACM,MAAM;IAqEf,OAAO,CAAC,qBAAqB;IAiB7B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,MAAM,CAAC,QAAQ;IAIvB,OAAO,CAAC,MAAM,CAAC,QAAQ;IAcvB;;OAEG;IACH,mBAAmB;IAMnB;;OAEG;IACH,qBAAqB;IAMrB,OAAO,CAAC,6BAA6B;IAQrC,OAAO,CAAC,kBAAkB;IAmB1B,OAAO,CAAC,iBAAiB;CAO1B"}

package/lib/plugins/media-control/MediaControl.js

@@ -21,13 +21,23 @@ import fullscreenOffIcon from '../../../assets/icons/new/fullscreen-off.svg';
 import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg';
 const DEFAULT_SETTINGS = {
     left: [],
-    right: [],
+    right: [
+        'fullscreen',
+        'pip',
+        'gear',
+        'cc',
+        'multicamera',
+        // 'playbackrate',
+        'vr',
+        'audiotracks',
+    ],
     default: [],
     seekEnabled: true,
 };
 /**
  * Custom events emitted by the plugins to communicate with one another
  * @beta
+ * @deprecated
  */
 export var MediaControlEvents;
 (function (MediaControlEvents) {
@@ -40,7 +50,6 @@ const T = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
     'playstop',
-    // 'live',
     'dvr',
     'volume',
     'position',
@@ -61,6 +70,8 @@ function orderByOrderPattern(arr, order) {
  */
 export class MediaControl extends UICorePlugin {
     // private advertisementPlaying = false
+    customAreaElements = {};
+    customAreaHandler;
     buttonsColor = null;
     currentDurationValue = 0;
     currentPositionValue = 0;
@@ -85,13 +96,11 @@ export class MediaControl extends UICorePlugin {
     userDisabled = false;
     userKeepVisible = false;
     verticalVolume = false;
-    $audioTracksSelector = null;
     $clipText = null;
     $clipTextContainer = null;
     $duration = null;
     $fullscreenToggle = null;
     $multiCameraSelector = null;
-    $pip = null;
     $playPauseToggle = null;
     $playStopToggle = null;
     $playbackRate = null;
@@ -580,11 +589,13 @@ export class MediaControl extends UICorePlugin {
         if (!this.$volumeBarContainer) {
             return;
         }
+        if (this.hideVolumeId) {
+            clearTimeout(this.hideVolumeId);
+        }
         if (this.draggingVolumeBar) {
             this.hideVolumeId = setTimeout(() => this.hideVolumeBar(), timeout);
         }
         else {
-            this.hideVolumeId && clearTimeout(this.hideVolumeId);
             this.hideVolumeId = setTimeout(() => this.$volumeBarContainer?.addClass('volume-bar-hide'), timeout);
         }
     }
@@ -736,16 +747,7 @@ export class MediaControl extends UICorePlugin {
             newSettings.left.push('dvr');
         }
         // actual order of the items appear rendered is controlled by CSS
-        newSettings.right = [
-            'fullscreen',
-            'pip',
-            'gear',
-            'cc',
-            'multicamera',
-            'playbackrate',
-            'vr',
-            'audiotracks',
-        ];
+        newSettings.right = DEFAULT_SETTINGS.right;
         if ((!this.fullScreenOnVideoTagSupported &&
             !Fullscreen.fullscreenEnabled()) ||
             this.options.fullscreenDisable) {
@@ -830,10 +832,10 @@ export class MediaControl extends UICorePlugin {
         trace(`${T} putElement`, { name, panel: !!panel });
         if (panel) {
             const current = panel.find(`[data-${name}]`);
-            element.setAttribute(`data-${name}`, '');
+            element.attr(`data-${name}`, '');
             // TODO test
             if (current.length) {
-                if (current[0] === element) {
+                if (current[0] === element[0]) {
                     return;
                 }
                 current.replaceWith(element);
@@ -841,15 +843,23 @@ export class MediaControl extends UICorePlugin {
             else {
                 panel.append(element);
             }
+            return;
         }
     }
+    handleCustomArea(handler) {
+        this.customAreaHandler = handler;
+        Object.entries(this.customAreaElements).forEach(([name, element]) => {
+            handler(name, element);
+        });
+        this.customAreaElements = {};
+    }
     /**
      * Toggle the visibility of a media control element
      * @param name - The name of the media control element
      * @param show - Whether to show or hide the element
      */
-    toggleElement(name, show) {
-        this.$el.find(`[data-${name}]`).toggle(show);
+    toggleElement(area, show) {
+        this.$el.find(`[data-${area}]`).toggle(show);
     }
     getRightPanel() {
         return this.$el.find('.media-control-right-panel');
@@ -1007,6 +1017,7 @@ export class MediaControl extends UICorePlugin {
      * @internal
      */
     render() {
+        trace(`${T} render`);
         const timeout = this.options.hideMediaControlDelay || 2000;
         const html = MediaControl.template({ settings: this.settings ?? {} });
         this.$el.html(html);
@@ -1055,6 +1066,7 @@ export class MediaControl extends UICorePlugin {
         this.core.$el.append(this.el);
         this.rendered = true;
         this.updateVolumeUI();
+        // TODO setTimeout
         this.trigger(Events.MEDIACONTROL_RENDERED);
         return this;
     }
@@ -1127,6 +1139,12 @@ export class MediaControl extends UICorePlugin {
         return isFinite(this.core.activePlayback.getDuration());
     }
     getElementLocation(name) {
+        trace(`${T} getElementLocation`, {
+            name,
+            right: this.settings.right,
+            left: this.settings.left,
+            default: this.settings.default,
+        });
         if (this.settings.right?.includes(name)) {
             return this.getRightPanel();
         }

package/lib/plugins/picture-in-picture/PictureInPicture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PictureInPicture.d.ts","sourceRoot":"","sources":["../../../src/plugins/picture-in-picture/PictureInPicture.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAoB,MAAM,cAAc,CAAC;AAO9D,OAAO,gDAAgD,CAAC;AAMxD;;;;;;;;;GASG;AACH,qBAAa,gBAAiB,SAAQ,YAAY;IAChD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,cAAc,CAAwB;IAErD;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED,IAAa,UAAU;;MAItB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED;;OAEG;IACM,UAAU;IAInB,OAAO,CAAC,cAAc;IAStB;;OAEG;IACM,MAAM;IAef,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,oBAAoB;CAI7B"}
+{"version":3,"file":"PictureInPicture.d.ts","sourceRoot":"","sources":["../../../src/plugins/picture-in-picture/PictureInPicture.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAoB,MAAM,cAAc,CAAC;AAO9D,OAAO,gDAAgD,CAAC;AAOxD;;;;;;;;;GASG;AACH,qBAAa,gBAAiB,SAAQ,YAAY;IAChD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,cAAc,CAAwB;IAErD;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED,IAAa,UAAU;;MAItB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED;;OAEG;IACM,UAAU;IAQnB,OAAO,CAAC,cAAc;IAStB;;OAEG;IACM,MAAM;IAef,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,oBAAoB;CAI7B"}

package/lib/plugins/picture-in-picture/PictureInPicture.js

@@ -4,6 +4,7 @@ import { CLAPPR_VERSION } from '../../build.js';
 import pipIcon from '../../../assets/icons/new/pip.svg';
 import buttonHtml from '../../../assets/picture-in-picture/button.ejs';
 import '../../../assets/picture-in-picture/button.scss';
+import assert from 'assert';
 const VERSION = '0.0.1';
 const T = `plugins.pip`;
 /**
@@ -56,7 +57,11 @@ export class PictureInPicture extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+        this.listenToOnce(this.core, Events.CORE_READY, () => {
+            const mediaControl = this.core.getPlugin('media_control');
+            assert(mediaControl, 'media_control plugin is required');
+            this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+        });
     }
     isPiPSupported() {
         trace(`${T} isPiPSupported`, {
@@ -75,7 +80,7 @@ export class PictureInPicture extends UICorePlugin {
         this.$el.html(PictureInPicture.buttonTemplate({ pipIcon }));
         const mediaControl = this.core.getPlugin('media_control');
         if (mediaControl) {
-            mediaControl.putElement('pip', this.el);
+            mediaControl.putElement('pip', this.$el);
         }
         return this;
     }