@gcorevideo/player 2.23.0 → 2.23.2

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
      */
@@ -149,9 +151,10 @@ 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 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,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"}

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',
         };
     }
     /**
@@ -178,6 +180,10 @@ export class BottomGear extends UICorePlugin {
                 this.$el.find('#gear-options').hide();
             });
         }
+        this.numItems++;
+        if (this.numItems > 0) {
+            this.$el.show();
+        }
         return $item;
     }
     onActiveContainerChanged() {
@@ -191,7 +197,7 @@ export class BottomGear extends UICorePlugin {
     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 +209,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);
@@ -222,30 +230,46 @@ export class BottomGear extends UICorePlugin {
         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() {
+    collapse() {
         trace(`${T} hide`);
+        this.collapsed = true;
         this.$el.find('#gear-options-wrapper').hide();
+        this.$el.find('#gear-button').attr('aria-expanded', 'false');
     }
     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, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
             if (from !== this.name) {
-                this.hide();
+                this.collapse();
             }
         });
     }
     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;IAQb,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,cAAc;IAuEtB,OAAO,CAAC,oBAAoB;IA+C5B,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;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"}

package/lib/plugins/thumbnails/Thumbnails.js

@@ -169,16 +169,16 @@ export class Thumbnails extends UICorePlugin {
         this.update();
     }
     mount() {
-        // insert after the background TODO figure out why
         const mediaControl = this.core.getPlugin('media_control');
-        mediaControl.$el.find('.seek-time').css('bottom', 56); // TODO check
-        // TODO use mediaControl.mount? into the `layer`
-        mediaControl.$el.append(this.$el);
+        mediaControl.$el.find('.seek-time').css('bottom', 56); // TODO check the offset
+        mediaControl.$el.first().after(this.$el);
     }
     onMouseMoveSeekbar(_, pos) {
-        this.hoverPosition = pos;
-        this.showing = true;
-        this.update();
+        if (Math.abs(pos - this.hoverPosition) >= 0.01) {
+            this.hoverPosition = pos;
+            this.showing = true;
+            this.update();
+        }
     }
     onMouseLeave() {
         this.showing = false;
@@ -186,9 +186,9 @@ export class Thumbnails extends UICorePlugin {
     }
     // builds a dom element which represents the thumbnail
     // scaled to the given height
-    buildThumbImage(thumb, height) {
+    buildThumbImage(thumb, height, $ref) {
         const scaleFactor = height / thumb.h;
-        const $container = $('<div />').addClass('thumbnail-container');
+        const $container = $ref && $ref.length ? $ref : $('<div />').addClass('thumbnail-container');
         $container.css('width', thumb.w * scaleFactor);
         $container.css('height', height);
         $container.css({
@@ -292,8 +292,7 @@ export class Thumbnails extends UICorePlugin {
         const thumb = this.thumbs[thumbIndex];
         // update thumbnail
         const $spotlight = this.$el.find('#thumbnails-spotlight');
-        $spotlight.empty();
-        $spotlight.append(this.buildThumbImage(thumb, this.spotlightHeight));
+        this.buildThumbImage(thumb, this.spotlightHeight, $spotlight.find('.thumbnail-container')).appendTo($spotlight);
         const elWidth = this.$el.width();
         const thumbWidth = $spotlight.width();
         const thumbHeight = $spotlight.height();

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,gBAc/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;;;;;;;;;;;;;;;;;;;;;;;EA4BrC;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAe/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/lib/testUtils.js

@@ -109,6 +109,7 @@ export function createMockMediaControl(core) {
     // @ts-ignore
     mediaControl.toggleElement = vi.fn();
     vi.spyOn(mediaControl, 'trigger');
+    core.$el.append(mediaControl.$el);
     return mediaControl;
 }
 export function createMockBottomGear(core) {

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.23.0",
+  "version": "2.23.2",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",
   "typings": "lib/index.d.ts",
-  "keywords": ["player", "video streaming"],
+  "keywords": [
+    "player",
+    "video streaming"
+  ],
   "scripts": {
     "build": "npm run build:ts && npm run build:bundle",
     "build:1": "npm run build:ts && npm run build:bundle && date",

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

@@ -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',
     }
   }
 
@@ -197,6 +201,10 @@ export class BottomGear extends UICorePlugin {
         this.$el.find('#gear-options').hide()
       })
     }
+    this.numItems++;
+    if (this.numItems > 0) {
+      this.$el.show()
+    }
     return $item
   }
 
@@ -217,7 +225,7 @@ export class BottomGear extends UICorePlugin {
   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 +238,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)
@@ -254,16 +263,25 @@ export class BottomGear extends UICorePlugin {
     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() {
+  private collapse() {
     trace(`${T} hide`)
+    this.collapsed = true;
     this.$el.find('#gear-options-wrapper').hide()
+    this.$el.find('#gear-button').attr('aria-expanded', 'false')
   }
 
   private onCoreReady() {
@@ -275,13 +293,13 @@ 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,
       ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
       (from: string) => {
         if (from !== this.name) {
-          this.hide()
+          this.collapse()
         }
       },
     )
@@ -289,6 +307,13 @@ export class BottomGear extends UICorePlugin {
 
   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)
   }

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

@@ -5,6 +5,11 @@ import { createMockCore, createMockMediaControl } from '../../../testUtils'
 import { Events } from '@clappr/core'
 import { ExtendedEvents } from '../../media-control/MediaControl'
 
+// import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
+
+// Logger.enable('*')
+// setTracer(new LogTracer('BottomGear.test'))
+
 describe('BottomGear', () => {
   let mediaControl: any
   let core: any
@@ -12,72 +17,104 @@ describe('BottomGear', () => {
   let onGearRendered: MockedFunction<() => void>
   beforeEach(() => {
     core = createMockCore()
-    mediaControl = createMockMediaControl(core)
-    core.getPlugin = vi
-      .fn()
-      .mockImplementation((name) =>
-        name === 'media_control' ? mediaControl : null,
-      )
-    bottomGear = new BottomGear(core)
-    onGearRendered = vi.fn()
-    bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
-    bottomGear.render()
-    core.emit(Events.CORE_READY)
-  })
-  it('should render', () => {
-    expect(bottomGear.el.innerHTML).toMatchSnapshot()
-  })
-  it('should emit event in the next cycle', async () => {
-    expect(onGearRendered).not.toHaveBeenCalled()
-    await new Promise((resolve) => setTimeout(resolve, 0))
-    expect(onGearRendered).toHaveBeenCalled()
-  })
-  it('should render the gear menu hidden', () => {
-    expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
-      'none',
-    )
+      mediaControl = createMockMediaControl(core)
+      core.getPlugin = vi
+        .fn()
+        .mockImplementation((name) =>
+          name === 'media_control' ? mediaControl : null,
+        )
   })
-  describe('until media control is rendered', () => {
-    it('should not attach to media control', () => {
-      expect(mediaControl.mount).not.toHaveBeenCalledWith(
-        'gear',
-        expect.anything(),
-      )
-    })
-  })
-  describe('when media control is rendered', () => {
+  describe('basically', () => {
     beforeEach(() => {
-      mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+      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>')
     })
-    it('should attach to media control', () => {
-      expect(mediaControl.mount).toHaveBeenCalledWith('gear', bottomGear.$el)
+    it('should render', () => {
+      expect(bottomGear.el.innerHTML).toMatchSnapshot()
     })
-  })
-  describe('when clicked', () => {
-    beforeEach(() => {
-      bottomGear.$el.find('#gear-button').click()
+    it('should render the gear menu hidden', () => {
+      expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
+        'none',
+      )
     })
-    it('should open the gear menu', () => {
-      expect(
-        bottomGear.$el.find('#gear-options-wrapper').css('display'),
-      ).not.toBe('none')
+    it('should emit event in the next render cycle', async () => {
+      expect(onGearRendered).not.toHaveBeenCalled()
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      expect(onGearRendered).toHaveBeenCalled()
     })
-    it('should trigger media control menu collapse', () => {
-      expect(mediaControl.trigger).toHaveBeenCalledWith(
-        ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
-        'bottom_gear',
+    it('should render the gear menu hidden', () => {
+      expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
+        'none',
       )
     })
+    describe('until media control is rendered', () => {
+      it('should not attach to media control', () => {
+        expect(mediaControl.mount).not.toHaveBeenCalledWith(
+          'gear',
+          expect.anything(),
+        )
+      })
+    })
+    describe('when media control is rendered', () => {
+      beforeEach(() => {
+        mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+      })
+      it('should attach to media control', () => {
+        expect(mediaControl.mount).toHaveBeenCalledWith('gear', bottomGear.$el)
+      })
+    })
+    describe('when clicked', () => {
+      beforeEach(() => {
+        bottomGear.$el.find('#gear-button').click()
+      })
+      it('should open the gear menu', () => {
+        expect(
+          bottomGear.$el.find('#gear-options-wrapper').css('display'),
+        ).not.toBe('none')
+        expect(bottomGear.$el.find('#gear-button').attr('aria-expanded')).toBe(
+          'true',
+        )
+      })
+      it('should trigger media control menu collapse', () => {
+        expect(mediaControl.trigger).toHaveBeenCalledWith(
+          ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
+          'bottom_gear',
+        )
+      })
+    })
+    describe('when clicked twice', () => {
+      beforeEach(() => {
+        bottomGear.$el.find('#gear-button').click()
+        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-button').attr('aria-expanded')).toBe(
+          'false',
+        )
+      })
+    })
   })
-  describe('when clicked twice', () => {
+  describe('when there are no items', () => {
     beforeEach(() => {
-      bottomGear.$el.find('#gear-button').click()
-      bottomGear.$el.find('#gear-button').click()
+      bottomGear = new BottomGear(core)
+      onGearRendered = vi.fn()
+      bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
+      bottomGear.render()
+      core.emit(Events.CORE_READY)
     })
-    it('should collapse the gear menu', () => {
-      expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
-        'none',
-      )
+    it('should render hidden', () => {
+      expect(bottomGear.$el.css('display')).toBe('none')
+    })
+    it('should show button after item is added', () => {
+      bottomGear.addItem('test', null).html('<button>test</button>')
+      expect(bottomGear.$el.css('display')).not.toBe('none')
     })
   })
 })

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

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`BottomGear > should render 1`] = `
-"<button class="media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" id="gear-button">
+exports[`BottomGear > basically > should render 1`] = `
+"<button class="media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" id="gear-button" aria-expanded="false" aria-controls="gear-options">
     /assets/icons/new/gear.svg
 </button>
-<div class="gear-wrapper gcore-skin-bg-color" id="gear-options-wrapper" style="display:none">
-    <ul class="gear-options-list" id="gear-options" role="menu"></ul>
+<div class="gear-wrapper gcore-skin-bg-color" id="gear-options-wrapper" style="display: none;">
+    <ul class="gear-options-list" id="gear-options" role="menu"><li data-test=""><button>test</button></li></ul>
 </div>
 "
 `;

package/src/plugins/thumbnails/Thumbnails.ts

@@ -255,17 +255,17 @@ export class Thumbnails extends UICorePlugin {
   }
 
   private mount() {
-    // insert after the background TODO figure out why
     const mediaControl = this.core.getPlugin('media_control') as MediaControl
-    mediaControl.$el.find('.seek-time').css('bottom', 56) // TODO check
-    // TODO use mediaControl.mount? into the `layer`
-    mediaControl.$el.append(this.$el)
+    mediaControl.$el.find('.seek-time').css('bottom', 56) // TODO check the offset
+    mediaControl.$el.first().after(this.$el);
   }
 
   private onMouseMoveSeekbar(_: MouseEvent, pos: number) {
-    this.hoverPosition = pos
-    this.showing = true
-    this.update()
+    if (Math.abs(pos - this.hoverPosition) >= 0.01) {
+      this.hoverPosition = pos
+      this.showing = true
+      this.update()
+    }
   }
 
   private onMouseLeave() {
@@ -275,9 +275,13 @@ export class Thumbnails extends UICorePlugin {
 
   // builds a dom element which represents the thumbnail
   // scaled to the given height
-  private buildThumbImage(thumb: ThumbnailDesc, height: number) {
+  private buildThumbImage(
+    thumb: ThumbnailDesc,
+    height: number,
+    $ref?: ZeptoResult,
+  ) {
     const scaleFactor = height / thumb.h
-    const $container = $('<div />').addClass('thumbnail-container')
+    const $container = $ref && $ref.length ? $ref : $('<div />').addClass('thumbnail-container')
 
     $container.css('width', thumb.w * scaleFactor)
     $container.css('height', height)
@@ -414,8 +418,11 @@ export class Thumbnails extends UICorePlugin {
     // update thumbnail
     const $spotlight = this.$el.find('#thumbnails-spotlight')
 
-    $spotlight.empty()
-    $spotlight.append(this.buildThumbImage(thumb, this.spotlightHeight))
+    this.buildThumbImage(
+      thumb,
+      this.spotlightHeight,
+      $spotlight.find('.thumbnail-container'),
+    ).appendTo($spotlight)
 
     const elWidth = this.$el.width()
     const thumbWidth = $spotlight.width()

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

@@ -55,14 +55,14 @@ sprite.png#xywh=200,200,100,100
     it('should render', () => {
       expect(thumbnails.$el.html()).toMatchSnapshot()
     })
-    it('should mount to media controls', () => {
-      expect(mediaControl.$el.find('.scrub-thumbnails')).toHaveLength(1)
+    it('should mount along with media controls', () => {
+      expect(core.$el.find('.scrub-thumbnails')).toHaveLength(1)
     })
     it('should load image dimensions', () => {
       expect(loadImageDimensions).toHaveBeenCalledWith('https://example.com/sprite.png')
     })
     it('should parse sprite sheet and create thumbnails', () => {
-      const thumbs = mediaControl.$el.find('#thumbnails-carousel .thumbnail-container')
+      const thumbs = thumbnails.$el.find('#thumbnails-carousel .thumbnail-container')
       expect(thumbs).toHaveLength(2)
     })
     it('should hide', () => {

package/src/testUtils.ts

@@ -123,6 +123,7 @@ export function createMockMediaControl(core: any) {
   // @ts-ignore
   mediaControl.toggleElement = vi.fn()
   vi.spyOn(mediaControl, 'trigger')
+  core.$el.append(mediaControl.$el)
   return mediaControl
 }