@gcorevideo/player 2.23.1 → 2.23.3

package/dist/index.js

@@ -43303,7 +43303,7 @@ class Player {
     }
 }
 
-var version$1 = "2.23.1";
+var version$1 = "2.23.3";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -45082,7 +45082,7 @@ class BigMuteButton extends UICorePlugin {
     }
 }
 
-const pluginHtml$5 = "<button class=\"media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon\" id=\"gear-button\">\n    <%= icon %>\n</button>\n<div class=\"gear-wrapper gcore-skin-bg-color\" id=\"gear-options-wrapper\" style=\"display:none\">\n    <ul class=\"gear-options-list\" id=\"gear-options\" role=\"menu\"></ul>\n</div>\n";
+const pluginHtml$5 = "<button class=\"media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon\"\n    id=\"gear-button\"\n    aria-expanded=\"false\"\n    aria-controls=\"gear-options\">\n    <%= icon %>\n</button>\n<div class=\"gear-wrapper gcore-skin-bg-color\" id=\"gear-options-wrapper\">\n    <ul class=\"gear-options-list\" id=\"gear-options\" role=\"menu\"></ul>\n</div>\n";
 
 const gearIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g clip-path=\"url(#clip0_660_1503)\">\n    <path\n      d=\"M19.14 12.94C19.18 12.64 19.2 12.33 19.2 12C19.2 11.68 19.18 11.36 19.13 11.06L21.16 9.47999C21.34 9.33999 21.39 9.06999 21.28 8.86999L19.36 5.54999C19.24 5.32999 18.99 5.25999 18.77 5.32999L16.38 6.28999C15.88 5.90999 15.35 5.58999 14.76 5.34999L14.4 2.80999C14.36 2.56999 14.16 2.39999 13.92 2.39999H10.08C9.83999 2.39999 9.64999 2.56999 9.60999 2.80999L9.24999 5.34999C8.65999 5.58999 8.11999 5.91999 7.62999 6.28999L5.23999 5.32999C5.01999 5.24999 4.76999 5.32999 4.64999 5.54999L2.73999 8.86999C2.61999 9.07999 2.65999 9.33999 2.85999 9.47999L4.88999 11.06C4.83999 11.36 4.79999 11.69 4.79999 12C4.79999 12.31 4.81999 12.64 4.86999 12.94L2.83999 14.52C2.65999 14.66 2.60999 14.93 2.71999 15.13L4.63999 18.45C4.75999 18.67 5.00999 18.74 5.22999 18.67L7.61999 17.71C8.11999 18.09 8.64999 18.41 9.23999 18.65L9.59999 21.19C9.64999 21.43 9.83999 21.6 10.08 21.6H13.92C14.16 21.6 14.36 21.43 14.39 21.19L14.75 18.65C15.34 18.41 15.88 18.09 16.37 17.71L18.76 18.67C18.98 18.75 19.23 18.67 19.35 18.45L21.27 15.13C21.39 14.91 21.34 14.66 21.15 14.52L19.14 12.94ZM12 15.6C10.02 15.6 8.39999 13.98 8.39999 12C8.39999 10.02 10.02 8.39999 12 8.39999C13.98 8.39999 15.6 10.02 15.6 12C15.6 13.98 13.98 15.6 12 15.6Z\"\n      fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_660_1503\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
 
