@gcorevideo/player 2.22.0 → 2.22.1

package/docs/api/player.mediacontrol.md

@@ -215,20 +215,6 @@ Description
 **_(BETA)_** Enable the user interaction disabled earlier
 
 
-</td></tr>
-<tr><td>
-
-[getCenterPanel()](./player.mediacontrol.getcenterpanel.md)
-
-
-</td><td>
-
-
-</td><td>
-
-**_(BETA)_**
-
-
 </td></tr>
 <tr><td>
 
@@ -246,21 +232,7 @@ Description
 </td></tr>
 <tr><td>
 
-[getLeftPanel()](./player.mediacontrol.getleftpanel.md)
-
-
-</td><td>
-
-
-</td><td>
-
-**_(BETA)_** Get the left panel area to append custom elements to
-
-
-</td></tr>
-<tr><td>
-
-[getRightPanel()](./player.mediacontrol.getrightpanel.md)
+[putElement(name, element)](./player.mediacontrol.putelement.md)
 
 
 </td><td>
@@ -268,13 +240,13 @@ Description
 
 </td><td>
 
-**_(BETA)_** Get the right panel area to append custom elements to
+**_(BETA)_**
 
 
 </td></tr>
 <tr><td>
 
-[putElement(name, element)](./player.mediacontrol.putelement.md)
+[setInitialVolume()](./player.mediacontrol.setinitialvolume.md)
 
 
 </td><td>
@@ -282,13 +254,13 @@ Description
 
 </td><td>
 
-**_(BETA)_**
+**_(BETA)_** Set the initial volume, which is preserved when playback is interrupted by an advertisement
 
 
 </td></tr>
 <tr><td>
 
-[setInitialVolume()](./player.mediacontrol.setinitialvolume.md)
+[setVolume(value, isInitialVolume)](./player.mediacontrol.setvolume.md)
 
 
 </td><td>
@@ -296,13 +268,13 @@ Description
 
 </td><td>
 
-**_(BETA)_** Set the initial volume, which is preserved when playback is interrupted by an advertisement
+**_(BETA)_** Set the volume
 
 
 </td></tr>
 <tr><td>
 
-[setVolume(value, isInitialVolume)](./player.mediacontrol.setvolume.md)
+[toggleElement(name, show)](./player.mediacontrol.toggleelement.md)
 
 
 </td><td>
@@ -310,7 +282,7 @@ Description
 
 </td><td>
 
-**_(BETA)_** Set the volume
+**_(BETA)_** Toggle the visibility of a media control element
 
 
 </td></tr>

package/docs/api/player.mediacontrol.toggleelement.md

@@ -0,0 +1,72 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [MediaControl](./player.mediacontrol.md) &gt; [toggleElement](./player.mediacontrol.toggleelement.md)
+
+## MediaControl.toggleElement() 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.
+> 
+
+Toggle the visibility of a media control element
+
+**Signature:**
+
+```typescript
+toggleElement(name: MediaControlElement, show: boolean): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+name
+
+
+</td><td>
+
+[MediaControlElement](./player.mediacontrolelement.md)
+
+
+</td><td>
+
+The name of the media control element
+
+
+</td></tr>
+<tr><td>
+
+show
+
+
+</td><td>
+
+boolean
+
+
+</td><td>
+
+Whether to show or hide the element
+
+
+</td></tr>
+</tbody></table>
+**Returns:**
+
+void
+

package/docs/api/player.mediacontrolelement.md

@@ -12,5 +12,5 @@ Media control elements, mount points for additional plugins
 **Signature:**
 
 ```typescript
