@gcorevideo/player 2.22.0 → 2.22.2

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

@@ -3,23 +3,82 @@ import '../../../assets/bottom-gear/gear.scss';
 import '../../../assets/bottom-gear/gear-sub-menu.scss';
 import { ZeptoResult } from '../../types.js';
 /**
- * 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 declare enum GearEvents {
+    /**
+     * Use this event to accurately attach an item to the gear menu
+     */
+    RENDERED = "rendered"
+}
 /**
- * `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 declare class BottomGear extends UICorePlugin {
     private isHd;
@@ -48,22 +107,35 @@ 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
+     * 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): void;
+    addItem(name: string, $subMenu?: ZeptoResult): ZeptoResult;
     private onActiveContainerChanged;
     private bindContainerEvents;
     private highDefinitionUpdate;
@@ -72,13 +144,14 @@ 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.
+     * @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(): 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;AAM5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;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;;;;;;;;;;;;;;;;;;;;;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;IAsBf;;;;OAIG;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,19 +7,87 @@ 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';
+/**
+ * Events triggered by the plugin
+ * @beta
+ */
+export var GearEvents;
+(function (GearEvents) {
+    /**
+     * Use this event to accurately attach an item to the gear menu
+     */
+    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
+ * `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 {
     isHd = false;
@@ -47,7 +115,7 @@ export class BottomGear extends UICorePlugin {
      */
     get attributes() {
         return {
-            'class': 'media-control-gear',
+            class: 'media-control-gear',
         };
     }
     /**
@@ -55,30 +123,61 @@ 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
+     * 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) {
-        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 +196,47 @@ 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.
+     * @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();
     }
     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/click-to-pause/ClickToPause.d.ts

@@ -1,6 +1,6 @@
 import { ContainerPlugin } from '@clappr/core';
 /**
- * `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 declare class ClickToPause extends ContainerPlugin {

package/lib/plugins/click-to-pause/ClickToPause.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClickToPause.d.ts","sourceRoot":"","sources":["../../../src/plugins/click-to-pause/ClickToPause.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAA;AAShE;;;GAGG;AACH,qBAAa,YAAa,SAAQ,eAAe;IAC/C,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,KAAK,CAAqB;IAElC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,KAAK;IAoBb,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,UAAU;CAMnB"}
+{"version":3,"file":"ClickToPause.d.ts","sourceRoot":"","sources":["../../../src/plugins/click-to-pause/ClickToPause.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAoB,MAAM,cAAc,CAAA;AAShE;;;GAGG;AACH,qBAAa,YAAa,SAAQ,eAAe;IAC/C,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,KAAK,CAAqB;IAElC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,KAAK;IAoBb,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,UAAU;CAMnB"}

package/lib/plugins/click-to-pause/ClickToPause.js

@@ -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.
 import { ContainerPlugin, Events, Playback } from '@clappr/core';
@@ -6,7 +7,7 @@ import { trace } from '@gcorevideo/utils';
 import { CLAPPR_VERSION } from '../../build.js';
 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 {

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;
     }
 }

package/lib/plugins/error-screen/ErrorScreen.d.ts

@@ -1,8 +1,18 @@
 import { UICorePlugin } from '@clappr/core';
 import '../../../assets/error-screen/error_screen.scss';
 /**
- * Configuration options for the {@link ErrorScreen | error screen} plugin.
- * @beta
+ * Settings for the {@link ErrorScreen} plugin.
+ * @public
+ */
+export type ErrorScreenSettings = {
+    /**
+     * Whether to hide the reload button. The reload button triggers reload of the current source.
+     */
+    noReload?: boolean;
+};
+/**
+ * Configuration options for the {@link ErrorScreen} plugin.
+ * @public
  */
 export type ErrorScreenPluginSettings = {
     /**
@@ -11,8 +21,23 @@ export type ErrorScreenPluginSettings = {
     noReload?: boolean;
 };
 /**
- * `PLUGIN` that displays errors nicely in the overlay on top of the player.
- * @beta
+ * `PLUGIN` that displays fatal errors nicely in the overlay on top of the player.
+ * @public
+ * @remarks
+ * A fatal error is an error that prevents the player from playing the content.
+ * It's usually a network error that persists after multiple retries.
+ *
+ * The error screen should not be confused with the content stub that is shown when no media sources are available.
+ * This can happen due to the lack of the support of the given sources type or because the sources are misconfigured (e.g., omitted).
+ *
+ * Configuration options - {@link ErrorScreenPluginSettings}
+ *
+ * @example
+ * ```ts
+ * import { ErrorScreen, Player } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(ErrorScreen)
+ * ```
  */
 export declare class ErrorScreen extends UICorePlugin {
     private err;

package/lib/plugins/error-screen/ErrorScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorScreen.d.ts","sourceRoot":"","sources":["../../../src/plugins/error-screen/ErrorScreen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAoB,MAAM,cAAc,CAAA;AAO7D,OAAO,gDAAgD,CAAA;AAUvD;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAID;;;GAGG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,GAAG,CAA+B;IAE1C;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,OAAO;IAMf;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,wBAAwB;IAqBhC,OAAO,CAAC,OAAO;IAgBf;;OAEG;IACM,MAAM;CAkBhB"}
+{"version":3,"file":"ErrorScreen.d.ts","sourceRoot":"","sources":["../../../src/plugins/error-screen/ErrorScreen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAoB,MAAM,cAAc,CAAA;AAO7D,OAAO,gDAAgD,CAAA;AAUvD;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAID;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,GAAG,CAA+B;IAE1C;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAyB;IAEzD;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,OAAO;IAMf;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,wBAAwB;IAqBhC,OAAO,CAAC,OAAO;IAgBf;;OAEG;IACM,MAAM;CAkBhB"}

package/lib/plugins/error-screen/ErrorScreen.js

@@ -6,8 +6,23 @@ import templateHtml from '../../../assets/error-screen/error_screen.ejs';
 import '../../../assets/error-screen/error_screen.scss';
 const T = 'plugins.error_screen';
 /**
- * `PLUGIN` that displays errors nicely in the overlay on top of the player.
- * @beta
+ * `PLUGIN` that displays fatal errors nicely in the overlay on top of the player.
+ * @public
+ * @remarks
+ * A fatal error is an error that prevents the player from playing the content.
+ * It's usually a network error that persists after multiple retries.
+ *
+ * The error screen should not be confused with the content stub that is shown when no media sources are available.
+ * This can happen due to the lack of the support of the given sources type or because the sources are misconfigured (e.g., omitted).
+ *
+ * Configuration options - {@link ErrorScreenPluginSettings}
+ *
+ * @example
+ * ```ts
+ * import { ErrorScreen, Player } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(ErrorScreen)
+ * ```
  */
 export class ErrorScreen extends UICorePlugin {
     err = null;