@gcorevideo/player 2.19.12 → 2.19.14

package/dist/player.d.ts

@@ -4,6 +4,7 @@
  * @remarks
  * This package provides a video player for the Gcore streaming platform.
  * It is built on top of the Clappr library and provides a framework for building custom integrations.
+ * Start with {@link Player} for more information.
  *
  * @packageDocumentation
  */
@@ -116,34 +117,55 @@ declare type BitrateTrackRecord = {
 };
 
 /**
+ * Adds the gear button that triggers extra options menu on the right side of the {@link MediaControl | media control} UI
  * @beta
+ * @remarks
+ * The plugins provides a base for attaching custom settings UI in the gear menu
  */
 export declare class BottomGear extends UICorePlugin {
     private isHd;
+    /**
+     * @internal
+     */
     get name(): string;
+    /**
+     * @internal
+     */
     get supportedVersion(): {
         min: string;
     };
+    /**
+     * @internal
+     */
     static get version(): string;
-    get template(): any;
+    private static readonly template;
+    /**
+     * @internal
+     */
     get attributes(): {
         class: string;
         'data-track-selector': string;
     };
+    /**
+     * @internal
+     */
     get events(): {
         'click .button-gear': string;
     };
-    get container(): any;
+    /**
+     * @internal
+     */
     bindEvents(): void;
-    unBindEvents(): void;
     private onActiveContainerChanged;
     private bindContainerEvents;
-    reload(): void;
     private highDefinitionUpdate;
+    /**
+     * @internal
+     */
     render(): this;
-    refresh(): void;
-    toggleGearMenu(): void;
-    hide(): void;
+    private refresh;
+    private toggleGearMenu;
+    private hide;
 }
 
 /**
@@ -350,28 +372,54 @@ export declare class DisableControls extends UICorePlugin {
     private disableAllControls;
 }
 
+/**
+ * Adds the DVR controls to the media control UI
+ * @beta
+ *
+ * @remarks
+ * The plugin is rendered in the {@link MediaControl | media control} UI.
+ * It renders the live stream indicator and the DVR seek bar if DVR is enabled.
+ */
 export declare class DvrControls extends UICorePlugin {
-    get template(): any;
+    private static readonly template;
+    /**
+     * @internal
+     */
     get name(): string;
+    /**
+     * @internal
+     */
     get supportedVersion(): {
         min: string;
     };
+    /**
+     * @internal
+     */
     get events(): {
         'click .live-button': string;
     };
+    /**
+     * @internal
+     */
     get attributes(): {
         class: string;
         'data-dvr-controls': string;
     };
     constructor(core: Core);
+    /**
+     * @internal
+     */
     bindEvents(): void;
     private bindCoreEvents;
     private bindContainerEvents;
     private containerChanged;
     private dvrChanged;
-    click(): void;
-    settingsUpdate(): void;
-    shouldRender(): boolean;
+    private click;
+    private settingsUpdate;
+    private shouldRender;
+    /**
+     * @internal
+     */
     render(): this;
 }
 
