@gcorevideo/player 2.22.0 → 2.22.2

package/lib/plugins/subtitles/ClosedCaptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClosedCaptions.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/ClosedCaptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,sCAAsC,CAAA;AAe7C,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,4BAA4B,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAC9C,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,KAAK,CAA2B;IAExC;;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,CAAyB;IAEzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED;;OAEG;IACM,UAAU;IAUnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,kBAAkB;IAwC1B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,iBAAiB;IA+BzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAqBpB;;OAEG;IACH,IAAI;IAWJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IA0Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,UAAU;CAKnB"}
+{"version":3,"file":"ClosedCaptions.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/ClosedCaptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,sCAAsC,CAAA;AAe7C;;;GAGG;AACH,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAC9C,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,SAAS,CAAQ;IAEzB,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,KAAK,CAA2B;IAExC;;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,CAAyB;IAEzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED;;OAEG;IACM,UAAU;IAUnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,kBAAkB;IAwC1B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,iBAAiB;IA+BzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAqBpB;;OAEG;IACH,IAAI;IAWJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IA0Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAgBjC,OAAO,CAAC,UAAU;CAKnB"}

package/lib/plugins/subtitles/ClosedCaptions.js

@@ -16,7 +16,7 @@ const T = 'plugins.cc';
  * @beta
  *
  * @remarks
- * The plugin is activated when closed captions tracks are provided with the media source.
+ * The plugin is activated when closed captions tracks are detected in the media source.
  * It shows a familiar "CC" button with a dropdown menu to select the subtitles language.
  *
  * Depends on:
@@ -33,7 +33,7 @@ const T = 'plugins.cc';
  * new Player({
  *   ...
  *   cc: {
- *     language: 'en',
+ *     language: 'pt-BR',
  *   },
  * })
  * ```
@@ -248,7 +248,7 @@ export class ClosedCaptions extends UICorePlugin {
         this.$line = $(ClosedCaptions.templateString());
         this.resizeFont();
         this.core.activeContainer.$el.append(this.$line);
-        mediaControl.putElement('cc', this.el);
+        mediaControl.putElement('cc', this.$el);
         this.updateSelection();
         this.renderIcon();
         return this;

package/lib/testUtils.d.ts

@@ -108,4 +108,5 @@ export declare function createMockContainer(playback?: any): Events<string | sym
     trigger: <T extends string | symbol>(event: T, ...args: any[]) => boolean;
 };
 export declare function createMockMediaControl(core: any): UICorePlugin;
+export declare function createMockBottomGear(core: any): any;
 //# sourceMappingURL=testUtils.d.ts.map

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAA2B;;;;;;;;;;;;;;;;EAqBvC;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiC/C;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;EAiBvE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAiB/C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAA2B;;;;;;;;;;;;;;;;EAqBvC;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiC/C;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;EAiBvE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAiB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAY7C"}

package/lib/testUtils.js

@@ -161,3 +161,16 @@ export function createMockMediaControl(core) {
     mediaControl.toggleElement = vi.fn();
     return mediaControl;
 }
+export function createMockBottomGear(core) {
+    const plugin = new UICorePlugin(core);
+    plugin.getItem = vi.fn();
+    plugin.addItem = vi.fn().mockImplementation((name, $el) => {
+        const existing = plugin.$el.find(`[data-${name}]`);
+        if (existing.length) {
+            return existing;
+        }
+        return $('<li></li>').attr(`data-${name}`, '').append($el).appendTo(plugin.$el);
+    });
+    plugin.refresh = vi.fn();
+    return plugin;
+}

package/package.json

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

package/src/internal.types.ts

@@ -143,3 +143,9 @@ export type CoreOptions = {
   watermarkLink?: string
   width?: number
 }
+
+export interface TextTrackItem {
+  id: number
+  name: string
+  track: TextTrack
+}

package/src/playback/dash-playback/DashPlayback.ts

@@ -662,7 +662,6 @@ export default class DashPlayback extends BasePlayback {
   get audioTracks(): AudioTrack[] {
     assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized')
     const tracks = this._dash.getTracksFor('audio')
-    trace(`${T} get audioTracks`, { tracks })
     return tracks.map(toClapprTrack)
   }
 

package/src/playback.types.ts

@@ -131,8 +131,3 @@ export interface PlaybackError {
   }
 }
 
-export interface TextTrackItem {
-  id: number
-  name: string
-  track: TextTrack
-}

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

@@ -1,66 +1,123 @@
-import { UICorePlugin, template, Events as ClapprEvents } from '@clappr/core';
-import { trace } from '@gcorevideo/utils';
-import assert from 'assert';
+import { UICorePlugin, template, Events as ClapprEvents, $ } from '@clappr/core'
+import { trace } from '@gcorevideo/utils'
+import assert from 'assert'
 
-import { CLAPPR_VERSION } from '../../build.js';
+import { CLAPPR_VERSION } from '../../build.js'
 
-import pluginHtml from '../../../assets/bottom-gear/bottomgear.ejs';
-import '../../../assets/bottom-gear/gear.scss';
-import '../../../assets/bottom-gear/gear-sub-menu.scss';
-import gearIcon from '../../../assets/icons/new/gear.svg';
-import gearHdIcon from '../../../assets/icons/new/gear-hd.svg';
-import { ZeptoResult } from '../../types.js';
-import { MediaControlEvents } from '../media-control/MediaControl';
+import pluginHtml from '../../../assets/bottom-gear/bottomgear.ejs'
+import '../../../assets/bottom-gear/gear.scss'
+import '../../../assets/bottom-gear/gear-sub-menu.scss'
+import gearIcon from '../../../assets/icons/new/gear.svg'
+import gearHdIcon from '../../../assets/icons/new/gear-hd.svg'
+import { ZeptoResult } from '../../types.js'
 
-const VERSION = '2.19.12';
+const VERSION = '2.19.12'
 
-const T = 'plugins.bottom_gear';
+const T = 'plugins.bottom_gear'
 
 /**
- * An element inside the gear menu
+ * Events triggered by the plugin
  * @beta
  */
-export type GearOptionsItem = 'quality' | 'rate' | 'nerd';
-
-/**
- * @deprecated Use {@link GearOptionsItem} instead
- */
-export type GearItemElement = GearOptionsItem;
+export enum GearEvents {
+  /**
+   * Use this event to accurately attach an item to the gear menu
+   */
+  RENDERED = 'rendered',
+}
 
 // TODO disabled if no items added
 
 /**
- * `PLUGIN` that adds the gear button with an extra options menu on the right side of the {@link MediaControl | media control} UI
+ * `PLUGIN` that adds a button to extend the media controls UI with extra options.
  * @beta
  * @remarks
- * The plugins provides a base for attaching custom settings UI in the gear menu
- * 
+ * The plugin renders small gear icon to the right of the media controls.
+ * It provides a base for attaching custom settings UI in the gear menu
+ *
  * Depends on:
  *
  * - {@link MediaControl}
+ *
+ * @example
+ * You can use bottom gear to add custom settings UI to the gear menu.
+ *
+ * ```ts
+ * import { BottomGear } from '@gcorevideo/player/plugins/bottom-gear';
+ *
+ * class CustomOptionsPlugin extends UICorePlugin {
+ *   // ...
+ *
+ *   override get events() {
+ *     return {
+ *       'click #my-button': 'doMyAction',
+ *     }
+ *   }
+ *
+ *   private doMyAction() {
+ *     // ...
+ *   }
+ *
+ *   override render() {
+ *     const bottomGear = this.core.getPlugin('bottom_gear');
+ *     if (!bottomGear) {
+ *       return this;
+ *     }
+ *     this.$el.html('<button class="custom-option">Custom option</button>');
+ *     // Put rendered element into the gear menu
+ *     bottomGear.addItem('custom').html(this.$el)
+ *     return this;
+ *   }
+ *
+ *   // alternatively, add an option with a submenu
+ *   override render() {
+ *     this.$el.html(template(templateHtml)({
+ *       // ...
+ *     })));
+ *     return this;
+ *   }
+ *
+ *   private addGearOption() {
+ *     this.core.getPlugin('bottom_gear')
+ *       .addItem('custom', this.$el)
+ *       .html($('<button class="custom-option">Custom option</button>'))
+ *   }
+ *
+ *   override bindEvents() {
+ *     this.listenToOnce(this.core, ClapprEvents.CORE_READY, () => {
+ *       const bottomGear = this.core.getPlugin('bottom_gear');
+ *       assert(bottomGear, 'bottom_gear plugin is required');
+ *       // simple case
+ *       this.listenTo(bottomGear, GearEvents.RENDERED, this.render);
+ *       // or with a submenu
+ *       this.listenTo(bottomGear, GearEvents.RENDERED, this.addGearOption);
+ *      });
+ *   }
+ * }
+ * ```
  */
 export class BottomGear extends UICorePlugin {
-  private isHd = false;
+  private isHd = false
 
   /**
    * @internal
    */
   get name() {
-    return 'bottom_gear';
+    return 'bottom_gear'
   }
 
   /**
    * @internal
    */
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
   /**
    * @internal
    */
   static get version() {
-    return VERSION;
+    return VERSION
   }
 
   private static readonly template = template(pluginHtml)
@@ -70,8 +127,8 @@ export class BottomGear extends UICorePlugin {
    */
   override get attributes() {
     return {
-      'class': 'media-control-gear',
-    };
+      class: 'media-control-gear',
+    }
   }
 
   /**
@@ -79,94 +136,146 @@ export class BottomGear extends UICorePlugin {
    */
   override get events() {
     return {
-      'click .button-gear': 'toggleGearMenu',
-    };
+      'click #gear-button': 'toggleGearMenu',
+    }
   }
 
   /**
    * @internal
    */
   override bindEvents() {
-    this.listenTo(this.core, ClapprEvents.CORE_READY, this.onCoreReady)
-    this.listenTo(this.core, ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
-  }
-
-  /**
-   * @param name - Name of a gear menu placeholder item to attach custom UI
-   * @returns Zepto result of the element
-   */
-  getElement(name: GearOptionsItem): ZeptoResult | null {
-    return this.$el.find(`.gear-options-list [data-${name}]`);
+    this.listenToOnce(this.core, ClapprEvents.CORE_READY, this.onCoreReady)
+    this.listenTo(
+      this.core,
+      ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.onActiveContainerChanged,
+    )
   }
 
-  // TODO implement putElement/addElement method
-
   /**
-   * Replaces the content of the gear menu
-   * @param content - Zepto result of the element
+   * Adds a custom option to the gear menu
+   * @param name - A unique name of the option
+   * @param $subMenu - The submenu to attach to the option
+   * @returns The added item placeholder to attach custom markup
+   * @remarks
+   * When called with $submenu param, a click on the added item will toggle the submenu visibility.
+   *
+   * When added without submenu, it's responsibility of the caller to handle the click event however needed.
+   * @example
+   * ```ts
+   * class MyPlugin extends UICorePlugin {
+   *   override render() {
+   *     this.$el.html('<div class="my-awesome-settings">...</div>')
+   *     this.core.getPlugin('bottom_gear')
+   *       ?.addItem('custom', this.$el)
+   *       .html($('<button>Custom settings</button>'))
+   *     return this
+   *   }
+   * }
+   * ```
    */
-  setContent(content: ZeptoResult) {
-    this.$el.find('.gear-wrapper').html(content);
+  addItem(name: string, $subMenu?: ZeptoResult): ZeptoResult {
+    const $existingItem = this.$el.find(`#gear-options li[data-${name}`)
+    if ($existingItem.length) {
+      trace(`${T} addItem already exists`, { name })
+      return $existingItem
+    }
+    const $item = $('<li></li>')
+      .attr(`data-${name}`, '')
+      .appendTo(this.$el.find('#gear-options'))
+    if ($subMenu) {
+      trace(`${T} addItem adding submenu`, { name })
+      $subMenu
+        .addClass('gear-sub-menu-wrapper')
+        .hide()
+        .appendTo(this.$el.find('#gear-options-wrapper'))
+      $item.on('click', (e: MouseEvent) => {
+        trace(`${T} addItem submenu clicked`, { name })
+        e.stopPropagation()
+        $subMenu.show()
+        this.$el.find('#gear-options').hide()
+      })
+    }
+    return $item
   }
 
   private onActiveContainerChanged() {
-    trace(`${T} onActiveContainerChanged`);
-    this.bindContainerEvents();
+    trace(`${T} onActiveContainerChanged`)
+    this.bindContainerEvents()
   }
 
   private bindContainerEvents() {
-    trace(`${T} bindContainerEvents`);
-    this.listenTo(this.core.activeContainer, ClapprEvents.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
+    trace(`${T} bindContainerEvents`)
+    this.listenTo(
+      this.core.activeContainer,
+      ClapprEvents.CONTAINER_HIGHDEFINITIONUPDATE,
+      this.highDefinitionUpdate,
+    )
   }
 
   private highDefinitionUpdate(isHd: boolean) {
-    trace(`${T} highDefinitionUpdate`, { isHd });
-    this.isHd = isHd;
-    this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon);
+    trace(`${T} highDefinitionUpdate`, { isHd })
+    this.isHd = isHd
+    this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon)
   }
 
   /**
    * @internal
    */
   override render() {
-    const mediaControl = this.core.getPlugin('media_control');
+    trace(`${T} render`)
+    const mediaControl = this.core.getPlugin('media_control')
+    if (!mediaControl) {
+      return this // TODO test
+    }
+    const icon = this.isHd ? gearHdIcon : gearIcon
+    this.$el
+      .html(BottomGear.template({ icon }))
+      .find('#gear-sub-menu-wrapper')
+      .hide()
 
-    // TODO use options.mediaControl.gear.items
-    const items: GearOptionsItem[] = [
-      'quality',
-      'rate',
-      'nerd',
-    ];
-    const icon = this.isHd ? gearHdIcon : gearIcon;
-    this.$el.html(BottomGear.template({ icon, items }));
+    // TODO make non-clickable when there are no items
+    mediaControl.putElement('gear', this.$el)
 
-    mediaControl.putElement('gear', this.el);
-    mediaControl.trigger(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED);
-    return this;
+    setTimeout(() => {
+      this.trigger(GearEvents.RENDERED)
+    }, 0)
+
+    return this
   }
 
   /**
-   * Re-renders the gear menu.
-   * It fires the {@link MediaControlEvents.MEDIACONTROL_GEAR_RENDERED | MEDIACONTROL_GEAR_RENDERED} event,
-   * which the plugins that attach to the gear menu can listen to to re-render themselves.
+   * Collapses any submenu open back to the gear menu.
+   * @remarks
+   * 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.render();
-    this.$el.find('.gear-wrapper').show();
+    this.$el.find('.gear-sub-menu-wrapper').hide()
+    this.$el.find('#gear-options').show()
   }
 
   private toggleGearMenu() {
-    this.$el.find('.gear-wrapper').toggle();
+    this.$el.find('#gear-options-wrapper').toggle()
   }
 
   private hide() {
-    this.$el.find('.gear-wrapper').hide();
+    this.$el.find('#gear-options-wrapper').hide()
   }
 
   private onCoreReady() {
-    const mediaControl = this.core.getPlugin('media_control');
-    assert(mediaControl, 'media_control plugin is required');
-    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.render);
-    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
+    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)
+  }
+
+  private onMediaControlRendered() {
+    trace(`${T} onMediaControlRendered`)
+    this.render()
   }
 }

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

@@ -1,8 +1,7 @@
 import { MockedFunction, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { BottomGear } from '../BottomGear'
+import { BottomGear, GearEvents } from '../BottomGear'
 import { createMockCore, createMockMediaControl } from '../../../testUtils'
-import { MediaControlEvents } from '../../media-control/MediaControl'
 
 describe('BottomGear', () => {
   let mediaControl: any
@@ -19,16 +18,33 @@ describe('BottomGear', () => {
       )
     bottomGear = new BottomGear(core)
     onGearRendered = vi.fn()
-    mediaControl.on(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED, onGearRendered, null)
+    bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
     bottomGear.render()
   })
   it('should render', () => {
     expect(bottomGear.el.innerHTML).toMatchSnapshot()
   })
   it('should attach to media control', () => {
-    expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.el)
+    expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.$el)
   })
-  it('should emit event', () => {
+  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',
+    )
+  })
+  describe('when clicked', () => {
+    beforeEach(() => {
+      bottomGear.$el.find('#gear-button').click()
+    })
+    it('should toggle the gear menu', () => {
+      expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
+        'block',
+      )
+    })
+  })
 })

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

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

package/src/plugins/clappr-nerd-stats/ClapprNerdStats.ts

@@ -1,5 +1,5 @@
 import { UICorePlugin, Events, template, Core, Container } from '@clappr/core'
-import { reportError } from '@gcorevideo/utils'
+import { reportError, trace } from '@gcorevideo/utils'
 import Mousetrap from 'mousetrap'
 
 import { CLAPPR_VERSION } from '../../build.js'
@@ -24,8 +24,8 @@ import '../../../assets/clappr-nerd-stats/clappr-nerd-stats.scss'
 import pluginHtml from '../../../assets/clappr-nerd-stats/clappr-nerd-stats.ejs'
 import buttonHtml from '../../../assets/clappr-nerd-stats/button.ejs'
 import statsIcon from '../../../assets/icons/new/stats.svg'
-import { BottomGear } from '../bottom-gear/BottomGear.js'
-import { MediaControl, MediaControlEvents } from '../media-control/MediaControl.js'
+import { BottomGear, GearEvents } from '../bottom-gear/BottomGear.js'
+import { MediaControl } from '../media-control/MediaControl.js'
 import assert from 'assert'
 
 const qualityClasses = [
@@ -114,7 +114,7 @@ type Metrics = BaseMetrics & {
   }
 }
 
-// const T = 'plugins.clappr_nerd_stats';
+const T = 'plugins.clappr_nerd_stats'
 
 /**
  * `PLUGIN` that displays useful network-related statistics.
@@ -123,8 +123,6 @@ type Metrics = BaseMetrics & {
  * @remarks
  * Depends on:
  *
- * - {@link MediaControl}
- *
  * - {@link BottomGear}
  *
  * - {@link ClapprStats}
@@ -151,6 +149,8 @@ export class ClapprNerdStats extends UICorePlugin {
 
   private iconPosition: IconPosition
 
+  private static readonly buttonTemplate = template(buttonHtml)
+
   /**
    * @internal
    */
