@gcorevideo/player 2.21.3 → 2.21.6

package/lib/plugins/dvr-controls/DvrControls.d.ts

@@ -37,7 +37,6 @@ export declare class DvrControls extends UICorePlugin {
      */
     get attributes(): {
         class: string;
-        'data-dvr-controls': string;
     };
     /**
      * @internal
@@ -45,9 +44,7 @@ export declare class DvrControls extends UICorePlugin {
     bindEvents(): void;
     private onCoreReady;
     private bindContainerEvents;
-    private onDvrChanged;
     private click;
-    private settingsUpdate;
     private shouldRender;
     /**
      * @internal

package/lib/plugins/dvr-controls/DvrControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DvrControls.d.ts","sourceRoot":"","sources":["../../../src/plugins/dvr-controls/DvrControls.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,YAAY,EAAY,MAAM,cAAc,CAAA;AAM7E,OAAO,gDAAgD,CAAA;AAMvD;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAEpD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACM,UAAU;IAUnB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,YAAY;IAuBpB,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,YAAY;IAKpB;;OAEG;IACM,MAAM;CAoBhB"}
+{"version":3,"file":"DvrControls.d.ts","sourceRoot":"","sources":["../../../src/plugins/dvr-controls/DvrControls.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,YAAY,EAAY,MAAM,cAAc,CAAA;AAM7E,OAAO,gDAAgD,CAAA;AAMvD;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAEpD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,YAAY;IAIpB;;OAEG;IACM,MAAM;CAyBhB"}

package/lib/plugins/dvr-controls/DvrControls.js

@@ -47,7 +47,6 @@ export class DvrControls extends UICorePlugin {
     get attributes() {
         return {
             class: 'dvr-controls',
-            'data-dvr-controls': '',
         };
     }
     /**
@@ -55,40 +54,18 @@ export class DvrControls extends UICorePlugin {
      */
     bindEvents() {
         this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
-        this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.render);
         this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.bindContainerEvents);
     }
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.settingsUpdate);
-        this.settingsUpdate();
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+        // MediaControl has been rendered
+        this.render();
     }
     bindContainerEvents() {
+        trace(`${T} bindContainerEvents`);
         this.listenToOnce(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.render);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrChanged);
-    }
-    onDvrChanged(dvrInUse) {
-        trace(`${T} onDvrChanged`, {
-            dvrInUse,
-        });
-        if (this.core.getPlaybackType() !== Playback.LIVE) {
-            return;
-        }
-        this.render();
-        const mediaControl = this.core.getPlugin('media_control');
-        mediaControl.$el.addClass('live');
-        if (dvrInUse) {
-            mediaControl.$el
-                .addClass('dvr')
-                .find(
-            // TODO add API, test
-            '.media-control-indicator[data-position], .media-control-indicator[data-duration]')
-                .hide();
-        }
-        else {
-            mediaControl.$el.removeClass('dvr');
-        }
     }
     click() {
         const container = this.core.activeContainer;
@@ -97,13 +74,8 @@ export class DvrControls extends UICorePlugin {
         }
         container.seek(container.getDuration());
     }
-    settingsUpdate() {
-        this.core.getPlugin('media_control').$el.removeClass('live');
-        this.render();
-    }
     shouldRender() {
-        const useDvrControls = this.core.options.useDvrControls !== false;
-        return useDvrControls && this.core.getPlaybackType() === Playback.LIVE;
+        return this.core.getPlaybackType() === Playback.LIVE;
     }
     /**
      * @internal
@@ -113,16 +85,19 @@ export class DvrControls extends UICorePlugin {
             dvrEnabled: this.core.activePlayback?.dvrEnabled,
             playbackType: this.core.getPlaybackType(),
         });
+        const mediaControl = this.core.getPlugin('media_control');
+        if (!mediaControl) {
+            return this;
+        }
         if (!this.shouldRender()) {
             return this;
         }
+        mediaControl.toggleElement('duration', false);
+        mediaControl.toggleElement('position', false);
         this.$el.html(DvrControls.template({
-            live: this.core.i18n.t('live'),
-            backToLive: this.core.i18n.t('back_to_live'),
+            i18n: this.core.i18n,
         }));
-        const mediaControl = this.core.getPlugin('media_control');
-        mediaControl.$el.addClass('live');
-        mediaControl.getLeftPanel().append(this.$el);
+        mediaControl.putElement('dvr', this.el);
         return this;
     }
 }

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

@@ -5,7 +5,7 @@ import '../../../assets/media-control/media-control.scss';
  * Media control elements, mount points for additional plugins
  * @beta
  */
