@gcorevideo/player 2.19.14 → 2.19.15

package/docs/api/player.spinnerthreebounce.show.md

@@ -4,47 +4,16 @@
 
 ## SpinnerThreeBounce.show() 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.
+> 
+
+Shows the spinner
+
 **Signature:**
 
 ```typescript
-show(immediate?: boolean): void;
+show(): void;
 ```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-immediate
-
-
-</td><td>
-
-boolean
-
-
-</td><td>
-
-_(Optional)_
-
-
-</td></tr>
-</tbody></table>
 **Returns:**
 
 void

package/docs/api/player.subtitles.hide.md

@@ -4,6 +4,11 @@
 
 ## Subtitles.hide() 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.
+> 
+
+Hides the subtitles menu and the subtitles.
+
 **Signature:**
 
 ```typescript

package/docs/api/player.subtitles.md

@@ -4,6 +4,11 @@
 
 ## Subtitles class
 
+> 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.
+> 
+
+A [media control](./player.mediacontrol.md) plugin that provides a UI to select the subtitles when available.
+
 **Signature:**
 
 ```typescript
@@ -11,184 +16,31 @@ export declare class Subtitles extends UICorePlugin
 ```
 **Extends:** UICorePlugin
 
-## Properties
-
-<table><thead><tr><th>
-
-Property
-
-
-</th><th>
-
-Modifiers
-
-
-</th><th>
-
-Type
+## Remarks
 
+Depends on:
 
-</th><th>
+- [MediaControl](./player.mediacontrol.md)
 
-Description
+Configuration options:
 
+- subtitles.language - The language of the subtitles to select by default.
 
-</th></tr></thead>
-<tbody><tr><td>
-
-[attributes](./player.subtitles.attributes.md)
-
-
-</td><td>
-
-`readonly`
-
-
-</td><td>
-
-{ class: string; 'data-subtitles': string; }
-
-
-</td><td>
-
+## Example
 
-</td></tr>
-<tr><td>
-
-[events](./player.subtitles.events.md)
-
-
-</td><td>
-
-`readonly`
-
-
-</td><td>
-
-{ 'click \[data-subtitles-select\]': string; 'click \[data-subtitles-button\]': string; }
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[name](./player.subtitles.name.md)
-
-
-</td><td>
-
-`readonly`
-
-
-</td><td>
-
-string
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[preselectedLanguage](./player.subtitles.preselectedlanguage.md)
-
-
-</td><td>
-
-`readonly`
-
-
-</td><td>
-
-string
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[supportedVersion](./player.subtitles.supportedversion.md)
-
-
-</td><td>
-
-`readonly`
-
-
-</td><td>
-
-{ min: string; }
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[template](./player.subtitles.template.md)
-
-
-</td><td>
-
-`readonly`
-
-
-</td><td>
-
-any
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[templateString](./player.subtitles.templatestring.md)
-
-
-</td><td>
-
-`readonly`
-
-
-</td><td>
 
-any
+```ts
+import { Subtitles } from '@gcorevideo/player'
 
+Player.registerPlugin(Subtitles)
 
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[version](./player.subtitles.version.md)
-
-
-</td><td>
-
-`static`
-
-`readonly`
-
-
-</td><td>
-
-string
-
-
-</td><td>
-
-
-</td></tr>
-</tbody></table>
+new Player({
+  ...
+  subtitles: {
+    language: 'en',
+  },
+})
+```
 
 ## Methods
 
@@ -210,30 +62,6 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
-[bindEvents()](./player.subtitles.bindevents.md)
-
-
-</td><td>
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[buttonElement()](./player.subtitles.buttonelement.md)
-
-
-</td><td>
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
 [hide()](./player.subtitles.hide.md)
 
 
@@ -242,53 +70,7 @@ Description
 
 </td><td>
 
-
-</td></tr>
-<tr><td>
-
-[levelElement(id)](./player.subtitles.levelelement.md)
-
-
-</td><td>
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[reload()](./player.subtitles.reload.md)
-
-
-</td><td>
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[render()](./player.subtitles.render.md)
-
-
-</td><td>
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[selectSubtitles()](./player.subtitles.selectsubtitles.md)
-
-
-</td><td>
-
-
-</td><td>
+**_(BETA)_** Hides the subtitles menu and the subtitles.
 
 
 </td></tr>
@@ -302,41 +84,7 @@ Description
 
 </td><td>
 
-
-</td></tr>
-<tr><td>
-
-[startLevelSwitch()](./player.subtitles.startlevelswitch.md)
-
-
-</td><td>
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[stopLevelSwitch()](./player.subtitles.stoplevelswitch.md)
-
-
-</td><td>
-
-
-</td><td>
-
-
-</td></tr>
-<tr><td>
-
-[unBindEvents()](./player.subtitles.unbindevents.md)
-
-
-</td><td>
-
-
-</td><td>
+**_(BETA)_** Shows the subtitles menu and the subtitles.
 
 
 </td></tr>

package/docs/api/player.subtitles.show.md

@@ -4,6 +4,11 @@
 
 ## Subtitles.show() 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.
+> 
+
+Shows the subtitles menu and the subtitles.
+
 **Signature:**
 
 ```typescript

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

