@gcorevideo/player 2.19.11 → 2.19.13

package/dist/index.js

@@ -12459,7 +12459,7 @@ var PlaybackErrorCode;
 // license that can be found in the LICENSE file.
 const AUTO$2 = -1;
 const { now: now$2 } = Utils;
-const T$c = 'playback.dash';
+const T$d = 'playback.dash';
 // @ts-expect-error
 class DashPlayback extends HTML5Video {
     _levels = null;
@@ -12729,10 +12729,10 @@ class DashPlayback extends HTML5Video {
     }
     _onPlaybackError = (event) => {
         // TODO
-        trace(`${T$c} _onPlaybackError`, { event });
+        trace(`${T$d} _onPlaybackError`, { event });
     };
     _onDASHJSSError = (event) => {
-        trace(`${T$c} _onDASHJSSError`, { event });
+        trace(`${T$d} _onDASHJSSError`, { event });
         this._stopTimeUpdateTimer();
         // Note that the other error types are deprecated
         const e = event.error;
@@ -12767,7 +12767,7 @@ class DashPlayback extends HTML5Video {
         }
     };
     triggerError(error) {
-        trace(`${T$c} triggerError`, { error });
+        trace(`${T$d} triggerError`, { error });
         this.trigger(Events$1.PLAYBACK_ERROR, {
             ...error,
             origin: this.name,
@@ -12807,7 +12807,7 @@ class DashPlayback extends HTML5Video {
     }
     get dvrEnabled() {
         if (!this._dash) {
-            trace(`${T$c} dvrEnable no dash player instance`);
+            trace(`${T$d} dvrEnable no dash player instance`);
             return false;
         }
         return (this._dash?.getDVRWindowSize() >= this._minDvrSize &&
@@ -12829,7 +12829,7 @@ class DashPlayback extends HTML5Video {
         this.trigger(Events$1.PLAYBACK_PROGRESS, progress, {});
     }
     play() {
-        trace(`${T$c} play`, { dash: !!this._dash });
+        trace(`${T$d} play`, { dash: !!this._dash });
         if (!this._dash) {
             this._setup();
         }
@@ -41566,7 +41566,7 @@ Hls.defaultConfig = undefined;
 
 // assert(process.env.CLAPPR_VERSION, 'CLAPPR_VERSION is required');
 // export const CLAPPR_VERSION: string = process.env.CLAPPR_VERSION || '0.11.3';
-const CLAPPR_VERSION$1 = '0.11.3';
+const CLAPPR_VERSION = '0.11.3';
 
 // Copyright 2014 Globo.com Player authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
@@ -41576,7 +41576,7 @@ const AUTO$1 = -1;
 const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-const T$b = 'playback.hls';
+const T$c = 'playback.hls';
 // @ts-expect-error
 class HlsPlayback extends HTML5Video {
     _ccIsSetup = false;
@@ -41608,7 +41608,7 @@ class HlsPlayback extends HTML5Video {
         return 'hls';
     }
     get supportedVersion() {
-        return { min: CLAPPR_VERSION$1 };
+        return { min: CLAPPR_VERSION };
     }
     get levels() {
         return this._levels || [];
@@ -41806,7 +41806,7 @@ class HlsPlayback extends HTML5Video {
             maxBufferLength: 2,
             maxMaxBufferLength: 4,
         }, this.options.playback.hlsjsConfig);
-        trace(`${T$b} _createHLSInstance`, { config });
+        trace(`${T$c} _createHLSInstance`, { config });
         this._hls = new Hls(config);
     }
     _attachHLSMedia() {
@@ -41895,7 +41895,7 @@ class HlsPlayback extends HTML5Video {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$b} _recover failed to recover`, {
+            trace(`${T$c} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -41981,7 +41981,7 @@ class HlsPlayback extends HTML5Video {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$b} _onHLSJSError`, {
+        trace(`${T$c} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -42029,7 +42029,7 @@ class HlsPlayback extends HTML5Video {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$b} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$c} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
@@ -42042,7 +42042,7 @@ class HlsPlayback extends HTML5Video {
                             evt,
                             data,
                         });
-                        trace(`${T$b} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$c} _onHLSJSError trying to recover from media error`, {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
@@ -42072,7 +42072,7 @@ class HlsPlayback extends HTML5Video {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$b} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$c} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42400,7 +42400,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$a = 'GPlayer';
+const T$b = 'GPlayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -42495,7 +42495,7 @@ class Player {
         }
         const coreOpts = this.buildCoreOptions(playerElement);
         const { core, container } = Loader.registeredPlugins;
-        trace(`${T$a} init`, {
+        trace(`${T$b} init`, {
             registeredPlaybacks: Loader.registeredPlaybacks.map((p) => p.name),
         });
         coreOpts.plugins = {
@@ -42509,7 +42509,7 @@ class Player {
      * Destroys the player, releasing all resources and unmounting its UI from the DOM.
      */
     destroy() {
-        trace(`${T$a} destroy`, {
+        trace(`${T$b} destroy`, {
             player: !!this.player,
         });
         if (this.player) {
@@ -42669,8 +42669,10 @@ class Player {
         this.config = $.extend(true, this.config, config);
     }
     initPlayer(coreOptions) {
-        trace(`${T$a} initPlayer`, {
-        // TODO selected options
+        trace(`${T$b} initPlayer`, {
+            autoPlay: coreOptions.autoPlay,
+            sources: coreOptions.sources,
+            // TODO selected options
         });
         assert.ok(!this.player, 'Player already initialized');
         const player = new Player$1(coreOptions);
@@ -42682,12 +42684,7 @@ class Player {
         this.bindContainerEventListeners();
         this.player.core.on(Events$1.CORE_ACTIVE_CONTAINER_CHANGED, () => this.bindContainerEventListeners(), null);
         if (this.config.autoPlay) {
-            trace(`${T$a} autoPlay`);
-            setTimeout(() => {
-                this.player?.play({
-                    autoPlay: true,
-                });
-            }, 0);
+            this.triggerAutoPlay();
         }
         try {
             this.emitter.emit(PlayerEvent.Ready);
@@ -42696,6 +42693,14 @@ class Player {
             reportError(e);
         }
     }
+    triggerAutoPlay() {
+        trace(`${T$b} triggerAutoPlay`);
+        setTimeout(() => {
+            this.player?.play({
+                autoPlay: true,
+            });
+        }, 0);
+    }
     safeTriggerEvent(event, ...args) {
         try {
             this.emitter.emit(event, ...args);
@@ -42707,7 +42712,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$a} onReady`, {
+            trace(`${T$b} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -42741,14 +42746,13 @@ class Player {
     buildCoreOptions(rootNode) {
         const sources = this.buildMediaSourcesList();
         const source = sources[0];
-        trace(`${T$a} buildCoreOptions`, {
+        trace(`${T$b} buildCoreOptions`, {
             source,
             sources,
         });
         this.rootNode = rootNode;
         const coreOptions = $.extend(true, {
             allowUserInteraction: true,
-            autoPlay: false,
             debug: 'none',
             events: this.events,
             height: rootNode.clientHeight,
@@ -42764,9 +42768,10 @@ 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;
@@ -42800,7 +42805,7 @@ class Player {
     bindCoreListeners() {
         const core = this.player?.core;
         core?.on(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, ({ orientation }) => {
-            trace(`${T$a} on CORE_SCREEN_ORIENTATION_CHANGED`, {
+            trace(`${T$b} on CORE_SCREEN_ORIENTATION_CHANGED`, {
                 orientation,
                 rootNode: {
                     width: this.rootNode?.clientWidth,
@@ -42815,14 +42820,14 @@ class Player {
             }
         }, null);
         core?.on(Events$1.CORE_RESIZE, ({ width, height }) => {
-            trace(`${T$a} on CORE_RESIZE`, {
+            trace(`${T$b} on CORE_RESIZE`, {
                 width,
                 height,
             });
             this.safeTriggerEvent(PlayerEvent.Resize, { width, height });
         }, null);
         core?.on(Events$1.CORE_FULLSCREEN, (isFullscreen) => {
-            trace(`${T$a} CORE_FULLSCREEN`, {
+            trace(`${T$b} CORE_FULLSCREEN`, {
                 isFullscreen,
             });
             this.safeTriggerEvent(PlayerEvent.Fullscreen, isFullscreen);
@@ -42830,7 +42835,7 @@ class Player {
     }
 }
 
-var version$1 = "2.19.11";
+var version$1 = "2.19.13";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -42854,8 +42859,6 @@ function version() {
     };
 }
 
-const CLAPPR_VERSION = '0.11.3';
-
 const pluginHtml$8 = "<button data-track-selector-button class='gcore-skin-button-color'>\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"></span>\n</button>\n<ul class='gcore-skin-bg-color'>\n    <% for (var i = 0; i < tracks.length; i++) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-track-selector-select=\"<%= tracks[i].id %>\">\n                <%= tracks[i].label || tracks[i].name %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
 
 const audioArrow = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"9px\" height=\"6px\" viewBox=\"0 0 9 6\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n     xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->\n  <title>quality-arrow</title>\n  <desc>Created with Sketch.</desc>\n  <defs></defs>\n  <g id=\"quality-arrow\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n    <path\n      d=\"M5.07079194,5.78553848 C4.91457318,5.94277844 4.70551573,6.00941824 4.50028717,5.99893557 C4.2950586,6.00941824 4.08676693,5.94277844 3.92978239,5.78553848 L0.221118462,1.2997069 C-0.0737061539,1.00469478 -0.0737061539,0.526236029 0.221118462,0.231972666 C0.515177299,-0.0630394586 1.23500883,0.00734414472 1.64852907,0.00734414472 L7.77475484,0.00734414472 C8.21201421,0.00734414472 8.48539703,-0.0630394586 8.77945587,0.231972666 C9.07351471,0.526236029 9.07351471,1.00469478 8.77945587,1.2997069 L5.07079194,5.78553848 Z\"\n      fill=\"#FFFFFE\"></path>\n  </g>\n</svg>\n";
@@ -42871,7 +42874,7 @@ class AudioSelector extends UICorePlugin {
     currentTrack = null;
     tracks = [];
     get name() {
-        return 'audio_selector';
+        return 'media_control_audio_selector';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -43138,7 +43141,7 @@ const volumeOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fil
 
 const pluginHtml$7 = "<div class=\"big-mute-icon-wrapper\" data-big-mute>\n    <div class=\"big-mute-icon gcore-skin-border-color\" data-big-mute-icon></div>\n</div>\n";
 
-const T$9 = "plugins.big_mute_button";
+const T$a = "plugins.big_mute_button";
 /**
  * @beta
  */
@@ -43167,7 +43170,7 @@ class BigMuteButton extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
         this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
         this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
-        trace(`${T$9} bindEvents`, {
+        trace(`${T$a} bindEvents`, {
             mediacontrol: !!this.core.mediaControl,
         });
         this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mediaControlRendered);
@@ -43203,12 +43206,12 @@ class BigMuteButton extends UICorePlugin {
     }
     mediaControlRendered() {
         const container = this.core.activeContainer;
-        trace(`${T$9} mediaControlRendered`, {
+        trace(`${T$a} mediaControlRendered`, {
             container: !!container,
         });
         if (container) {
             this.listenTo(container.playback, Events$1.PLAYBACK_PLAY, () => {
-                trace(`${T$9} PLAYBACK_PLAY`);
+                trace(`${T$a} PLAYBACK_PLAY`);
                 this.render();
             });
         }
@@ -43232,7 +43235,7 @@ class BigMuteButton extends UICorePlugin {
         }
         const { autoPlay, wasMuted } = this.options;
         const volume = container.volume;
-        trace(`${T$9} shouldRender`, {
+        trace(`${T$a} shouldRender`, {
             autoPlay,
             wasMuted,
             volume,
@@ -43241,7 +43244,7 @@ class BigMuteButton extends UICorePlugin {
     }
     render() {
         if (this.shouldRender()) {
-            trace(`${T$9} render`, {
+            trace(`${T$a} render`, {
                 el: !!this.$el,
             });
             this.$el.html(this.template());
@@ -43274,6 +43277,7 @@ class BigMuteButton extends UICorePlugin {
     handleBigMuteBtnClick(e) {
         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);
     }
@@ -43285,65 +43289,71 @@ const gearIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"n
 
 const gearHdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g clip-path=\"url(#clip0_28_1567)\">\n    <path\n      d=\"M19.14 12.94C19.18 12.64 19.2 12.33 19.2 12C19.2 11.68 19.18 11.36 19.13 11.06L21.16 9.47999C21.34 9.33999 21.39 9.06999 21.28 8.86999L19.36 5.54999C19.24 5.32999 18.99 5.25999 18.77 5.32999L16.38 6.28999C15.88 5.90999 15.35 5.58999 14.76 5.34999L14.4 2.80999C14.36 2.56999 14.16 2.39999 13.92 2.39999H10.08C9.83999 2.39999 9.64999 2.56999 9.60999 2.80999L9.24999 5.34999C8.65999 5.58999 8.11999 5.91999 7.62999 6.28999L5.23999 5.32999C5.01999 5.24999 4.76999 5.32999 4.64999 5.54999L2.73999 8.86999C2.61999 9.07999 2.65999 9.33999 2.85999 9.47999L4.88999 11.06C4.83999 11.36 4.79999 11.69 4.79999 12C4.79999 12.31 4.81999 12.64 4.86999 12.94L2.83999 14.52C2.65999 14.66 2.60999 14.93 2.71999 15.13L4.63999 18.45C4.75999 18.67 5.00999 18.74 5.22999 18.67L7.61999 17.71C8.11999 18.09 8.64999 18.41 9.23999 18.65L9.59999 21.19C9.64999 21.43 9.83999 21.6 10.08 21.6H13.92C14.16 21.6 14.36 21.43 14.39 21.19L14.75 18.65C15.34 18.41 15.88 18.09 16.37 17.71L18.76 18.67C18.98 18.75 19.23 18.67 19.35 18.45L21.27 15.13C21.39 14.91 21.34 14.66 21.15 14.52L19.14 12.94ZM12 15.6C10.02 15.6 8.39999 13.98 8.39999 12C8.39999 10.02 10.02 8.39999 12 8.39999C13.98 8.39999 15.6 10.02 15.6 12C15.6 13.98 13.98 15.6 12 15.6Z\"\n      fill=\"#C9C9C9\"/>\n    <rect x=\"13\" width=\"11\" height=\"7\" rx=\"1\" fill=\"#F6413B\"/>\n    <path\n      d=\"M14.6962 6V1.63636H15.3546V3.53267H17.53V1.63636H18.1905V6H17.53V4.0973H15.3546V6H14.6962ZM20.562 6H19.1493V1.63636H20.6067C21.0343 1.63636 21.4015 1.72372 21.7083 1.89844C22.0151 2.07173 22.2502 2.32102 22.4135 2.64631C22.5783 2.97017 22.6607 3.35866 22.6607 3.81179C22.6607 4.26634 22.5776 4.65696 22.4114 4.98366C22.2466 5.31037 22.008 5.56179 21.6955 5.73793C21.383 5.91264 21.0051 6 20.562 6ZM19.8077 5.42472H20.5257C20.8581 5.42472 21.1344 5.36222 21.3546 5.23722C21.5748 5.1108 21.7395 4.92827 21.8489 4.68963C21.9583 4.44957 22.013 4.15696 22.013 3.81179C22.013 3.46946 21.9583 3.17898 21.8489 2.94034C21.7409 2.7017 21.5797 2.5206 21.3652 2.39702C21.1507 2.27344 20.8844 2.21165 20.5662 2.21165H19.8077V5.42472Z\"\n      fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_28_1567\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
 
-const VERSION$5 = '0.0.1';
+const VERSION$5 = '2.19.12';
+const T$9 = '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
  */
 class BottomGear extends UICorePlugin {
     isHd = false;
+    /**
+     * @internal
+     */
     get name() {
-        return 'gear';
+        return 'media_control_gear';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
+    /**
+     * @internal
+     */
     static get version() {
         return VERSION$5;
     }
-    get template() {
-        return tmpl(pluginHtml$6);
-    }
+    static template = tmpl(pluginHtml$6);
+    /**
+     * @internal
+     */
     get attributes() {
         return {
             'class': this.name,
             'data-track-selector': ''
         };
     }
+    /**
+     * @internal
+     */
     get events() {
         return {
             'click .button-gear': 'toggleGearMenu',
         };
     }
-    get container() {
-        return this.core && this.core.activeContainer;
-    }
+    /**
+     * @internal
+     */
     bindEvents() {
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
-        this.listenTo(this.core, 'gear:refresh', this.refresh);
-        this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-        this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
-        this.listenTo(this.core.mediaControl, Events$1.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$1.MEDIACONTROL_RENDERED, this.render);
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
         this.bindContainerEvents();
     }
-    unBindEvents() {
-        this.stopListening(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
-        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
-        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_HIDE, this.hide);
-    }
     onActiveContainerChanged() {
-        this.bindEvents();
         this.bindContainerEvents();
     }
     bindContainerEvents() {
-        if (!this.container) {
-            return;
-        }
-        this.listenTo(this.container, Events$1.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
-    }
-    reload() {
-        this.unBindEvents();
-        this.bindEvents();
+        trace(`${T$9} bindContainerEvents`);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
     }
     highDefinitionUpdate(isHd) {
         trace(`${this.name} highDefinitionUpdate`, { isHd });
@@ -43355,16 +43365,22 @@ class BottomGear extends UICorePlugin {
             this.$el.find('.gear-icon').html(gearIcon);
         }
     }
+    /**
+     * @internal
+     */
     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(this.template({ icon, items }));
-        this.core.mediaControl.$bottomGear?.html(this.el);
-        this.core.trigger('gear:rendered');
+        this.$el.html(BottomGear.template({ icon, items }));
+        mediaControl.getElement('bottomGear')?.html(this.el);
+        this.core.trigger('gear:rendered'); // TODO trigger on mediaControl instead
         return this;
     }
     refresh() {
@@ -45533,7 +45549,7 @@ class ClapprNerdStats extends UICorePlugin {
     shortcut;
     iconPosition;
     get name() {
-        return 'clappr_nerd_stats';
+        return 'media_control_nerd_stats';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -45579,6 +45595,7 @@ class ClapprNerdStats extends UICorePlugin {
     }
     bindEvents() {
         this.listenToOnce(this.core, Events$1.CORE_READY, this.init);
+        // TODO trigger on mediaControl instead
         this.listenTo(this.core, 'gear:rendered', this.addToBottomGear);
     }
     init() {
@@ -46205,7 +46222,7 @@ class ClipsPlugin extends UICorePlugin {
     _oldContainer;
     svgMask = null;
     get name() {
-        return 'clips';
+        return 'media_control_clips';
     }
     get attributes() {
         return {
@@ -46305,7 +46322,7 @@ class ClipsPlugin extends UICorePlugin {
         this.setSVGMask(svg);
     }
     setSVGMask(svg) {
-        this.core.mediaControl.setSVGMask(svg);
+        // this.core.mediaControl.setSVGMask(svg);
         if (this.svgMask) {
             this.svgMask.remove();
         }
@@ -46494,21 +46511,39 @@ class DisableControls extends UICorePlugin {
 
 const dvrHTML = "<div class=\"live-info\"><%= live %></div>\n<button type=\"button\" class=\"live-button\" aria-label=\"<%= backToLive %>\"><%= backToLive %></button>\n";
 
+/**
+ * Adds the DVR controls to the media control UI
+ * @beta
+ *
+ * @remarks
+ * The plugin is rendered in the {@link MediaControl | media control} UI.
+ * It renders the live stream indicator and the DVR seek bar if DVR is enabled.
+ */
 class DvrControls extends UICorePlugin {
-    get template() {
-        return tmpl(dvrHTML);
-    }
+    static template = tmpl(dvrHTML);
+    /**
+     * @internal
+     */
     get name() {
-        return 'dvr_controls';
+        return 'media_control_dvr';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
+    /**
+     * @internal
+     */
     get events() {
         return {
             'click .live-button': 'click'
         };
     }
+    /**
+     * @internal
+     */
     get attributes() {
         return {
             'class': 'dvr-controls',
@@ -46519,6 +46554,9 @@ class DvrControls extends UICorePlugin {
         super(core);
         this.settingsUpdate();
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         this.bindCoreEvents();
         this.bindContainerEvents();
@@ -46566,8 +46604,8 @@ class DvrControls extends UICorePlugin {
         }
     }
     click() {
-        const mediaControl = this.core.mediaControl;
-        const container = mediaControl.container;
+        const mediaControl = this.core.getPlugin('media_control');
+        const container = this.core.activeContainer;
         if (!container.isPlaying()) {
             container.play();
         }
@@ -46577,7 +46615,7 @@ class DvrControls extends UICorePlugin {
     }
     settingsUpdate() {
         // @ts-ignore
-        this.stopListening();
+        this.stopListening(); // TODO sort out
         this.core.mediaControl.$el.removeClass('live');
         if (this.shouldRender()) {
             this.render();
@@ -46589,14 +46627,20 @@ class DvrControls extends UICorePlugin {
         const useDvrControls = this.core.options.useDvrControls === undefined || !!this.core.options.useDvrControls;
         return useDvrControls && this.core.getPlaybackType() === Playback.LIVE;
     }
+    /**
+     * @internal
+     */
     render() {
-        this.$el.html(this.template({
+        this.$el.html(DvrControls.template({
             live: this.core.i18n.t('live'),
             backToLive: this.core.i18n.t('back_to_live')
         }));
         if (this.shouldRender()) {
-            this.core.mediaControl.$el.addClass('live');
-            this.core.mediaControl.$('.media-control-left-panel[data-media-control]').append(this.$el);
+            const mediaControl = this.core.mediaControl;
+            assert(mediaControl, 'media_control plugin is required');
+            // TODO don't tap into the $el directly
+            mediaControl.$el.addClass('live');
+            mediaControl.$('.media-control-left-panel[data-media-control]').append(this.$el);
         }
         return this;
     }
@@ -46762,6 +46806,7 @@ class ErrorScreen extends UICorePlugin {
         if (err) {
             this.err = err;
         }
+        // TODO use container.disableMediaControl() instead
         this.core.mediaControl.disable();
         this.render();
         this.$el.show();
@@ -47211,29 +47256,30 @@ const arrowLeftIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fil
 
 const checkIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n        d=\"M20.5793 4.19296C20.1216 3.86696 19.4777 3.96396 19.1424 4.40896L9.37295 17.3809L4.81634 12.107C4.45222 11.683 3.80218 11.6289 3.36709 11.9839C2.932 12.3389 2.87543 12.97 3.2416 13.393L8.64165 19.643C8.83708 19.869 9.12506 20 9.42849 20C9.4398 20 9.45114 20 9.46246 19.999C9.77926 19.989 10.0724 19.838 10.2586 19.59L20.8015 5.58996C21.1368 5.14496 21.0371 4.51896 20.5793 4.19296Z\"\n        fill=\"#C9C9C9\"/>\n</svg>\n";
 
-const T$6 = 'plugins.level_selector';
+const T$6 = 'plugins.media_control_level_selector';
 const VERSION$4 = '2.19.4';
 /**
- * Allows to control the quality level of the playback.
+ * 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 gear menu.
+ * The plugin is rendered as a button in the {@link BottomGear | gear menu}.
  * When clicked, it shows a list of quality levels to choose from.
  *
  * Configuration options:
  *
- * - `labels`: The labels to show in the level selector. [vertical resolution]: string
+ * - `labels`: The labels to show in the level selector. [video resolution]: string
+ *
  * - `restrictResolution`: The maximum resolution to allow in the level selector.
  *
  * @example
  * ```ts
- * {
+ * new Player({
  *   levelSelector: {
  *     restrictResolution: 360,
- *     labels: { 360: '360p', 720: '720p' },
+ *     labels: { 360: 'SD', 720: 'HD' },
  *   },
- * }
+ * })
  * ```
  */
 class LevelSelector extends UICorePlugin {
@@ -47244,15 +47290,27 @@ class LevelSelector extends UICorePlugin {
     isOpen = false;
     buttonTemplate = null;
     listTemplate = null;
+    /**
+     * @internal
+     */
     get name() {
-        return 'level_selector';
+        return 'media_control_level_selector';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
+    /**
+     * @internal
+     */
     static get version() {
         return VERSION$4;
     }
+    /**
+     * @internal
+     */
     get attributes() {
         return {
             class: this.name,
@@ -47268,6 +47326,9 @@ class LevelSelector extends UICorePlugin {
             'click .go-back': 'goBack',
         };
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, () => this.bindPlaybackEvents());
         this.listenTo(this.core, 'gear:rendered', this.render);
@@ -47316,6 +47377,9 @@ class LevelSelector extends UICorePlugin {
         // Only care if we have at least 2 to choose from
         return !!(this.levels && this.levels.length > 1);
     }
+    /**
+     * @internal
+     */
     render() {
         if (!this.shouldRender()) {
             return this;
@@ -47335,9 +47399,10 @@ class LevelSelector extends UICorePlugin {
                 hdIcon,
             });
             this.$el.html(html);
-            this.core.mediaControl.$el
+            const mediaControl = this.core.getPlugin('media_control');
+            mediaControl.getElement('bottomGear')
                 ?.find('.gear-options-list [data-quality]')
-                .html(this.el);
+                ?.html(this.el);
         }
     }
     renderDropdown() {
@@ -47353,7 +47418,8 @@ class LevelSelector extends UICorePlugin {
             removeAuto: this.removeAuto,
         });
         this.$el.html(html);
-        this.core.mediaControl.$el?.find('.gear-wrapper').html(this.el);
+        const mediaControl = this.core.getPlugin('media_control');
+        mediaControl.getElement('bottomGear')?.find('.gear-wrapper').html(this.el);
     }
     get maxLevel() {
         const maxRes = this.core.options.levelSelector?.restrictResolution;
@@ -47719,11 +47785,17 @@ function orderByOrderPattern(arr, order) {
     return [...ordered, ...rest];
 }
 /**
- * The MediaControl is responsible for displaying the Player controls.
+ * The MediaControl provides a foundation for developing custom media controls UI.
  * @beta
  * @remarks
- * This plugin provides a foundation for developing a media controls UI via additional plugins.
  * The methods exposed are to be used by the other plugins that extend the media control UI.
+ * The plugin registration should be arranged so that MediaControl is initialized before every other plugin that depends on it.
+ * @example
+ * ```ts
+ * Player.registerPlugin(MediaControl) // <--- This must go first
+ * Player.registerPlugin(LevelSelector) // a media control plugin
+ * Player.registerPlugin(NerdStats) // another media control plugin
+ * ```
  */
 class MediaControl extends UICorePlugin {
     advertisementPlaying = false;
@@ -47749,7 +47821,6 @@ class MediaControl extends UICorePlugin {
     persistConfig;
     rendered = false;
     settings = {};
-    svgMask = null;
     userDisabled = false;
     userKeepVisible = false;
     verticalVolume = false;
@@ -47778,9 +47849,15 @@ class MediaControl extends UICorePlugin {
     $volumeContainer = null;
     $volumeIcon = null;
     static template = tmpl(mediaControlHTML);
+    /**
+     * @internal
+     */
     get name() {
         return 'media_control';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
@@ -47788,18 +47865,32 @@ class MediaControl extends UICorePlugin {
         const playbackIsNOOP = this.container && this.container.getPlaybackType() === Playback.NO_OP;
         return this.userDisabled || playbackIsNOOP;
     }
+    /**
+     * @internal
+     * @deprecated
+     */
     get container() {
         return this.core && this.core.activeContainer;
     }
+    /**
+     * @internal
+     * @deprecated
+     */
     get playback() {
         return this.core && this.core.activePlayback;
     }
+    /**
+     * @internal
+     */
     get attributes() {
         return {
             class: 'media-control-skin-1',
             'data-media-control-skin-1': '',
         };
     }
+    /**
+     * @internal
+     */
     get events() {
         return {
             'click [data-play]': 'play',
@@ -47830,11 +47921,11 @@ class MediaControl extends UICorePlugin {
         };
     }
     /**
-     * Current volume
+     * Current volume [0..100]
      */
     get volume() {
-        return this.container && this.container.isReady
-            ? this.container.volume
+        return this.core.activeContainer.isReady
+            ? this.core.activeContainer.volume
             : this.intendedVolume;
     }
     /**
@@ -47850,7 +47941,7 @@ class MediaControl extends UICorePlugin {
         this.kibo = new Kibo(this.options.focusElement);
         this.bindKeyEvents();
         this.userDisabled = false;
-        if ((this.container && this.container.mediaControlDisabled) ||
+        if (this.core.activeContainer.mediaControlDisabled ||
             this.options.chromeless) {
             this.disable();
         }
@@ -47859,12 +47950,18 @@ class MediaControl extends UICorePlugin {
         $(document).bind('touchend', this.stopDrag);
         $(document).bind('touchmove', this.updateDrag);
     }
+    /**
+     * @internal
+     */
     getExternalInterface() {
         return {
             setVolume: this.setVolume,
             getVolume: () => this.volume,
         };
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         // @ts-ignore
         this.stopListening();
@@ -47920,12 +48017,18 @@ class MediaControl extends UICorePlugin {
             this.listenToOnce(this.container, Events$1.CONTAINER_LOADEDMETADATA, this.onLoadedMetadataOnVideoTag);
         }
     }
+    /**
+     * Disables the plugin and unmounts its UI
+     */
     disable() {
         this.userDisabled = true;
         this.hide();
         this.unbindKeyEvents();
         this.$el.hide();
     }
+    /**
+     * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
+     */
     enable() {
         if (this.options.chromeless) {
             return;
@@ -47934,24 +48037,6 @@ class MediaControl extends UICorePlugin {
         this.bindKeyEvents();
         this.show();
     }
-    /**
-     * Start the playback
-     */
-    play() {
-        this.container && this.container.play();
-    }
-    /**
-     * Pause the playback
-     */
-    pause() {
-        this.container && this.container.pause();
-    }
-    /**
-     * Stop the playback
-     */
-    stop() {
-        this.container && this.container.stop();
-    }
     /**
      * Set the initial volume, which is preserved when playback is interrupted by an advertisement
      */
@@ -48450,14 +48535,31 @@ class MediaControl extends UICorePlugin {
     /**
      * Get a media control element DOM node
      * @param name - The name of the media control element
-     * @returns The DOM node to render the media control element
+     * @returns The DOM node to render to or extend
+     * @remarks
+     * Use this method to render custom media control UI in a plugin
+     * @example
+     * ```ts
+     * class MyPlugin extends UICorePlugin {
+     *   override render() {
+     *     const mediaControl = this.core.getPlugin('media_control')
+     *     const clipText = mediaControl.getElement('clipText')
+     *     clipText?.el.text('Here we go')
+     *     return this
+     *   }
+     * }
+     * ```
      */
     getElement(name) {
         switch (name) {
             case 'clipText':
                 return this.$clipText;
+            case 'bottomGear':
+                return this.$bottomGear;
             case 'pip':
                 return this.$pip;
+            case 'playbackRate':
+                return this.$playbackRate;
             case 'seekBarContainer':
                 return this.$seekBarContainer;
         }
@@ -48591,6 +48693,9 @@ class MediaControl extends UICorePlugin {
             element &&
             $(element).find('svg path').css({ fill: this.buttonsColor });
     }
+    /**
+     * @internal
+     */
     destroy() {
         $(document).unbind('mouseup', this.stopDrag);
         $(document).unbind('mousemove', this.updateDrag);
@@ -48603,6 +48708,9 @@ class MediaControl extends UICorePlugin {
         this.advertisementPlaying ? this.disable() : this.enable();
         this.trigger(Events$1.MEDIACONTROL_OPTIONS_CHANGE);
     }
+    /**
+     * @internal
+     */
     render() {
         const timeout = this.options.hideMediaControlDelay || 2000;
         const html = MediaControl.template({ settings: this.settings ?? {} });
@@ -48690,10 +48798,6 @@ class MediaControl extends UICorePlugin {
             this.hide();
         }
     }
-    // TODO
-    setMuted(value) {
-        this.container.options.mute = value;
-    }
     static getPageX(event) {
         return getPageX(event);
     }
@@ -48707,7 +48811,7 @@ class MediaControl extends UICorePlugin {
         return 0;
     }
     /**
-     * Enable the control button
+     * Enable the user interaction disabled earlier
      */
     enableControlButton() {
         this.disabledClickableList.forEach((element) => {
@@ -48715,7 +48819,7 @@ class MediaControl extends UICorePlugin {
         });
     }
     /**
-     * Disable the control button
+     * Disable the user interaction for the control buttons
      */
     disabledControlButton() {
         this.disabledClickableList.forEach((element) => {
@@ -48729,7 +48833,6 @@ class MediaControl extends UICorePlugin {
         return isFinite(this.core.activePlayback.getDuration());
     }
 }
-// TODO drop?
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
 };
@@ -48743,7 +48846,7 @@ const streamsMomentoIcon = "<svg id=\"Слой_1\" data-name=\"Слой 1\" xmln
 const streamsWhiteNightsIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"50\" height=\"50\" viewBox=\"0 0 50 50\">\n  <defs>\n    <clipPath id=\"clip-Icon\">\n      <rect width=\"50\" height=\"50\"/>\n    </clipPath>\n  </defs>\n  <g id=\"Icon\" clip-path=\"url(#clip-Icon)\">\n    <g id=\"icon2\" transform=\"translate(-0.041 0)\">\n      <path id=\"Контур_77\" data-name=\"Контур 77\" d=\"M6.493,13v8.266h6.275V19.74H8.31V17.714h4.006V16.3H8.31V14.53h4.365V13Zm7.5,0v8.266h1.7V15.732h.023l3.438,5.534h1.818V13h-1.7v5.545h-.023L15.8,13Z\" fill=\"#fff\"/>\n      <path id=\"Контур_76\" data-name=\"Контур 76\" d=\"M29.949,29.1V26.774H31.94a1.4,1.4,0,0,1,.938.272,1.1,1.1,0,0,1,.313.874,1.155,1.155,0,0,1-.313.9,1.375,1.375,0,0,1-.938.278ZM28.132,25.36v8.266h1.817V30.4h1.818a1.353,1.353,0,0,1,.984.3,1.637,1.637,0,0,1,.394.949c.046.333.079.681.1,1.042a3.2,3.2,0,0,0,.185.938h1.819a1.218,1.218,0,0,1-.191-.423,3.611,3.611,0,0,1-.093-.527c-.019-.185-.033-.367-.041-.544s-.016-.332-.023-.463a5.052,5.052,0,0,0-.087-.625,2.109,2.109,0,0,0-.2-.573,1.586,1.586,0,0,0-.359-.451,1.414,1.414,0,0,0-.556-.284v-.023a1.926,1.926,0,0,0,1-.81,2.494,2.494,0,0,0,.307-1.262,2.308,2.308,0,0,0-.165-.88,2.128,2.128,0,0,0-.486-.724,2.3,2.3,0,0,0-.764-.492,2.67,2.67,0,0,0-1-.179ZM43.506,30.5V25.36H41.689V30.5a2.065,2.065,0,0,1-.37,1.36,1.7,1.7,0,0,1-1.343.434,2.086,2.086,0,0,1-.886-.156,1.283,1.283,0,0,1-.758-.978,3.748,3.748,0,0,1-.058-.66V25.36H36.456V30.5a3.16,3.16,0,0,0,.92,2.5,3.807,3.807,0,0,0,2.6.81,3.82,3.82,0,0,0,2.593-.816,3.132,3.132,0,0,0,.937-2.492Z\" fill=\"#fff\"/>\n      <path id=\"Контур_80\" data-name=\"Контур 80\" d=\"M22.646,31.2H4.689a4.505,4.505,0,0,1-4.5-4.5V8.5A4.505,4.505,0,0,1,4.689,4h18.2a4.505,4.505,0,0,1,4.5,4.5v8.445l-.893.1a3.184,3.184,0,0,0-2.846,3.177V30.5l-.465.7ZM4.689,6a2.5,2.5,0,0,0-2.5,2.5V26.7a2.5,2.5,0,0,0,2.5,2.5H21.65V20.22a5.18,5.18,0,0,1,3.739-4.992V8.5a2.5,2.5,0,0,0-2.5-2.5Z\" fill=\"#fff\"/>\n      <path id=\"Контур_81\" data-name=\"Контур 81\" d=\"M30.127,47.884a1,1,0,0,1-1-1V43.267H26.846a5.206,5.206,0,0,1-5.2-5.2V20.222a5.206,5.206,0,0,1,5.2-5.2H44.692a5.206,5.206,0,0,1,5.2,5.2V38.068a5.206,5.206,0,0,1-5.2,5.2H35.058l-4.216,4.316A1,1,0,0,1,30.127,47.884ZM26.846,17.022a3.2,3.2,0,0,0-3.2,3.2V38.067a3.2,3.2,0,0,0,3.2,3.2h3.281a1,1,0,0,1,1,1v2.162l2.8-2.86a1,1,0,0,1,.715-.3H44.692a3.2,3.2,0,0,0,3.2-3.2V20.222a3.2,3.2,0,0,0-3.2-3.2Z\" fill=\"#fff\"/>\n    </g>\n  </g>\n</svg>\n";
 
 const VERSION$3 = '0.0.1';
-const T$5 = 'plugins.multicamera';
+const T$5 = 'plugins.media_control_multicamera';
 class MultiCamera extends UICorePlugin {
     currentCamera = null;
     currentTime = 0;
@@ -48751,7 +48854,7 @@ class MultiCamera extends UICorePlugin {
     multicamera = [];
     noActiveStreams = false;
     get name() {
-        return 'multicamera';
+        return 'media_control_multicamera';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -49093,10 +49196,10 @@ const pipIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"no
 const buttonHtml$1 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\">\n    <span><%= pipIcon %></span>\n</button>\n";
 
 const VERSION$2 = '0.0.1';
-const T$4 = `plugins.picture_in_picture`;
+const T$4 = `plugins.media_control_pip`;
 class PictureInPicture extends UICorePlugin {
     get name() {
-        return 'picture_in_picture';
+        return 'media_control_pip';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -49173,6 +49276,7 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: '2.0', label: '2x' }
 ];
 const DEFAULT_PLAYBACK_RATE = '1.0';
+// TODO
 const MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
 class PlaybackRate extends UICorePlugin {
     currentPlayback = null;
@@ -49180,7 +49284,7 @@ class PlaybackRate extends UICorePlugin {
     prevSelectedRate;
     selectedRate = DEFAULT_PLAYBACK_RATE;
     get name() {
-        return 'playback_rate';
+        return 'media_control_playback_rate';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -49358,7 +49462,6 @@ class PlaybackRate extends UICorePlugin {
         currentLevelElement.find('a').addClass('gcore-skin-active');
     }
 }
-// PlaybackRate.MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
 
 const posterHTML = "<div class=\"play-wrapper\" data-poster></div>\n";
 
@@ -49366,40 +49469,73 @@ const posterHTML = "<div class=\"play-wrapper\" data-poster></div>\n";
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 const T$3 = 'plugins.poster_custom';
+/**
+ * Displays a poster image in the background and a big play button on top when playback is stopped
+ * @beta
+ * @remarks
+ * When the playback is stopped, media control UI is disabled.
+ *
+ * Configuration options:
+ *
+ * - `poster.custom` - custom CSS background
+ *
+ * - `poster.showForNoOp` - whether to show the poster when the playback is not started
+ *
+ * - `poster.url` - the URL of the poster image
+ *
+ * - `poster.showOnVideoEnd` - whether to show the poster when the playback is ended
+ *
+ * @example
+ * ```ts
+ * new Player({
+ *  ...
+ *  poster: {
+ *    showForNoOp: true,
+ *    url: 'https://via.placeholder.com/150.png',
+ *  }
+ * })
+ * ```
+ */
 class Poster extends UIContainerPlugin {
     hasFatalError = false;
     hasStartedPlaying = false;
     playRequested = false;
     $playButton = null;
     $playWrapper = null;
+    /**
+     * @internal
+     */
     get name() {
         return 'poster_custom';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    get template() {
-        return tmpl(posterHTML);
-    }
+    static template = tmpl(posterHTML);
     get shouldRender() {
         if (!this.enabled) {
             return false;
         }
-        // const showOnError = this.options.poster?.showOnError !== false
-        trace(`${T$3} shouldRender`, {
-            hasFatalError: this.hasFatalError,
-        });
         const showForNoOp = !!this.options.poster?.showForNoOp;
         return (this.container.playback.name !== 'html_img' &&
             (this.container.playback.getPlaybackType() !== Playback.NO_OP ||
                 showForNoOp));
     }
+    /**
+     * @internal
+     */
     get attributes() {
         return {
             class: 'player-poster',
             'data-poster': '',
         };
     }
+    /**
+     * @internal
+     */
     get events() {
         return {
             click: 'clicked',
@@ -49408,6 +49544,9 @@ class Poster extends UIContainerPlugin {
     get showOnVideoEnd() {
         return this.options.poster?.showOnVideoEnd !== false;
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         this.listenTo(this.container, Events$1.CONTAINER_STOP, this.onStop);
         this.listenTo(this.container, Events$1.CONTAINER_PLAY, this.onPlay);
@@ -49420,11 +49559,17 @@ class Poster extends UIContainerPlugin {
         this.listenTo(this.container, Events$1.CONTAINER_READY, this.render);
         this.listenTo(this.container, Events$1.PLAYBACK_PLAY_INTENT, this.onPlayIntent);
     }
+    /**
+     * Reenables earlier disabled plugin
+     */
     enable() {
         super.enable();
         this.hasStartedPlaying = this.container.playback.isPlaying();
         this.update();
     }
+    /**
+     * Disables the plugin, unmounting it from the DOM
+     */
     disable() {
         trace(`${T$3} disable`);
         this.hasStartedPlaying = false;
@@ -49555,11 +49700,14 @@ class Poster extends UIContainerPlugin {
             this.$el.hide();
         }
     }
+    /**
+     * @internal
+     */
     render() {
         if (!this.shouldRender) {
             return this;
         }
-        this.$el.html(this.template());
+        this.$el.html(Poster.template());
         const isRegularPoster = this.options.poster && this.options.poster.custom === undefined;
         if (isRegularPoster) {
             const posterUrl = this.options.poster.url || this.options.poster;
@@ -49583,6 +49731,9 @@ class Poster extends UIContainerPlugin {
         this.update();
         return this;
     }
+    /**
+     * @internal
+     */
     destroy() {
         this.container.$el.removeClass('container-with-poster-clickable');
         return this;
@@ -49597,7 +49748,7 @@ const seekTimeHTML = "<span data-seek-time></span>\n<span data-duration></span>\
 const { formatTime } = Utils;
 class SeekTime extends UICorePlugin {
     get name() {
-        return 'seek_time';
+        return 'media_control_seek_time';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -49755,7 +49906,7 @@ class Share extends UICorePlugin {
     hide = false;
     container = null;
     get name() {
-        return 'share';
+        return 'media_control_share';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -50210,7 +50361,7 @@ class Subtitles extends UICorePlugin {
     tracks;
     $string;
     get name() {
-        return 'subtitles';
+        return 'media_control_subtitles';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -50657,7 +50808,7 @@ const parseSRT = /*@__PURE__*/getDefaultExportFromCjs$1(parseSrtExports);
 
 const pluginHtml = "<div class=\"thumbnails-text\"></div>\n<% if (backdropHeight) { %>\n    <div class=\"backdrop\" style=\"height: <%= backdropHeight %>px;\">\n        <div class=\"carousel\"></div>\n    </div>\n<% }; %>\n<% if (spotlightHeight) { %>\n    <div class=\"spotlight\" style=\"height: <%= spotlightHeight %>px;\">\n    </div>\n<% }; %>\n";
 
-const T$1 = 'plugins.thumbnails';
+const T$1 = 'plugins.media_control_thumbnails';
 class Thumbnails extends UICorePlugin {
     _$spotlight = null;
     _$backdrop = null;
@@ -50673,7 +50824,7 @@ class Thumbnails extends UICorePlugin {
     _oldContainer = null;
     _thumbs = [];
     get name() {
-        return 'thumbnails';
+        return 'media_control_thumbnails';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -51172,7 +51323,6 @@ class SourceController extends CorePlugin {
         else {
             this.sync = noSync;
         }
-        // TODO bind to CORE_ACTIVE_CONTAINER_CHANGED
         this.bindContainerEventListeners();
         if (this.active) {
             this.core.activeContainer?.getPlugin('poster_custom')?.disable();