@gcorevideo/player 2.23.1 → 2.23.3

package/docs/api/player.thumbnails.md

@@ -16,6 +16,12 @@ export declare class Thumbnails extends UICorePlugin
 ```
 **Extends:** UICorePlugin
 
+## 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 - [ThumbnailsPluginSettings](./player.thumbnailspluginsettings.md)
+
 ## Example
 
 
@@ -37,3 +43,70 @@ new Player({
 })
 ```
 
+## Constructors
+
+<table><thead><tr><th>
+
+Constructor
+
+
+</th><th>
+
+Modifiers
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[(constructor)(core)](./player.thumbnails._constructor_.md)
+
+
+</td><td>
+
+
+</td><td>
+
+**_(BETA)_** Constructs a new instance of the `Thumbnails` class
+
+
+</td></tr>
+</tbody></table>
+
+## Methods
+
+<table><thead><tr><th>
+
+Method
+
+
+</th><th>
+
+Modifiers
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[render()](./player.thumbnails.render.md)
+
+
+</td><td>
+
+
+</td><td>
+
+**_(BETA)_**
+
+
+</td></tr>
+</tbody></table>

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

@@ -0,0 +1,18 @@
+<!-- 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; [render](./player.thumbnails.render.md)
+
+## Thumbnails.render() 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.
+> 
+
+**Signature:**
+
+```typescript
+render(): this;
+```
+**Returns:**
+
+this
+

package/docs/api/player.thumbnailspluginsettings.md

@@ -13,10 +13,10 @@ Plugin configuration options for the thumbnails plugin.
 
 ```typescript
 export type ThumbnailsPluginSettings = {
-    backdropHeight: number;
-    backdropMaxOpacity: number;
-    backdropMinOpacity: number;
-    spotlightHeight: number;
+    backdropHeight?: number;
+    backdropMaxOpacity?: number;
+    backdropMinOpacity?: number;
+    spotlightHeight?: number;
     sprite: string;
     vtt: string;
 };

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

@@ -82,6 +82,8 @@ export declare enum GearEvents {
  */
 export declare class BottomGear extends UICorePlugin {
     private hd;
+    private numItems;
+    private collapsed;
     /**
      * @internal
      */
@@ -136,7 +138,6 @@ export declare class BottomGear extends UICorePlugin {
      * ```
      */
     addItem(name: string, $subMenu?: ZeptoResult): ZeptoResult;