@@ -2,7 +2,13 @@ import { UICorePlugin } from '@clappr/core';
 import '../../../assets/bottom-gear/gear.scss';
 import '../../../assets/bottom-gear/gear-sub-menu.scss';
 import { ZeptoResult } from '../../utils/types.js';
-export declare enum Events {
+/**
+ * Custom events emitted by the plugin
+ */
+export declare enum GearEvents {
+    /**
+     * Emitted when the gear menu is rendered
+     */
     MEDIACONTROL_GEAR_RENDERED = "mediacontrol:gear:rendered"
 }
 /**
@@ -15,6 +21,10 @@ export type GearItemElement = 'quality' | 'rate' | 'nerd';
  * @beta
  * @remarks
  * The plugins provides a base for attaching custom settings UI in the gear menu
+ *
+ * Depends on:
+ *
+ * - {@link MediaControl | media_control}
  */
 export declare class BottomGear extends UICorePlugin {
     private isHd;
@@ -50,7 +60,16 @@ export declare class BottomGear extends UICorePlugin {
      * @internal
      */
     bindEvents(): void;
+    /**
+     * @param name - Name of a gear menu placeholder item to attach custom UI
+     * @returns Zepto result of the element
+     */
     getElement(name: GearItemElement): ZeptoResult | null;
+    /**
+     * Replaces the content of the gear menu
+     * @param content - Zepto result of the element
+     */
+    setContent(content: ZeptoResult): void;
     private onActiveContainerChanged;
     private bindContainerEvents;
     private highDefinitionUpdate;

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,sBAAsB,CAAC;AAMnD,oBAAY,MAAM;IAChB,0BAA0B,+BAA+B;CAC1D;AAED;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1D;;;;;GAKG;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;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IAUnB,UAAU,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,GAAG,IAAI;IAIrD,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,oBAAoB;IAU5B;;OAEG;IACM,MAAM;IAmBf,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,IAAI;CAGb"}
+{"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,sBAAsB,CAAC;AAMnD;;GAEG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,0BAA0B,+BAA+B;CAC1D;AAED;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1D;;;;;;;;;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;;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IAUnB;;;OAGG;IACH,UAAU,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,GAAG,IAAI;IAIrD;;;OAGG;IACH,UAAU,CAAC,OAAO,EAAE,WAAW;IAI/B,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,oBAAoB;IAU5B;;OAEG;IACM,MAAM;IAmBf,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,IAAI;CAGb"}

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

@@ -8,16 +8,26 @@ 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';
 const VERSION = '2.19.12';
-const T = 'plugins.media_control_gear';
-export var Events;
-(function (Events) {
-    Events["MEDIACONTROL_GEAR_RENDERED"] = "mediacontrol:gear:rendered";
-})(Events || (Events = {}));
+const T = 'plugins.bottom_gear';
+/**
+ * Custom events emitted by the plugin
+ */
+export var GearEvents;
+(function (GearEvents) {
+    /**
+     * Emitted when the gear menu is rendered
+     */
+    GearEvents["MEDIACONTROL_GEAR_RENDERED"] = "mediacontrol:gear:rendered";
+})(GearEvents || (GearEvents = {}));
 /**
  * Adds the gear button that triggers extra options menu on the right side of the {@link MediaControl | media control} UI
  * @beta
  * @remarks
  * The plugins provides a base for attaching custom settings UI in the gear menu
+ *
+ * Depends on:
+ *
+ * - {@link MediaControl | media_control}
  */
 export class BottomGear extends UICorePlugin {
     isHd = false;
@@ -25,7 +35,7 @@ export class BottomGear extends UICorePlugin {
      * @internal
      */
     get name() {
-        return 'media_control_gear';
+        return 'bottom_gear';
     }
     /**
      * @internal
@@ -68,9 +78,20 @@ export class BottomGear extends UICorePlugin {
         this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.render);
         this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
     }
+    /**
+     * @param name - Name of a gear menu placeholder item to attach custom UI
+     * @returns Zepto result of the element
+     */
     getElement(name) {
         return this.core.getPlugin('media_control')?.getElement('gear')?.find(`.gear-options-list [data-${name}]`);
     }
+    /**
+     * Replaces the content of the gear menu
+     * @param content - Zepto result of the element
+     */
+    setContent(content) {
+        this.$el.find('.gear-wrapper').html(content);
+    }
     onActiveContainerChanged() {
         trace(`${T} onActiveContainerChanged`);
         this.bindContainerEvents();
@@ -105,7 +126,7 @@ export class BottomGear extends UICorePlugin {
         this.$el.html(BottomGear.template({ icon, items }));
         mediaControl.getElement('gear')?.html(this.el);
         this.core.trigger('gear:rendered'); // @deprecated
-        mediaControl.trigger(Events.MEDIACONTROL_GEAR_RENDERED);
+        mediaControl.trigger(GearEvents.MEDIACONTROL_GEAR_RENDERED);
         return this;
     }
     refresh() {

package/lib/plugins/clappr-nerd-stats/ClapprNerdStats.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 { Events as BottomGearEvents } from '../bottom-gear/BottomGear.js';
+import { GearEvents } from '../bottom-gear/BottomGear.js';
 import assert from 'assert';
 const qualityClasses = [
     'speedtest-quality-value-1',
@@ -95,7 +95,7 @@ export class ClapprNerdStats extends UICorePlugin {
     shortcut;
     iconPosition;
     get name() {
-        return 'media_control_nerd_stats';
+        return 'nerd_stats';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -143,7 +143,7 @@ export class ClapprNerdStats extends UICorePlugin {
         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, BottomGearEvents.MEDIACONTROL_GEAR_RENDERED, this.addToBottomGear);
+        this.listenTo(mediaControl, GearEvents.MEDIACONTROL_GEAR_RENDERED, this.addToBottomGear);
     }
     init() {
         this.container = this.core.activeContainer;
@@ -249,7 +249,7 @@ export class ClapprNerdStats extends UICorePlugin {
         return this;
     }
     addToBottomGear() {
-        const gear = this.core.getPlugin('media_control_gear');
+        const gear = this.core.getPlugin('bottom_gear');
         const $el = gear.getElement('nerd');
         $el.html(buttonHtml);
         const $button = $el.find('.nerd-button');

package/lib/plugins/level-selector/LevelSelector.d.ts

@@ -5,7 +5,14 @@ import '../../../assets/level-selector/style.scss';
  * @beta
  *
  * @remarks
- * The plugin is rendered as a button in the {@link BottomGear | gear menu}.
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * - {@link BottomGear}
+ *
+ * The plugin is rendered as an item in the gear menu.
+ *
  * When clicked, it shows a list of quality levels to choose from.
  *
  * Configuration options:
@@ -30,8 +37,8 @@ export declare class LevelSelector extends UICorePlugin {
     private removeAuto;
     private isHd;
     private isOpen;
-    private buttonTemplate;
-    private listTemplate;
+    private static readonly buttonTemplate;
+    private static readonly listTemplate;
     /**
      * @internal
      */

package/lib/plugins/level-selector/LevelSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LevelSelector.d.ts","sourceRoot":"","sources":["../../../src/plugins/level-selector/LevelSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,YAAY,EAAE,MAAM,cAAc,CAAA;AAc7D,OAAO,2CAA2C,CAAA;AAMlD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAO,CAAC,MAAM,CAAqB;IAEnC,OAAO,CAAC,WAAW,CAAe;IAElC,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,cAAc,CAAgC;IAEtD,OAAO,CAAC,YAAY,CAAgC;IAEpD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,eAAe,CAAK;IAE5B,IAAa,MAAM;;;;MAMlB;IAED;;OAEG;IACM,UAAU;IAKnB,OAAO,CAAC,kBAAkB;IAsC1B,OAAO,CAAC,MAAM;IAcd,OAAO,CAAC,YAAY;IAmBpB;;OAEG;IACM,MAAM;IAUf,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,cAAc;IAiBtB,OAAO,KAAK,QAAQ,GAQnB;IAED,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,QAAQ;IAmBhB,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,WAAW,CAAmC;CACvD"}
+{"version":3,"file":"LevelSelector.d.ts","sourceRoot":"","sources":["../../../src/plugins/level-selector/LevelSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,YAAY,EAAE,MAAM,cAAc,CAAA;AAe7D,OAAO,2CAA2C,CAAA;AAOlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAO,CAAC,MAAM,CAAqB;IAEnC,OAAO,CAAC,WAAW,CAAe;IAElC,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAyC;IAE/E,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAuC;IAE3E;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,eAAe,CAAK;IAE5B,IAAa,MAAM;;;;MAMlB;IAED;;OAEG;IACM,UAAU;IAKnB,OAAO,CAAC,kBAAkB;IAsC1B,OAAO,CAAC,MAAM;IAcd,OAAO,CAAC,YAAY;IAmBpB;;OAEG;IACM,MAAM;IAYf,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,cAAc;IActB,OAAO,KAAK,QAAQ,GAQnB;IAED,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,QAAQ;IAmBhB,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,WAAW,CAAmC;CACvD"}

package/lib/plugins/level-selector/LevelSelector.js

@@ -8,14 +8,22 @@ import arrowRightIcon from '../../../assets/icons/new/arrow-right.svg';
 import arrowLeftIcon from '../../../assets/icons/new/arrow-left.svg';
 import checkIcon from '../../../assets/icons/new/check.svg';
 import '../../../assets/level-selector/style.scss';
-const T = 'plugins.media_control_level_selector';
+import assert from 'assert';
+const T = 'plugins.level_selector';
 const VERSION = '2.19.4';
 /**
  * A {@link MediaControl | media control} plugin that provides a UI to control the quality level of the playback.
  * @beta
  *
  * @remarks
- * The plugin is rendered as a button in the {@link BottomGear | gear menu}.
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * - {@link BottomGear}
+ *
+ * The plugin is rendered as an item in the gear menu.
+ *
  * When clicked, it shows a list of quality levels to choose from.
  *
  * Configuration options:
@@ -40,13 +48,13 @@ export class LevelSelector extends UICorePlugin {
     removeAuto = false;
     isHd = false;
     isOpen = false;
-    buttonTemplate = null;
-    listTemplate = null;
+    static buttonTemplate = template(buttonHtml);
+    static listTemplate = template(listHtml);
     /**
      * @internal
      */
     get name() {
-        return 'media_control_level_selector';
+        return 'level_selector';
     }
     /**
      * @internal
@@ -133,6 +141,7 @@ export class LevelSelector extends UICorePlugin {
      * @internal
      */
     render() {
+        assert(this.core.getPlugin('bottom_gear'), 'bottom_gear plugin is required');
         if (!this.shouldRender()) {
             return this;
         }
@@ -140,28 +149,20 @@ export class LevelSelector extends UICorePlugin {
         return this;
     }
     renderButton() {
-        if (!this.buttonTemplate) {
-            this.buttonTemplate = template(buttonHtml);
-        }
         if (!this.isOpen) {
-            const html = this.buttonTemplate?.({
+            const html = LevelSelector.buttonTemplate({
                 arrowRightIcon,
                 currentText: this.currentText,
                 isHd: this.isHd,
                 hdIcon,
             });
             this.$el.html(html);
-            const mediaControl = this.core.getPlugin('media_control');
-            mediaControl.getElement('bottomGear')
-                ?.find('.gear-options-list [data-quality]')
-                ?.html(this.el);
+            const gear = this.core.getPlugin('bottom_gear');
+            gear.getElement('quality')?.html(this.el);
         }
     }
     renderDropdown() {
-        if (!this.listTemplate) {
-            this.listTemplate = template(listHtml);
-        }
-        const html = this.listTemplate({
+        const html = LevelSelector.listTemplate({
             arrowLeftIcon,
             checkIcon,
             labels: this.levelLabels,
@@ -170,8 +171,8 @@ export class LevelSelector extends UICorePlugin {
             removeAuto: this.removeAuto,
         });
         this.$el.html(html);
-        const mediaControl = this.core.getPlugin('media_control');
-        mediaControl.getElement('bottomGear')?.find('.gear-wrapper').html(this.el);
+        const gear = this.core.getPlugin('bottom_gear');
+        gear?.setContent(this.el);
     }
     get maxLevel() {
         const maxRes = this.core.options.levelSelector?.restrictResolution;