@gcorevideo/player 2.23.2 → 2.23.3

package/dist/index.js

@@ -43303,7 +43303,7 @@ class Player {
     }
 }
 
-var version$1 = "2.23.2";
+var version$1 = "2.23.3";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -45214,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
@@ -45266,13 +45265,12 @@ class BottomGear extends UICorePlugin {
         }
         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 });
@@ -45307,6 +45305,9 @@ 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();
     }
@@ -45325,10 +45326,12 @@ class BottomGear extends UICorePlugin {
         trace(`${T$g} toggleMenu`, { hidden: this.collapsed });
     }
     collapse() {
-        trace(`${T$g} hide`);
+        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`);
@@ -45336,11 +45339,15 @@ class BottomGear extends UICorePlugin {
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.onMediaControlRendered);
         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.collapse();
             }
         });
+        this.bindContainerEvents(mediaControl.container);
     }
     onMediaControlRendered() {
         trace(`${T$g} onMediaControlRendered`);
@@ -52173,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;
@@ -52289,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/lib/plugins/bottom-gear/BottomGear.d.ts

@@ -138,7 +138,6 @@ export declare class BottomGear extends UICorePlugin {
      * ```
      */
     addItem(name: string, $subMenu?: ZeptoResult): ZeptoResult;
-    private onActiveContainerChanged;
     private bindContainerEvents;
     private highDefinitionUpdate;
     /**
@@ -151,6 +150,7 @@ 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 collapseSubmenus;
     private toggleMenu;
     private collapse;
     private onCoreReady;

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,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;IASnB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IA6B1D,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAsBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,WAAW;IAqBnB,OAAO,CAAC,sBAAsB;IAK9B,OAAO,CAAC,KAAK;CAOd"}
+{"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

@@ -134,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
@@ -186,13 +185,12 @@ export class BottomGear extends UICorePlugin {
         }
         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 });
@@ -227,6 +225,9 @@ 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();
     }
@@ -245,10 +246,12 @@ export class BottomGear extends UICorePlugin {
         trace(`${T} toggleMenu`, { hidden: this.collapsed });
     }
     collapse() {
-        trace(`${T} hide`);
+        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`);
@@ -256,11 +259,15 @@ export class BottomGear extends UICorePlugin {
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.onMediaControlRendered);
         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.collapse();
             }
         });
+        this.bindContainerEvents(mediaControl.container);
     }
     onMediaControlRendered() {
         trace(`${T} onMediaControlRendered`);

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.2",
+  "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'
 
@@ -150,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,
-    )
   }
 
   /**
@@ -208,18 +203,16 @@ export class BottomGear extends UICorePlugin {
     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) {
@@ -259,6 +252,10 @@ 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()
   }
@@ -278,10 +275,12 @@ export class BottomGear extends UICorePlugin {
   }
 
   private collapse() {
-    trace(`${T} hide`)
+    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() {
@@ -294,6 +293,9 @@ export class BottomGear extends UICorePlugin {
       this.onMediaControlRendered,
     )
     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,
@@ -303,6 +305,7 @@ export class BottomGear extends UICorePlugin {
         }
       },
     )
+    this.bindContainerEvents(mediaControl.container)
   }
 
   private onMediaControlRendered() {

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

@@ -2,7 +2,7 @@ import { MockedFunction, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { BottomGear, GearEvents } from '../BottomGear'
 import { createMockCore, createMockMediaControl } from '../../../testUtils'
-import { Events } from '@clappr/core'
+import { $, Events } from '@clappr/core'
 import { ExtendedEvents } from '../../media-control/MediaControl'
 
 // import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
@@ -17,19 +17,18 @@ describe('BottomGear', () => {
   let onGearRendered: MockedFunction<() => void>
   beforeEach(() => {
     core = createMockCore()
-      mediaControl = createMockMediaControl(core)
-      core.getPlugin = vi
-        .fn()
-        .mockImplementation((name) =>
-          name === 'media_control' ? mediaControl : null,
-        )
+    mediaControl = createMockMediaControl(core)
+    core.getPlugin = vi
+      .fn()
+      .mockImplementation((name) =>
+        name === 'media_control' ? mediaControl : null,
+      )
   })
   describe('basically', () => {
     beforeEach(() => {
       bottomGear = new BottomGear(core)
       onGearRendered = vi.fn()
       bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
-      bottomGear.render()
       core.emit(Events.CORE_READY)
       bottomGear.addItem('test', null).html('<button>test</button>')
     })
@@ -92,9 +91,9 @@ describe('BottomGear', () => {
         bottomGear.$el.find('#gear-button').click()
       })
       it('should collapse the gear menu', () => {
-        expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
-          'none',
-        )
+        expect(
+          bottomGear.$el.find('#gear-options-wrapper').css('display'),
+        ).toBe('none')
         expect(bottomGear.$el.find('#gear-button').attr('aria-expanded')).toBe(
           'false',
         )
@@ -104,9 +103,6 @@ describe('BottomGear', () => {
   describe('when there are no items', () => {
     beforeEach(() => {
       bottomGear = new BottomGear(core)
-      onGearRendered = vi.fn()
-      bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
-      bottomGear.render()
       core.emit(Events.CORE_READY)
     })
     it('should render hidden', () => {
@@ -117,4 +113,45 @@ describe('BottomGear', () => {
       expect(bottomGear.$el.css('display')).not.toBe('none')
     })
   })
+  describe('when container is clicked', () => {
+    beforeEach(async () => {
+      bottomGear = new BottomGear(core)
+      core.emit(Events.CORE_READY)
+      bottomGear
+        .addItem('test', $('<ul id="test-options"><li>Item</li></ul>'))
+        .html('<button id="test-button">test</button>')
+      bottomGear.$el.find('#gear-button').click()
+    })
+    describe('basically', () => {
+      beforeEach(async () => {
+        mediaControl.container.trigger(Events.CONTAINER_CLICK)
+        await new Promise((resolve) => setTimeout(resolve, 0))
+      })
+      it('should collapse the gear menu', () => {
+        expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
+          'none',
+        )
+        expect(bottomGear.$el.find('#gear-button').attr('aria-expanded')).toBe(
+          'false',
+        )
+        expect(bottomGear.$el.find('#test-options').css('display')).toBe('none')
+      })
+    })
+    describe('when submenu is open', () => {
+      beforeEach(async () => {
+        // bottomGear.$el.find('#test-submenu').click()
+        bottomGear.$el.find('#test-options').show(); // as if it was clicked
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        mediaControl.container.trigger(Events.CONTAINER_CLICK)
+      })
+      it('should collapse it as well', () => {
+        expect(bottomGear.$el.find('#test-options').css('display')).toBe(
+          'none',
+        )
+        expect(bottomGear.$el.find('#gear-options').css('display')).not.toBe(
+          'none',
+        )
+      })
+    })
+  })
 })

package/src/plugins/thumbnails/Thumbnails.ts

@@ -261,11 +261,9 @@ export class Thumbnails extends UICorePlugin {
   }
 
   private onMouseMoveSeekbar(_: MouseEvent, pos: number) {
-    if (Math.abs(pos - this.hoverPosition) >= 0.01) {
-      this.hoverPosition = pos
-      this.showing = true
-      this.update()
-    }
+    this.hoverPosition = pos
+    this.showing = true
+    this.update()
   }
 
   private onMouseLeave() {
@@ -415,7 +413,6 @@ export class Thumbnails extends UICorePlugin {
     const thumbIndex = this.getThumbIndexForTime(hoverTime)
     const thumb = this.thumbs[thumbIndex]
 
-    // update thumbnail
     const $spotlight = this.$el.find('#thumbnails-spotlight')
 
     this.buildThumbImage(

package/src/plugins/thumbnails/__tests__/Thumbnails.test.ts

@@ -8,7 +8,7 @@ import { createMockCore, createMockMediaControl } from '../../../testUtils'
 import { Thumbnails } from '../Thumbnails'
 import { loadImageDimensions } from '../utils'
 
-import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
+// import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
 
 // Logger.enable('*')
 // setTracer(new LogTracer('Thumbnails.test'))
@@ -30,11 +30,11 @@ describe('Thumbnails', () => {
         vtt: `
 1
 00:00:00.000 --> 00:00:01.000
-sprite.png#xywh=100,100,100,100
+sprite.png#xywh=0,0,100,100
 
 2
 00:00:01.000 --> 00:00:02.000
-sprite.png#xywh=200,200,100,100
+sprite.png#xywh=100,0,100,100
 `,
       },
     })
@@ -69,4 +69,21 @@ sprite.png#xywh=200,200,100,100
       expect(thumbnails.$el.hasClass('hidden')).toBe(true)
     })
   })
+  describe('update', () => {
+    describe('when mouse pointer is over the scrubber', () => {
+      beforeEach(async () => {
+        core.emit(Events.CORE_READY)
+        await new Promise(resolve => setTimeout(resolve, 1))
+        mediaControl.container.getDuration.mockReturnValue(5)
+        vi.spyOn(thumbnails.$el, 'width').mockReturnValue(300)
+        mediaControl.trigger(Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, {}, 0.5)
+      })
+      it('should show thumbnails', () => {
+        expect(thumbnails.$el.hasClass('hidden')).toBe(false)
+      })
+      it('should show the matching spotlight thumbnail', () => {
+        expect(thumbnails.$el.find('#thumbnails-spotlight .thumbnail-container').css('background-position')).toBe('-100px 0px')
+      })
+    })
+  })
 })

package/src/plugins/thumbnails/__tests__/__snapshots__/Thumbnails.test.ts.snap

@@ -3,7 +3,7 @@
 exports[`Thumbnails > loading > should render 1`] = `
 "<div class="thumbnails-text" id="thumbnails-text"></div>
 <div class="backdrop" id="thumbnails-backdrop" style="height: 100px;">
-    <div class="carousel" id="thumbnails-carousel"><div class="thumbnail-container" style="width: 100px; height: 100px; background-image: url(&quot;https://example.com/sprite.png&quot;); background-size: 600px 900px; background-position: -100px -100px;"></div><div class="thumbnail-container" style="width: 100px; height: 100px; background-image: url(&quot;https://example.com/sprite.png&quot;); background-size: 600px 900px; background-position: -200px -200px;"></div></div>
+    <div class="carousel" id="thumbnails-carousel"><div class="thumbnail-container" style="width: 100px; height: 100px; background-image: url(&quot;https://example.com/sprite.png&quot;); background-size: 600px 900px; background-position: 0px 0px;"></div><div class="thumbnail-container" style="width: 100px; height: 100px; background-image: url(&quot;https://example.com/sprite.png&quot;); background-size: 600px 900px; background-position: -100px 0px;"></div></div>
 </div>
 <div class="spotlight" id="thumbnails-spotlight" style="height: 100px;"></div>
 "

package/src/testUtils.ts

@@ -98,6 +98,7 @@ export function createMockContainer(
     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),
@@ -121,6 +122,8 @@ export function createMockMediaControl(core: any) {
   // @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)