-export type MediaControlElement = 'audioTracksSelector' | 'clipText' | 'gear' | 'pip' | 'playbackRate' | 'seekBarContainer' | 'subtitlesSelector';
+export type MediaControlElement = 'audiotracks' | 'cc' | 'clipText' | 'dvr' | 'duration' | 'gear' | 'pip' | 'playbackRate' | 'position' | 'seekBarContainer';
 /**
  * Custom events emitted by the plugins to communicate with one another
  * @beta
@@ -23,7 +23,6 @@ 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 advertisementPlaying;
     private buttonsColor;
     private currentDurationValue;
     private currentPositionValue;
@@ -38,7 +37,6 @@ export declare class MediaControl extends UICorePlugin {
     private hideId;
     private hideVolumeId;
     private intendedVolume;
-    private isHD;
     private keepVisible;
     private kibo;
     private lastMouseX;
@@ -165,7 +163,7 @@ export declare class MediaControl extends UICorePlugin {
      */
     setInitialVolume(): void;
     private onVolumeChanged;
-    private onLoadedMetadataOnVideoTag;
+    private onLoadedMetadata;
     private updateVolumeUI;
     private changeTogglePlay;
     private mousemoveOnSeekBar;
@@ -199,16 +197,14 @@ export declare class MediaControl extends UICorePlugin {
     private renderSeekBar;
     private drawDurationAndPosition;
     private seek;
-    private setKeepVisible;
-    private resetKeepVisible;
     private setUserKeepVisible;
     private resetUserKeepVisible;
     private isVisible;
     private show;
     private hide;
     private updateCursorStyle;
-    private settingsUpdate;
-    private highDefinitionUpdate;
+    private updateSettings;
+    private onHdUpdate;
     private createCachedElements;
     /**
      * Get a media control element DOM node
@@ -230,18 +226,16 @@ export declare class MediaControl extends UICorePlugin {
      * ```
      */
     getElement(name: MediaControlElement): ZeptoResult | null;
-    putElement(name: MediaControlElement, element: ZeptoResult): void;
+    putElement(name: MediaControlElement, element: HTMLElement): void;
     /**
-     * Get the right panel area to append custom elements to
-     * @returns  ZeptoSelector of the right panel element
-     */
-    getRightPanel(): any;
-    /**
-     * Get the left panel area to append custom elements to
-     * @returns  ZeptoSelector of the left panel element
+     * 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
      */
-    getLeftPanel(): any;
-    getCenterPanel(): any;
+    toggleElement(name: MediaControlElement, show: boolean): void;
+    private getRightPanel;
+    private getLeftPanel;
+    private getCenterPanel;
     private resetIndicators;
     private initializeIcons;
     private setSeekPercentage;
@@ -275,5 +269,7 @@ export declare class MediaControl extends UICorePlugin {
      */
     disabledControlButton(): void;
     private isSeekEnabledForHtml5Playback;
+    private getElementLocation;
+    private onDvrStateChanged;
 }
 //# sourceMappingURL=MediaControl.d.ts.map

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":"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"}

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

@@ -19,6 +19,12 @@ import volumeMaxIcon from '../../../assets/icons/new/volume-max.svg';
 import volumeOffIcon from '../../../assets/icons/new/volume-off.svg';
 import fullscreenOffIcon from '../../../assets/icons/new/fullscreen-off.svg';
 import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg';
+const DEFAULT_SETTINGS = {
+    left: [],
+    right: [],
+    default: [],
+    seekEnabled: true,
+};
 /**
  * Custom events emitted by the plugins to communicate with one another
  * @beta
@@ -34,7 +40,8 @@ const T = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
     'playstop',
-    'live',
+    // 'live',
+    'dvr',
     'volume',
     'position',
     'duration',
@@ -53,7 +60,7 @@ function orderByOrderPattern(arr, order) {
  * The methods exposed are to be used by the other plugins that extend the media control UI.
  */
 export class MediaControl extends UICorePlugin {
-    advertisementPlaying = false;
+    // private advertisementPlaying = false
     buttonsColor = null;
     currentDurationValue = 0;
     currentPositionValue = 0;
@@ -68,14 +75,13 @@ export class MediaControl extends UICorePlugin {
     hideId = null;
     hideVolumeId = null;
     intendedVolume = 100;
-    isHD = false;
     keepVisible = false;
     kibo;
     lastMouseX = 0;
     lastMouseY = 0;
     persistConfig;
     rendered = false;
-    settings = {};
+    settings = DEFAULT_SETTINGS;
     userDisabled = false;
     userKeepVisible = false;
     verticalVolume = false;
@@ -219,8 +225,6 @@ export class MediaControl extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        // @ts-ignore
-        this.stopListening();
         this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
         this.listenTo(this.core, Events.CORE_MOUSE_MOVE, this.show);
         this.listenTo(this.core, Events.CORE_MOUSE_LEAVE, () => this.hide(this.options.hideMediaControlDelay));
@@ -256,18 +260,16 @@ export class MediaControl extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events.CONTAINER_DBLCLICK, this.toggleFullscreen);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_PROGRESS, this.updateProgressBar);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_SETTINGSUPDATE, this.settingsUpdate);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.settingsUpdate);
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_SETTINGSUPDATE, this.updateSettings);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrStateChanged);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.onHdUpdate);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_MEDIACONTROL_DISABLE, this.disable);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_MEDIACONTROL_ENABLE, this.enable);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_ENDED, this.ended);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_VOLUME, this.onVolumeChanged);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_OPTIONS_CHANGE, this.setInitialVolume);
-        if (this.core.activePlayback.el.nodeName.toLowerCase() === 'video') {
-            // wait until the metadata has loaded and then check if fullscreen on video tag is supported
-            this.listenToOnce(this.core.activeContainer, Events.CONTAINER_LOADEDMETADATA, this.onLoadedMetadataOnVideoTag);
-        }
+        // wait until the metadata has loaded and then check if fullscreen on video tag is supported
+        this.listenToOnce(this.core.activeContainer, Events.CONTAINER_LOADEDMETADATA, this.onLoadedMetadata);
     }
     /**
      * Hides the media control UI
@@ -302,13 +304,19 @@ export class MediaControl extends UICorePlugin {
     onVolumeChanged() {
         this.updateVolumeUI();
     }
-    onLoadedMetadataOnVideoTag(event) {
+    onLoadedMetadata() {
         const video = this.core.activePlayback?.el;
         // video.webkitSupportsFullscreen is deprecated but iOS appears to only use this
         // see https://github.com/clappr/clappr/issues/1127
         if (!Fullscreen.fullscreenEnabled() && video.webkitSupportsFullscreen) {
             this.fullScreenOnVideoTagSupported = true;
-            this.settingsUpdate();
+        }
+        this.updateSettings();
+        if (this.core.activeContainer.getPlaybackType() === Playback.LIVE) {
+            this.$el.addClass('live');
+        }
+        else {
+            this.$el.removeClass('live');
         }
     }
     updateVolumeUI() {
@@ -317,8 +325,6 @@ export class MediaControl extends UICorePlugin {
             return;
         }
         assert.ok(this.$volumeBarContainer, 'volume bar container must be present');
-        // update volume bar scrubber/fill on bar mode
-        // this.$volumeBarContainer.find('.bar-fill-2').css({});
         const containerWidth = this.$volumeBarContainer.width();
         assert.ok(this.$volumeBarBackground, 'volume bar background must be present');
         const barWidth = this.$volumeBarBackground.width();
@@ -507,17 +513,18 @@ export class MediaControl extends UICorePlugin {
         // if the container is not ready etc
         this.intendedVolume = value;
         this.persistConfig && !isInitialVolume && Config.persist('volume', value);
+        // TODO
         const setWhenContainerReady = () => {
-            if (this.container && this.container.isReady) {
-                this.container.setVolume(value);
+            if (this.core.activeContainer && this.core.activeContainer.isReady) {
+                this.core.activeContainer.setVolume(value);
             }
             else {
-                this.listenToOnce(this.container, Events.CONTAINER_READY, () => {
-                    this.container.setVolume(value);
+                this.listenToOnce(this.core.activeContainer, Events.CONTAINER_READY, () => {
+                    this.core.activeContainer.setVolume(value);
                 });
             }
         };
-        if (!this.container) {
+        if (!this.core.activeContainer) {
             this.listenToOnce(this, Events.MEDIACONTROL_CONTAINERCHANGED, () => setWhenContainerReady());
         }
         else {
@@ -527,7 +534,7 @@ export class MediaControl extends UICorePlugin {
     toggleFullscreen() {
         if (!Browser.isMobile) {
             this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name);
-            this.container.fullscreen();
+            this.core.activeContainer.fullscreen();
             this.core.toggleFullscreen();
             this.resetUserKeepVisible();
         }
@@ -538,7 +545,8 @@ export class MediaControl extends UICorePlugin {
         this.setInitialVolume();
         this.changeTogglePlay();
         this.bindContainerEvents();
-        this.settingsUpdate();
+        this.updateSettings();
+        // TODO remove
         this.core.activeContainer.trigger(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.core.activeContainer.isDvrInUse());
         // TODO test
         if (this.core.activeContainer.mediaControlDisabled) {
@@ -609,9 +617,9 @@ export class MediaControl extends UICorePlugin {
         }
         // default to 100%
         this.currentSeekBarPercentage = 100;
-        if (this.container &&
-            (this.container.getPlaybackType() !== Playback.LIVE ||
-                this.container.isDvrInUse())) {
+        if (this.core.activeContainer &&
+            (this.core.activeContainer.getPlaybackType() !== Playback.LIVE ||
+                this.core.activeContainer.isDvrInUse())) {
             this.currentSeekBarPercentage =
                 (this.currentPositionValue / this.currentDurationValue) * 100;
         }
@@ -638,16 +646,10 @@ export class MediaControl extends UICorePlugin {
         const offsetX = MediaControl.getPageX(event) - this.$seekBarContainer.offset().left;
         let pos = (offsetX / this.$seekBarContainer.width()) * 100;
         pos = Math.min(100, Math.max(pos, 0));
-        this.container && this.container.seekPercentage(pos);
+        this.core.activeContainer && this.core.activeContainer.seekPercentage(pos);
         this.setSeekPercentage(pos);
         return false;
     }
-    setKeepVisible() {
-        this.keepVisible = true;
-    }
-    resetKeepVisible() {
-        this.keepVisible = false;
-    }
     setUserKeepVisible() {
         this.userKeepVisible = true;
     }
@@ -719,18 +721,24 @@ export class MediaControl extends UICorePlugin {
             this.core.$el.addClass('nocursor');
         }
     }
-    settingsUpdate() {
+    updateSettings() {
         const newSettings = $.extend(true, {
             left: [],
             default: [],
             right: [],
-        }, this.core.activeContainer?.settings);
+        }, this.core.activeContainer.settings);
+        // TODO make order controlled via CSS
         newSettings.left = orderByOrderPattern([...newSettings.left, 'clipsText', 'volume'], LEFT_ORDER);
+        if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
+            this.core.activePlayback.dvrEnabled) {
+            newSettings.left.push('dvr');
+        }
+        // actual order of the items appear rendered is controlled by CSS
         newSettings.right = [
             'fullscreen',
             'pip',
-            'bottomgear',
-            'subtitles',
+            'gear',
+            'cc',
             'multicamera',
             'playbackrate',
             'vr',
@@ -739,24 +747,25 @@ export class MediaControl extends UICorePlugin {
         if ((!this.fullScreenOnVideoTagSupported &&
             !Fullscreen.fullscreenEnabled()) ||
             this.options.fullscreenDisable) {
-            // remove fullscreen from settings if it is present
+            // remove fullscreen from settings if it is not available
             removeArrayItem(newSettings.default, 'fullscreen');
             removeArrayItem(newSettings.left, 'fullscreen');
             removeArrayItem(newSettings.right, 'fullscreen');
         }
         removeArrayItem(newSettings.default, 'hd-indicator');
         removeArrayItem(newSettings.left, 'hd-indicator');
+        // TODO get from container's settings
         if (this.core.activePlayback.name === 'html5_video') {
             newSettings.seekEnabled = this.isSeekEnabledForHtml5Playback();
         }
-        const settingsChanged = JSON.stringify(this.settings) !== JSON.stringify(newSettings);
+        const settingsChanged = serializeSettings(this.settings) !== serializeSettings(newSettings);
         if (settingsChanged) {
             this.settings = newSettings;
             this.render();
         }
     }
-    highDefinitionUpdate(isHD) {
-        this.isHD = isHD;
+    onHdUpdate(isHD) {
+        // TODO render?
     }
     createCachedElements() {
         const $layer = this.$el.find('.media-control-layer');
@@ -778,7 +787,7 @@ export class MediaControl extends UICorePlugin {
         this.$volumeBarScrubber = this.$el.find('.bar-scrubber[data-volume]');
         this.$playbackRate = this.$el.find('.media-control-playbackrate[data-playbackrate]');
         this.$multiCameraSelector = this.$el.find('.media-control-multicamera[data-multicamera]');
-        this.$clipText = this.$el.find('.media-clip-text[data-clipstext]');
+        this.$clipText = this.$el.find('.media-clip-text[data-clipstext]'); // TODO
         this.$clipTextContainer = this.$el.find('.media-clip-container[data-clipstext]');
         this.resetIndicators();
         this.initializeIcons();
@@ -804,49 +813,45 @@ export class MediaControl extends UICorePlugin {
      */
     getElement(name) {
         switch (name) {
-            case 'audioTracksSelector':
+            case 'audiotracks':
                 return null;
             case 'clipText':
                 return this.$clipText;
-            case 'gear':
-                return null;
-            case 'pip':
-                return null;
             case 'playbackRate':
                 return this.$playbackRate;
             case 'seekBarContainer':
                 return this.$seekBarContainer;
-            case 'subtitlesSelector':
-                return null;
         }
     }
     putElement(name, element) {
-        switch (name) {
-            case 'audioTracksSelector':
-                this.getRightPanel().append(element);
-                break;
-            case 'gear':
-                this.getRightPanel().append(element);
-                break;
-            case 'pip':
-                this.getRightPanel().append(element);
-                break;
-            case 'subtitlesSelector':
-                this.getRightPanel().append(element);
-                break;
+        const panel = this.getElementLocation(name);
+        trace(`${T} putElement`, { name, panel: !!panel });
+        if (panel) {
+            const current = panel.find(`[data-${name}]`);
+            element.setAttribute(`data-${name}`, '');
+            // TODO test
+            if (current.length) {
+                if (current[0] === element) {
+                    return;
+                }
+                current.replaceWith(element);
+            }
+            else {
+                panel.append(element);
+            }
         }
     }
     /**
-     * Get the right panel area to append custom elements to
-     * @returns  ZeptoSelector of the right panel element
+     * 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);
+    }
     getRightPanel() {
         return this.$el.find('.media-control-right-panel');
     }
-    /**
-     * Get the left panel area to append custom elements to
-     * @returns  ZeptoSelector of the left panel element
-     */
     getLeftPanel() {
         return this.$el.find('.media-control-left-panel');
     }
@@ -1045,7 +1050,6 @@ export class MediaControl extends UICorePlugin {
             this.hideVolumeBar(0);
         }, 0);
         this.parseColors();