@@ -45172,6 +45172,8 @@ var GearEvents;
  */
 class BottomGear extends UICorePlugin {
     hd = false;
+    numItems = 0;
+    collapsed = true;
     /**
      * @internal
      */
@@ -45204,7 +45206,7 @@ class BottomGear extends UICorePlugin {
      */
     get events() {
         return {
-            'click #gear-button': 'toggleGearMenu',
+            'click #gear-button': 'toggleMenu',
         };
     }
     /**
@@ -45212,7 +45214,6 @@ class BottomGear extends UICorePlugin {
      */
     bindEvents() {
         this.listenToOnce(this.core, Events$1.CORE_READY, this.onCoreReady);
-        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
     /**
      * Adds a custom option to the gear menu
@@ -45258,20 +45259,23 @@ class BottomGear extends UICorePlugin {
                 this.$el.find('#gear-options').hide();
             });
         }
+        this.numItems++;
+        if (this.numItems > 0) {
+            this.$el.show();
+        }
         return $item;
     }
-    onActiveContainerChanged() {
-        trace(`${T$g} onActiveContainerChanged`);
-        this.bindContainerEvents();
-    }
-    bindContainerEvents() {
+    bindContainerEvents(container) {
         trace(`${T$g} bindContainerEvents`);
-        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
+        this.listenTo(container, Events$1.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
+        this.listenTo(container, Events$1.CONTAINER_CLICK, () => {
+            this.collapse();
+        });
     }
     highDefinitionUpdate(isHd) {
         trace(`${T$g} highDefinitionUpdate`, { isHd });
         this.hd = isHd;
-        this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon);
+        this.$el.find('#gear-button').html(isHd ? gearHdIcon : gearIcon);
     }
     /**
      * @internal
@@ -45283,11 +45287,13 @@ class BottomGear extends UICorePlugin {
             return this; // TODO test
         }
         const icon = this.hd ? gearHdIcon : gearIcon;
+        this.collapsed = true;
+        this.numItems = 0;
         this.$el
             .html(BottomGear.template({ icon }))
-            .find('#gear-sub-menu-wrapper')
+            .hide() // until numItems > 0
+            .find('#gear-options-wrapper')
             .hide();
-        // TODO make non-clickable when there are no items
         setTimeout(() => {
             this.trigger(GearEvents.RENDERED);
         }, 0);
@@ -45299,33 +45305,58 @@ class BottomGear extends UICorePlugin {
      * Should be called by the UI plugin that added a gear item with a submenu when the latter is closed (e.g., when a "back" button is clicked).
      */
     refresh() {
+        this.collapseSubmenus();
+    }
+    collapseSubmenus() {
         this.$el.find('.gear-sub-menu-wrapper').hide();
         this.$el.find('#gear-options').show();
     }
-    toggleGearMenu() {
+    toggleMenu() {
         this.core
             .getPlugin('media_control')
             .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name);
-        this.$el.find('#gear-options-wrapper').toggle();
+        this.collapsed = !this.collapsed;
+        if (this.collapsed) {
+            this.$el.find('#gear-options-wrapper').hide();
+        }
+        else {
+            this.$el.find('#gear-options-wrapper').show();
+        }
+        this.$el.find('#gear-button').attr('aria-expanded', (!this.collapsed).toString());
+        trace(`${T$g} toggleMenu`, { hidden: this.collapsed });
     }
-    hide() {
-        trace(`${T$g} hide`);
+    collapse() {
+        trace(`${T$g} collapse`);
+        this.collapsed = true;
         this.$el.find('#gear-options-wrapper').hide();
+        this.$el.find('#gear-button').attr('aria-expanded', 'false');
+        // TODO hide submenus
+        this.collapseSubmenus();
     }
     onCoreReady() {
         trace(`${T$g} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.onMediaControlRendered);
-        this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hide);
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.collapse);
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, () => {
+            this.bindContainerEvents(mediaControl.container);
+        });
         this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
             if (from !== this.name) {
-                this.hide();
+                this.collapse();
             }
         });
+        this.bindContainerEvents(mediaControl.container);
     }
     onMediaControlRendered() {
         trace(`${T$g} onMediaControlRendered`);
+        this.mount();
+    }
+    mount() {
+        trace(`${T$g} mount`, {
+            numItems: this.numItems,
+        });
         const mediaControl = this.core.getPlugin('media_control');
         mediaControl.mount('gear', this.$el);
     }
@@ -52149,11 +52180,9 @@ class Thumbnails extends UICorePlugin {
         mediaControl.$el.first().after(this.$el);
     }
     onMouseMoveSeekbar(_, pos) {
-        if (Math.abs(pos - this.hoverPosition) >= 0.01) {
-            this.hoverPosition = pos;
-            this.showing = true;
-            this.update();
-        }
+        this.hoverPosition = pos;
+        this.showing = true;
+        this.update();
     }
     onMouseLeave() {
         this.showing = false;
@@ -52265,7 +52294,6 @@ class Thumbnails extends UICorePlugin {
         // determine which thumbnail applies to the current time
         const thumbIndex = this.getThumbIndexForTime(hoverTime);
         const thumb = this.thumbs[thumbIndex];
-        // update thumbnail
         const $spotlight = this.$el.find('#thumbnails-spotlight');
         this.buildThumbImage(thumb, this.spotlightHeight, $spotlight.find('.thumbnail-container')).appendTo($spotlight);
         const elWidth = this.$el.width();

package/dist/player.d.ts

@@ -552,6 +552,12 @@ export declare class Clips extends UICorePlugin {
     destroy(): UIObject;
     disable(): void;
     enable(): void;
+    /**
+     * Get the text of the clip at the given time
+     * @param time - The time to get the text for
+     * @returns The text of the clip at the given time
+     */
+    getText(time: TimeValue): string | undefined;
     private onCoreReady;
     private onMcRender;
     private onContainerChanged;
@@ -1158,8 +1164,8 @@ export declare class MediaControl extends UICorePlugin {
     };
     private get disabled();
     /**
+     * Use in mediacontrol-based plugins to access the active container
      * @internal
-     * @deprecated Use core.activeContainer directly
      */
     get container(): any;
     /**
@@ -1299,12 +1305,6 @@ export declare class MediaControl extends UICorePlugin {
      * ```
      */
     mount(name: MediaControlElement, element: ZeptoResult): void;
-    /**
-     * @deprecated  Use {@link MediaControl.mount} instead
-     * @param name
-     * @param element
-     */
-    putElement(name: MediaControlElement, element: ZeptoResult): void;
     /**
      * Toggle the visibility of a media control element
      * @param name - The name of the media control element
@@ -2216,19 +2216,13 @@ export declare type PlayerPluginConstructor = CorePluginConstructor | ContainerP
  * `PLUGIN` that 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.
+ * When the playback is stopped or not yet started, the media control UI is disabled and hidden.
+ * Media control gets activated once the metadata is loaded after playback is initiated.
+ * This plugin displays a big play button on top of the poster image to allow user to start playback.
  * Note that the poster image, if specified via the player config, will be used to update video element's poster attribute by the
  * HTML5-video-based playback module.
  *
- * 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
+ * Configuration options - {@link PosterPluginSettings}
  *
  * @example
  * ```ts
@@ -2243,10 +2237,9 @@ export declare type PlayerPluginConstructor = CorePluginConstructor | ContainerP
  */
 export declare class Poster extends UIContainerPlugin {
     private hasFatalError;
-    private hasStartedPlaying;
+    private playing;
     private playRequested;
     private $playButton;
-    private $playWrapper;
     /**
      * @internal
      */
@@ -2259,12 +2252,12 @@ export declare class Poster extends UIContainerPlugin {
     };
     private static readonly template;
     private get shouldRender();
+    private get isNoOp();
     /**
      * @internal
      */
     get attributes(): {
         class: string;
-        'data-poster': string;
     };
     /**
      * @internal
@@ -2272,7 +2265,6 @@ export declare class Poster extends UIContainerPlugin {
     get events(): {
         click: string;
     };
-    private get showOnVideoEnd();
     /**
      * @internal
      */
@@ -2308,6 +2300,25 @@ export declare class Poster extends UIContainerPlugin {
     destroy(): this;
 }
 
+export declare type PosterPluginSettings = {
+    /**
+     * Custom CSS background
+     */
+    custom?: string;
+    /**
+     * Whether to show the poster image when the playback is noop (i.e., when there is no appropriate video playback engine for current media sources set or the media sources are not set at all)
+     */
+    showForNoOp?: boolean;
+    /**
+     * Poster image URL
+     */
+    url?: string;
+    /**
+     * Whether to show the poster after playback has ended @default true
+     */
+    showOnVideoEnd?: boolean;
+};
+
 /**
  * A level of quality within a media source/representation.
  * @public
@@ -2897,6 +2908,12 @@ export declare type TelemetrySendFn = (data: TelemetryRecord) => void;
 /**
  * `PLUGIN` that displays the thumbnails of the video when available.
  * @beta
+ * @remarks
+ * The plugin needs specially crafted VTT file with a thumbnail sprite sheet to work.
+ * The VTT consist of timestamp records followed by a thumbnail area
+ *
+ * Configuration options - {@link ThumbnailsPluginSettings}
+ *
  * @example
  * ```ts
  * import { Thumbnails } from '@gcorevideo/player'
@@ -2917,19 +2934,15 @@ export declare type TelemetrySendFn = (data: TelemetryRecord) => void;
  * ```
  */
 export declare class Thumbnails extends UICorePlugin {
-    private _$spotlight;
-    private _$backdrop;
-    private $container;
-    private $img;
-    private _$carousel;
-    private $textThumbnail;
-    private _$backdropCarouselImgs;
+    private $backdropCarouselImgs;
     private spriteSheetHeight;
-    private _hoverPosition;
-    private _show;
-    private _thumbsLoaded;
-    private _oldContainer;
-    private _thumbs;
+    private spriteSheetWidth;
+    private hoverPosition;
+    private showing;
+    private thumbsLoaded;
+    private spotlightHeight;
+    private backdropHeight;
+    private thumbs;
     /**
      * @internal
      */
@@ -2947,29 +2960,30 @@ export declare class Thumbnails extends UICorePlugin {
         class: string;
     };
     private static readonly template;
+    constructor(core: Core);
     private buildSpriteConfig;
     /**
      * @internal
      */
     bindEvents(): void;
-    private _bindContainerEvents;
-    private _onCoreReady;
+    private bindContainerEvents;
+    private onCoreReady;
     private loadSpriteSheet;
-    private _onMediaControlContainerChanged;
-    private _init;
-    private _getOptions;
-    private _appendElToMediaControl;
-    private _onMouseMove;
-    private _onMouseLeave;
-    private _calculateHoverPosition;
-    private _buildImg;
-    private _loadBackdrop;
+    private onContainerChanged;
+    private init;
+    private mount;
+    private onMouseMoveSeekbar;
+    private onMouseLeave;
+    private buildThumbImage;
+    private loadBackdrop;
     private setText;
-    private _updateCarousel;
-    private _updateSpotlightThumb;
-    private _getThumbIndexForTime;
-    private _renderPlugin;
-    private _createElements;
+    private updateCarousel;
+    private updateSpotlightThumb;
+    private getThumbIndexForTime;
+    private update;
+    private fixElements;
+    private get shouldRender();
+    render(): this;
 }
 
 /**
@@ -2977,10 +2991,10 @@ export declare class Thumbnails extends UICorePlugin {
  * @beta
  */
 export declare type ThumbnailsPluginSettings = {
-    backdropHeight: number;
-    backdropMaxOpacity: number;
-    backdropMinOpacity: number;
-    spotlightHeight: number;
+    backdropHeight?: number;
+    backdropMaxOpacity?: number;
+    backdropMinOpacity?: number;
+    spotlightHeight?: number;
     sprite: string;
     vtt: string;
 };

package/docs/api/{player.mediacontrol.putelement.md → player.clips.gettext.md}

@@ -1,21 +1,18 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [MediaControl](./player.mediacontrol.md) &gt; [putElement](./player.mediacontrol.putelement.md)
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [Clips](./player.clips.md) &gt; [getText](./player.clips.gettext.md)
 
-## MediaControl.putElement() method
+## Clips.getText() method
 
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
-> Warning: This API is now obsolete.
-> 
-> Use [MediaControl.mount()](./player.mediacontrol.mount.md) instead
-> 
+Get the text of the clip at the given time
 
 **Signature:**
 
 ```typescript
-putElement(name: MediaControlElement, element: ZeptoResult): void;
+getText(time: TimeValue): string | undefined;
 ```
 
 ## Parameters
@@ -38,34 +35,24 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
-name
+time
 
 
 </td><td>
 
-[MediaControlElement](./player.mediacontrolelement.md)
+[TimeValue](./player.timevalue.md)
 
 
 </td><td>
 
-
-</td></tr>
-<tr><td>
-
-element
-
-
-</td><td>
-
-[ZeptoResult](./player.zeptoresult.md)
-
-
-</td><td>
+The time to get the text for
 
 
 </td></tr>
 </tbody></table>
 **Returns:**
 
-void
+string \| undefined
+
+The text of the clip at the given time
 

package/docs/api/player.clips.md

@@ -152,6 +152,20 @@ Description
 **_(BETA)_**
 
 
+</td></tr>
+<tr><td>
+
+[getText(time)](./player.clips.gettext.md)
+
+
+</td><td>
+
+
+</td><td>
+
+**_(BETA)_** Get the text of the clip at the given time
+
+
 </td></tr>
 <tr><td>
 

package/docs/api/player.md

@@ -1016,6 +1016,15 @@ A media source to fetch the media data from
 
 
 
+</td></tr>
+<tr><td>
+
+[PosterPluginSettings](./player.posterpluginsettings.md)
+
+
+</td><td>
+
+
 </td></tr>
 <tr><td>
 

package/docs/api/player.mediacontrol.md

@@ -237,20 +237,6 @@ Description
 **_(BETA)_** Get a media control element DOM node
 
 
-</td></tr>
-<tr><td>
-
-[putElement(name, element)](./player.mediacontrol.putelement.md)
-
-
-</td><td>
-
-
-</td><td>
-
-**_(BETA)_**
-
-
 </td></tr>
 <tr><td>
 

package/docs/api/player.poster.md

@@ -18,17 +18,9 @@ export declare class Poster extends UIContainerPlugin
 
 ## Remarks
 
-When the playback is stopped, media control UI is disabled. Note that the poster image, if specified via the player config, will be used to update video element's poster attribute by the HTML5-video-based playback module.
+When the playback is stopped or not yet started, the media control UI is disabled and hidden. Media control gets activated once the metadata is loaded after playback is initiated. This plugin displays a big play button on top of the poster image to allow user to start playback. Note that the poster image, if specified via the player config, will be used to update video element's poster attribute by the HTML5-video-based playback module.
 
-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
+Configuration options - [PosterPluginSettings](./player.posterpluginsettings.md)
 
 ## Example
 

package/docs/api/player.posterpluginsettings.md

@@ -0,0 +1,16 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [PosterPluginSettings](./player.posterpluginsettings.md)
+
+## PosterPluginSettings type
+
+**Signature:**
+
+```typescript
+export type PosterPluginSettings = {
+    custom?: string;
+    showForNoOp?: boolean;
+    url?: string;
+    showOnVideoEnd?: boolean;
+};
+```

package/docs/api/player.thumbnails._constructor_.md

@@ -0,0 +1,50 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [Thumbnails](./player.thumbnails.md) &gt; [(constructor)](./player.thumbnails._constructor_.md)
+
+## Thumbnails.(constructor)
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+Constructs a new instance of the `Thumbnails` class
+
+**Signature:**
+
+```typescript
+constructor(core: Core);
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+core
+
+
+</td><td>
+
+Core
+
+
+</td><td>
+
+
+</td></tr>
+</tbody></table>