@@ -224,17 +224,15 @@ export class ClapprNerdStats extends UICorePlugin {
    * @internal
    */
   override bindEvents() {
-    const mediaControl = this.core.getPlugin('media_control') as MediaControl
-    assert(mediaControl, 'media_control plugin is required')
-    this.listenToOnce(this.core, Events.CORE_READY, this.init)
-    this.listenTo(
-      mediaControl,
-      MediaControlEvents.MEDIACONTROL_GEAR_RENDERED,
-      this.addToBottomGear,
-    )
+    this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady)
   }
 
-  private init() {
+  private onCoreReady() {
+    const bottomGear = this.core.getPlugin('bottom_gear') as BottomGear
+    assert(bottomGear, 'bottom_gear plugin is required')
+
+    this.listenTo(bottomGear, GearEvents.RENDERED, this.addToBottomGear)
+
     this.container = this.core.activeContainer
     const clapprStats = this.container?.getPlugin('clappr_stats')
 
@@ -375,6 +373,7 @@ export class ClapprNerdStats extends UICorePlugin {
    * @internal
    */
   override render() {
+    trace(`${T} render`)
     // TODO append to the container
     this.core.$el.append(this.$el[0])
     this.hide()
@@ -383,17 +382,20 @@ export class ClapprNerdStats extends UICorePlugin {
   }
 
   private addToBottomGear() {
+    trace(`${T} addToBottomGear`)
     const gear = this.core.getPlugin('bottom_gear') as BottomGear
-    const $el = gear.getElement('nerd')
-    $el.html(buttonHtml)
-    const $button = $el.find('.nerd-button')
-
-    $button.find('.stats-icon').html(statsIcon)
-
-    $button.on('click', (e: MouseEvent) => {
-      e.stopPropagation()
-      this.toggle()
-    })
+    const $button = gear
+      .addItem('nerd')
+      .html(
+        ClapprNerdStats.buttonTemplate({
+          icon: statsIcon,
+          i18n: this.core.i18n,
+        }),
+      )
+      .on('click', (e: MouseEvent) => {
+        e.stopPropagation()
+        this.toggle()
+      })
   }
 
   private clearCustomMetrics() {

package/src/plugins/click-to-pause/ClickToPause.ts

@@ -1,4 +1,5 @@
-//Copyright 2014 Globo.com Player authors. All rights reserved.
+// This work is based on the original work of the following authors:
+// Copyright 2014 Globo.com Player authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE.
 
@@ -12,7 +13,7 @@ type Timer = ReturnType<typeof setTimeout>
 const T = 'plugins.click_to_pause_custom'
 
 /**
- * `PLUGIN` that adds a behavior of toggling the playback state on click over the container
+ * A small `PLUGIN` that toggles the playback state on click over the video container
  * @beta
  */
 export class ClickToPause extends ContainerPlugin {