@@ -500,26 +548,27 @@ export declare class Kibo {
 export declare type LangTag = string;
 
 /**
- * Allows to control the quality level of the playback.
+ * A {@link MediaControl | media control} plugin that provides a UI to control the quality level of the playback.
  * @beta
  *
  * @remarks
- * The plugin is rendered as a button in the gear menu.
+ * The plugin is rendered as a button in the {@link BottomGear | gear menu}.
  * When clicked, it shows a list of quality levels to choose from.
  *
  * Configuration options:
  *
- * - `labels`: The labels to show in the level selector. [vertical resolution]: string
+ * - `labels`: The labels to show in the level selector. [video resolution]: string
+ *
  * - `restrictResolution`: The maximum resolution to allow in the level selector.
  *
  * @example
  * ```ts
- * {
+ * new Player({
  *   levelSelector: {
  *     restrictResolution: 360,
- *     labels: { 360: '360p', 720: '720p' },
+ *     labels: { 360: 'SD', 720: 'HD' },
  *   },
- * }
+ * })
  * ```
  */
 export declare class LevelSelector extends UICorePlugin {
@@ -530,11 +579,23 @@ export declare class LevelSelector extends UICorePlugin {
     private isOpen;
     private buttonTemplate;
     private listTemplate;
+    /**
+     * @internal
+     */
     get name(): string;
+    /**
+     * @internal
+     */
     get supportedVersion(): {
         min: string;
     };
+    /**
+     * @internal
+     */
     static get version(): string;
+    /**
+     * @internal
+     */
     get attributes(): {
         class: string;
         'data-level-selector': string;
@@ -546,10 +607,16 @@ export declare class LevelSelector extends UICorePlugin {
         'click .gear-option': string;
         'click .go-back': string;
     };
+    /**
+     * @internal
+     */
     bindEvents(): void;
     private bindPlaybackEvents;
     private onStop;
     private shouldRender;
+    /**
+     * @internal
+     */
     render(): this;
     private renderButton;
     private renderDropdown;
@@ -603,11 +670,17 @@ export declare class Logo extends UIContainerPlugin {
 export { LogTracer }
 
 /**
- * The MediaControl is responsible for displaying the Player controls.
+ * The MediaControl provides a foundation for developing custom media controls UI.
  * @beta
  * @remarks
- * This plugin provides a foundation for developing a media controls UI via additional plugins.
  * The methods exposed are to be used by the other plugins that extend the media control UI.
+ * The plugin registration should be arranged so that MediaControl is initialized before every other plugin that depends on it.
+ * @example
+ * ```ts
+ * Player.registerPlugin(MediaControl) // <--- This must go first
+ * Player.registerPlugin(LevelSelector) // a media control plugin
+ * Player.registerPlugin(NerdStats) // another media control plugin
+ * ```
  */
 export declare class MediaControl extends UICorePlugin {
     private advertisementPlaying;
@@ -633,7 +706,6 @@ export declare class MediaControl extends UICorePlugin {
     private persistConfig;
     private rendered;
     private settings;
-    private svgMask;
     private userDisabled;
     private userKeepVisible;
     private verticalVolume;
@@ -662,17 +734,37 @@ export declare class MediaControl extends UICorePlugin {
     private $volumeContainer;
     private $volumeIcon;
     private static readonly template;
+    /**
+     * @internal
+     */
     get name(): string;
+    /**
+     * @internal
+     */
     get supportedVersion(): {
         min: string;
     };
-    get disabled(): any;
+    private get disabled();
+    /**
+     * @internal
+     * @deprecated
+     */
     get container(): any;
+    /**
+     * @internal
+     * @deprecated
+     */
     get playback(): any;
+    /**
+     * @internal
+     */
     get attributes(): {
         class: string;
         'data-media-control-skin-1': string;
     };
+    /**
+     * @internal
+     */
     get events(): {
         'click [data-play]': string;
         'click [data-pause]': string;
@@ -701,34 +793,34 @@ export declare class MediaControl extends UICorePlugin {
         'mouseleave .media-control-layer[data-controls]': string;
     };
     /**
-     * Current volume
+     * Current volume [0..100]
      */
-    get volume(): any;
+    get volume(): number;
     /**
      * Muted state
      */
     get muted(): boolean;
     constructor(core: Core);
+    /**
+     * @internal
+     */
     getExternalInterface(): {
         setVolume: (value: number, isInitialVolume?: boolean) => void;
-        getVolume: () => any;
+        getVolume: () => number;
     };
-    bindEvents(): void;
-    bindContainerEvents(): void;
-    disable(): void;
-    enable(): void;
     /**
-     * Start the playback
+     * @internal
      */
-    play(): void;
+    bindEvents(): void;
+    private bindContainerEvents;
     /**
-     * Pause the playback
+     * Disables the plugin and unmounts its UI
      */
-    pause(): void;
+    disable(): void;
     /**
-     * Stop the playback
+     * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
      */
-    stop(): void;
+    enable(): void;
     /**
      * Set the initial volume, which is preserved when playback is interrupted by an advertisement
      */
@@ -783,7 +875,20 @@ export declare class MediaControl extends UICorePlugin {
     /**
      * Get a media control element DOM node
      * @param name - The name of the media control element
-     * @returns The DOM node to render the media control element
+     * @returns The DOM node to render to or extend
+     * @remarks
+     * Use this method to render custom media control UI in a plugin
+     * @example
+     * ```ts
+     * class MyPlugin extends UICorePlugin {
+     *   override render() {
+     *     const mediaControl = this.core.getPlugin('media_control')
+     *     const clipText = mediaControl.getElement('clipText')
+     *     clipText?.el.text('Here we go')
+     *     return this
+     *   }
+     * }
+     * ```
      */
     getElement(name: MediaControlElement): ZeptoResult | null;
     private resetIndicators;
@@ -795,31 +900,37 @@ export declare class MediaControl extends UICorePlugin {
     private unbindKeyEvents;
     private parseColors;
     private applyButtonStyle;
+    /**
+     * @internal
+     */
     destroy(): UIObject;
     private configure;
+    /**
+     * @internal
+     */
     render(): this;
     private handleFullScreenOnBtn;
     private onStartAd;
     private onFinishAd;
     private hideControllAds;
-    setMuted(value: boolean): void;
     private static getPageX;
     private static getPageY;
     /**
-     * Enable the control button
+     * Enable the user interaction disabled earlier
      */
     enableControlButton(): void;
     /**
-     * Disable the control button
+     * Disable the user interaction for the control buttons
      */
     disabledControlButton(): void;
     private isSeekEnabledForHtml5Playback;
 }
 
 /**
+ * Media control elements, mount points for additional plugins
  * @beta
  */
-export declare type MediaControlElement = 'clipText' | 'pip' | 'seekBarContainer';
+export declare type MediaControlElement = 'bottomGear' | 'clipText' | 'pip' | 'playbackRate' | 'seekBarContainer';
 
 declare type MediaSourceInfo = {
     live: boolean;
@@ -1064,8 +1175,6 @@ export declare class Player {
     private player;
     private ready;
     private rootNode;
-    private tuneInTimerId;
-    private tunedIn;
     constructor(config: PlayerConfig);
     /**
      * Adds a listener to a player event
@@ -1228,13 +1337,14 @@ export declare class Player {
     private setConfig;
     private initPlayer;
     private tuneIn;
+    private triggerAutoPlay;
     private safeTriggerEvent;
     private events;
     private buildCoreOptions;
     private configurePlaybacks;
     private buildMediaSourcesList;
     private bindContainerEventListeners;
-    private bindSizeManagementListeners;
+    private bindCoreListeners;
 }
 
 /**
@@ -1465,28 +1575,76 @@ export declare type PluginSettings = {
     send: (data: StatisticsRecord) => void;
 };
 
+/**
+ * Displays a poster image in the background and a big play button on top when playback is stopped
+ * @beta
+ * @remarks
+ * When the playback is stopped, media control UI is disabled.
+ *
+ * Configuration options:
+ *
+ * - `poster.custom` - custom CSS background
+ *
+ * - `poster.showForNoOp` - whether to show the poster when the playback is not started
+ *
+ * - `poster.url` - the URL of the poster image
+ *
+ * - `poster.showOnVideoEnd` - whether to show the poster when the playback is ended
+ *
+ * @example
+ * ```ts
+ * new Player({
+ *  ...
+ *  poster: {
+ *    showForNoOp: true,
+ *    url: 'https://via.placeholder.com/150.png',
+ *  }
+ * })
+ * ```
+ */
 export declare class Poster extends UIContainerPlugin {
     private hasFatalError;
     private hasStartedPlaying;
     private playRequested;
     private $playButton;
     private $playWrapper;
+    /**
+     * @internal
+     */
     get name(): string;
+    /**
+     * @internal
+     */
     get supportedVersion(): {
         min: string;
     };
-    get template(): any;
-    get shouldRender(): boolean;
+    private static readonly template;
+    private get shouldRender();
+    /**
+     * @internal
+     */
     get attributes(): {
         class: string;
         'data-poster': string;
     };
+    /**
+     * @internal
+     */
     get events(): {
         click: string;
     };
-    get showOnVideoEnd(): boolean;
+    private get showOnVideoEnd();
+    /**
+     * @internal
+     */
     bindEvents(): void;
+    /**
+     * Reenables earlier disabled plugin
+     */
     enable(): void;
+    /**
+     * Disables the plugin, unmounting it from the DOM
+     */
     disable(): void;
     private onError;
     private onPlay;
@@ -1501,7 +1659,13 @@ export declare class Poster extends UIContainerPlugin {
     private updatePoster;
     private showPoster;
     private hidePoster;
+    /**
+     * @internal
+     */
     render(): this;
+    /**
+     * @internal
+     */
     destroy(): this;
 }