-export type MediaControlElement = 'audiotracks' | 'clipText' | 'gear' | 'pip' | 'playbackRate' | 'seekBarContainer' | 'cc';
+export type MediaControlElement = 'audiotracks' | 'cc' | 'clipText' | 'dvr' | 'duration' | 'gear' | 'pip' | 'playbackRate' | 'position' | 'seekBarContainer';
 ```

package/lib/playback/dash-playback/DashPlayback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashPlayback.d.ts","sourceRoot":"","sources":["../../../src/playback/dash-playback/DashPlayback.ts"],"names":[],"mappings":"AAKA,OAAO,EAAe,QAAQ,EAAyB,MAAM,cAAc,CAAA;AAG3E,OAAO,MAAM,EAAE,EAIb,KAAK,WAAW,IAAI,eAAe,EAEnC,aAAa,EACd,MAAM,QAAQ,CAAA;AAEf,OAAO,EAGL,YAAY,EACZ,YAAY,EAEZ,SAAS,EACV,MAAM,yBAAyB,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,8CAA8C,CAAA;AAMzE,KAAK,YAAY,GACb,OAAO,QAAQ,CAAC,GAAG,GACnB,OAAO,QAAQ,CAAC,IAAI,GACpB,OAAO,QAAQ,CAAC,GAAG,GACnB,OAAO,QAAQ,CAAC,KAAK,CAAA;AAEzB,KAAK,YAAY,GAAG,MAAM,CAAA;AAE1B,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAID,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,YAAY;IACpD,OAAO,EAAE,YAAY,EAAE,GAAG,IAAI,CAAO;IAErC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAO;IAKnC,mCAAmC,EAAE,OAAO,CAAQ;IAEpD,aAAa,EAAE,OAAO,CAAQ;IAI9B,uBAAuB,EAAE,MAAM,CAAI;IASnC,wBAAwB,EAAE,MAAM,CAAI;IAEpC,aAAa,EAAE,YAAY,CAAe;IAG1C,aAAa,EAAE,YAAY,GAAG,IAAI,CAAO;IAGzC,gBAAgB,EAAE,SAAS,CAAI;IAE/B,KAAK,EAAE,MAAM,CAAC,gBAAgB,GAAG,IAAI,CAAO;IAE5C,2BAA2B,EAAE,MAAM,CAAI;IAEvC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAO;IAEtC,eAAe,EAAE,YAAY,CAA2B;IAIxD,0BAA0B,EAAE,oBAAoB,GAAG,IAAI,CAAO;IAI9D,wBAAwB,EAAE,oBAAoB,GAAG,IAAI,CAAO;IAE5D,kBAAkB,UAAQ;IAE1B,YAAY,EAAE,aAAa,GAAG,IAAI,CAAO;IAEzC,gBAAgB,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,GAAG,IAAI,CAAO;IAE9D,IAAI,IAAI,WAEP;IAED,IAAI,MAAM,IAAI,YAAY,EAAE,CAE3B;IAED,IAAI,YAAY,IAAI,MAAM,CAMzB;IAED,IAAI,OAAO,YAEV;IAED,IAAI,YAAY,CAAC,EAAE,EAAE,MAAM,EAoC1B;IAED,IAAI,UAAU,WASb;IAED,IAAI,IAAI,WAEP;IAID,IAAI,sBAAsB,WAczB;IAID,IAAI,oBAAoB,WAgBvB;IAED,IAAI,SAAS,WAKZ;gBAEW,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,GAAG;IAOzD,MAAM;IA6FN,MAAM;IAMN,MAAM;YAMW,SAAS;IAI1B,qBAAqB;IAQrB,oBAAoB;IAMpB,kBAAkB;IAOlB,WAAW,IAAI,SAAS;IAQxB,cAAc,IAAI,SAAS;IAO3B,kBAAkB,IAAI,SAAS;IAItB,cAAc,CAAC,UAAU,EAAE,MAAM;IAejC,IAAI,CAAC,IAAI,EAAE,SAAS;IAgB7B,eAAe;IAIf,UAAU,CAAC,MAAM,EAAE,OAAO;IAMjB,eAAe;IAgBxB,OAAO,CAAC,gBAAgB,CAGvB;IAED,OAAO,CAAC,eAAe,CAmCtB;IAED,OAAO,CAAC,YAAY;IAmBX,aAAa;IAqBb,iBAAiB;IAW1B,IAAI,UAAU,YASb;IAEQ,WAAW;IAmBX,IAAI;IAUJ,KAAK;IAUL,IAAI;IASJ,OAAO;IAkBhB,mBAAmB;IAYnB,WAAW,CAAC,MAAM,EAAE,eAAe,EAAE;IAarC,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,gBAAgB;IAQxB,eAAe;IAIf,aAAa;IAIb,OAAO,CAAC,QAAQ;IAMhB,eAAe,CAAC,IAAI,EAAE,MAAM;IAI5B,IAAI,WAAW,IAAI,UAAU,EAAE,CAK9B;IAGD,IAAI,iBAAiB,IAAI,UAAU,GAAG,IAAI,CAQzC;IAED,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAQlC,OAAO,CAAC,gBAAgB;CAOzB"}
+{"version":3,"file":"DashPlayback.d.ts","sourceRoot":"","sources":["../../../src/playback/dash-playback/DashPlayback.ts"],"names":[],"mappings":"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"}

package/lib/playback/dash-playback/DashPlayback.js

@@ -469,7 +469,6 @@ export default class DashPlayback extends BasePlayback {
     get audioTracks() {
         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);
     }
     // @ts-expect-error

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

@@ -2,9 +2,13 @@ import { UICorePlugin } from '@clappr/core';
 import '../../../assets/bottom-gear/gear.scss';
 import '../../../assets/bottom-gear/gear-sub-menu.scss';
 import { ZeptoResult } from '../../types.js';
+export declare enum GearEvents {
+    RENDERED = "rendered"
+}
 /**
  * An element inside the gear menu
  * @beta
+ * @deprecated
  */
 export type GearOptionsItem = 'quality' | 'rate' | 'nerd';
 /**
@@ -20,6 +24,63 @@ export type GearItemElement = GearOptionsItem;
  * 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 declare class BottomGear extends UICorePlugin {
     private isHd;
@@ -48,22 +109,13 @@ export declare class BottomGear extends UICorePlugin {
      * @internal
      */
     get events(): {
-        'click .button-gear': string;
+        'click #gear-button': string;
     };
     /**
      * @internal
      */
     bindEvents(): void;
-    /**
-     * @param name - Name of a gear menu placeholder item to attach custom UI
-     * @returns Zepto result of the element
-     */
-    getElement(name: GearOptionsItem): ZeptoResult | null;
-    /**
-     * Replaces the content of the gear menu
-     * @param content - Zepto result of the element
-     */
-    setContent(content: ZeptoResult): void;
+    addItem(name: string, $subMenu?: ZeptoResult): ZeptoResult;
     private onActiveContainerChanged;
     private bindContainerEvents;
     private highDefinitionUpdate;
@@ -72,13 +124,12 @@ export declare class BottomGear extends UICorePlugin {
      */
     render(): 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
      */
     refresh(): void;
     private toggleGearMenu;
     private hide;
     private onCoreReady;
+    private onMediaControlRendered;
 }
 //# 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,EAAoC,MAAM,cAAc,CAAC;AAO9E,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gDAAgD,CAAC;AAGxD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1D;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC;AAI9C;;;;;;;;;GASG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,IAAI,CAAS;IAErB;;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;IAKnB;;;OAGG;IACH,UAAU,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,GAAG,IAAI;IAMrD;;;OAGG;IACH,UAAU,CAAC,OAAO,EAAE,WAAW;IAI/B,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAiBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,WAAW;CAMpB"}
+{"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,oBAAY,UAAU;IACpB,QAAQ,aAAa;CACtB;AAED;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEzD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,eAAe,CAAA;AAI7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,IAAI,CAAQ;IAEpB;;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,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;IAsBf;;OAEG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,sBAAsB;CAI/B"}

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

@@ -1,4 +1,4 @@
-import { UICorePlugin, template, Events as ClapprEvents } from '@clappr/core';
+import { UICorePlugin, template, Events as ClapprEvents, $ } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
 import assert from 'assert';
 import { CLAPPR_VERSION } from '../../build.js';
@@ -7,9 +7,12 @@ 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 { MediaControlEvents } from '../media-control/MediaControl';
 const VERSION = '2.19.12';
 const T = 'plugins.bottom_gear';
+export var GearEvents;
+(function (GearEvents) {
+    GearEvents["RENDERED"] = "rendered";
+})(GearEvents || (GearEvents = {}));
 // 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
@@ -20,6 +23,63 @@ const T = 'plugins.bottom_gear';
  * 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 {
     isHd = false;
@@ -47,7 +107,7 @@ export class BottomGear extends UICorePlugin {
      */
     get attributes() {
         return {
-            'class': 'media-control-gear',
+            class: 'media-control-gear',
         };
     }
     /**
@@ -55,30 +115,39 @@ export class BottomGear extends UICorePlugin {
      */
     get events() {
         return {
-            'click .button-gear': 'toggleGearMenu',
+            'click #gear-button': 'toggleGearMenu',
         };
     }
     /**
      * @internal
      */
     bindEvents() {
-        this.listenTo(this.core, ClapprEvents.CORE_READY, this.onCoreReady);
+        this.listenToOnce(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) {
-        return this.$el.find(`.gear-options-list [data-${name}]`);
-    }
-    // TODO implement putElement/addElement method
-    /**
-     * Replaces the content of the gear menu
-     * @param content - Zepto result of the element
-     */
-    setContent(content) {
-        this.$el.find('.gear-wrapper').html(content);
+    addItem(name, $subMenu) {
+        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) => {
+                trace(`${T} addItem submenu clicked`, { name });
+                e.stopPropagation();
+                $subMenu.show();
+                this.$el.find('#gear-options').hide();
+            });
+        }
+        return $item;
     }
     onActiveContainerChanged() {
         trace(`${T} onActiveContainerChanged`);
@@ -97,38 +166,45 @@ export class BottomGear extends UICorePlugin {
      * @internal
      */
     render() {
+        trace(`${T} render`);
         const mediaControl = this.core.getPlugin('media_control');
-        // TODO use options.mediaControl.gear.items
-        const items = [
-            'quality',
-            'rate',
-            'nerd',
-        ];
+        if (!mediaControl) {
+            return this; // TODO test
+        }
         const icon = this.isHd ? gearHdIcon : gearIcon;
-        this.$el.html(BottomGear.template({ icon, items }));
-        mediaControl.putElement('gear', this.el);
-        mediaControl.trigger(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED);
+        this.$el
+            .html(BottomGear.template({ icon }))
+            .find('#gear-sub-menu-wrapper')
+            .hide();
+        // TODO make non-clickable when there are no items
+        mediaControl.putElement('gear', this.$el);
+        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
      */
     refresh() {
-        this.render();
-        this.$el.find('.gear-wrapper').show();
+        this.$el.find('.gear-sub-menu-wrapper').hide();
+        this.$el.find('#gear-options').show();
     }
     toggleGearMenu() {
-        this.$el.find('.gear-wrapper').toggle();
+        this.$el.find('#gear-options-wrapper').toggle();
     }
     hide() {
-        this.$el.find('.gear-wrapper').hide();
+        this.$el.find('#gear-options-wrapper').hide();
     }
     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.render);
-        this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
+        this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.onMediaControlRendered);
+        this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide);
+    }
+    onMediaControlRendered() {
+        trace(`${T} onMediaControlRendered`);
+        this.render();
     }
 }

package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.d.ts

@@ -7,8 +7,6 @@ import '../../../assets/clappr-nerd-stats/clappr-nerd-stats.scss';
  * @remarks
  * Depends on:
  *
- * - {@link MediaControl}
- *
  * - {@link BottomGear}
  *
  * - {@link ClapprStats}
@@ -25,6 +23,7 @@ export declare class ClapprNerdStats extends UICorePlugin {
     private showing;
     private shortcut;
     private iconPosition;
+    private static readonly buttonTemplate;
     /**
      * @internal
      */
@@ -60,7 +59,7 @@ export declare class ClapprNerdStats extends UICorePlugin {
      * @internal
      */
     bindEvents(): void;
-    private init;
+    private onCoreReady;
     private toggle;
     private show;
     private hide;

package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClapprNerdStats.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-nerd-stats/ClapprNerdStats.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAoB,IAAI,EAAa,MAAM,cAAc,CAAA;AAsB9E,OAAO,0DAA0D,CAAA;AAgGjE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,eAAgB,SAAQ,YAAY;IAC/C,OAAO,CAAC,SAAS,CAAyB;IAE1C,OAAO,CAAC,aAAa,CAIpB;IAED,OAAO,CAAC,OAAO,CAAwB;IAEvC,OAAO,CAAC,OAAO,CAAQ;IAEvB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,YAAY,CAAc;IAElC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;;;MAMlB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,sBAAsB,GAEjC;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,YAAY,GAEvB;gBAEW,IAAI,EAAE,IAAI;IAgBtB;;OAEG;IACM,UAAU;IAWnB,OAAO,CAAC,IAAI;IA4BZ,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,IAAI;IAeZ,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,gBAAgB;IA+BxB,OAAO,CAAC,aAAa;IA4BrB,OAAO,CAAC,eAAe;IAUvB;;OAEG;IACM,MAAM;IAQf,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,gBAAgB;CAWzB"}
+{"version":3,"file":"ClapprNerdStats.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-nerd-stats/ClapprNerdStats.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAoB,IAAI,EAAa,MAAM,cAAc,CAAA;AAsB9E,OAAO,0DAA0D,CAAA;AAgGjE;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,eAAgB,SAAQ,YAAY;IAC/C,OAAO,CAAC,SAAS,CAAyB;IAE1C,OAAO,CAAC,aAAa,CAIpB;IAED,OAAO,CAAC,OAAO,CAAwB;IAEvC,OAAO,CAAC,OAAO,CAAQ;IAEvB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,YAAY,CAAc;IAElC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;;;MAMlB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,sBAAsB,GAEjC;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,YAAY,GAEvB;gBAEW,IAAI,EAAE,IAAI;IAgBtB;;OAEG;IACM,UAAU;IAInB,OAAO,CAAC,WAAW;IAiCnB,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,IAAI;IAeZ,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,gBAAgB;IA+BxB,OAAO,CAAC,aAAa;IA4BrB,OAAO,CAAC,eAAe;IAUvB;;OAEG;IACM,MAAM;IASf,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,gBAAgB;CAWzB"}

package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.js

@@ -1,5 +1,5 @@
 import { UICorePlugin, Events, template } from '@clappr/core';
-import { reportError } from '@gcorevideo/utils';
+import { reportError, trace } from '@gcorevideo/utils';
 import Mousetrap from 'mousetrap';
 import { CLAPPR_VERSION } from '../../build.js';
 import { ClapprStatsEvents, } from '../clappr-stats/types.js';
@@ -10,7 +10,7 @@ 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 { MediaControlEvents } from '../media-control/MediaControl.js';
+import { GearEvents } from '../bottom-gear/BottomGear.js';
 import assert from 'assert';
 const qualityClasses = [
     'speedtest-quality-value-1',
@@ -79,7 +79,7 @@ const drawSummary = (customMetrics, vodContainer, liveContainer) => {
     vodContainer.html(vodHtml);
     liveContainer.html(liveHtml);
 };
-// const T = 'plugins.clappr_nerd_stats';
+const T = 'plugins.clappr_nerd_stats';
 /**
  * `PLUGIN` that displays useful network-related statistics.
  * @beta
@@ -87,8 +87,6 @@ const drawSummary = (customMetrics, vodContainer, liveContainer) => {
  * @remarks
  * Depends on:
  *
- * - {@link MediaControl}
- *
  * - {@link BottomGear}
  *
  * - {@link ClapprStats}
@@ -109,6 +107,7 @@ export class ClapprNerdStats extends UICorePlugin {
     showing = false;
     shortcut;
     iconPosition;
+    static buttonTemplate = template(buttonHtml);
     /**
      * @internal
      */
@@ -172,12 +171,12 @@ export class ClapprNerdStats extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        const mediaControl = this.core.getPlugin('media_control');
-        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);
     }
-    init() {
+    onCoreReady() {
+        const bottomGear = this.core.getPlugin('bottom_gear');
+        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');
         if (!clapprStats) {
@@ -289,18 +288,22 @@ export class ClapprNerdStats extends UICorePlugin {
      * @internal
      */
     render() {
+        trace(`${T} render`);
         // TODO append to the container
         this.core.$el.append(this.$el[0]);
         this.hide();
         return this;
     }
     addToBottomGear() {
+        trace(`${T} addToBottomGear`);
         const gear = this.core.getPlugin('bottom_gear');
-        const $el = gear.getElement('nerd');
-        $el.html(buttonHtml);
-        const $button = $el.find('.nerd-button');
-        $button.find('.stats-icon').html(statsIcon);
-        $button.on('click', (e) => {
+        const $button = gear
+            .addItem('nerd')
+            .html(ClapprNerdStats.buttonTemplate({
+            icon: statsIcon,
+            i18n: this.core.i18n,
+        }))
+            .on('click', (e) => {
             e.stopPropagation();
             this.toggle();
         });

package/lib/plugins/dvr-controls/DvrControls.js

@@ -97,7 +97,7 @@ export class DvrControls extends UICorePlugin {
         this.$el.html(DvrControls.template({
             i18n: this.core.i18n,
         }));
-        mediaControl.putElement('dvr', this.el);
+        mediaControl.putElement('dvr', this.$el);
         return this;
     }
 }