-        this.highDefinitionUpdate(this.isHD);
         this.core.$el.append(this.el);
         this.rendered = true;
         this.updateVolumeUI();
@@ -1071,12 +1075,12 @@ export class MediaControl extends UICorePlugin {
     }
     // TODO manage by the ads plugin
     onStartAd() {
-        this.advertisementPlaying = true;
+        // this.advertisementPlaying = true
         this.disable();
     }
     // TODO manage by the ads plugin
     onFinishAd() {
-        this.advertisementPlaying = false;
+        // this.advertisementPlaying = false
         this.enable();
     }
     // TODO remove
@@ -1120,7 +1124,36 @@ export class MediaControl extends UICorePlugin {
         }
         return isFinite(this.core.activePlayback.getDuration());
     }
+    getElementLocation(name) {
+        if (this.settings.right?.includes(name)) {
+            return this.getRightPanel();
+        }
+        if (this.settings.left?.includes(name)) {
+            return this.getLeftPanel();
+        }
+        if (this.settings.default?.includes(name)) {
+            return this.getCenterPanel();
+        }
+        return null;
+    }
+    onDvrStateChanged(dvrInUse) {
+        if (dvrInUse) {
+            this.$el.addClass('dvr');
+        }
+        else {
+            this.$el.removeClass('dvr');
+        }
+    }
 }
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
 };
