@gcorevideo/player 2.22.14 → 2.22.16

package/dist/player.d.ts

@@ -51,7 +51,7 @@ import { UIObject } from '@clappr/core';
  *
  * - {@link MediaControl}
  */
-export declare class AudioSelector extends UICorePlugin {
+declare class AudioTracks extends UICorePlugin {
     private currentTrack;
     private tracks;
     /**
@@ -80,28 +80,22 @@ export declare class AudioSelector extends UICorePlugin {
      */
     get events(): {
         'click [data-audiotracks-select]': string;
-        'click [data-audiotracks-button]': string;
+        'click #audiotracks-button': string;
     };
     /**
      * @internal
      */
     bindEvents(): void;
     private onCoreReady;
-    private bindPlaybackEvents;
-    private setupAudioTrackListeners;
-    private onStop;
     private onActiveContainerChanged;
     private shouldRender;
     /**
      * @internal
      */
     render(): this;
-    private fillTracks;
-    private findTrackBy;
     private onTrackSelect;
     private selectAudioTrack;
-    private onShowLevelSelectMenu;
-    private hideSelectTrackMenu;
+    private hideMenu;
     private toggleContextMenu;
     private buttonElement;
     private buttonElementText;
@@ -111,6 +105,8 @@ export declare class AudioSelector extends UICorePlugin {
     private updateText;
     private highlightCurrentTrack;
 }
+export { AudioTracks as AudioSelector }
+export { AudioTracks }
 
 /**
  * `PLUGIN` that displays a big mute button over the video when it's muted.
@@ -697,11 +693,11 @@ export declare type ContainerSize = {
  * @beta
  * @remarks
  * Configuration options - {@link ContextMenuPluginSettings}
+ *
+ * Should not be used together with {@link ClickToPause} plugin
  */
 export declare class ContextMenu extends UIContainerPlugin {
-    private _label;
-    private _url;
-    private menuOptions;
+    private open;
     /**
      * @internal
      */
@@ -719,14 +715,11 @@ export declare class ContextMenu extends UIContainerPlugin {
         class: string;
     };
     private static readonly template;
-    private get label();
-    private get url();
-    private get exposeVersion();
     /**
      * @internal
      */
     get events(): {
-        'click [data-version]': string;
+        'click [role="menuitem"]': string;
     };
     constructor(container: Container);
     /**
@@ -737,10 +730,11 @@ export declare class ContextMenu extends UIContainerPlugin {
      * @internal
      */
     destroy(): UIObject;
-    private toggleContextMenu;
+    private onContainerClick;
+    private onContextMenu;
     private show;
     private hide;
-    private onOpenMainPage;
+    private runAction;
     /**
      * @internal
      */
@@ -753,9 +747,7 @@ export declare class ContextMenu extends UIContainerPlugin {
  * @beta
  */
 export declare interface ContextMenuPluginSettings {
-    label?: string;
-    url?: string;
-    preventShowContextMenu?: boolean;
+    options?: MenuOption[];
 }
 
 /**
@@ -1027,116 +1019,6 @@ export declare interface InitEventData {
  */
 export declare type LangTag = string;
 
-/**
- * `PLUGIN` that provides a UI to select the desired quality level of the playback.
- * @beta
- *
- * @remarks
- * Depends on:
- *
- * - {@link MediaControl}
- *
- * - {@link BottomGear}
- *
- * The plugin is rendered as an item in the gear menu, which, when clicked, shows a list of quality levels to choose from.
- *
- * Configuration options - {@link LevelSelectorPluginSettings}
- *
- * @example
- * ```ts
- * new Player({
- *   levelSelector: {
- *     restrictResolution: 360,
- *     labels: { 360: 'SD', 720: 'HD' },
- *   },
- * })
- * ```
- */
-export declare class LevelSelector extends UICorePlugin {
-    private levels;
-    private levelLabels;
-    private removeAuto;
-    private isHd;
-    private currentText;
-    private selectedLevelId;
-    private static readonly buttonTemplate;
-    private static readonly listTemplate;
-    /**
-     * @internal
-     */
-    get name(): string;
-    /**
-     * @internal
-     */
-    get supportedVersion(): {
-        min: string;
-    };
-    /**
-     * @internal
-     */
-    static get version(): string;
-    /**
-     * @internal
-     */
-    get attributes(): {
-        class: string;
-        'data-level-selector': string;
-    };
-    get events(): {
-        'click .gear-sub-menu_btn': string;
-        'click .go-back': string;
-    };
-    /**
-     * @internal
-     */
-    bindEvents(): void;
-    private onCoreReady;
-    private onGearRendered;
-    private onActiveContainerChange;
-    private updateHd;
-    private onStop;
-    private shouldRender;
-    /**
-     * @internal
-     */
-    render(): this;
-    private renderDropdown;
-    private updateButton;
-    private get maxLevel();
-    private onLevelsAvailable;
-    private makeLevelsLabels;
-    private onSelect;
-    private goBack;
-    private setLevel;
-    private allLevelElements;
-    private levelElement;
-    private onLevelSwitchStart;
-    private onLevelSwitchEnd;
-    private updateText;
-    private getLevelLabel;
-    private onBitrate;
-    private highlightCurrentLevel;
-}
-
-/**
- * Configuration options for the {@link LevelSelector | level selector} plugin.
- * @beta
- */
-export declare interface LevelSelectorPluginSettings {
-    /**
-     * The maximum resolution to allow in the level selector.
-     */
-    restrictResolution?: number;
-    /**
-     * The labels to show in the level selector.
-     * @example
-     * ```ts
-     * { 360: 'SD', 720: 'HD' }
-     * ```
-     */
-    labels?: Record<number, string>;
-}
-
 export { Logger }
 
 /**
@@ -1177,10 +1059,16 @@ export { LogTracer }
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
+ *
+ * Configuration options:
+ *
+ * - `mediaControl`: {@link MediaControlSettings} - specifies the allowed media control elements in each area
+ *
+ * - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
+ *
+ * - `chromeless`: boolean
  */
 export declare class MediaControl extends UICorePlugin {
-    private customAreaElements;
-    private customAreaHandler?;
     private buttonsColor;
     private currentDurationValue;
     private currentPositionValue;
@@ -1199,7 +1087,10 @@ export declare class MediaControl extends UICorePlugin {
     private kibo;
     private lastMouseX;
     private lastMouseY;
+    private metadataLoaded;
+    private hasUpdate;
     private persistConfig;
+    private renderTimerId;
     private rendered;
     private settings;
     private userDisabled;
@@ -1212,7 +1103,6 @@ export declare class MediaControl extends UICorePlugin {
     private $multiCameraSelector;
     private $playPauseToggle;
     private $playStopToggle;
-    private $playbackRate;
     private $position;
     private $seekBarContainer;
     private $seekBarHover;
@@ -1383,7 +1273,6 @@ export declare class MediaControl extends UICorePlugin {
      */
     getElement(name: MediaControlElement): ZeptoResult | null;
     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
@@ -1406,6 +1295,7 @@ export declare class MediaControl extends UICorePlugin {
      * @internal
      */
     destroy(): UIObject;
+    private cancelRenderTimer;
     private configure;
     /**
      * @internal
@@ -1431,10 +1321,66 @@ export declare class MediaControl extends UICorePlugin {
 }
 
 /**
- * Media control elements, mount points for additional plugins
+ * Built-in media control elements.
+ * @beta
+ */
+export declare type MediaControlElement = MediaControlLeftElement | MediaControlLayerElement | MediaControlRightElement;
+
+/**
+ * Media control elements that appear in main layer, spanning the entire width of the player.
+ * @beta
+ */
+export declare type MediaControlLayerElement = 'seekbar' | 'seekBarContainer';
+
+/**
+ * Media control elements that appear in the left area.
+ * @beta
+ */
+export declare type MediaControlLeftElement = 'clipText' | 'duration' | 'dvr' | 'playpause' | 'playstop' | 'position' | 'volume';
+
+/**
+ * Media control elements that appear in the right area.
  * @beta
  */
-export declare type MediaControlElement = 'audiotracks' | 'cc' | 'clipText' | 'dvr' | 'duration' | 'fullscreen' | 'gear' | 'multicamera' | 'pip' | 'playbackRate' | 'position' | 'seekBarContainer' | 'vr' | 'volume';
+export declare type MediaControlRightElement = 'audiotracks' | 'cc' | 'fullscreen' | 'hd-indicator' | 'gear' | 'multicamera' | 'pip' | 'vr';
+
+/**
+ * Specifies the allowed media control elements in each area.
+ * Can be used to restrict rendered media control elements.
+ * @beta
+ */
+export declare type MediaControlSettings = {
+    left: MediaControlLeftElement[];
+    right: MediaControlRightElement[];
+    default: MediaControlLayerElement[];
+    seekEnabled: boolean;
+};
+
+/**
+ * @beta
+ */
+export declare type MenuOption = {
+    /**
+     * Menu item label text. One of `label` or `labelKey` must be specified.
+     */
+    label?: string;
+    /**
+     * Menu item label localisation key, if specified, the `label` will be ignored
+     */
+    labelKey?: string;
+    /**
+     * Menu item name. Must be unique.
+     */
+    name: string;
+    /**
+     * Menu item handler function
+     */
+    handler?: () => void;
+    /**
+     * Menu item icon, plain HTML string
+     */
+    icon?: string;
+};
 
 /**
  * @beta
@@ -1681,13 +1627,14 @@ export declare type PlaybackModule = 'dash' | 'hls' | 'html5_video';
  *       { value: 1, label: '1x' },
  *     ],
  *     defaultValue: 1,
- *   } as PlaybackRateSettings,
+ *   },
  * })
  * ```
  */
 export declare class PlaybackRate extends UICorePlugin {
-    private playbackRates;
     private selectedRate;
+    private metadataLoaded;
+    private mountTimerId;
     /**
      * @internal
      */
@@ -1701,6 +1648,7 @@ export declare class PlaybackRate extends UICorePlugin {
     private static readonly buttonTemplate;
     private static readonly listTemplate;
     constructor(core: Core);
+    private get playbackRates();
     /**
      * @internal
      */
@@ -1722,17 +1670,22 @@ export declare class PlaybackRate extends UICorePlugin {
     private onActiveContainerChange;
     private onMediaControlRendered;
     private onGearRendered;
-    private addGearItem;
+    private mount;
     private onMetaDataLoaded;
     private allRateElements;
     private rateElement;
     private onPlaybackRateChange;
-    private shouldRender;
+    private shouldMount;
     /**
      * @internal
      */
     render(): this;
+    /**
+     * @internal
+     */
+    destroy(): UIObject;
     private onPlay;
+    private syncRate;
     private resetPlaybackRate;
     private onStop;
     private onSelect;
@@ -2043,9 +1996,10 @@ export declare interface PlayerConfig extends Record<string, unknown> {
      */
     mute?: boolean;
     /**
-     * The type of playback (live stream or video on demand).
-     *
-     * @defaultValue 'vod'
+     * Stream type.
+     * @remark
+     * Should only be set if known in advance, as it should not change once determined.
+     * Otherwise it might cause inconsistencies in the UI plugins behavior, for instance, glitches with rendering of the DVR controls or seek bar.
      */
     playbackType?: PlaybackType;
     /**
@@ -2305,6 +2259,119 @@ export declare interface QualityLevel {
     bitrate: number;
 }
 
+/**
+ * `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' },
+ *   },
+ * })
+ * ```
+ */
+declare class QualityLevels extends UICorePlugin {
+    private levels;
+    private levelLabels;
+    private removeAuto;
+    private isHd;
+    private currentText;
+    private selectedLevelId;
+    private static readonly buttonTemplate;
+    private static readonly listTemplate;
+    /**
+     * @internal
+     */
+    get name(): string;
+    /**
+     * @internal
+     */
+    get supportedVersion(): {
+        min: string;
+    };
+    /**
+     * @internal
+     */
+    static get version(): string;
+    /**
+     * @internal
+     */
+    get attributes(): {
+        class: string;
+        'data-level-selector': string;
+    };
+    get events(): {
+        'click .gear-sub-menu_btn': string;
+        'click .go-back': string;
+    };
+    /**
+     * @internal
+     */
+    bindEvents(): void;
+    private onCoreReady;
+    private onGearRendered;
+    private onActiveContainerChange;
+    private updateHd;
+    private onStop;
+    private shouldRender;
+    /**
+     * @internal
+     */
+    render(): this;
+    private renderDropdown;
+    private updateButton;
+    private get pluginOptions();
+    private get maxLevel();
+    private onLevelsAvailable;
+    private makeLevelsLabels;
+    private onSelect;
+    private goBack;
+    private setLevel;
+    private allLevelElements;
+    private levelElement;
+    private onLevelSwitchStart;
+    private onLevelSwitchEnd;
+    private updateText;
+    private getLevelLabel;
+    private onBitrate;
+    private highlightCurrentLevel;
+}
+export { QualityLevels as LevelSelector }
+export { QualityLevels }
+
+/**
+ * Configuration options for the {@link QualityLevels} plugin.
+ * @beta
+ */
+export declare interface QualityLevelsPluginSettings {
+    /**
+     * The maximum resolution to allow in the level selector.
+     */
+    restrictResolution?: number;
+    /**
+     * The labels to show in the level selector.
+     * @example
+     * ```ts
+     * { 360: 'SD', 720: 'HD' }
+     * ```
+     */
+    labels?: Record<number, string>;
+}
+
 export { reportError_2 as reportError }
 
 /**