@gcorevideo/player 2.21.1 → 2.21.4

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

@@ -6,7 +6,11 @@ import { ZeptoResult } from '../../types.js';
  * An element inside the gear menu
  * @beta
  */
-export type GearItemElement = 'quality' | 'rate' | 'nerd';
+export type GearOptionsItem = 'quality' | 'rate' | 'nerd';
+/**
+ * @deprecated Use {@link GearOptionsItem} instead
+ */
+export type GearItemElement = GearOptionsItem;
 /**
  * `PLUGIN` that adds the gear button with an extra options menu on the right side of the {@link MediaControl | media control} UI
  * @beta
@@ -15,7 +19,7 @@ export type GearItemElement = 'quality' | 'rate' | 'nerd';
  *
  * Depends on:
  *
- * - {@link MediaControl | media_control}
+ * - {@link MediaControl}
  */
 export declare class BottomGear extends UICorePlugin {
     private isHd;
@@ -54,7 +58,7 @@ export declare class BottomGear extends UICorePlugin {
      * @param name - Name of a gear menu placeholder item to attach custom UI
      * @returns Zepto result of the element
      */
-    getElement(name: GearItemElement): ZeptoResult | null;
+    getElement(name: GearOptionsItem): ZeptoResult | null;
     /**
      * Replaces the content of the gear menu
      * @param content - Zepto result of the element

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,EAAoC,MAAM,cAAc,CAAC;AAO9E,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gDAAgD,CAAC;AAGxD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1D;;;;;;;;;GASG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,IAAI,CAAS;IAErB;;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;IAKnB;;;OAGG;IACH,UAAU,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,GAAG,IAAI;IAIrD;;;OAGG;IACH,UAAU,CAAC,OAAO,EAAE,WAAW;IAI/B,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAiBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,WAAW;CAMpB"}
+{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAoC,MAAM,cAAc,CAAC;AAO9E,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gDAAgD,CAAC;AAGxD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1D;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC;AAI9C;;;;;;;;;GASG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,IAAI,CAAS;IAErB;;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;IAKnB;;;OAGG;IACH,UAAU,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,GAAG,IAAI;IAMrD;;;OAGG;IACH,UAAU,CAAC,OAAO,EAAE,WAAW;IAI/B,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAiBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,WAAW;CAMpB"}

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

@@ -10,6 +10,7 @@ import gearHdIcon from '../../../assets/icons/new/gear-hd.svg';
 import { MediaControlEvents } from '../media-control/MediaControl';
 const VERSION = '2.19.12';
 const T = 'plugins.bottom_gear';
+// TODO disabled if no items added
 /**
  * `PLUGIN` that adds the gear button with an extra options menu on the right side of the {@link MediaControl | media control} UI
  * @beta
@@ -18,7 +19,7 @@ const T = 'plugins.bottom_gear';
  *
  * Depends on:
  *
- * - {@link MediaControl | media_control}
+ * - {@link MediaControl}
  */
 export class BottomGear extends UICorePlugin {
     isHd = false;
@@ -71,6 +72,7 @@ export class BottomGear extends UICorePlugin {
     getElement(name) {
         return this.$el.find(`.gear-options-list [data-${name}]`);
     }
+    // TODO implement putElement/addElement method
     /**
      * Replaces the content of the gear menu
      * @param content - Zepto result of the element
@@ -104,7 +106,7 @@ export class BottomGear extends UICorePlugin {
         ];
         const icon = this.isHd ? gearHdIcon : gearIcon;
         this.$el.html(BottomGear.template({ icon, items }));
-        mediaControl.putElement('gear', this.$el);
+        mediaControl.putElement('gear', this.el);
         mediaControl.trigger(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED);
         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' | 'clipText' | 'gear' | 'pip' | 'playbackRate' | 'seekBarContainer' | 'cc';
 /**
  * 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;
@@ -65,7 +64,6 @@ export declare class MediaControl extends UICorePlugin {
     private $seekBarLoaded;
     private $seekBarPosition;
     private $seekBarScrubber;
-    private $subtitlesSelector;
     private $volumeBarContainer;
     private $volumeBarBackground;
     private $volumeBarFill;
@@ -166,7 +164,7 @@ export declare class MediaControl extends UICorePlugin {
      */
     setInitialVolume(): void;
     private onVolumeChanged;
-    private onLoadedMetadataOnVideoTag;
+    private onLoadedMetadata;
     private updateVolumeUI;
     private changeTogglePlay;
     private mousemoveOnSeekBar;
@@ -208,7 +206,7 @@ export declare class MediaControl extends UICorePlugin {
     private show;
     private hide;
     private updateCursorStyle;
-    private settingsUpdate;
+    private updateSettings;
     private highDefinitionUpdate;
     private createCachedElements;
     /**
@@ -231,7 +229,7 @@ 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
@@ -276,5 +274,6 @@ export declare class MediaControl extends UICorePlugin {
      */
     disabledControlButton(): void;
     private isSeekEnabledForHtml5Playback;
+    private getElementLocation;
 }
 //# 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

@@ -53,7 +53,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;
@@ -75,7 +75,7 @@ export class MediaControl extends UICorePlugin {
     lastMouseY = 0;
     persistConfig;
     rendered = false;
-    settings = {};
+    settings = {}; // TODO & seekEnabled: boolean, ...
     userDisabled = false;
     userKeepVisible = false;
     verticalVolume = false;
@@ -95,7 +95,6 @@ export class MediaControl extends UICorePlugin {
     $seekBarLoaded = null;
     $seekBarPosition = null;
     $seekBarScrubber = null;
-    $subtitlesSelector = null;
     $volumeBarContainer = null;
     $volumeBarBackground = null;
     $volumeBarFill = null;
@@ -116,7 +115,8 @@ export class MediaControl extends UICorePlugin {
         return { min: CLAPPR_VERSION };
     }
     get disabled() {
-        const playbackIsNOOP = this.core.activeContainer && this.core.activeContainer.getPlaybackType() === Playback.NO_OP;
+        const playbackIsNOOP = this.core.activeContainer &&
+            this.core.activeContainer.getPlaybackType() === Playback.NO_OP;
         return this.userDisabled || playbackIsNOOP;
     }
     /**
@@ -256,18 +256,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_SETTINGSUPDATE, this.updateSettings);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.updateSettings);
         this.listenTo(this.core.activeContainer, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
         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 +300,13 @@ 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();
         }
     }
     updateVolumeUI() {
@@ -538,7 +536,7 @@ export class MediaControl extends UICorePlugin {
         this.setInitialVolume();
         this.changeTogglePlay();
         this.bindContainerEvents();
-        this.settingsUpdate();
+        this.updateSettings();
         this.core.activeContainer.trigger(Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.core.activeContainer.isDvrInUse());
         // TODO test
         if (this.core.activeContainer.mediaControlDisabled) {
@@ -719,18 +717,19 @@ 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);
         newSettings.left = orderByOrderPattern([...newSettings.left, 'clipsText', 'volume'], LEFT_ORDER);
+        // actual order of the items appear rendered is controlled by CSS
         newSettings.right = [
             'fullscreen',
             'pip',
-            'bottomgear',
-            'subtitles',
+            'gear',
+            'cc',
             'multicamera',
             'playbackrate',
             'vr',
@@ -739,7 +738,7 @@ 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');
@@ -776,10 +775,9 @@ export class MediaControl extends UICorePlugin {
         this.$volumeBarBackground = this.$el.find('.bar-background[data-volume]');
         this.$volumeBarFill = this.$el.find('.bar-fill-1[data-volume]');
         this.$volumeBarScrubber = this.$el.find('.bar-scrubber[data-volume]');
-        this.$subtitlesSelector = this.$el.find('.media-control-subtitles[data-subtitles]');
         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();
@@ -805,33 +803,32 @@ 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 this.$subtitlesSelector;
         }
     }
     putElement(name, element) {
-        switch (name) {
-            case 'audioTracksSelector':
-                this.getRightPanel().append(element);
-                break;
-            case 'pip':
-                this.getRightPanel().append(element);
-                break;
-            case 'gear':
-                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);
+            }
         }
     }
     /**
@@ -1069,12 +1066,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
@@ -1118,6 +1115,18 @@ 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;
+    }
 }
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);

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

@@ -11,6 +11,7 @@ import { UICorePlugin, Core } from '@clappr/core';
  * - {@link BottomGear | bottom_gear}
  *
  * It renders a button in the gear menu, which opens a dropdown with the options to change the playback rate.
+ * Note that the playback rate change is supported only for VOD or DVR enabled live streams.
  */
 export declare class PlaybackRate extends UICorePlugin {
     private playbackRates;
@@ -35,7 +36,6 @@ export declare class PlaybackRate extends UICorePlugin {
      */
     get attributes(): {
         class: string;
-        'data-playback-rate-select': string;
     };
     /**
      * @internal

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

@@ -1 +1 @@
-{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,IAAI,EAAE,MAAM,cAAc,CAAC;AAoC9E;;;;;;;;;;;;GAYG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,aAAa,CAAgD;IAGrE,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,YAAY,CAAiC;IAErD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAwB;IAE9D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAsB;gBAE9C,IAAI,EAAE,IAAI;IAMtB;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;;;MAMlB;IAED;;OAEG;IACM,UAAU;IAKnB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,YAAY;IAYpB;;OAEG;IACM,MAAM;IA6Bf,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,MAAM;IAGd,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,oBAAoB;CAS7B"}
+{"version":3,"file":"PlaybackRate.d.ts","sourceRoot":"","sources":["../../../src/plugins/playback-rate/PlaybackRate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAsB,IAAI,EAAE,MAAM,cAAc,CAAA;AAuC7E;;;;;;;;;;;;;GAaG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAO,CAAC,aAAa,CAA+C;IAGpE,OAAO,CAAC,gBAAgB,CAAoB;IAE5C,OAAO,CAAC,QAAQ,CAAQ;IAExB,OAAO,CAAC,YAAY,CAAgC;IAEpD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAqB;gBAE7C,IAAI,EAAE,IAAI;IAQtB;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;;MAMlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,uBAAuB;IAgB/B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,YAAY;IAepB;;OAEG;IACM,MAAM;IAgCf,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,oBAAoB;CAS7B"}

package/lib/plugins/playback-rate/PlaybackRate.js

@@ -9,7 +9,7 @@ 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 { PlaybackEvents } from '../../playback/types.js';
-import { MediaControlEvents } from '../media-control/MediaControl.js';
+import { MediaControlEvents, } from '../media-control/MediaControl.js';
 const DEFAULT_PLAYBACK_RATES = [
     { value: '0.5', label: '0.5x' },
     { value: '0.75', label: '0.75x' },
@@ -17,7 +17,7 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: '1.25', label: '1.25x' },
     { value: '1.5', label: '1.5x' },
     { value: '1.75', label: '1.75x' },
-    { value: '2.0', label: '2x' }
+    { value: '2.0', label: '2x' },
 ];
 const DEFAULT_PLAYBACK_RATE = '1.0';
 const T = 'plugins.playback_rate';
@@ -33,6 +33,7 @@ const T = 'plugins.playback_rate';
  * - {@link BottomGear | bottom_gear}
  *
  * It renders a button in the gear menu, which opens a dropdown with the options to change the playback rate.
+ * Note that the playback rate change is supported only for VOD or DVR enabled live streams.
  */
 export class PlaybackRate extends UICorePlugin {
     playbackRates = DEFAULT_PLAYBACK_RATES;
@@ -56,16 +57,17 @@ export class PlaybackRate extends UICorePlugin {
     static listTemplate = template(listHtml);
     constructor(core) {
         super(core);
-        this.playbackRates = core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
-        this.selectedRate = core.options.playbackRate?.defaultValue || DEFAULT_PLAYBACK_RATE;
+        this.playbackRates =
+            core.options.playbackRate?.options || DEFAULT_PLAYBACK_RATES;
+        this.selectedRate =
+            core.options.playbackRate?.defaultValue || DEFAULT_PLAYBACK_RATE;
     }
     /**
      * @internal
      */
     get attributes() {
         return {
-            'class': this.name,
-            'data-playback-rate-select': ''
+            class: 'media-control-playbackrate',
         };
     }
     /**
@@ -86,6 +88,7 @@ export class PlaybackRate extends UICorePlugin {
         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');
         const gear = this.core.getPlugin('bottom_gear');
@@ -93,6 +96,7 @@ export class PlaybackRate extends UICorePlugin {
         this.listenTo(mediaControl, MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, this.onGearRendered);
     }
     onActiveContainerChange() {
+        trace(`${T} onActiveContainerChange`);
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop);
         this.listenTo(this.core.activePlayback, Events.PLAYBACK_PLAY, this.onPlay);
         this.listenTo(this.core.activePlayback, PlaybackEvents.PLAYBACK_RATE_CHANGED, this.onPlaybackRateChange);
@@ -116,7 +120,7 @@ export class PlaybackRate extends UICorePlugin {
     allRateElements() {
         return this.$('ul.gear-sub-menu li');
     }
-    rateElement(rate = "1") {
+    rateElement(rate = '1') {
         return this.$(`ul.gear-sub-menu a[data-rate="${rate}"]`).parent();
     }
     onPlaybackRateChange(playbackRate) {
@@ -131,10 +135,11 @@ export class PlaybackRate extends UICorePlugin {
         }
     }
     shouldRender() {
-        if (!this.core.activeContainer) {
+        if (!this.core.activePlayback) {
             return false;
         }
-        if (this.core.getPlaybackType() === Playback.LIVE && !this.core.activePlayback.dvrEnabled) {
+        if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
+            !this.core.activePlayback.dvrEnabled) {
             return false;
         }
         return 'setPlaybackRate' in this.core.activePlayback;
@@ -157,9 +162,12 @@ export class PlaybackRate extends UICorePlugin {
             title: this.getTitle(),
             speedIcon,
             arrowRightIcon,
+            i18n: this.core.i18n,
         });
         this.$el.html(button);
-        this.core.getPlugin('bottom_gear')?.getElement('rate')?.html(this.el);
+        this.core.getPlugin('bottom_gear')
+            ?.getElement('rate')
+            ?.html(this.el);
         this.rendered = true;
         return this;
     }
@@ -174,7 +182,8 @@ export class PlaybackRate extends UICorePlugin {
         }
     }
     onPlay() {
-        if (this.core.getPlaybackType() === Playback.LIVE && !this.core.activePlayback.dvrEnabled) {
+        if (this.core.getPlaybackType() === Playback.LIVE &&
+            !this.core.activePlayback.dvrEnabled) {
             this.resetPlaybackRate();
         }
         else {
@@ -184,8 +193,7 @@ export class PlaybackRate extends UICorePlugin {
     resetPlaybackRate() {
         this.setSelectedRate(DEFAULT_PLAYBACK_RATE);
     }
-    onStop() {
-    }
+    onStop() { }
     onRateSelect(event) {
         event.stopPropagation();
         const rate = event.currentTarget.dataset.rate;
@@ -200,6 +208,7 @@ export class PlaybackRate extends UICorePlugin {
             playbackRates: this.playbackRates,
             arrowLeftIcon,
             checkIcon,
+            i18n: this.core.i18n,
         }));
         this.core.getPlugin('bottom_gear')?.setContent(this.el);
         this.highlightCurrentRate();
@@ -215,7 +224,8 @@ export class PlaybackRate extends UICorePlugin {
         this.selectedRate = rate;
     }
     getTitle() {
-        return this.playbackRates.find((r) => r.value === this.selectedRate)?.label || this.selectedRate;
+        return (this.playbackRates.find((r) => r.value === this.selectedRate)?.label ||
+            this.selectedRate);
     }
     highlightCurrentRate() {
         this.allRateElements().removeClass('current');