@gcorevideo/player 2.19.11 → 2.19.13

package/lib/plugins/subtitles/Subtitles.js

@@ -1,7 +1,7 @@
 import { Events, UICorePlugin, Browser, template, $, } from '@clappr/core';
 import { reportError } from '@gcorevideo/utils';
 import assert from 'assert';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import '../../../assets/subtitles/style.scss';
 import subtitlesOffIcon from '../../../assets/icons/new/subtitles-off.svg';
 import subtitlesOnIcon from '../../../assets/icons/new/subtitles-on.svg';
@@ -10,7 +10,7 @@ import stringHTML from '../../../assets/subtitles/string.ejs';
 import { isFullscreen } from '../utils.js';
 const VERSION = '0.0.1';
 const LOCAL_STORAGE_SUBTITLES_ID = 'subtitles_select';
-const T = 'plugins.subtitles';
+const T = 'plugins.media_control_subtitles';
 const NO_TRACK = { language: 'off' };
 export class Subtitles extends UICorePlugin {
     currentContainer;
@@ -20,7 +20,7 @@ export class Subtitles extends UICorePlugin {
     tracks;
     $string;
     get name() {
-        return 'subtitles';
+        return 'media_control_subtitles';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };

package/lib/plugins/thumbnails/Thumbnails.js

@@ -1,11 +1,11 @@
 import { UICorePlugin, Events, template, $ } from '@clappr/core';
 import { reportError, trace } from '@gcorevideo/utils';
 import parseSRT from 'parse-srt';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/thumbnails/scrub-thumbnails.ejs';
 import '../../../assets/thumbnails/style.scss';
 import { getPageX } from '../utils.js';
-const T = 'plugins.thumbnails';
+const T = 'plugins.media_control_thumbnails';
 export class Thumbnails extends UICorePlugin {
     _$spotlight = null;
     _$backdrop = null;
@@ -21,7 +21,7 @@ export class Thumbnails extends UICorePlugin {
     _oldContainer = null;
     _thumbs = [];
     get name() {
-        return 'thumbnails';
+        return 'media_control_thumbnails';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };

package/lib/plugins/types.d.ts

@@ -1,8 +1,2 @@
-import { $ } from "@clappr/core";
-export type ZeptoResult = ReturnType<typeof $>;
-export type TimePosition = {
-    current: number;
-    total: number;
-};
-export type TimerId = ReturnType<typeof setTimeout>;
+export type TemplateFunction = (data: Record<string, unknown>) => string;
 //# sourceMappingURL=types.d.ts.map

package/lib/plugins/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/plugins/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAEjC,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/plugins/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAA"}

package/lib/plugins/vast-ads/VastAds.d.ts

@@ -68,5 +68,6 @@ export declare class VastAds extends UICorePlugin {
     private destroyRoll;
     private _playVideoContent;
     render(): this;
+    private setMuted;
 }
 //# sourceMappingURL=VastAds.d.ts.map

package/lib/plugins/vast-ads/VastAds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VastAds.d.ts","sourceRoot":"","sources":["../../../src/plugins/vast-ads/VastAds.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,IAAI,EAIJ,QAAQ,EAER,YAAY,EAEb,MAAM,cAAc,CAAA;AAYrB,OAAO,qCAAqC,CAAA;AAQ5C,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAO,CAAC,mBAAmB,CAAiC;IAE5D,OAAO,CAAC,qBAAqB,CAAwC;IAErE,OAAO,CAAC,oBAAoB,CAAwC;IAEpE,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,mBAAmB,CAAI;IAE/B,OAAO,CAAC,UAAU,CAAyB;IAE3C,OAAO,CAAC,SAAS,CAAyB;IAE1C,OAAO,CAAC,eAAe,CAA2B;IAElD,OAAO,CAAC,gBAAgB,CAAI;IAE5B,OAAO,CAAC,YAAY,CAAY;IAEhC,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,SAAS,CAAwB;IAEzC,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,mBAAmB,CAA2B;IAEtD,OAAO,CAAC,aAAa,CAAiC;IAEtD,OAAO,CAAC,gBAAgB,CAAI;IAE5B,OAAO,CAAC,IAAI,CAA2B;IAEvC,OAAO,CAAC,OAAO,CAAK;IAEpB,OAAO,CAAC,uBAAuB,CAAI;IAEnC,OAAO,CAAC,0BAA0B,CAAI;IAEtC,OAAO,CAAC,YAAY,CAAoB;IAExC,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,SAAS,CAA2B;IAE5C,OAAO,CAAC,UAAU,CAA2B;IAE7C,OAAO,CAAC,aAAa,CAA2B;IAEhD,OAAO,CAAC,YAAY,CAA2B;IAE/C,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,MAAM,KAAK,OAAO,WAEjB;IAED,IAAI,YAAY,QAEf;IAED,IAAa,UAAU;;;MAKtB;gBAEW,IAAI,EAAE,IAAI;IAqEb,UAAU;IA8FnB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,oBAAoB;IAkE5B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,qBAAqB;IAwD7B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,uBAAuB;IAuC/B,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,mBAAmB;IAiD3B,YAAY;IASZ,OAAO,CAAC,gBAAgB;IA0BxB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IA6BpB,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAG3B;IAED,IAAI,QAAQ,IAAI,QAAQ,GAAG,IAAI,CAE9B;IAED,OAAO,CAAC,kBAAkB;IAU1B,gBAAgB,CAAC,CAAC,EAAE,MAAM;IAQ1B,cAAc;IAsBd,eAAe;IAkBf,WAAW;IAiBX,OAAO,CAAC,UAAU;IA+ClB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAiHhB,MAAM;CAwBhB"}
+{"version":3,"file":"VastAds.d.ts","sourceRoot":"","sources":["../../../src/plugins/vast-ads/VastAds.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,IAAI,EAIJ,QAAQ,EAER,YAAY,EAEb,MAAM,cAAc,CAAA;AAYrB,OAAO,qCAAqC,CAAA;AAQ5C,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAO,CAAC,mBAAmB,CAAiC;IAE5D,OAAO,CAAC,qBAAqB,CAAwC;IAErE,OAAO,CAAC,oBAAoB,CAAwC;IAEpE,OAAO,CAAC,eAAe,CAAI;IAE3B,OAAO,CAAC,mBAAmB,CAAI;IAE/B,OAAO,CAAC,UAAU,CAAyB;IAE3C,OAAO,CAAC,SAAS,CAAyB;IAE1C,OAAO,CAAC,eAAe,CAA2B;IAElD,OAAO,CAAC,gBAAgB,CAAI;IAE5B,OAAO,CAAC,YAAY,CAAY;IAEhC,OAAO,CAAC,YAAY,CAAQ;IAE5B,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,SAAS,CAAwB;IAEzC,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,mBAAmB,CAA2B;IAEtD,OAAO,CAAC,aAAa,CAAiC;IAEtD,OAAO,CAAC,gBAAgB,CAAI;IAE5B,OAAO,CAAC,IAAI,CAA2B;IAEvC,OAAO,CAAC,OAAO,CAAK;IAEpB,OAAO,CAAC,uBAAuB,CAAI;IAEnC,OAAO,CAAC,0BAA0B,CAAI;IAEtC,OAAO,CAAC,YAAY,CAAoB;IAExC,OAAO,CAAC,OAAO,CAA2B;IAE1C,OAAO,CAAC,SAAS,CAA2B;IAE5C,OAAO,CAAC,UAAU,CAA2B;IAE7C,OAAO,CAAC,aAAa,CAA2B;IAEhD,OAAO,CAAC,YAAY,CAA2B;IAE/C,IAAI,IAAI,WAEP;IAED,IAAI,gBAAgB;;MAEnB;IAED,MAAM,KAAK,OAAO,WAEjB;IAED,IAAI,YAAY,QAEf;IAED,IAAa,UAAU;;;MAKtB;gBAEW,IAAI,EAAE,IAAI;IAqEb,UAAU;IA8FnB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,oBAAoB;IAkE5B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,qBAAqB;IAwD7B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,uBAAuB;IAuC/B,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,mBAAmB;IAiD3B,YAAY;IASZ,OAAO,CAAC,gBAAgB;IA0BxB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IA6BpB,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAG3B;IAED,IAAI,QAAQ,IAAI,QAAQ,GAAG,IAAI,CAE9B;IAED,OAAO,CAAC,kBAAkB;IAU1B,gBAAgB,CAAC,CAAC,EAAE,MAAM;IAQ1B,cAAc;IAsBd,eAAe;IAkBf,WAAW;IAiBX,OAAO,CAAC,UAAU;IA+ClB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAiHhB,MAAM;IAqBf,OAAO,CAAC,QAAQ;CAGjB"}

package/lib/plugins/vast-ads/VastAds.js

@@ -1,7 +1,7 @@
 import { $, Browser, Events, HTML5Video, Log, UICorePlugin, Utils, } from '@clappr/core';
 import { reportError } from '@gcorevideo/utils';
 import assert from 'assert';
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import RollManager from './rollmanager.js';
 import SCTEManager from './sctemanager.js';
 import { VolumeFadeEvents } from '../volume-fade/VolumeFade.js';
@@ -604,7 +604,7 @@ export class VastAds extends UICorePlugin {
         setTimeout(async () => {
             if (currentRoll === 'scteroll') {
                 this.options.mute = this.core.options.mute;
-                this.core.mediaControl.setMuted(this.core.options.mute);
+                this.setMuted(this.core.options.mute);
                 this.core.mediaControl.setInitialVolume();
             }
             // this.adTemplates = null;
@@ -659,7 +659,7 @@ export class VastAds extends UICorePlugin {
                 }
                 await this.playback?.play();
                 this.options.mute = this.core.options.mute;
-                this.core.mediaControl.setMuted(this.core.options.mute);
+                this.setMuted(this.core.options.mute);
                 this.core.mediaControl.setInitialVolume();
             }
         }, 0);
@@ -683,4 +683,7 @@ export class VastAds extends UICorePlugin {
         this._adContainer = this._$adContainer[0];
         return this;
     }
+    setMuted(muted) {
+        this.core.activeContainer.options.mute = muted;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.19.11",
+  "version": "2.19.13",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",
@@ -36,6 +36,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@sinonjs/fake-timers": "^14.0.0",
+    "@types/assert": "^1.5.11",
     "@types/human-format": "^1.0.3",
     "@types/mousetrap": "^1.6.15",
     "@types/node": "^22.10.1",

package/src/Player.ts

@@ -353,6 +353,8 @@ export class Player {
 
   private initPlayer(coreOptions: CoreOptions): void {
     trace(`${T} initPlayer`, {
+      autoPlay: coreOptions.autoPlay,
+      sources: coreOptions.sources,
       // TODO selected options
     })
 
@@ -372,12 +374,7 @@ export class Player {
       null,
     )
     if (this.config.autoPlay) {
-      trace(`${T} autoPlay`)
-      setTimeout(() => {
-        this.player?.play({
-          autoPlay: true,
-        })
-      }, 0)
+      this.triggerAutoPlay()
     }
     try {
       this.emitter.emit(PlayerEvent.Ready)
@@ -386,6 +383,15 @@ export class Player {
     }
   }
 
+  private triggerAutoPlay() {
+    trace(`${T} triggerAutoPlay`)
+    setTimeout(() => {
+      this.player?.play({
+        autoPlay: true,
+      })
+    }, 0)
+  }
+
   private safeTriggerEvent<E extends PlayerEvent>(event: E, ...args: PlayerEventParams<E>) {
     try {
       this.emitter.emit(event, ...args)
@@ -441,7 +447,6 @@ export class Player {
 
     const coreOptions: CoreOptions & PluginOptions = $.extend(true, {
       allowUserInteraction: true,
-      autoPlay: false,
       debug: 'none',
       events: this.events,
       height: rootNode.clientHeight,
@@ -457,9 +462,10 @@ export class Player {
       },
       parent: rootNode,
       width: rootNode.clientWidth,
-      source: source ? source.source : undefined,
-      mimeType: source ? source.mimeType : undefined,
     }, this.config, {
+      autoPlay: false,
+      mimeType: source ? source.mimeType : undefined,
+      source: source ? source.source : undefined,
       sources,
     })
     return coreOptions

package/src/__tests__/Player.test.ts

@@ -146,86 +146,25 @@ describe('Player', () => {
           expect(PlayerClappr).toHaveBeenCalledWith(
             expect.objectContaining({
               source,
+              // TODO sources
             }),
           )
         })
       },
     )
   })
+  describe('autoPlay', () => {
+    describe('initially', () => {
+      it('should reset to false', () => {
+        const player = new Player({autoPlay: true, sources: []})
+        const node = document.createElement('div')
+        player.attachTo(node)
+        expect(PlayerClappr).toHaveBeenCalledWith(
+          expect.objectContaining({
+            autoPlay: false,
+          }),
+        )
+      })
+    })
+  })
 })
-
-class MockPlayback extends EventLite {
-  constructor(
-    protected options: any,
-    readonly i18n: any,
-    protected playerError?: any,
-  ) {
-    super()
-  }
-
-  get name() {
-    return 'mock'
-  }
-
-  consent() {}
-
-  play() {}
-
-  pause() {}
-
-  stop() {}
-
-  destroy() {}
-
-  seek() {}
-
-  seekPercentage() {}
-
-  getDuration() {
-    return 100
-  }
-
-  enterPiP() {}
-
-  exitPiP() {}
-
-  getPlaybackType() {
-    return 'live'
-  }
-
-  getStartTimeOffset() {
-    return 0
-  }
-
-  getCurrentTime() {
-    return 0
-  }
-
-  isHighDefinitionInUse() {
-    return false
-  }
-
-  mute() {}
-
-  unmute() {}
-
-  volume() {}
-
-  configure() {}
-
-  attemptAutoPlay() {
-    return true
-  }
-
-  canAutoPlay() {
-    return true
-  }
-
-  onResize() {
-    return true
-  }
-
-  trigger(event: string, ...args: any[]) {
-    this.emit(event, ...args)
-  }
-}

package/src/plugins/audio-selector/AudioSelector.ts

@@ -6,7 +6,7 @@ import {
   Events as HlsEvents,
 } from 'hls.js';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import pluginHtml from '../../../assets/audio-selector/track-selector.ejs';
 import '../../../assets/audio-selector/style.scss';
@@ -49,7 +49,7 @@ export class AudioSelector extends UICorePlugin {
   private tracks: AudioTrackItem[] = [];
 
   get name() {
-    return 'audio_selector';
+    return 'media_control_audio_selector';
   }
 
   get supportedVersion() {

package/src/plugins/big-mute-button/BigMuteButton.ts

@@ -1,7 +1,7 @@
 import { Events, template, UICorePlugin, Utils } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import { ZeptoResult } from "../../utils/types.js";
 
 import volumeMuteIcon from '../../../assets/icons/new/volume-off.svg';
@@ -183,6 +183,7 @@ export class BigMuteButton extends UICorePlugin {
     const localVolume = Utils.Config.restore('volume');
     const volume = !isNaN(localVolume) ? localVolume : 100;
 
+    // TODO use container.setVolume() instead
     this.core.mediaControl.setVolume(volume === 0 ? 100 : volume);
 
     this.destroyBigMuteBtn(e);

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

@@ -1,7 +1,8 @@
 import { UICorePlugin, template, Events } 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';
@@ -9,30 +10,45 @@ 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 = '0.0.1';
+const VERSION = '2.19.12';
+
+const T = 'plugins.media_control_gear';
 
 /**
+ * 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
  */
 export class BottomGear extends UICorePlugin {
   private isHd = false;
 
+  /**
+   * @internal
+   */
   get name() {
-    return 'gear';
+    return 'media_control_gear';
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION };
   }
 
+  /**
+   * @internal
+   */
   static get version() {
     return VERSION;
   }
 
-  get template() {
-    return template(pluginHtml);
-  }
+  private static readonly template = template(pluginHtml)
 
+  /**
+   * @internal
+   */
   override get attributes() {
     return {
       'class': this.name,
@@ -40,47 +56,37 @@ export class BottomGear extends UICorePlugin {
     };
   }
 
+  /**
+   * @internal
+   */
   override get events() {
     return {
       'click .button-gear': 'toggleGearMenu',
     };
   }
 
-  get container() {
-    return this.core && this.core.activeContainer;
-  }
-
+  /**
+   * @internal
+   */
   override bindEvents() {
+    const mediaControl = this.core.getPlugin('media_control');
+    assert(mediaControl, 'media_control plugin is required');
+
     this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
-    this.listenTo(this.core, 'gear:refresh', this.refresh);
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hide);
+    this.listenTo(this.core, 'gear:refresh', this.refresh); // TODO use direct plugin method call
+    // this.listenTo(mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
+    this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+    this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
     this.bindContainerEvents();
   }
 
-  unBindEvents() {
-    this.stopListening(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hide);
-  }
-
   private onActiveContainerChanged() {
-    this.bindEvents();
     this.bindContainerEvents();
   }
 
   private bindContainerEvents() {
-    if (!this.container) {
-      return;
-    }
-    this.listenTo(this.container, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
-  }
-
-  reload() {
-    this.unBindEvents();
-    this.bindEvents();
+    trace(`${T} bindContainerEvents`);
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
   }
 
   private highDefinitionUpdate(isHd: boolean) {
@@ -93,33 +99,38 @@ export class BottomGear extends UICorePlugin {
     }
   }
 
+  /**
+   * @internal
+   */
   override render() {
+    const mediaControl = this.core.getPlugin('media_control');
+    assert(mediaControl, 'media_control plugin is required');
+
+    // TODO use options.mediaControl.gear.items
     const items = [
       'quality',
       'rate',
       'nerd',
     ];
-
     const icon = this.isHd ? gearHdIcon : gearIcon;
+    this.$el.html(BottomGear.template({ icon, items }));
 
-    this.$el.html(this.template({ icon, items }));
-
-    this.core.mediaControl.$bottomGear?.html(this.el);
-    this.core.trigger('gear:rendered');
+    mediaControl.getElement('bottomGear')?.html(this.el);
+    this.core.trigger('gear:rendered'); // TODO trigger on mediaControl instead
 
     return this;
   }
 
-  refresh() {
+  private refresh() {
     this.render();
     this.$el.find('.gear-wrapper').show();
   }
 
-  toggleGearMenu() {
+  private toggleGearMenu() {
     this.$el.find('.gear-wrapper').toggle();
   }
 
-  hide() {
+  private hide() {
     this.$el.find('.gear-wrapper').hide();
   }
 }

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

@@ -2,7 +2,7 @@ import { UICorePlugin, Events, template, Core, Container } from '@clappr/core';
 import { reportError } from '@gcorevideo/utils';
 import Mousetrap from 'mousetrap';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import { ClapprStatsEvents, Metrics as BaseMetrics } from '../clappr-stats/types.js';
 import { newMetrics as newBaseMetrics } from '../clappr-stats/utils.js';
 import Formatter from './formatter.js';
@@ -125,7 +125,7 @@ export class ClapprNerdStats extends UICorePlugin {
   private iconPosition: IconPosition;
 
   get name() {
-    return 'clappr_nerd_stats';
+    return 'media_control_nerd_stats';
   }
 
   get supportedVersion() {
@@ -181,6 +181,7 @@ export class ClapprNerdStats extends UICorePlugin {
 
   override bindEvents() {
     this.listenToOnce(this.core, Events.CORE_READY, this.init);
+    // TODO trigger on mediaControl instead
     this.listenTo(this.core, 'gear:rendered', this.addToBottomGear);
   }
 

package/src/plugins/clappr-stats/ClapprStats.ts

@@ -2,7 +2,7 @@ import { Container, ContainerPlugin, Events as CoreEvents, Log } from '@clappr/c
 import type { QualityLevel, TimePosition, TimeProgress } from '../../playback.types.js';
 import assert from 'assert';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 import { TimerId } from '../../utils/types.js';
 import type { Metrics, MetricsUpdateFn } from './types.js';
 import { ClapprStatsEvents } from './types.js';

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

@@ -5,7 +5,7 @@
 import { ContainerPlugin, Events, Playback } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 // const VERSION = '0.0.1';
 

package/src/plugins/clips/Clips.ts

@@ -29,7 +29,7 @@ export class ClipsPlugin extends UICorePlugin {
   private svgMask: ZeptoResult | null = null;
 
   get name() {
-    return 'clips';
+    return 'media_control_clips';
   }
 
   override get attributes() {
@@ -154,7 +154,7 @@ export class ClipsPlugin extends UICorePlugin {
   }
 
   private setSVGMask(svg: string) {
-    this.core.mediaControl.setSVGMask(svg);
+    // this.core.mediaControl.setSVGMask(svg);
     if (this.svgMask) {
       this.svgMask.remove()
     }

package/src/plugins/context-menu/ContextMenu.ts

@@ -1,6 +1,6 @@
 import { UICorePlugin, Events, template, $, Core, Container } from '@clappr/core';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 import '../../../assets/context-menu/context_menu.scss';
 import templateHtml from '../../../assets/context-menu/context_menu.ejs';

package/src/plugins/disable-controls/DisableControls.ts

@@ -1,6 +1,6 @@
 import { UICorePlugin, Events } from '@clappr/core';
 
-import { CLAPPR_VERSION } from '../build.js';
+import { CLAPPR_VERSION } from '../../build.js';
 
 export class DisableControls extends UICorePlugin {
   get name() {