-    private onActiveContainerChanged;
     private bindContainerEvents;
     private highDefinitionUpdate;
     /**
@@ -149,9 +150,11 @@ export declare 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(): void;
-    private toggleGearMenu;
-    private hide;
+    private collapseSubmenus;
+    private toggleMenu;
+    private collapse;
     private onCoreReady;
     private onMediaControlRendered;
+    private mount;
 }
 //# sourceMappingURL=BottomGear.d.ts.map

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,EAAuC,MAAM,cAAc,CAAA;AAOhF,OAAO,uCAAuC,CAAA;AAC9C,OAAO,gDAAgD,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,EAAE,CAAQ;IAElB;;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;IASnB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IAyB1D,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAqBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,WAAW;IAqBnB,OAAO,CAAC,sBAAsB;CAK/B"}
+{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAkD,MAAM,cAAc,CAAA;AAO3F,OAAO,uCAAuC,CAAA;AAC9C,OAAO,gDAAgD,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,EAAE,CAAQ;IAElB,OAAO,CAAC,QAAQ,CAAK;IAErB,OAAO,CAAC,SAAS,CAAQ;IAEzB;;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;IAInB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IA6B1D,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAsBf;;;;OAIG;IACH,OAAO;IAIP,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,KAAK;CAOd"}

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

@@ -92,6 +92,8 @@ export var GearEvents;
  */
 export class BottomGear extends UICorePlugin {
     hd = false;
+    numItems = 0;
+    collapsed = true;
     /**
      * @internal
      */
@@ -124,7 +126,7 @@ export class BottomGear extends UICorePlugin {
      */
     get events() {
         return {
-            'click #gear-button': 'toggleGearMenu',
+            'click #gear-button': 'toggleMenu',
         };
     }
     /**
@@ -132,7 +134,6 @@ export class BottomGear extends UICorePlugin {
      */
     bindEvents() {
         this.listenToOnce(this.core, ClapprEvents.CORE_READY, this.onCoreReady);
-        this.listenTo(this.core, ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
     /**
      * Adds a custom option to the gear menu
@@ -178,20 +179,23 @@ export class BottomGear extends UICorePlugin {
                 this.$el.find('#gear-options').hide();
             });
         }
+        this.numItems++;
+        if (this.numItems > 0) {
+            this.$el.show();
+        }
         return $item;
     }
-    onActiveContainerChanged() {
-        trace(`${T} onActiveContainerChanged`);
-        this.bindContainerEvents();
-    }
-    bindContainerEvents() {
+    bindContainerEvents(container) {
         trace(`${T} bindContainerEvents`);
-        this.listenTo(this.core.activeContainer, ClapprEvents.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
+        this.listenTo(container, ClapprEvents.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
+        this.listenTo(container, ClapprEvents.CONTAINER_CLICK, () => {
+            this.collapse();
+        });
     }
     highDefinitionUpdate(isHd) {
         trace(`${T} highDefinitionUpdate`, { isHd });
         this.hd = isHd;
-        this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon);
+        this.$el.find('#gear-button').html(isHd ? gearHdIcon : gearIcon);
     }
     /**
      * @internal
@@ -203,11 +207,13 @@ export 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);
@@ -219,33 +225,58 @@ export 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} toggleMenu`, { hidden: this.collapsed });
     }
-    hide() {
-        trace(`${T} hide`);
+    collapse() {
+        trace(`${T} 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} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.onMediaControlRendered);
-        this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide);
+        this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.collapse);
+        this.listenTo(mediaControl, ClapprEvents.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} onMediaControlRendered`);
+        this.mount();
+    }
+    mount() {
+        trace(`${T} mount`, {
+            numItems: this.numItems,
+        });
         const mediaControl = this.core.getPlugin('media_control');
         mediaControl.mount('gear', this.$el);
     }

package/lib/plugins/thumbnails/Thumbnails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnails.d.ts","sourceRoot":"","sources":["../../../src/plugins/thumbnails/Thumbnails.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAKZ,IAAI,EACL,MAAM,cAAc,CAAA;AAUrB,OAAO,uCAAuC,CAAA;AAM9C;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAeD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,qBAAqB,CAAoB;IAEjD,OAAO,CAAC,iBAAiB,CAAY;IAErC,OAAO,CAAC,gBAAgB,CAAY;IAEpC,OAAO,CAAC,aAAa,CAAI;IAEzB,OAAO,CAAC,OAAO,CAAQ;IAEvB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,cAAc,CAAI;IAE1B,OAAO,CAAC,MAAM,CAAsB;IAEpC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;gBAE3C,IAAI,EAAE,IAAI;IAgBtB,OAAO,CAAC,iBAAiB;IAiCzB;;OAEG;IACM,UAAU;IAInB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,WAAW;YAmDL,eAAe;IAO7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,IAAI;IAaZ,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,cAAc;IAuEtB,OAAO,CAAC,oBAAoB;IAkD5B,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,MAAM;IAad,OAAO,CAAC,WAAW;IAgBnB,OAAO,KAAK,YAAY,GAMvB;IAEQ,MAAM;CAShB"}
+{"version":3,"file":"Thumbnails.d.ts","sourceRoot":"","sources":["../../../src/plugins/thumbnails/Thumbnails.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAKZ,IAAI,EACL,MAAM,cAAc,CAAA;AAUrB,OAAO,uCAAuC,CAAA;AAM9C;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAeD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,qBAAqB,CAAoB;IAEjD,OAAO,CAAC,iBAAiB,CAAY;IAErC,OAAO,CAAC,gBAAgB,CAAY;IAEpC,OAAO,CAAC,aAAa,CAAI;IAEzB,OAAO,CAAC,OAAO,CAAQ;IAEvB,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,cAAc,CAAI;IAE1B,OAAO,CAAC,MAAM,CAAsB;IAEpC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;gBAE3C,IAAI,EAAE,IAAI;IAgBtB,OAAO,CAAC,iBAAiB;IAiCzB;;OAEG;IACM,UAAU;IAInB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,WAAW;YAmDL,eAAe;IAO7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,IAAI;IAaZ,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,cAAc;IAuEtB,OAAO,CAAC,oBAAoB;IAiD5B,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,MAAM;IAad,OAAO,CAAC,WAAW;IAgBnB,OAAO,KAAK,YAAY,GAMvB;IAEQ,MAAM;CAShB"}

package/lib/plugins/thumbnails/Thumbnails.js

@@ -174,11 +174,9 @@ export 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;
@@ -290,7 +288,6 @@ export 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/lib/testUtils.d.ts

@@ -75,6 +75,7 @@ export declare function createMockContainer(options?: Record<string, unknown>, p
     getDuration: import("vitest").Mock<(...args: any[]) => any>;
     getPlugin: import("vitest").Mock<(...args: any[]) => any>;
     getPlaybackType: import("vitest").Mock<(...args: any[]) => any>;
+    getStartTimeOffset: import("vitest").Mock<(...args: any[]) => any>;
     isDvrInUse: import("vitest").Mock<(...args: any[]) => any>;
     isDvrEnabled: import("vitest").Mock<(...args: any[]) => any>;
     isHighDefinitionInUse: import("vitest").Mock<(...args: any[]) => any>;

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmC/C;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;;;;;;;;;EA4BrC;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAe/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmC/C;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;;;;;;;;;;EA6BrC;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAiB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/lib/testUtils.js

@@ -87,6 +87,7 @@ export function createMockContainer(options = {}, playback = createMockPlayback(
         getDuration: vi.fn().mockReturnValue(0),
         getPlugin: vi.fn(),
         getPlaybackType: vi.fn(),
+        getStartTimeOffset: vi.fn().mockReturnValue(0),
         isDvrInUse: vi.fn().mockReturnValue(false),
         isDvrEnabled: vi.fn().mockReturnValue(false),
         isHighDefinitionInUse: vi.fn().mockReturnValue(false),
@@ -107,6 +108,8 @@ export function createMockMediaControl(core) {
     // @ts-ignore
     mediaControl.mount = vi.fn();
     // @ts-ignore
+    mediaControl.container = core.activeContainer;
+    // @ts-ignore
     mediaControl.toggleElement = vi.fn();
     vi.spyOn(mediaControl, 'trigger');
     core.$el.append(mediaControl.$el);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.23.1",
+  "version": "2.23.3",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/plugins/bottom-gear/BottomGear.ts

@@ -1,4 +1,4 @@
-import { UICorePlugin, template, Events as ClapprEvents, $ } from '@clappr/core'
+import { UICorePlugin, template, Events as ClapprEvents, $, Container } from '@clappr/core'
 import { trace } from '@gcorevideo/utils'
 import assert from 'assert'
 
@@ -100,6 +100,10 @@ export enum GearEvents {
 export class BottomGear extends UICorePlugin {
   private hd = false
 
+  private numItems = 0;
+
+  private collapsed = true;
+
   /**
    * @internal
    */
@@ -137,7 +141,7 @@ export class BottomGear extends UICorePlugin {
    */
   override get events() {
     return {
-      'click #gear-button': 'toggleGearMenu',
+      'click #gear-button': 'toggleMenu',
     }
   }
 
@@ -146,11 +150,6 @@ export class BottomGear extends UICorePlugin {
    */
   override bindEvents() {
     this.listenToOnce(this.core, ClapprEvents.CORE_READY, this.onCoreReady)
-    this.listenTo(
-      this.core,
-      ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED,
-      this.onActiveContainerChanged,
-    )
   }
 
   /**
@@ -197,27 +196,29 @@ export class BottomGear extends UICorePlugin {
         this.$el.find('#gear-options').hide()
       })
     }
+    this.numItems++;
+    if (this.numItems > 0) {
+      this.$el.show()
+    }
     return $item
   }
 
-  private onActiveContainerChanged() {
-    trace(`${T} onActiveContainerChanged`)
-    this.bindContainerEvents()
-  }
-
-  private bindContainerEvents() {
+  private bindContainerEvents(container: Container) {
     trace(`${T} bindContainerEvents`)
     this.listenTo(
-      this.core.activeContainer,
+      container,
       ClapprEvents.CONTAINER_HIGHDEFINITIONUPDATE,
       this.highDefinitionUpdate,
     )
+    this.listenTo(container, ClapprEvents.CONTAINER_CLICK, () => {
+      this.collapse()
+    })
   }
 
   private highDefinitionUpdate(isHd: boolean) {
     trace(`${T} highDefinitionUpdate`, { isHd })
     this.hd = isHd
-    this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon)
+    this.$el.find('#gear-button').html(isHd ? gearHdIcon : gearIcon)
   }
 
   /**
@@ -230,13 +231,14 @@ export 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)
@@ -250,20 +252,35 @@ export 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()
+  }
+
+  private collapseSubmenus() {
     this.$el.find('.gear-sub-menu-wrapper').hide()
     this.$el.find('#gear-options').show()
   }
 
-  private toggleGearMenu() {
+  private 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} toggleMenu`, { hidden: this.collapsed })
   }
 
-  private hide() {
-    trace(`${T} hide`)
+  private collapse() {
+    trace(`${T} 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()
   }
 
   private onCoreReady() {
@@ -275,20 +292,31 @@ export class BottomGear extends UICorePlugin {
       ClapprEvents.MEDIACONTROL_RENDERED,
       this.onMediaControlRendered,
     )
-    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide)
+    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.collapse)
+    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_CONTAINERCHANGED, () => {
+      this.bindContainerEvents(mediaControl.container)
+    })
     this.listenTo(
       mediaControl,
       ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
       (from: string) => {
         if (from !== this.name) {
-          this.hide()
+          this.collapse()
         }
       },
     )
+    this.bindContainerEvents(mediaControl.container)
   }
 
   private onMediaControlRendered() {
     trace(`${T} onMediaControlRendered`)
+    this.mount()
+  }
+
+  private mount() {
+    trace(`${T} mount`, {
+      numItems: this.numItems,
+    })
     const mediaControl = this.core.getPlugin('media_control')
     mediaControl.mount('gear', this.$el)
   }