+function serializeSettings(s) {
+    return s.left
+        .slice()
+        .sort()
+        .concat(s.right.slice().sort())
+        .concat(s.default.slice().sort())
+        .concat([s.seekEnabled])
+        .join(',');
+}

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

@@ -25,6 +25,7 @@ export declare class PictureInPicture extends UICorePlugin {
      * @internal
      */
     static get version(): string;
+    private static buttonTemplate;
     /**
      * @internal
      */

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;;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;IAiBf,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;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"}

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

@@ -35,6 +35,7 @@ export class PictureInPicture extends UICorePlugin {
     static get version() {
         return VERSION;
     }
+    static buttonTemplate = template(buttonHtml);
     /**
      * @internal
      */
@@ -59,8 +60,8 @@ export class PictureInPicture extends UICorePlugin {
     }
     isPiPSupported() {
         trace(`${T} isPiPSupported`, {
-            pictureInPictureEnabled: document.pictureInPictureEnabled,
-            requestPictureInPicture: HTMLVideoElement.prototype.requestPictureInPicture,
+            pictureInPictureEnabled: !!document.pictureInPictureEnabled,
+            requestPictureInPicture: !!HTMLVideoElement.prototype.requestPictureInPicture,
         });
         return document.pictureInPictureEnabled && !!HTMLVideoElement.prototype.requestPictureInPicture;
     }
@@ -71,8 +72,7 @@ export class PictureInPicture extends UICorePlugin {
         if (!this.isPiPSupported()) {
             return this;
         }
-        const t = template(buttonHtml);
-        this.$el.html(t({ pipIcon }));
+        this.$el.html(PictureInPicture.buttonTemplate({ pipIcon }));
         const mediaControl = this.core.getPlugin('media_control');
         if (mediaControl) {
             mediaControl.putElement('pip', this.el);

package/lib/plugins/playback-rate/PlaybackRate.d.ts

@@ -36,7 +36,6 @@ export declare class PlaybackRate extends UICorePlugin {
      */
     get attributes(): {
         class: string;
-        'data-playback-rate-select': string;
     };
     /**
      * @internal