@gcorevideo/player 2.19.15 → 2.20.3

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$e = 'playback.dash';
+const T$f = 'playback.dash';
 // @ts-expect-error
 class DashPlayback extends HTML5Video {
     _levels = null;
@@ -12729,10 +12729,10 @@ class DashPlayback extends HTML5Video {
     }
     _onPlaybackError = (event) => {
         // TODO
-        trace(`${T$e} _onPlaybackError`, { event });
+        trace(`${T$f} _onPlaybackError`, { event });
     };
     _onDASHJSSError = (event) => {
-        trace(`${T$e} _onDASHJSSError`, { event });
+        trace(`${T$f} _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$e} triggerError`, { error });
+        trace(`${T$f} 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$e} dvrEnable no dash player instance`);
+            trace(`${T$f} 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$e} play`, { dash: !!this._dash });
+        trace(`${T$f} play`, { dash: !!this._dash });
         if (!this._dash) {
             this._setup();
         }
@@ -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$d = 'playback.hls';
+const T$e = 'playback.hls';
 // @ts-expect-error
 class HlsPlayback extends HTML5Video {
     _ccIsSetup = false;
@@ -41806,7 +41806,7 @@ class HlsPlayback extends HTML5Video {
             maxBufferLength: 2,
             maxMaxBufferLength: 4,
         }, this.options.playback.hlsjsConfig);
-        trace(`${T$d} _createHLSInstance`, { config });
+        trace(`${T$e} _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$d} _recover failed to recover`, {
+            trace(`${T$e} _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$d} _onHLSJSError`, {
+        trace(`${T$e} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -42029,7 +42029,7 @@ class HlsPlayback extends HTML5Video {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$d} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$e} _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$d} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$e} _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$d} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$e} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42144,9 +42144,9 @@ class HlsPlayback extends HTML5Video {
     }
     play() {
         !this._hls && this._setup();
-        assert.ok(this._hls, 'Hls.js instance is not available');
         !this._manifestParsed &&
             !this.options.hlsPlayback.preload &&
+            // @ts-expect-error
             this._hls.loadSource(this.options.src);
         super.play();
         this._startTimeUpdateTimer();
@@ -42400,7 +42400,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$c = 'GPlayer';
+const T$d = '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$c} init`, {
+        trace(`${T$d} 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$c} destroy`, {
+        trace(`${T$d} destroy`, {
             player: !!this.player,
         });
         if (this.player) {
@@ -42669,7 +42669,7 @@ class Player {
         this.config = $.extend(true, this.config, config);
     }
     initPlayer(coreOptions) {
-        trace(`${T$c} initPlayer`, {
+        trace(`${T$d} initPlayer`, {
             autoPlay: coreOptions.autoPlay,
             sources: coreOptions.sources,
             // TODO selected options
@@ -42694,7 +42694,7 @@ class Player {
         }
     }
     triggerAutoPlay() {
-        trace(`${T$c} triggerAutoPlay`);
+        trace(`${T$d} triggerAutoPlay`);
         setTimeout(() => {
             this.player?.play({
                 autoPlay: true,
@@ -42712,7 +42712,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$c} onReady`, {
+            trace(`${T$d} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -42746,7 +42746,7 @@ class Player {
     buildCoreOptions(rootNode) {
         const sources = this.buildMediaSourcesList();
         const source = sources[0];
-        trace(`${T$c} buildCoreOptions`, {
+        trace(`${T$d} buildCoreOptions`, {
             source,
             sources,
         });
@@ -42805,7 +42805,7 @@ class Player {
     bindCoreListeners() {
         const core = this.player?.core;
         core?.on(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, ({ orientation }) => {
-            trace(`${T$c} on CORE_SCREEN_ORIENTATION_CHANGED`, {
+            trace(`${T$d} on CORE_SCREEN_ORIENTATION_CHANGED`, {
                 orientation,
                 rootNode: {
                     width: this.rootNode?.clientWidth,
@@ -42820,14 +42820,14 @@ class Player {
             }
         }, null);
         core?.on(Events$1.CORE_RESIZE, ({ width, height }) => {
-            trace(`${T$c} on CORE_RESIZE`, {
+            trace(`${T$d} on CORE_RESIZE`, {
                 width,
                 height,
             });
             this.safeTriggerEvent(PlayerEvent.Resize, { width, height });
         }, null);
         core?.on(Events$1.CORE_FULLSCREEN, (isFullscreen) => {
-            trace(`${T$c} CORE_FULLSCREEN`, {
+            trace(`${T$d} CORE_FULLSCREEN`, {
                 isFullscreen,
             });
             this.safeTriggerEvent(PlayerEvent.Fullscreen, isFullscreen);
@@ -42835,7 +42835,7 @@ class Player {
     }
 }
 
-var version$1 = "2.19.15";
+var version$1 = "2.20.3";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -42867,38 +42867,57 @@ const VERSION$6 = '0.0.1';
 // const T = 'plugins.audio_selector';
 const AUTO = 0;
 /**
+ * Adds an audio track selector to the media control UI.
  * @beta
  */
 class AudioSelector extends UICorePlugin {
+    // TODO
     selectedTrackId;
     currentTrack = null;
     tracks = [];
+    /**
+     * @internal
+     */
     get name() {
-        return 'media_control_audio_selector';
+        return 'audio_selector';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
+    /**
+     * @internal
+     */
     static get version() {
         return VERSION$6;
     }
-    get template() {
-        return tmpl(pluginHtml$8);
-    }
+    static template = tmpl(pluginHtml$8);
+    /**
+     * @internal
+     */
     get attributes() {
         return {
-            'class': this.name,
-            'data-track-selector': ''
+            class: this.name,
+            'data-track-selector': '',
         };
     }
+    /**
+     * @internal
+     */
     get events() {
         return {
             'click [data-track-selector-select]': 'onTrackSelect',
-            'click [data-track-selector-button]': 'onShowLevelSelectMenu'
+            'click [data-track-selector-button]': 'onShowLevelSelectMenu',
         };
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         this.listenTo(this.core, Events$1.CORE_READY, this.bindPlaybackEvents);
+        // TODO CORE_ACTIVE_CONTAINER_CHANGED
         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.hideSelectTrackMenu);
@@ -42939,12 +42958,12 @@ class AudioSelector extends UICorePlugin {
                 if (defaultTrack) {
                     this.currentTrack = {
                         id: defaultTrack.id,
-                        label: defaultTrack.name
+                        label: defaultTrack.name,
                     };
                 }
-                this.fillTracks(data.audioTracks.map(p => ({
+                this.fillTracks(data.audioTracks.map((p) => ({
                     id: p.id,
-                    label: p.name
+                    label: p.name,
                 })), defaultTrack?.id);
             });
             currentPlayback._hls.on(Events.AUDIO_TRACK_SWITCHING, this.startTrackSwitch.bind(this));
@@ -42990,23 +43009,30 @@ class AudioSelector extends UICorePlugin {
         if (!currentPlayback) {
             return false;
         }
-        const { audioTracks } = (currentPlayback.activePlayback._hls || currentPlayback.$el.get(0));
+        const { audioTracks } = currentPlayback.activePlayback._hls || currentPlayback.$el.get(0);
         this.tracks = audioTracks;
         // Only care if we have at least 2 to choose from
         return this.tracks && this.tracks.length > 1;
     }
+    /**
+     * @internal
+     */
     render() {
-        if (this.shouldRender()) {
-            this.$el.html(this.template({ 'tracks': this.tracks, 'title': this.getTitle() }));
-            if (Object.prototype.hasOwnProperty.call(this.core.mediaControl, '$audioTracksSelector') &&
-                this.core.mediaControl.$audioTracksSelector.length > 0) {
-                this.core.mediaControl.$audioTracksSelector.append(this.el);
-            }
-            this.highlightCurrentTrack();
+        if (!this.shouldRender()) {
+            return this;
+        }
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
+        this.$el.html(AudioSelector.template({ tracks: this.tracks, title: this.getTitle() }));
+        const ats = mediaControl.getElement('audioTracksSelector');
+        if (!(ats && ats.length > 0)) {
+            return this;
         }
-        if (Object.prototype.hasOwnProperty.call(this.core.mediaControl, '$audioTracksSelector') &&
-            this.core.mediaControl.$audioTracksSelector.find('span.audio-arrow').length > 0) {
-            this.core.mediaControl.$audioTracksSelector.find('span.audio-arrow').append(audioArrow);
+        ats.append(this.el);
+        this.highlightCurrentTrack();
+        const aa = ats.find('audioArrow');
+        if (aa.length > 0) {
+            aa.append(audioArrow);
         }
         return this;
     }
@@ -43070,7 +43096,8 @@ class AudioSelector extends UICorePlugin {
         return this.$('.audio_selector button .audio-text');
     }
     trackElement(id) {
-        return this.$('.audio_selector ul a' + (id !== undefined ? '[data-track-selector-select="' + id + '"]' : '')).parent();
+        return this.$('.audio_selector ul a' +
+            (id !== undefined ? '[data-track-selector-select="' + id + '"]' : '')).parent();
     }
     getTitle() {
         if (!this.tracks) {
@@ -43141,8 +43168,11 @@ 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$b = "plugins.big_mute_button";
+const T$c = 'plugins.big_mute_button';
+// TODO rewrite as a container plugin
 /**
+ * Displays a big mute button over the video when it's muted.
+ * Once pressed, it unmutes the video.
  * @beta
  */
 class BigMuteButton extends UICorePlugin {
@@ -43150,42 +43180,41 @@ class BigMuteButton extends UICorePlugin {
     _adIsPlaying = false;
     $bigMuteBtnContainer = null;
     $bigMuteButton = null;
+    /**
+     * @internal
+     */
     get name() {
         return 'big_mute_button';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    get template() {
-        return tmpl(pluginHtml$7);
-    }
+    static template = tmpl(pluginHtml$7);
+    /**
+     * @internal
+     */
     get events() {
         return {
             'click .big-mute-icon': 'handleBigMuteBtnClick',
             'click .big-mute-icon-wrapper': 'destroyBigMuteBtn',
         };
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         super.bindEvents();
         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$b} bindEvents`, {
+        trace(`${T$c} bindEvents`, {
             mediacontrol: !!this.core.mediaControl,
         });
         this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mediaControlRendered);
     }
-    unBindEvents() {
-        // @ts-ignore
-        this.stopListening(this.core, Events$1.CORE_READY);
-        this.stopListening(this.core, 'core:advertisement:start', this.onStartAd);
-        this.stopListening(this.core, 'core:advertisement:finish', this.onFinishAd);
-        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mediaControlRendered);
-        const container = this.core.activeContainer;
-        if (container) {
-            this.stopListening(container.playback, Events$1.PLAYBACK_PLAY, this.render);
-        }
-    }
     onCoreReady() {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_VOLUME, this.onContainerVolume);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_READY, this.onContainerStart);
@@ -43206,12 +43235,12 @@ class BigMuteButton extends UICorePlugin {
     }
     mediaControlRendered() {
         const container = this.core.activeContainer;
-        trace(`${T$b} mediaControlRendered`, {
+        trace(`${T$c} mediaControlRendered`, {
             container: !!container,
         });
         if (container) {
             this.listenTo(container.playback, Events$1.PLAYBACK_PLAY, () => {
-                trace(`${T$b} PLAYBACK_PLAY`);
+                trace(`${T$c} PLAYBACK_PLAY`);
                 this.render();
             });
         }
@@ -43235,19 +43264,22 @@ class BigMuteButton extends UICorePlugin {
         }
         const { autoPlay, wasMuted } = this.options;
         const volume = container.volume;
-        trace(`${T$b} shouldRender`, {
+        trace(`${T$c} shouldRender`, {
             autoPlay,
             wasMuted,
             volume,
         });
         return autoPlay && !wasMuted && volume === 0;
     }
+    /**
+     * @internal
+     */
     render() {
         if (this.shouldRender()) {
-            trace(`${T$b} render`, {
+            trace(`${T$c} render`, {
                 el: !!this.$el,
             });
-            this.$el.html(this.template());
+            this.$el.html(BigMuteButton.template());
             this.$bigMuteBtnContainer = this.$el.find('.big-mute-icon-wrapper[data-big-mute]');
             this._adIsPlaying && this.$bigMuteBtnContainer.addClass('hide');
             this.$bigMuteButton = this.$bigMuteBtnContainer.find('.big-mute-icon');
@@ -43290,9 +43322,10 @@ 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 = '2.19.12';
-const T$a = 'plugins.bottom_gear';
+const T$b = 'plugins.bottom_gear';
 /**
  * Custom events emitted by the plugin
+ * @beta
  */
 var GearEvents;
 (function (GearEvents) {
@@ -43375,11 +43408,11 @@ class BottomGear extends UICorePlugin {
         this.$el.find('.gear-wrapper').html(content);
     }
     onActiveContainerChanged() {
-        trace(`${T$a} onActiveContainerChanged`);
+        trace(`${T$b} onActiveContainerChanged`);
         this.bindContainerEvents();
     }
     bindContainerEvents() {
-        trace(`${T$a} bindContainerEvents`);
+        trace(`${T$b} bindContainerEvents`);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
     }
     highDefinitionUpdate(isHd) {
@@ -44490,6 +44523,9 @@ function requireMousetrap () {
 var mousetrapExports = requireMousetrap();
 const Mousetrap = /*@__PURE__*/getDefaultExportFromCjs$1(mousetrapExports);
 
+/**
+ * @beta
+ */
 var ClapprStatsEvents;
 (function (ClapprStatsEvents) {
     ClapprStatsEvents["REPORT_EVENT"] = "clappr:stats:report";
@@ -45499,7 +45535,7 @@ const qualityClasses = [
     'speedtest-quality-value-2',
     'speedtest-quality-value-3',
     'speedtest-quality-value-4',
-    'speedtest-quality-value-5'
+    'speedtest-quality-value-5',
 ];
 const getDownloadQuality = (speedValue) => {
     if (speedValue < 3) {
@@ -45563,7 +45599,22 @@ const drawSummary = (customMetrics, vodContainer, liveContainer) => {
 };
 // const T = 'plugins.clappr_nerd_stats';
 /**
+ * Displays useful network-related statistics.
  * @beta
+ *
+ * @remarks
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * - {@link BottomGear}
+ *
+ * - {@link ClapprStats}
+ *
+ * The plugin is rendered as an item in the gear menu.
+ *
+ * When clicked, it shows an overlay window with the information about the network speed, latency, etc,
+ * and recommended quality level.
  */
 class ClapprNerdStats extends UICorePlugin {
     container = null;
@@ -45576,21 +45627,31 @@ class ClapprNerdStats extends UICorePlugin {
     showing = false;
     shortcut;
     iconPosition;
+    /**
+     * @internal
+     */
     get name() {
         return 'nerd_stats';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    get template() {
-        return tmpl(pluginHtml$5);
-    }
+    static template = tmpl(pluginHtml$5);
+    /**
+     * @internal
+     */
     get attributes() {
         return {
             'data-clappr-nerd-stats': '',
-            'class': 'clappr-nerd-stats'
+            class: 'clappr-nerd-stats',
         };
     }
+    /**
+     * @internal
+     */
     get events() {
         return {
             'click [data-show-stats-button]': 'showOrHide',
@@ -45612,8 +45673,12 @@ class ClapprNerdStats extends UICorePlugin {
     }
     constructor(core) {
         super(core);
-        this.shortcut = core.options.clapprNerdStats?.shortcut ?? ['command+shift+s', 'ctrl+shift+s'];
-        this.iconPosition = core.options.clapprNerdStats?.iconPosition ?? 'bottom-right';
+        this.shortcut = core.options.clapprNerdStats?.shortcut ?? [
+            'command+shift+s',
+            'ctrl+shift+s',
+        ];
+        this.iconPosition =
+            core.options.clapprNerdStats?.iconPosition ?? 'bottom-right';
         this.customMetrics = {
             connectionSpeed: 0,
             ping: 0,
@@ -45621,6 +45686,9 @@ class ClapprNerdStats extends UICorePlugin {
         };
         configureSpeedTest(core.options.clapprNerdStats?.speedTestServers ?? []);
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
@@ -45660,9 +45728,11 @@ class ClapprNerdStats extends UICorePlugin {
         this.core.$el.find(this.statsBoxElem).show();
         this.showing = true;
         this.refreshSpeedTest();
-        initSpeedTest(this.customMetrics).then(() => {
+        initSpeedTest(this.customMetrics)
+            .then(() => {
             startSpeedtest();
-        }).catch(e => {
+        })
+            .catch((e) => {
             reportError(e);
             this.disable();
         });
@@ -45677,13 +45747,19 @@ class ClapprNerdStats extends UICorePlugin {
     }
     addGeneralMetrics() {
         this.metrics.general = {
-            displayResolution: (this.playerWidth + 'x' + this.playerHeight),
-            volume: this.container?.volume
+            displayResolution: this.playerWidth + 'x' + this.playerHeight,
+            volume: this.container?.volume,
         };
     }
     addCustomMetrics() {
         this.metrics.custom = this.customMetrics;
-        const videoQualityNames = ['SD (480p)', 'HD (720p)', 'Full HD (1080p)', '2K (1440p)', '4K (2160p)'];
+        const videoQualityNames = [
+            'SD (480p)',
+            'HD (720p)',
+            'Full HD (1080p)',
+            '2K (1440p)',
+            '4K (2160p)',
+        ];
         const { connectionSpeed, ping } = this.customMetrics;
         if (!connectionSpeed || !ping) {
             const calculatingText = 'Calculating... Please wait.';
@@ -45695,17 +45771,19 @@ class ClapprNerdStats extends UICorePlugin {
         const pingQuality = getPingQuality(ping);
         const liveQuality = Math.min(downloadQuality, pingQuality);
         const prefix = 'Optimal for ';
-        this.metrics.custom.vodQuality = prefix + videoQualityNames[downloadQuality - 1];
-        this.metrics.custom.liveQuality = prefix + videoQualityNames[liveQuality - 1];
+        this.metrics.custom.vodQuality =
+            prefix + videoQualityNames[downloadQuality - 1];
+        this.metrics.custom.liveQuality =
+            prefix + videoQualityNames[liveQuality - 1];
     }
     updateMetrics(metrics) {
         Object.assign(this.metrics, metrics);
         this.addGeneralMetrics();
         this.addCustomMetrics();
         const scrollTop = this.core.$el.find(this.statsBoxElem).scrollTop();
-        this.$el.html(this.template({
+        this.$el.html(ClapprNerdStats.template({
             metrics: Formatter.format(this.metrics),
-            iconPosition: this.iconPosition
+            iconPosition: this.iconPosition,
         }));
         this.setStatsBoxSize();
         drawSpeedTestResults();
@@ -45725,7 +45803,11 @@ class ClapprNerdStats extends UICorePlugin {
             this.$el.find(this.statsBoxElem).addClass('narrow');
         }
     }
+    /**
+     * @internal
+     */
     render() {
+        // TODO append to the container
         this.core.$el.append(this.$el[0]);
         this.hide();
         return this;
@@ -45777,7 +45859,10 @@ function newMetrics() {
 // TODO: fix
 const updateMetrics = () => { };
 /**
+ * Collects useful statistics about playback performance.
  * @beta
+ * @remarks
+ * This plugin does not render anything and is supposed to be extended or used together with other plugins that actually render something.
  */
 class ClapprStats extends ContainerPlugin {
     bwMeasureCount = 0;
@@ -45799,9 +45884,15 @@ class ClapprStats extends ContainerPlugin {
     updateFn = updateMetrics;
     urisToMeasureBandwidth;
     uriToMeasureLatency;
+    /**
+     * @internal
+     */
     get name() {
         return 'clappr_stats';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
@@ -45829,6 +45920,10 @@ class ClapprStats extends ContainerPlugin {
         // this._metrics.timers[timer] += this._now() - this[`_start${timer}`];
         this.metrics.timers[timer] += this._now() - this.timers[timer];
     }
+    /**
+     * Registers a callback to receive the metrics.
+     * @param updateMetricsFn
+     */
     setUpdateMetrics(updateMetricsFn) {
         this.updateFn = updateMetricsFn;
     }
@@ -45847,6 +45942,9 @@ class ClapprStats extends ContainerPlugin {
             calls: []
         };
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         this.listenTo(this.container, Events$1.CONTAINER_BITRATE, this.onBitrate);
         this.listenTo(this.container, Events$1.CONTAINER_STOP, this.stopReporting);
@@ -45865,10 +45963,17 @@ class ClapprStats extends ContainerPlugin {
         this.listenTo(this.container.playback, Events$1.PLAYBACK_PROGRESS, this.onProgress);
         this.listenTo(this.container.playback, Events$1.PLAYBACK_TIMEUPDATE, this.onTimeUpdate);
     }
+    /**
+     * @internal
+     */
     destroy() {
         this.stopReporting();
         super.destroy();
     }
+    /**
+     * Returns the collected metrics.
+     * @returns The collected metrics
+     */
     exportMetrics() {
         return structuredClone(this.metrics);
     }
@@ -45890,6 +45995,7 @@ class ClapprStats extends ContainerPlugin {
             this.intervalId = null;
         }
         this._newMetrics();
+        // TODO
         // @ts-ignore
         this.stopListening();
         this.bindEvents();
@@ -46107,20 +46213,30 @@ class ClapprStats extends ContainerPlugin {
 
 //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 in the LICENSE file.
-const T$9 = 'plugins.click_to_pause_custom';
+// license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE.
+const T$a = 'plugins.click_to_pause_custom';
+/**
+ * Adds a behavior of toggling the playback state on click over the container
+ * @beta
+ */
 class ClickToPause extends ContainerPlugin {
     pointerEnabled = false;
     timer = null;
+    /**
+     * @internal
+     */
     get name() {
         return 'click_to_pause_custom';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    get config() {
-        return this.container.options.clickToPauseConfig || {};
-    }
+    /**
+     * @internal
+     */
     bindEvents() {
         this.listenTo(this.container, Events$1.CONTAINER_CLICK, this.click);
         this.listenTo(this.container, Events$1.CONTAINER_SETTINGSUPDATE, this.settingsUpdate);
@@ -46128,7 +46244,7 @@ class ClickToPause extends ContainerPlugin {
     click() {
         const isLivePlayback = this.container.getPlaybackType() === Playback.LIVE;
         const isDvrEnabled = this.container.isDvrEnabled();
-        trace(`${T$9} click`, {
+        trace(`${T$a} click`, {
             isLivePlayback,
             isDvrEnabled,
         });
@@ -46146,7 +46262,7 @@ class ClickToPause extends ContainerPlugin {
     settingsUpdate() {
         const isLivePlayback = this.container.getPlaybackType() === Playback.LIVE;
         const pointerEnabled = !isLivePlayback || this.container.isDvrEnabled();
-        trace(`${T$9} settingsUpdate`, {
+        trace(`${T$a} settingsUpdate`, {
             isLivePlayback,
             pointerEnabled,
         });
@@ -46236,23 +46352,45 @@ function getPageX(event) {
     return 0;
 }
 
+/**
+ * Adds a behavior of showing a text over the seekbar to indicate the current clip.
+ * @beta
+ * @remarks
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * Configuration options - {@link ClipsPluginSettings}
+ */
 class ClipsPlugin extends UICorePlugin {
     clips = new Map();
     duration = 0;
     durationGetting = false;
     _oldContainer;
     svgMask = null;
+    /**
+     * @internal
+     */
     get name() {
-        return 'media_control_clips';
+        return 'clips';
     }
+    /**
+     * @internal
+     */
     get attributes() {
         return {
-            'class': this.name
+            class: this.name,
         };
     }
+    /**
+     * @internal
+     */
     bindEvents() {
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
         this.listenToOnce(this.core, Events$1.CORE_READY, this._onCoreReady);
-        this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this._onMediaControlContainerChanged);
+        // TODO listen to CORE_ACTIVE_CONTAINER_CHANGED
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this._onMediaControlContainerChanged);
         this.listenTo(this.core, Events$1.CORE_RESIZE, this.playerResize);
     }
     _onCoreReady() {
@@ -46262,12 +46400,6 @@ class ClipsPlugin extends UICorePlugin {
         }
         this.parseClips();
     }
-    unbindEvents() {
-        // @ts-ignore
-        this.stopListening(this.core, Events$1.CORE_READY);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED);
-    }
     _onMediaControlContainerChanged() {
         this._bindContainerEvents();
     }
@@ -46281,9 +46413,10 @@ class ClipsPlugin extends UICorePlugin {
         if (this._oldContainer) {
             this.stopListening(this._oldContainer, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         }
-        this._oldContainer = this.core.mediaControl.container;
+        const mediaControl = this.core.getPlugin('media_control');
+        this._oldContainer = mediaControl.container;
         this.durationGetting = false;
-        this.listenTo(this.core.mediaControl.container, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+        this.listenTo(mediaControl.container, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
     }
     onTimeUpdate(event) {
         if (!this.durationGetting) {
@@ -46300,13 +46433,17 @@ class ClipsPlugin extends UICorePlugin {
     }
     parseClips() {
         const textArr = this.options.clips.text.split('\n');
-        const clipsArr = textArr.map((val) => {
+        const clipsArr = textArr
+            .map((val) => {
             const matchRes = val.match(/(\d+:\d+|:\d+) (.+)/i);
-            return matchRes ? {
-                start: strtimeToMiliseconds(matchRes[1]),
-                text: matchRes[2],
-            } : null;
-        }).filter((clip) => clip !== null);
+            return matchRes
+                ? {
+                    start: strtimeToMiliseconds(matchRes[1]),
+                    text: matchRes[2],
+                }
+                : null;
+        })
+            .filter((clip) => clip !== null);
         clipsArr.sort((a, b) => a.start - b.start);
         clipsArr.forEach((clip, index) => {
             this.clips.set(clip.start, {
@@ -46317,6 +46454,11 @@ class ClipsPlugin extends UICorePlugin {
             });
         });
     }
+    /**
+     * Returns the text of the current clip.
+     * @param time - The current time of the player.
+     * @returns The text of the current clip.
+     */
     getText(time) {
         for (const [key, value] of this.clips.entries()) {
             if (time >= value.start && time < value.end) {
@@ -46327,14 +46469,14 @@ class ClipsPlugin extends UICorePlugin {
     }
     makeSvg(duration) {
         let svg = '<svg width="0" height="0">\n' + '<defs>\n' + '<clipPath id="myClip">\n';
-        const widthOfSeek = this.core.mediaControl.container.$el.width();
+        const widthOfSeek = this.core.activeContainer.$el.width();
         let finishValue = 0;
-        this.clips.forEach(val => {
+        this.clips.forEach((val) => {
             let end = val.end;
             if (!end) {
                 end = val.end = duration;
             }
-            const widthChunk = (end - val.start) * widthOfSeek / duration;
+            const widthChunk = ((end - val.start) * widthOfSeek) / duration;
             svg += `<rect x="${finishValue}" y="0" width="${widthChunk - 2}" height="30"/>\n`;
             finishValue += widthChunk;
         });
@@ -46347,7 +46489,8 @@ class ClipsPlugin extends UICorePlugin {
         if (this.svgMask) {
             this.svgMask.remove();
         }
-        const $seekBarContainer = this.core.mediaControl.getElement('seekBarContainer');
+        const mediaControl = this.core.getPlugin('media_control');
+        const $seekBarContainer = mediaControl.getElement('seekBarContainer');
         if ($seekBarContainer?.get(0)) {
             $seekBarContainer.addClass('clips');
         }
@@ -46355,7 +46498,8 @@ class ClipsPlugin extends UICorePlugin {
         $seekBarContainer?.append(this.svgMask);
     }
     setClipText(text) {
-        const $clipText = this.core.mediaControl.getElement('clipText');
+        const mediaControl = this.core.getPlugin('media_control');
+        const $clipText = mediaControl.getElement('clipText');
         if ($clipText && text) {
             $clipText.show();
             $clipText.text(`${text}`);
@@ -46365,28 +46509,37 @@ class ClipsPlugin extends UICorePlugin {
 
 const templateHtml$1 = "<ul class=\"context-menu-list\">\n    <% if(options) { %>\n        <% for (var i = 0; i < options.length; i++) { %>\n        <li class=\"context-menu-list-item <%= options[i].class %>\"\n            data-<%= options[i].name %>><%= options[i].label %></li>\n        <% } %>\n    <% } %>\n</ul>\n";
 
-class ContextMenu extends UICorePlugin {
+/**
+ * Displays a small context menu when clicked on the player container.
+ * @beta
+ * @remarks
+ * Configuration options - {@link ContextMenuPluginSettings}
+ */
+class ContextMenu extends UIContainerPlugin {
     _label = '';
     _url = '';
-    container = null;
     menuOptions = [];
+    /**
+     * @internal
+     */
     get name() {
         return 'context_menu';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
+    /**
+     * @internal
+     */
     get attributes() {
-        return { 'class': 'context-menu' };
-    }
-    get mediaControl() {
-        return this.core.mediaControl;
-    }
-    get template() {
-        return tmpl(templateHtml$1);
+        return { class: 'context-menu' };
     }
+    static template = tmpl(templateHtml$1);
     get label() {
-        return this._label || 'Gcore player ver. ' + process.env.VERSION;
+        return this._label || 'Gcore player ver. ' + version().gplayer;
     }
     get url() {
         return this._url || 'https://gcore.com/';
@@ -46394,16 +46547,19 @@ class ContextMenu extends UICorePlugin {
     get exposeVersion() {
         return {
             label: this.label,
-            name: 'version'
+            name: 'version',
         };
     }
+    /**
+     * @internal
+     */
     get events() {
         return {
-            'click [data-version]': 'onOpenMainPage'
+            'click [data-version]': 'onOpenMainPage',
         };
     }
-    constructor(core) {
-        super(core);
+    constructor(container) {
+        super(container);
         if (this.options.contextMenu && this.options.contextMenu.label) {
             this._label = this.options.contextMenu.label;
         }
@@ -46413,28 +46569,21 @@ class ContextMenu extends UICorePlugin {
         this.render();
         this.bindEvents();
     }
+    /**
+     * @internal
+     */
     bindEvents() {
-        if (this.mediaControl) {
-            this.listenTo(this.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this.containerChanged);
-            if (this.container) {
-                this.listenTo(this.container, Events$1.CONTAINER_CONTEXTMENU, this.toggleContextMenu);
-                this.listenTo(this.container, Events$1.CONTAINER_CLICK, this.hide);
-            }
-        }
-        $('body').on('click', this.hide.bind(this));
+        this.listenTo(this.container, Events$1.CONTAINER_CONTEXTMENU, this.toggleContextMenu);
+        this.listenTo(this.container, Events$1.CONTAINER_CLICK, this.hide);
+        $('body').on('click', this.hideOnBodyClick);
     }
+    /**
+     * @internal
+     */
     destroy() {
-        $('body').off('click', this.hide.bind(this));
-        // @ts-ignore
-        this.stopListening();
+        $('body').off('click', this.hideOnBodyClick);
         return super.destroy();
     }
-    containerChanged() {
-        this.container = this.core.activeContainer;
-        // @ts-ignore
-        this.stopListening();
-        this.bindEvents();
-    }
     toggleContextMenu(event) {
         event.preventDefault();
         const offset = this.container?.$el.offset();
@@ -46442,7 +46591,8 @@ class ContextMenu extends UICorePlugin {
     }
     show(top, left) {
         this.hide();
-        if (this.options.contextMenu && this.options.contextMenu.preventShowContextMenu) {
+        if (this.options.contextMenu &&
+            this.options.contextMenu.preventShowContextMenu) {
             return;
         }
         this.$el.css({ top, left });
@@ -46454,80 +46604,19 @@ class ContextMenu extends UICorePlugin {
     onOpenMainPage() {
         window.open(this.url, '_blank');
     }
+    /**
+     * @internal
+     */
     render() {
         this.menuOptions = [this.exposeVersion];
-        this.$el.html(this.template({ options: this.menuOptions }));
-        this.core.$el.append(this.$el);
+        this.$el.html(ContextMenu.template({ options: this.menuOptions }));
+        this.container.$el.append(this.$el); // TODO append to the container, turn into a container plugin
         this.hide();
-        this.disable();
         return this;
     }
-}
-
-class DisableControls extends UICorePlugin {
-    get name() {
-        return 'disable_controls';
-    }
-    get container() {
-        return this.core && this.core.activeContainer;
-    }
-    get supportedVersion() {
-        return { min: CLAPPR_VERSION };
-    }
-    bindEvents() {
-        if (this.container) {
-            this.listenTo(this.container, Events$1.CONTAINER_MEDIACONTROL_ENABLE, this.enableControls);
-            this.listenTo(this.container, Events$1.CONTAINER_PLAY, this.enableControls);
-            this.listenTo(this.container, Events$1.CONTAINER_PAUSE, this.enableControls);
-            this.listenTo(this.container, Events$1.CONTAINER_STOP, this.enableControls);
-            this.listenTo(this.container, Events$1.CONTAINER_ENDED, this.enableControls);
-            this.listenTo(this.container, 'container:advertisement:start', this.enableControls);
-        }
-        this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
-        this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_SHOW, this.enableControls);
-        this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this.enableControls);
-    }
-    unbindEvents() {
-        // @ts-ignore
-        this.stopListening(this.core, Events$1.CORE_READY);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_SHOW);
-        // @ts-ignore
-        this.stopListening(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED);
-        // @ts-ignore
-        this.stopListening(this.container, Events$1.CONTAINER_MEDIACONTROL_ENABLE);
-        // @ts-ignore
-        this.stopListening(this.container, Events$1.CONTAINER_PLAY);
-        // @ts-ignore
-        this.stopListening(this.container, Events$1.CONTAINER_PAUSE);
-        // @ts-ignore
-        this.stopListening(this.container, Events$1.CONTAINER_STOP);
-        // @ts-ignore
-        this.stopListening(this.container, Events$1.CONTAINER_ENDED);
-        // @ts-ignore
-        this.stopListening(this.container, 'container:advertisement:start');
-    }
-    setDisableStyles() {
-        const css = document.createElement('style');
-        const styles = '.control-need-disable { display: none!important; }';
-        css.appendChild(document.createTextNode(styles));
-        this.core.$el.get(0).appendChild(css);
-    }
-    onCoreReady() {
-        this.setDisableStyles();
-        this.bindEvents();
-        this.enableControls();
-    }
-    enableControls() {
-        this.disableAllControls();
-    }
-    disableAllControls() {
-        setTimeout(() => {
-            const spinnerPlugin = this.container.getPlugin('spinner');
-            spinnerPlugin?.destroy();
-            this.container.disableMediaControl();
-        }, 0);
-    }
+    hideOnBodyClick = () => {
+        this.hide();
+    };
 }
 
 const dvrHTML = "<div class=\"live-info\"><%= live %></div>\n<button type=\"button\" class=\"live-button\" aria-label=\"<%= backToLive %>\"><%= backToLive %></button>\n";
@@ -46537,8 +46626,11 @@ const dvrHTML = "<div class=\"live-info\"><%= live %></div>\n<button type=\"butt
  * @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.
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * The plugin renders the live stream indicator and the DVR seek bar, if DVR is enabled, in the media control UI.
  */
 class DvrControls extends UICorePlugin {
     static template = tmpl(dvrHTML);
@@ -46546,7 +46638,7 @@ class DvrControls extends UICorePlugin {
      * @internal
      */
     get name() {
-        return 'media_control_dvr';
+        return 'dvr_controls';
     }
     /**
      * @internal
@@ -46579,32 +46671,15 @@ class DvrControls extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        this.bindCoreEvents();
-        this.bindContainerEvents();
-        if (this.core.activeContainer) {
-            this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.dvrChanged);
-        }
-    }
-    bindCoreEvents() {
-        if (this.core.mediaControl.settings) {
-            this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this.containerChanged);
-            this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.settingsUpdate);
-            this.listenTo(this.core, Events$1.CORE_OPTIONS_CHANGE, this.render);
-        }
-        else {
-            setTimeout(() => this.bindCoreEvents(), 100);
-        }
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.settingsUpdate);
+        this.listenTo(this.core, Events$1.CORE_OPTIONS_CHANGE, this.render);
+        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.bindContainerEvents);
     }
     bindContainerEvents() {
-        if (this.core.activeContainer) {
-            this.listenToOnce(this.core.activeContainer, Events$1.CONTAINER_TIMEUPDATE, this.render);
-            this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.dvrChanged);
-        }
-    }
-    containerChanged() {
-        // @ts-ignore
-        this.stopListening();
-        this.bindEvents();
+        this.listenToOnce(this.core.activeContainer, Events$1.CONTAINER_TIMEUPDATE, this.render);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.dvrChanged);
     }
     dvrChanged(dvrEnabled) {
         if (this.core.getPlaybackType() !== Playback.LIVE) {
@@ -46637,7 +46712,7 @@ class DvrControls extends UICorePlugin {
     settingsUpdate() {
         // @ts-ignore
         this.stopListening(); // TODO sort out
-        this.core.mediaControl.$el.removeClass('live');
+        this.core.getPlugin('media_control').$el.removeClass('live'); // TODO don't access directly
         if (this.shouldRender()) {
             this.render();
             this.$el.click(() => this.click());
@@ -46657,7 +46732,7 @@ class DvrControls extends UICorePlugin {
             backToLive: this.core.i18n.t('back_to_live')
         }));
         if (this.shouldRender()) {
-            const mediaControl = this.core.mediaControl;
+            const mediaControl = this.core.getPlugin('media_control');
             assert(mediaControl, 'media_control plugin is required');
             // TODO don't tap into the $el directly
             mediaControl.$el.addClass('live');
@@ -46673,7 +46748,11 @@ const templateHtml = "<div class=\"player-error-screen__content\" data-error-scr
 
 const TIME_FOR_UPDATE = 10000;
 const MAX_RETRY = 10;
-const T$8 = 'plugins.error_screen';
+const T$9 = 'plugins.error_screen';
+/**
+ * Displays a descriptive error in the overlay on top of the player.
+ * @beta
+ */
 class ErrorScreen extends UICorePlugin {
     _retry = 0;
     err = null;
@@ -46706,17 +46785,17 @@ class ErrorScreen extends UICorePlugin {
         this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this.onContainerChanged);
     }
     onCoreReady() {
-        trace(`${T$8} onCoreReady`);
+        trace(`${T$9} onCoreReady`);
         if (this.core.activePlayback) {
             this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_PLAY, this.onPlay);
         }
     }
     onPlay() {
-        trace(`${T$8} onPlay`);
+        trace(`${T$9} onPlay`);
         this.destroyError();
     }
     destroyError() {
-        trace(`${T$8} destroyError`);
+        trace(`${T$9} destroyError`);
         this._retry = 0;
         this.err = null;
         if (this.timeout !== null) {
@@ -46772,7 +46851,7 @@ class ErrorScreen extends UICorePlugin {
         }
     }
     onError(err) {
-        trace(`${T$8} onError`, { err });
+        trace(`${T$9} onError`, { err });
         if (err.level === PlayerError.Levels.FATAL ||
             err.details === 'bufferStalledError' ||
             err.details === 'manifestParsingError') {
@@ -46855,6 +46934,10 @@ const stopIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\
 const FAVICON_COLOR = '#567';
 const FAVICON_SELECTOR = 'link[rel="shortcut icon"]';
 // const oldIcon = $(FAVICON_SELECTOR);
+/**
+ * The plugin adds custom favicon to the player's tab.
+ * @beta
+ */
 class Favicon extends CorePlugin {
     _container = null;
     oldIcon;
@@ -46956,7 +47039,11 @@ class Favicon extends CorePlugin {
 
 // 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 in the LICENSE file.
+// license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE
+/**
+ * An example Google Analytics integration plugin
+ * @beta
+ */
 class GoogleAnalytics extends ContainerPlugin {
     account = '';
     trackerName = '';
@@ -47267,7 +47354,7 @@ function keyName(keyCode) {
 
 const buttonHtml$2 = "<button class='gplayer-lite-btn gcore-skin-text-color gear-option'>\n    <% if (isHd) { %>\n        <span class=\"gear-option_hd-icon\"><%= hdIcon %></span>\n    <% } %>\n    <span>Quality</span>\n    <span class=\"gear-option_arrow-right-icon\"><%= arrowRightIcon %></span>\n    <span class='gear-option_value'><%= currentText %></span>\n</button>\n";
 
-const listHtml$1 = "<button class=\"gplayer-lite-btn go-back gcore-skin-text-color\">\n    <span class=\"arrow-left-icon\"><%= arrowLeftIcon %></span>\n    Quality\n</button>\n<ul class=\"gear-sub-menu\">\n    <% if (!removeAuto) { %>\n        <li>\n            <a href=\"#\" class='gear-sub-menu_btn gcore-skin-text-color' data-id=\"-1\" id=\"level_selector_auto\">\n                <span class=\"check-icon\"><%= checkIcon %></span>\n            Auto\n        </a>\n    </li>\n    <% } %>\n    <% for (const level of levels.slice().reverse()) { %>\n        <li <% if (maxLevel >= 0 && level.level > maxLevel) { %>class=\"level-disabled\"<% } %>>\n            <a href=\"#\" class='gear-sub-menu_btn gcore-skin-text-color' data-id=\"<%= level.level %>\" id=\"level_selector_<%= level.level %>\">\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= labels[level.level] %>\n            </a>\n        </li>\n    <% } %>\n</ul>\n";
+const listHtml$1 = "<button class=\"gplayer-lite-btn go-back gcore-skin-text-color\">\n    <span class=\"arrow-left-icon\"><%= arrowLeftIcon %></span>\n    Quality\n</button>\n<ul class=\"gear-sub-menu\">\n    <% if (!removeAuto) { %>\n        <li>\n            <a href=\"#\" class='gear-sub-menu_btn gcore-skin-text-color' data-id=\"-1\" id=\"level_selector_auto\">\n                <span class=\"check-icon\"><%= checkIcon %></span>\n            Auto\n        </a>\n    </li>\n    <% } %>\n    <% for (const level of levels.slice().reverse()) { %>\n        <li <% if (maxLevel >= 0 && level.level > maxLevel) { %>class=\"level-disabled\"<% } %>>\n            <a href=\"#\" class='gear-sub-menu_btn gcore-skin-text-color' data-id=\"<%= level.level %>\" id=\"level_selector_<%= level.height %>\">\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= labels[level.level] %>\n            </a>\n        </li>\n    <% } %>\n</ul>\n";
 
 const hdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M14.9562 8.22232H13.9961V15.1873H14.9562C15.8914 15.1873 16.766 14.8253 17.4195 14.1676C18.0786 13.5037 18.4415 12.6281 18.4415 11.7026C18.4415 9.7837 16.8781 8.22253 14.9561 8.22253L14.9562 8.22232Z\"\n    fill=\"#C9C9C9\"/>\n  <path\n    d=\"M22.0801 4H1.91994C0.859222 4 0 4.86406 0 5.91994V17.4878C0 18.5437 0.859222 19.4078 1.91994 19.4078H22.0801C23.1408 19.4078 24 18.5437 24 17.4878V5.91994C24 4.86406 23.1408 4 22.0801 4ZM10.3975 15.3473C10.3975 15.6124 10.1827 15.8272 9.91754 15.8272C9.65216 15.8272 9.43761 15.6122 9.43761 15.3473V12.0239H5.55956V15.3473C5.55956 15.6124 5.34481 15.8272 5.07963 15.8272C4.81425 15.8272 4.5997 15.6122 4.5997 15.3473L4.59949 7.74042C4.59949 7.47524 4.81425 7.26049 5.07943 7.26049C5.34481 7.26049 5.55936 7.47544 5.55936 7.74042V11.0636H9.43741V7.74042C9.43741 7.47524 9.65216 7.26049 9.91734 7.26049C10.1827 7.26049 10.3973 7.47544 10.3973 7.74042L10.3975 15.3473ZM18.1005 14.8438C17.2652 15.6844 16.1486 16.1472 14.9561 16.1472H13.5161C13.2507 16.1472 13.0361 15.9323 13.0361 15.6673V7.74263C13.0361 7.47745 13.2509 7.26269 13.5161 7.26269H14.9561C17.4072 7.26269 19.4013 9.25438 19.4013 11.7027C19.4013 12.8835 18.9392 13.9991 18.1005 14.844V14.8438Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
@@ -47277,7 +47364,7 @@ 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$7 = 'plugins.level_selector';
+const T$8 = 'plugins.level_selector';
 const VERSION$4 = '2.19.4';
 /**
  * A {@link MediaControl | media control} plugin that provides a UI to control the quality level of the playback.
@@ -47379,10 +47466,10 @@ class LevelSelector extends UICorePlugin {
         }
     }
     onStop() {
-        trace(`${T$7} onStop`);
+        trace(`${T$8} onStop`);
         const currentPlayback = this.core.activePlayback;
         this.listenToOnce(currentPlayback, Events$1.PLAYBACK_PLAY, () => {
-            trace(`${T$7} on PLAYBACK_PLAY after stop`, { selectedLevelId: this.selectedLevelId });
+            trace(`${T$8} on PLAYBACK_PLAY after stop`, { selectedLevelId: this.selectedLevelId });
             if (currentPlayback.getPlaybackType() === 'live') {
                 if (this.selectedLevelId !== -1) {
                     currentPlayback.currentLevel = this.selectedLevelId;
@@ -47478,13 +47565,13 @@ class LevelSelector extends UICorePlugin {
         return false;
     }
     goBack() {
-        trace(`${T$7} goBack`);
+        trace(`${T$8} goBack`);
         this.isOpen = false;
         this.core.trigger('gear:refresh');
         this.deferRender();
     }
     setLevel(index) {
-        trace(`${T$7} setIndexLevel`, { index });
+        trace(`${T$8} setIndexLevel`, { index });
         this.selectedLevelId = index;
         if (!this.core.activePlayback) {
             return;
@@ -47502,7 +47589,7 @@ class LevelSelector extends UICorePlugin {
         this.deferRender();
     }
     onShowLevelSelectMenu() {
-        trace(`${T$7} onShowLevelSelectMenu`);
+        trace(`${T$8} onShowLevelSelectMenu`);
         this.isOpen = true;
         this.renderDropdown();
         this.highlightCurrentLevel();
@@ -47538,11 +47625,11 @@ class LevelSelector extends UICorePlugin {
         return this.levelLabels[index] ?? formatLevelLabel(this.levels[index]);
     }
     updateCurrentLevel(info) {
-        trace(`${T$7} updateCurrentLevel`, { info });
+        trace(`${T$8} updateCurrentLevel`, { info });
         this.highlightCurrentLevel();
     }
     highlightCurrentLevel() {
-        trace(`${T$7} highlightCurrentLevel`, {
+        trace(`${T$8} highlightCurrentLevel`, {
             selectedLevelId: this.selectedLevelId,
         });
         this.allLevelElements().removeClass('current');
@@ -47606,6 +47693,10 @@ function calculateSize(original) {
 
 const logoHTML = "<div class=\"clappr-logo control-need-disable\">\n    <img class=\"clappr-logo-img\"/>\n</div>\n";
 
+/**
+ * The plugin adds custom logo to the player.
+ * @beta
+ */
 class Logo extends UIContainerPlugin {
     hasStartedPlaying = false;
     $logoContainer = null;
@@ -47883,7 +47974,7 @@ class MediaControl extends UICorePlugin {
         return { min: CLAPPR_VERSION };
     }
     get disabled() {
-        const playbackIsNOOP = this.container && this.container.getPlaybackType() === Playback.NO_OP;
+        const playbackIsNOOP = this.core.activeContainer && this.core.activeContainer.getPlaybackType() === Playback.NO_OP;
         return this.userDisabled || playbackIsNOOP;
     }
     /**
@@ -48564,6 +48655,8 @@ class MediaControl extends UICorePlugin {
      */
     getElement(name) {
         switch (name) {
+            case 'audioTracksSelector':
+                return this.$audioTracksSelector;
             case 'clipText':
                 return this.$clipText;
             case 'bottomGear':
@@ -48868,7 +48961,10 @@ 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$6 = 'plugins.media_control_multicamera';
+const T$7 = 'plugins.media_control_multicamera';
+/**
+ * The plugin adds support for loading multiple streams and switching between them using the media control UI.
+ */
 class MultiCamera extends UICorePlugin {
     currentCamera = null;
     currentTime = 0;
@@ -49010,7 +49106,7 @@ class MultiCamera extends UICorePlugin {
     }
     onCameraSelect(event) {
         const value = event.currentTarget.dataset.multicameraSelectorSelect;
-        trace(`${T$6} onCameraSelect`, { value });
+        trace(`${T$7} onCameraSelect`, { value });
         if (value !== undefined) {
             this.changeById(parseInt(value, 10));
         }
@@ -49137,13 +49233,13 @@ class MultiCamera extends UICorePlugin {
         }
     }
     changeById(id) {
-        trace(`${T$6} changeById`, { id });
+        trace(`${T$7} changeById`, { id });
         queueMicrotask(() => {
             const playbackOptions = this.core.options.playback || {};
             // TODO figure out what this does
             playbackOptions.recycleVideo = Browser.isMobile;
             this.currentCamera = this.findElementById(id) ?? null;
-            trace(`${T$6} changeById`, { id, currentCamera: this.currentCamera, multicamera: this.multicamera });
+            trace(`${T$7} changeById`, { id, currentCamera: this.currentCamera, multicamera: this.multicamera });
             if (!this.currentCamera) {
                 return;
             }
@@ -49160,7 +49256,7 @@ class MultiCamera extends UICorePlugin {
             // TODO remove?
             // for html5 playback:
             this.options.dvrEnabled = this.currentCamera.dvr;
-            trace(`${T$6} changeById`, { currentCamera: this.currentCamera });
+            trace(`${T$7} changeById`, { currentCamera: this.currentCamera });
             // TODO
             this.core.configure({
                 playback: playbackOptions,
@@ -49218,17 +49314,39 @@ 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$5 = `plugins.media_control_pip`;
+const T$6 = `plugins.pip`;
+/**
+ * Enables picture in picture mode.
+ * @beta
+ * @remarks
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ *
+ * It renders a button to toggle picture in picture mode in the media control UI.
+ */
 class PictureInPicture extends UICorePlugin {
+    /**
+     * @internal
+     */
     get name() {
-        return 'media_control_pip';
+        return 'pip';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
+    /**
+     * @internal
+     */
     static get version() {
         return VERSION$2;
     }
+    /**
+     * @internal
+     */
     get events() {
         return {
             'click button': 'togglePictureInPicture',
@@ -49237,16 +49355,22 @@ class PictureInPicture extends UICorePlugin {
     get videoElement() {
         return this.core.activePlayback.el;
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render);
     }
     isPiPSupported() {
-        trace(`${T$5} isPiPSupported`, {
+        trace(`${T$6} isPiPSupported`, {
             pictureInPictureEnabled: document.pictureInPictureEnabled,
             requestPictureInPicture: HTMLVideoElement.prototype.requestPictureInPicture,
         });
         return document.pictureInPictureEnabled && !!HTMLVideoElement.prototype.requestPictureInPicture;
     }
+    /**
+     * @internal
+     */
     render() {
         if (!this.isPiPSupported()) {
             return this;
@@ -49260,7 +49384,7 @@ class PictureInPicture extends UICorePlugin {
         return this;
     }
     togglePictureInPicture() {
-        trace(`${T$5} togglePictureInPicture`);
+        trace(`${T$6} togglePictureInPicture`);
         if (this.videoElement !== document.pictureInPictureElement) {
             this.requestPictureInPicture();
         }
@@ -49269,13 +49393,13 @@ class PictureInPicture extends UICorePlugin {
         }
     }
     requestPictureInPicture() {
-        trace(`${T$5} requestPictureInPicture`, {
+        trace(`${T$6} requestPictureInPicture`, {
             videoElement: !!this.videoElement,
         });
         this.videoElement.requestPictureInPicture();
     }
     exitPictureInPicture() {
-        trace(`${T$5} exitPictureInPicture`);
+        trace(`${T$6} exitPictureInPicture`);
         document.exitPictureInPicture();
     }
 }
@@ -49300,26 +49424,51 @@ const DEFAULT_PLAYBACK_RATES = [
 const DEFAULT_PLAYBACK_RATE = '1.0';
 // TODO
 const MEDIACONTROL_PLAYBACKRATE = 'playbackRate';
+/**
+ * Allows changing the playback speed of the video.
+ * @beta
+ *
+ * @remarks
+ * Depends on:
+ *
+ * - {@link MediaControl | media_control}
+ *
+ * - {@link BottomGear | bottom_gear}
+ *
+ * It renders a button in the gear menu, which opens a dropdown with the available playback rates.
+ */
 class PlaybackRate extends UICorePlugin {
     currentPlayback = null;
     playbackRates = DEFAULT_PLAYBACK_RATES;
     prevSelectedRate;
     selectedRate = DEFAULT_PLAYBACK_RATE;
+    /**
+     * @internal
+     */
     get name() {
-        return 'media_control_playback_rate';
+        return 'playback_rate';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    get template() {
-        return tmpl(pluginHtml$3);
-    }
+    static template = tmpl(pluginHtml$3);
+    static buttonTemplate = tmpl(buttonHtml);
+    static listTemplate = tmpl(listHtml);
+    /**
+     * @internal
+     */
     get attributes() {
         return {
             'class': this.name,
             'data-playback-rate-select': ''
         };
     }
+    /**
+     * @internal
+     */
     get events() {
         return {
             'click .gear-sub-menu_btn': 'onRateSelect',
@@ -49327,8 +49476,12 @@ class PlaybackRate extends UICorePlugin {
             'click .go-back': 'goBack',
         };
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         this.listenTo(this.core, 'gear:rendered', this.render);
+        // TODO this.core.getPlugin('media_control'), bottom_gear
         this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this.reload);
         this.listenTo(this.core.mediaControl, MEDIACONTROL_PLAYBACKRATE, this.updatePlaybackRate);
         this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
@@ -49382,6 +49535,9 @@ class PlaybackRate extends UICorePlugin {
         this.currentPlayback = this.core.activePlayback;
         return !(this.currentPlayback?.tagName !== 'video' && this.currentPlayback?.tagName !== 'audio');
     }
+    /**
+     * @internal
+     */
     render() {
         const container = this.core.activeContainer;
         if (this.core.getPlaybackType() === Playback.LIVE && !container.isDvrEnabled()) {
@@ -49395,9 +49551,7 @@ class PlaybackRate extends UICorePlugin {
             this.selectedRate = cfg.defaultValue || DEFAULT_PLAYBACK_RATE;
         }
         if (this.shouldRender()) {
-            const t = tmpl(buttonHtml);
-            // const html = t({ playbackRates: this.playbackRates, title: this.getTitle() });
-            const button = t({
+            const button = PlaybackRate.buttonTemplate({
                 title: this.getTitle(),
                 speedIcon,
                 arrowRightIcon,
@@ -49445,8 +49599,7 @@ class PlaybackRate extends UICorePlugin {
         return false;
     }
     onShowMenu() {
-        const t = tmpl(listHtml);
-        this.$el.html(t({
+        this.$el.html(PlaybackRate.listTemplate({
             playbackRates: this.playbackRates,
             arrowLeftIcon,
             checkIcon,
@@ -49490,7 +49643,7 @@ const posterHTML = "<div class=\"play-wrapper\" data-poster></div>\n";
 //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 in the LICENSE file.
-const T$4 = 'plugins.poster_custom';
+const T$5 = 'plugins.poster_custom';
 /**
  * Displays a poster image in the background and a big play button on top when playback is stopped
  * @beta
@@ -49593,13 +49746,13 @@ class Poster extends UIContainerPlugin {
      * Disables the plugin, unmounting it from the DOM
      */
     disable() {
-        trace(`${T$4} disable`);
+        trace(`${T$5} disable`);
         this.hasStartedPlaying = false;
         this.playRequested = false;
         super.disable();
     }
     onError(error) {
-        trace(`${T$4} onError`, {
+        trace(`${T$5} onError`, {
             error,
             enabled: this.enabled,
         });
@@ -49612,18 +49765,18 @@ class Poster extends UIContainerPlugin {
         }
     }
     onPlay() {
-        trace(`${T$4} onPlay`);
+        trace(`${T$5} onPlay`);
         this.hasStartedPlaying = true;
         this.playRequested = false;
         this.update();
     }
     onPlayIntent() {
-        trace(`${T$4} onPlayIntent`);
+        trace(`${T$5} onPlayIntent`);
         this.playRequested = true;
         this.update();
     }
     onStop() {
-        trace(`${T$4} onStop`, {
+        trace(`${T$5} onStop`, {
             enabled: this.enabled,
         });
         this.hasStartedPlaying = false;
@@ -49631,7 +49784,7 @@ class Poster extends UIContainerPlugin {
         this.update();
     }
     updatePlayButton(show) {
-        trace(`${T$4} updatePlayButton`, {
+        trace(`${T$5} updatePlayButton`, {
             show,
             chromeless: this.options.chromeless,
             allowUserInteraction: this.options.allowUserInteraction,
@@ -49660,7 +49813,7 @@ class Poster extends UIContainerPlugin {
         this.$el.removeClass('clickable');
     }
     clicked() {
-        trace(`${T$4} clicked`, {
+        trace(`${T$5} clicked`, {
             hasStartedPlaying: this.hasStartedPlaying,
             chromeless: this.options.chromeless,
             allowUserInteraction: this.options.allowUserInteraction,
@@ -49684,7 +49837,7 @@ class Poster extends UIContainerPlugin {
         return !this.container.playback.isAudioOnly;
     }
     update() {
-        trace(`${T$4} update`, {
+        trace(`${T$5} update`, {
             shouldRender: this.shouldRender,
         });
         if (!this.shouldRender) {
@@ -49697,7 +49850,7 @@ class Poster extends UIContainerPlugin {
         this.updatePoster();
     }
     updatePoster() {
-        trace(`${T$4} updatePoster`, {
+        trace(`${T$5} updatePoster`, {
             hasStartedPlaying: this.hasStartedPlaying,
         });
         if (!this.hasStartedPlaying) {
@@ -49712,7 +49865,7 @@ class Poster extends UIContainerPlugin {
         this.$el.show();
     }
     hidePoster() {
-        trace(`${T$4} hidePoster`, {
+        trace(`${T$5} hidePoster`, {
             shouldHideOnPlay: this.shouldHideOnPlay(),
         });
         if (!this.options.disableMediaControl) {
@@ -49766,8 +49919,12 @@ const seekTimeHTML = "<span data-seek-time></span>\n<span data-duration></span>\
 
 // 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 in the LICENSE file.
+// license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE
 const { formatTime } = Utils;
+/**
+ * The plugin adds a seek time indicator to the media control UI.
+ * @beta
+ */
 class SeekTime extends UICorePlugin {
     get name() {
         return 'media_control_seek_time';
@@ -49924,6 +50081,9 @@ const fbIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32px\"
 
 const twIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32px\" height=\"32px\" viewBox=\"0 0 32 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->\n    <title>twitter</title>\n    <desc>Created with Sketch.</desc>\n    <defs></defs>\n    <g id=\"twitter\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g fill-rule=\"nonzero\" id=\"Shape\">\n            <path d=\"M32,30 C32,31.104 31.104,32 30,32 L2,32 C0.896,32 0,31.104 0,30 L0,2 C0,0.896 0.896,0 2,0 L30,0 C31.104,0 32,0.896 32,2 L32,30 Z\" fill=\"#55ACEE\"></path>\n            <path class=\"icon-hover\" d=\"M25.987,9.894 C25.251,10.216 24.462,10.431 23.63,10.529 C24.48,10.031 25.13,9.24 25.436,8.298 C24.644,8.759 23.766,9.095 22.831,9.276 C22.083,8.491 21.017,8 19.838,8 C17.572,8 15.738,9.807 15.738,12.038 C15.738,12.352 15.774,12.663 15.842,12.96 C12.435,12.788 9.413,11.181 7.39,8.739 C7.038,9.336 6.834,10.029 6.834,10.771 C6.834,12.17 7.56,13.406 8.658,14.131 C7.987,14.109 7.354,13.928 6.802,13.625 C6.801,13.642 6.801,13.659 6.801,13.677 C6.801,15.632 8.215,17.266 10.091,17.637 C9.748,17.727 9.386,17.779 9.01,17.779 C8.746,17.779 8.49,17.755 8.24,17.707 C8.76,19.311 10.274,20.478 12.068,20.512 C10.67,21.594 8.9,22.24 6.979,22.24 C6.649,22.24 6.321,22.222 6,22.184 C7.814,23.329 9.971,23.997 12.287,23.997 C19.828,23.997 23.953,17.843 23.953,12.506 C23.953,12.333 23.948,12.156 23.941,11.985 C24.741,11.414 25.438,10.703 25.987,9.894 Z\" fill=\"#FFFFFF\"></path>\n        </g>\n    </g>\n</svg>";
 
+/**
+ * The plugin adds a share button to the media control UI.
+ */
 class Share extends UICorePlugin {
     hide = false;
     container = null;
@@ -50041,6 +50201,9 @@ class Share extends UICorePlugin {
 
 const pluginHtml$1 = "<div class=\"skip-container\" data-skip-container>\n    <div class=\"skip-item\" data-skip-left>\n    </div>\n    <div class=\"skip-item\" data-skip-mid>\n    </div>\n    <div class=\"skip-item\" data-skip-right>\n    </div>\n</div>\n";
 
+/**
+ * The plugin adds skip controls to the media control UI.
+ */
 class SkipTime extends UICorePlugin {
     get name() {
         return 'skip_time';
@@ -50129,7 +50292,7 @@ const spinnerHTML = "<div data-bounce1></div>\n<div data-bounce2></div>\n<div da
 // 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 in the LICENSE file.
-const T$3 = 'plugins.spinner';
+const T$4 = 'plugins.spinner';
 /**
  * Custom events emitted by the plugin
  */
@@ -50194,11 +50357,11 @@ class SpinnerThreeBounce extends UIContainerPlugin {
         this.hasBuffering = false;
     }
     onPlay() {
-        trace(`${T$3} onPlay`);
+        trace(`${T$4} onPlay`);
         this.hide();
     }
     onStop() {
-        trace(`${T$3} onStop`, {
+        trace(`${T$4} onStop`, {
             showOnError: this.options.spinner?.showOnError,
             hasFatalError: this.hasFatalError,
         });
@@ -50208,7 +50371,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
     }
     onError(e) {
         this.hasFatalError = e.code === PlaybackErrorCode.MediaSourceUnavailable;
-        trace(`${T$3} onError`, {
+        trace(`${T$4} onError`, {
             e,
             showOnError: this.options.spinner?.showOnError,
             hasFatalError: this.hasFatalError,
@@ -50242,7 +50405,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
      */
     render() {
         const showOnStart = this.options.spinner?.showOnStart;
-        trace(`${T$3} render`, {
+        trace(`${T$4} render`, {
             buffering: this.container.buffering,
             showOnStart,
         });
@@ -50261,129 +50424,200 @@ class SpinnerThreeBounce extends UIContainerPlugin {
     }
 }
 
-// An example implementation of client side performancestatistics
-const CUSTOM_EVENTS_CONTAINER_START = 'container:start';
-const WATCH_CUTOFF = 5;
-const HEATMAP_INTERVAL = 10;
-// TODO rewrite as core plugin
-class Statistics extends ContainerPlugin {
+const T$3 = 'plugins.source_controller';
+const INITIAL_RETRY_DELAY = 1000;
+const MAX_RETRY_DELAY = 5000;
+const RETRY_DELAY_BLUR = 500;
+const VERSION$1 = '0.0.1';
+function noSync(cb) {
+    queueMicrotask(cb);
+}
+/**
+ * This plugin is responsible for managing the automatic failover between sources.
+ * @beta
+ * @remarks
+ * Have a look at the {@link https://miro.com/app/board/uXjVLiN15tY=/?share_link_id=390327585787 | source failover diagram} for the details
+ * on how sources ordering and selection works.
+ *
+ * This plugin does not expose any public methods apart from required by the Clappr plugin interface.
+ * It is supposed to work autonomously.
+ *
+ * @example
+ * ```ts
+ * import { SourceController } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(SourceController)
+ * ```
+ */
+class SourceController extends CorePlugin {
+    /*
+     * The Logic itself is quite simple:
+     * * Here is the short diagram:
+     *
+     * sources_list:
+     *       - a.mpd  |    +--------------------+
+     *       - b.m3u8 |--->|         init       |
+     *       - ...    |    |--------------------|
+     *                     | current_source = 0 |
+     *                     +--------------------+
+     *                            |
+     *                            |  source = a.mpd
+     *                            |  playback = dash.js
+     *                            v
+     *                      +------------------+
+     *                  +-->|   load source    |
+     *                  |   +---------|--------+
+     *                  |             v
+     *                  |   +------------------+
+     *                  |   |       play       |
+     *                  |   +---------|--------+
+     *                  |             |
+     *                  |             v
+     *                  |   +-----------------------+
+     *                  |   |  on playback_error    |
+     *                  |   |-----------------------|
+     *                  |   | current_source =      |
+     *                  |   |  (current_source + 1) |
+     *                  |   |  % len sources_list   |
+     *                  |   |                       |
+     *                  |   | delay 1..3s           |
+     *                  |   +---------------|-------+
+     *                  |                   |
+     *                  |   source=b.m3u8   |
+     *                  |   playback=hls.js |
+     *                  +-------------------+
+     *
+     */
+    sourcesList = [];
+    currentSourceIndex = 0;
+    sourcesDelay = {};
+    active = false;
+    sync = noSync;
+    /**
+     * @internal
+     */
     get name() {
-        return 'statistics_gplayer';
+        return 'source_controller';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    started = false;
-    timeStart = 0;
-    heatmapSent = false;
-    heatmapLastTime = 0;
-    watchSent = false;
-    bufTracking = false;
-    lags = 0;
-    /**
-     * The time when buffering last started.
-     */
-    bufLastStarted = 0;
+    constructor(core) {
+        super(core);
+        this.sourcesList = this.core.options.sources;
+        if (this.core.options.source !== undefined) {
+            // prevent Clappr from loading all sources simultaneously
+            this.core.options.sources = [this.core.options.source];
+        }
+        else {
+            this.core.options.sources = this.core.options.sources.slice(0, 1);
+        }
+    }
     /**
-     * The accumulated buffering duration.
+     * @internal
      */
-    bufAccDuration = 0;
-    constructor(container) {
-        super(container);
-        assert(this.options.statistics &&
-            typeof this.options.statistics.send === 'function', 'Statistics plugin requires statistics options');
-    }
     bindEvents() {
-        // TODO remove this
-        this.listenToOnce(this.container, CUSTOM_EVENTS_CONTAINER_START, this.onStart);
-        this.listenToOnce(this.container, Events$1.CONTAINER_READY, this.onReady);
-        this.listenTo(this.container, Events$1.CONTAINER_STATE_BUFFERING, this.onBuffering);
-        this.listenTo(this.container, Events$1.CONTAINER_STATE_BUFFERFULL, this.onBufferFull);
-        this.listenTo(this.container.playback, Events$1.PLAYBACK_TIMEUPDATE, this.onTimeUpdateLive);
-        this.listenTo(this.container.playback, Events$1.PLAYBACK_LEVEL_SWITCH_START, this.startLevelSwitch);
-        this.listenTo(this.container.playback, Events$1.PLAYBACK_LEVEL_SWITCH_END, this.stopLevelSwitch);
-    }
-    startLevelSwitch() {
-        this.bufTracking = false;
-    }
-    stopLevelSwitch() {
-        this.bufTracking = true;
+        super.bindEvents();
+        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, () => this.onReady());
     }
-    onBuffering() {
-        if (this.bufTracking) {
-            this.bufLastStarted = performance.now();
+    onReady() {
+        trace(`${T$3} onReady`, {
+            retrying: this.active,
+            currentSource: this.sourcesList[this.currentSourceIndex],
+        });
+        const spinner = this.core.activeContainer?.getPlugin('spinner');
+        if (spinner) {
+            this.sync = (cb) => {
+                spinner.once(SpinnerEvents.SYNC, cb);
+            };
         }
-    }
-    onBufferFull() {
-        if (this.bufTracking && this.bufLastStarted) {
-            this.bufAccDuration += performance.now() - this.bufLastStarted;
-            this.lags++;
+        else {
+            this.sync = noSync;
         }
-        this.bufTracking = true;
-    }
-    onReady() {
-        this.initEvent();
-        if (this.options.autoPlay) {
-            this.onStart();
+        this.bindContainerEventListeners();
+        if (this.active) {
+            this.core.activeContainer?.getPlugin('poster_custom')?.disable();
+            spinner?.show();
         }
     }
-    initEvent() {
-        this.sendMessage('init');
-    }
-    sendMessage(state) {
-        this.send(state, {
-        // embed_url: this.options.referer,
-        // user_agent: Browser.userAgent
+    bindContainerEventListeners() {
+        this.core.activePlayback.on(Events$1.PLAYBACK_ERROR, (error) => {
+            trace(`${T$3} on PLAYBACK_ERROR`, {
+                error: {
+                    code: error?.code,
+                    description: error?.description,
+                    level: error?.level,
+                },
+                retrying: this.active,
+                currentSource: this.sourcesList[this.currentSourceIndex],
+            });
+            switch (error.code) {
+                case PlaybackErrorCode.MediaSourceUnavailable:
+                    this.core.activeContainer?.getPlugin('poster_custom')?.disable();
+                    this.retryPlayback();
+                    break;
+            }
         });
-    }
-    send(event, data = {}) {
-        this.options.statistics.send({
-            event,
-            type: this.container.getPlaybackType(),
-            ...data,
+        this.core.activePlayback.on(Events$1.PLAYBACK_PLAY, () => {
+            trace(`${T$3} on PLAYBACK_PLAY`, {
+                currentSource: this.sourcesList[this.currentSourceIndex],
+                retrying: this.active,
+            });
+            if (this.active) {
+                this.reset();
+                // TODO make poster reset its state on enable
+                this.core.activeContainer?.getPlugin('poster_custom')?.enable();
+                this.core.activeContainer?.getPlugin('spinner')?.hide();
+            }
         });
     }
-    sendHeatmap(time) {
-        const res = {
-            buffering: Math.round(this.bufAccDuration),
-            lags: this.lags,
-        };
-        this.bufAccDuration = 0;
-        this.lags = 0;
-        if (this.container.getPlaybackType() === Playback.VOD) {
-            res.timestamp = time;
-        }
-        this.send('heatmap', res);
-        this.heatmapSent = true;
-        this.heatmapLastTime = time;
+    reset() {
+        this.active = false;
+        this.sourcesDelay = {};
     }
-    onTimeUpdateLive({ current }) {
-        // TODO check the `current` values for the live streams
-        if (!this.timeStart) {
-            this.timeStart = current;
-        }
-        try {
-            const elapsed = current - this.timeStart;
-            const heatmapElapsed = current - this.heatmapLastTime;
-            // TODO check if the heatmap is only needed for the live streams
-            if (!this.heatmapSent || heatmapElapsed >= HEATMAP_INTERVAL) {
-                this.sendHeatmap(current);
-            }
-            if (!this.watchSent && elapsed >= WATCH_CUTOFF) {
-                this.watchSent = true;
-                this.sendMessage('watch');
-            }
-        }
-        catch (error) {
-            reportError(error);
-        }
+    retryPlayback() {
+        trace(`${T$3} retryPlayback enter`, {
+            currentSourceIndex: this.currentSourceIndex,
+            currentSource: this.sourcesList[this.currentSourceIndex],
+        });
+        this.active = true;
+        this.getNextMediaSource().then((nextSource) => {
+            trace(`${T$3} retryPlayback syncing...`, {
+                nextSource,
+            });
+            const rnd = RETRY_DELAY_BLUR * Math.random();
+            this.sync(() => {
+                trace(`${T$3} retryPlayback loading...`);
+                this.core.load(nextSource.source, nextSource.mimeType);
+                trace(`${T$3} retryPlayback loaded`, {
+                    nextSource,
+                });
+                setTimeout(() => {
+                    // this.core.activePlayback.consent()
+                    this.core.activePlayback.play();
+                    trace(`${T$3} retryPlayback playing`);
+                }, rnd);
+            });
+        });
     }
-    onStart() {
-        if (this.started) {
-            return;
-        }
-        this.started = true;
-        this.sendMessage('start');
+    getNextMediaSource() {
+        return new Promise((resolve) => {
+            this.sourcesDelay[this.currentSourceIndex] = Math.min(MAX_RETRY_DELAY, (this.sourcesDelay[this.currentSourceIndex] || INITIAL_RETRY_DELAY) * 2);
+            this.currentSourceIndex =
+                (this.currentSourceIndex + 1) % this.sourcesList.length;
+            const delay = this.sourcesDelay[this.currentSourceIndex] || INITIAL_RETRY_DELAY;
+            const s = this.sourcesList[this.currentSourceIndex];
+            setTimeout(() => resolve(s), delay);
+        });
+    }
+    /**
+     * @internal
+     */
+    static get version() {
+        return VERSION$1;
     }
 }
 
@@ -50395,7 +50629,7 @@ const comboboxHTML = "<button data-subtitles-button class='media-control-button
 
 const stringHTML = "<div class=\"subtitle-string\">\n  <p></p>\n</div>\n";
 
-const VERSION$1 = '2.19.14';
+const VERSION = '2.19.14';
 const LOCAL_STORAGE_SUBTITLES_ID = 'gplayer.plugins.subtitles.selected';
 const T$2 = 'plugins.subtitles';
 const NO_TRACK = { language: 'off' };
@@ -50449,7 +50683,7 @@ class Subtitles extends UICorePlugin {
      * @internal
      */
     static get version() {
-        return VERSION$1;
+        return VERSION;
     }
     static template = tmpl(comboboxHTML);
     static templateString = tmpl(stringHTML);
@@ -50761,6 +50995,184 @@ class Subtitles extends UICorePlugin {
     }
 }
 
+// An example implementation of client side performancestatistics
+const WATCH_CUTOFF = 5;
+const STALL_MEASURE_PERIOD = 10;
+const T$1 = 'plugins.telemetry';
+/**
+ * Telemetry event type
+ * @beta
+ */
+var TelemetryEvent;
+(function (TelemetryEvent) {
+    TelemetryEvent[TelemetryEvent["Init"] = 1] = "Init";
+    TelemetryEvent[TelemetryEvent["Start"] = 2] = "Start";
+    TelemetryEvent[TelemetryEvent["Watch"] = 3] = "Watch";
+    TelemetryEvent[TelemetryEvent["Stall"] = 4] = "Stall";
+})(TelemetryEvent || (TelemetryEvent = {}));
+/**
+ * Collects and reports the performance statistics.
+ * @beta
+ * @remarks
+ * This plugin is experimental and its API is likely to change.
+ *
+ * Configuration options {@link TelemetryPluginSettings}
+ *
+ * @example
+ * ```ts
+ * import { Statistics } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(Statistics)
+ *
+ * const player = new Player({
+ *   statistics: {
+ *     send: (data) => {
+ *        fetch('/stats', {
+ *          method: 'POST',
+ *          body: JSON.stringify(data),
+ *          headers: { 'content-type': 'application/json' },
+ *        })
+ *     },
+ *   },
+ *   ...
+ * })
+ * ```
+ */
+class Telemetry extends ContainerPlugin {
+    /**
+     * The name of the plugin.
+     */
+    get name() {
+        return 'telemetry';
+    }
+    /**
+     * The supported version of the plugin.
+     */
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    started = false;
+    timeStart = 0;
+    stallSent = false;
+    stallLastTime = 0;
+    watchSent = false;
+    bufTracking = false;
+    numStalls = 0;
+    /**
+     * The time when buffering last started.
+     */
+    bufLastStarted = 0;
+    /**
+     * The accumulated buffering duration.
+     */
+    stallAcc = 0;
+    constructor(container) {
+        super(container);
+        assert(this.options.telemetry &&
+            typeof this.options.telemetry.send === 'function', 'Telemetry plugin configuration is invalid: `send` option is required');
+    }
+    /**
+     * @internal
+     */
+    bindEvents() {
+        // TODO remove this
+        // this.listenToOnce(
+        //   this.container,
+        //   CUSTOM_EVENTS_CONTAINER_START,
+        //   this.onStart,
+        // )
+        this.listenToOnce(this.container, Events$1.CONTAINER_READY, this.onReady);
+        this.listenTo(this.container, Events$1.CONTAINER_STATE_BUFFERING, this.onBuffering);
+        this.listenTo(this.container, Events$1.CONTAINER_STATE_BUFFERFULL, this.onBufferFull);
+        this.listenTo(this.container.playback, Events$1.PLAYBACK_TIMEUPDATE, this.onTimeUpdate);
+        this.listenTo(this.container.playback, Events$1.PLAYBACK_LEVEL_SWITCH_START, this.startLevelSwitch);
+        this.listenTo(this.container.playback, Events$1.PLAYBACK_LEVEL_SWITCH_END, this.endLevelSwitch);
+    }
+    startLevelSwitch() {
+        this.bufTracking = false;
+    }
+    endLevelSwitch() {
+        this.bufTracking = true;
+    }
+    onBuffering() {
+        if (this.bufTracking) {
+            this.bufLastStarted = performance.now();
+        }
+    }
+    onBufferFull() {
+        if (this.bufTracking && this.bufLastStarted) {
+            this.stallAcc += performance.now() - this.bufLastStarted;
+            this.numStalls++;
+        }
+        this.bufTracking = true;
+    }
+    onReady() {
+        this.sendInit();
+        trace(`${T$1} onReady`, {
+            autoPlay: this.options.autoPlay,
+        });
+        if (this.options.autoPlay) {
+            this.onStart();
+        }
+        else {
+            this.listenToOnce(this.container.playback, Events$1.PLAYBACK_PLAY_INTENT, this.onStart);
+        }
+    }
+    sendInit() {
+        this.send({ event: TelemetryEvent.Init });
+    }
+    send(event) {
+        this.options.telemetry.send({
+            type: this.container.getPlaybackType(),
+            ...event,
+        });
+    }
+    sendStall(time) {
+        // TODO don't send if no stalls?
+        const res = {
+            event: TelemetryEvent.Stall,
+            count: this.numStalls,
+            time,
+            total_ms: Math.round(this.stallAcc * 1000),
+        };
+        this.stallAcc = 0;
+        this.numStalls = 0;
+        this.send(res);
+        this.stallSent = true;
+        this.stallLastTime = time;
+    }
+    onTimeUpdate({ current }) {
+        if (!this.timeStart) {
+            this.timeStart = current;
+        }
+        try {
+            const elapsed = current - this.timeStart;
+            const stallElapsed = current - this.stallLastTime;
+            if (!this.stallSent || stallElapsed >= STALL_MEASURE_PERIOD) {
+                this.sendStall(current);
+            }
+            if (!this.watchSent && elapsed >= WATCH_CUTOFF) {
+                this.watchSent = true;
+                this.send({
+                    event: TelemetryEvent.Watch,
+                });
+            }
+        }
+        catch (error) {
+            reportError(error);
+        }
+    }
+    onStart() {
+        if (this.started) {
+            return;
+        }
+        this.started = true;
+        this.send({
+            event: TelemetryEvent.Start,
+        });
+    }
+}
+
 var parseSrt$1 = {exports: {}};
 
 var parseSrt = parseSrt$1.exports;
@@ -50877,7 +51289,29 @@ 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.media_control_thumbnails';
+const T = 'plugins.thumbnails';
+/**
+ * Displays the thumbnails of the video when available.
+ * @beta
+ * @example
+ * ```ts
+ * import { Thumbnails } from '@gcorevideo/player'
+ *
+ * Player.registerPlugin(Thumbnails)
+ *
+ * new Player({
+ *   thumbnails: {
+ *     backdropHeight: 200,
+ *     backdropMinOpacity: 0.9,
+ *     backdropMaxOpacity: 0.99,
+ *     spotlightHeight: 100,
+ *     vtt: '1\n00:00:00,000 --> 00:00:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,0,100,56\n\n2\n00:00:10,000 --> 00:00:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,0,100,56\n\n3\n00:00:20,000 --> 00:00:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,0,100,56\n\n4\n00:00:30,000 --> 00:00:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,0,100,56\n\n5\n00:00:40,000 --> 00:00:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,0,100,56\n\n6\n00:00:50,000 --> 00:01:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,0,100,56\n\n7\n00:01:00,000 --> 00:01:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,0,100,56\n\n8\n00:01:10,000 --> 00:01:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,56,100,56\n\n9\n00:01:20,000 --> 00:01:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,56,100,56\n\n10\n00:01:30,000 --> 00:01:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,56,100,56\n\n11\n00:01:40,000 --> 00:01:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,56,100,56\n\n12\n00:01:50,000 --> 00:02:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,56,100,56\n\n13\n00:02:00,000 --> 00:02:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,56,100,56\n\n14\n00:02:10,000 --> 00:02:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,56,100,56\n\n15\n00:02:20,000 --> 00:02:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,112,100,56\n\n16\n00:02:30,000 --> 00:02:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,112,100,56\n\n17\n00:02:40,000 --> 00:02:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,112,100,56\n\n18\n00:02:50,000 --> 00:03:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,112,100,56\n\n19\n00:03:00,000 --> 00:03:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,112,100,56\n\n20\n00:03:10,000 --> 00:03:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,112,100,56\n\n21\n00:03:20,000 --> 00:03:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,112,100,56\n\n22\n00:03:30,000 --> 00:03:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,168,100,56\n\n23\n00:03:40,000 --> 00:03:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,168,100,56\n\n24\n00:03:50,000 --> 00:04:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,168,100,56\n\n25\n00:04:00,000 --> 00:04:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,168,100,56\n\n26\n00:04:10,000 --> 00:04:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,168,100,56\n\n27\n00:04:20,000 --> 00:04:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,168,100,56\n\n28\n00:04:30,000 --> 00:04:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,168,100,56\n\n29\n00:04:40,000 --> 00:04:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,224,100,56\n\n30\n00:04:50,000 --> 00:05:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,224,100,56\n\n31\n00:05:00,000 --> 00:05:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,224,100,56\n\n32\n00:05:10,000 --> 00:05:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,224,100,56\n\n33\n00:05:20,000 --> 00:05:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,224,100,56\n\n34\n00:05:30,000 --> 00:05:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,224,100,56\n\n35\n00:05:40,000 --> 00:05:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,224,100,56\n\n36\n00:05:50,000 --> 00:06:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,280,100,56\n\n37\n00:06:00,000 --> 00:06:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,280,100,56\n\n38\n00:06:10,000 --> 00:06:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,280,100,56\n\n39\n00:06:20,000 --> 00:06:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,280,100,56\n\n40\n00:06:30,000 --> 00:06:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,280,100,56\n\n41\n00:06:40,000 --> 00:06:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,280,100,56\n\n42\n00:06:50,000 --> 00:07:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,280,100,56\n\n43\n00:07:00,000 --> 00:07:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,336,100,56\n\n44\n00:07:10,000 --> 00:07:20,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,336,100,56\n\n45\n00:07:20,000 --> 00:07:30,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,336,100,56\n\n46\n00:07:30,000 --> 00:07:40,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,336,100,56\n\n47\n00:07:40,000 --> 00:07:50,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,336,100,56\n\n48\n00:07:50,000 --> 00:08:00,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,336,100,56\n\n49\n00:08:00,000 --> 00:08:10,000\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,336,100,56\n',
+ *     sprite:
+ *      'https://static.gvideo.co/videoplatform/sprites/2675/2452164_3dk4NsRt6vWsffEr.mp4_sprite.jpg',
+ *   },
+ * })
+ * ```
+ */
 class Thumbnails extends UICorePlugin {
     _$spotlight = null;
     _$backdrop = null;
@@ -50892,20 +51326,27 @@ class Thumbnails extends UICorePlugin {
     _thumbsLoaded = false;
     _oldContainer = null;
     _thumbs = [];
+    /**
+     * @internal
+     */
     get name() {
-        return 'media_control_thumbnails';
+        return 'thumbnails';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
+    /**
+     * @internal
+     */
     get attributes() {
         return {
-            'class': this.name
+            class: this.name,
         };
     }
-    get template() {
-        return tmpl(pluginHtml);
-    }
+    static template = tmpl(pluginHtml);
     /*
      * Helper to build the "thumbs" property for a sprite sheet.
      *
@@ -50949,6 +51390,9 @@ class Thumbnails extends UICorePlugin {
         return thumbs;
     }
     // TODO check if seek enabled
+    /**
+     * @internal
+     */
     bindEvents() {
         this.listenToOnce(this.core, Events$1.CORE_READY, this._onCoreReady);
         this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_MOUSEMOVE_SEEKBAR, this._onMouseMove);
@@ -50965,7 +51409,9 @@ class Thumbnails extends UICorePlugin {
     }
     _onCoreReady() {
         try {
-            if (!this.options.thumbnails || !this.options.thumbnails.sprite || !this.options.thumbnails.vtt) {
+            if (!this.options.thumbnails ||
+                !this.options.thumbnails.sprite ||
+                !this.options.thumbnails.vtt) {
                 this.destroy();
                 return;
             }
@@ -51016,7 +51462,7 @@ class Thumbnails extends UICorePlugin {
     }
     _getOptions() {
         if (!('thumbnails' in this.core.options)) {
-            throw '\'thumbnail property missing from options object.';
+            throw "'thumbnail property missing from options object.";
         }
         return this.core.options.thumbnails;
     }
@@ -51117,7 +51563,7 @@ class Thumbnails extends UICorePlugin {
         this.$img.css({
             height: this.spriteSheetHeight * scaleFactor,
             left: -1 * thumb.x * scaleFactor,
-            top: -1 * thumb.y * scaleFactor
+            top: -1 * thumb.y * scaleFactor,
         });
         if (this.$container.find(this.$img).length === 0) {
             this.$container.append(this.$img);
@@ -51148,7 +51594,7 @@ class Thumbnails extends UICorePlugin {
     // calculate how far along the carousel should currently be slid
     // depending on where the user is hovering on the progress bar
     _updateCarousel() {
-        trace(`${T$1} _updateCarousel`, {
+        trace(`${T} _updateCarousel`, {
             backdropHeight: this._getOptions().backdropHeight,
         });
         if (!this._getOptions().backdropHeight) {
@@ -51159,7 +51605,7 @@ class Thumbnails extends UICorePlugin {
         const videoDuration = this.core.mediaControl.container.getDuration();
         const startTimeOffset = this.core.mediaControl.container.getStartTimeOffset();
         // the time into the video at the current hover position
-        const hoverTime = startTimeOffset + (videoDuration * hoverPosition);
+        const hoverTime = startTimeOffset + videoDuration * hoverPosition;
         const backdropWidth = this._$backdrop.width();
         const $carousel = this._$carousel;
         const carouselWidth = $carousel.width();
@@ -51184,9 +51630,9 @@ class Thumbnails extends UICorePlugin {
         const positionInThumb = timeIntoThumb / thumbDuration;
         const xCoordInThumb = thumbWidth * positionInThumb;
         // now calculate the position along carousel that we want to be above the hover position
-        const xCoordInCarousel = (thumbIndex * thumbWidth) + xCoordInThumb;
+        const xCoordInCarousel = thumbIndex * thumbWidth + xCoordInThumb;
         // and finally the position of the carousel when the hover position is taken in to consideration
-        const carouselXCoord = xCoordInCarousel - (hoverPosition * backdropWidth);
+        const carouselXCoord = xCoordInCarousel - hoverPosition * backdropWidth;
         $carousel.css('left', -carouselXCoord);
         const maxOpacity = this._getOptions().backdropMaxOpacity || 0.6;
         const minOpacity = this._getOptions().backdropMinOpacity || 0.08;
@@ -51202,12 +51648,12 @@ class Thumbnails extends UICorePlugin {
                 distance = Math.min(0, distance + thumbWidth);
             }
             // fade over the width of 2 thumbnails
-            const opacity = Math.max(maxOpacity - (Math.abs(distance) / (2 * thumbWidth)), minOpacity);
+            const opacity = Math.max(maxOpacity - Math.abs(distance) / (2 * thumbWidth), minOpacity);
             this._$backdropCarouselImgs[i].css('opacity', opacity);
         }
     }
     _updateSpotlightThumb() {
-        trace(`${T$1} _updateSpotlightThumb`, {
+        trace(`${T} _updateSpotlightThumb`, {
             spotlightHeight: this._getOptions().spotlightHeight,
         });
         if (!this._getOptions().spotlightHeight) {
@@ -51218,7 +51664,7 @@ class Thumbnails extends UICorePlugin {
         const videoDuration = this.core.mediaControl.container.getDuration();
         // the time into the video at the current hover position
         const startTimeOffset = this.core.mediaControl.container.getStartTimeOffset();
-        const hoverTime = startTimeOffset + (videoDuration * hoverPosition);
+        const hoverTime = startTimeOffset + videoDuration * hoverPosition;
         this.setText(hoverTime);
         // determine which thumbnail applies to the current time
         const thumbIndex = this._getThumbIndexForTime(hoverTime);
@@ -51230,7 +51676,7 @@ class Thumbnails extends UICorePlugin {
         const elWidth = this.$el.width();
         const thumbWidth = $spotlight.width();
         const thumbHeight = $spotlight.height();
-        let spotlightXPos = (elWidth * hoverPosition) - (thumbWidth / 2);
+        let spotlightXPos = elWidth * hoverPosition - thumbWidth / 2;
         // adjust so the entire thumbnail is always visible
         spotlightXPos = Math.max(Math.min(spotlightXPos, elWidth - thumbWidth), 0);
         $spotlight.css('left', spotlightXPos);
@@ -51252,7 +51698,7 @@ class Thumbnails extends UICorePlugin {
         return 0;
     }
     _renderPlugin() {
-        trace(`${T$1} _renderPlugin`, {
+        trace(`${T} _renderPlugin`, {
             show: this._show,
             thumbsLoaded: this._thumbsLoaded,
             thumbs: this._thumbs.length,
@@ -51270,10 +51716,10 @@ class Thumbnails extends UICorePlugin {
         }
     }
     _createElements() {
-        trace(`${T$1} _createElements`);
-        this.$el.html(this.template({
-            'backdropHeight': this._getOptions().backdropHeight,
-            'spotlightHeight': this._getOptions().spotlightHeight
+        trace(`${T} _createElements`);
+        this.$el.html(Thumbnails.template({
+            backdropHeight: this._getOptions().backdropHeight,
+            spotlightHeight: this._getOptions().spotlightHeight,
         }));
         // cache dom references
         this._$spotlight = this.$el.find('.spotlight');
@@ -51285,208 +51731,12 @@ class Thumbnails extends UICorePlugin {
     }
 }
 
-const T = 'plugins.source_controller';
-const INITIAL_RETRY_DELAY = 1000;
-const MAX_RETRY_DELAY = 5000;
-const RETRY_DELAY_BLUR = 500;
-const VERSION = '0.0.1';
-function noSync(cb) {
-    queueMicrotask(cb);
-}
-/**
- * This plugin is responsible for managing the automatic failover between sources.
- * @beta
- * @remarks
- * Have a look at the {@link https://miro.com/app/board/uXjVLiN15tY=/?share_link_id=390327585787 | source failover diagram} for the details
- * on how sources ordering and selection works.
- *
- * This plugin does not expose any public methods apart from required by the Clappr plugin interface.
- * It is supposed to work autonomously.
- *
- * @example
- * ```ts
- * import { SourceController } from '@gcorevideo/player'
- *
- * Player.registerPlugin(SourceController)
- * ```
- */
-class SourceController extends CorePlugin {
-    /*
-     * The Logic itself is quite simple:
-     * * Here is the short diagram:
-     *
-     * sources_list:
-     *       - a.mpd  |    +--------------------+
-     *       - b.m3u8 |--->|         init       |
-     *       - ...    |    |--------------------|
-     *                     | current_source = 0 |
-     *                     +--------------------+
-     *                            |
-     *                            |  source = a.mpd
-     *                            |  playback = dash.js
-     *                            v
-     *                      +------------------+
-     *                  +-->|   load source    |
-     *                  |   +---------|--------+
-     *                  |             v
-     *                  |   +------------------+
-     *                  |   |       play       |
-     *                  |   +---------|--------+
-     *                  |             |
-     *                  |             v
-     *                  |   +-----------------------+
-     *                  |   |  on playback_error    |
-     *                  |   |-----------------------|
-     *                  |   | current_source =      |
-     *                  |   |  (current_source + 1) |
-     *                  |   |  % len sources_list   |
-     *                  |   |                       |
-     *                  |   | delay 1..3s           |
-     *                  |   +---------------|-------+
-     *                  |                   |
-     *                  |   source=b.m3u8   |
-     *                  |   playback=hls.js |
-     *                  +-------------------+
-     *
-     */
-    sourcesList = [];
-    currentSourceIndex = 0;
-    sourcesDelay = {};
-    active = false;
-    sync = noSync;
-    /**
-     * @internal
-     */
-    get name() {
-        return 'source_controller';
-    }
-    /**
-     * @internal
-     */
-    get supportedVersion() {
-        return { min: CLAPPR_VERSION };
-    }
-    constructor(core) {
-        super(core);
-        this.sourcesList = this.core.options.sources;
-        if (this.core.options.source !== undefined) {
-            // prevent Clappr from loading all sources simultaneously
-            this.core.options.sources = [this.core.options.source];
-        }
-        else {
-            this.core.options.sources = this.core.options.sources.slice(0, 1);
-        }
-    }
-    /**
-     * @internal
-     */
-    bindEvents() {
-        super.bindEvents();
-        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, () => this.onReady());
-    }
-    onReady() {
-        trace(`${T} onReady`, {
-            retrying: this.active,
-            currentSource: this.sourcesList[this.currentSourceIndex],
-        });
-        const spinner = this.core.activeContainer?.getPlugin('spinner');
-        if (spinner) {
-            this.sync = (cb) => {
-                spinner.once(SpinnerEvents.SYNC, cb);
-            };
-        }
-        else {
-            this.sync = noSync;
-        }
-        this.bindContainerEventListeners();
-        if (this.active) {
-            this.core.activeContainer?.getPlugin('poster_custom')?.disable();
-            spinner?.show();
-        }
-    }
-    bindContainerEventListeners() {
-        this.core.activePlayback.on(Events$1.PLAYBACK_ERROR, (error) => {
-            trace(`${T} on PLAYBACK_ERROR`, {
-                error: {
-                    code: error?.code,
-                    description: error?.description,
-                    level: error?.level,
-                },
-                retrying: this.active,
-                currentSource: this.sourcesList[this.currentSourceIndex],
-            });
-            switch (error.code) {
-                case PlaybackErrorCode.MediaSourceUnavailable:
-                    this.core.activeContainer?.getPlugin('poster_custom')?.disable();
-                    this.retryPlayback();
-                    break;
-            }
-        });
-        this.core.activePlayback.on(Events$1.PLAYBACK_PLAY, () => {
-            trace(`${T} on PLAYBACK_PLAY`, {
-                currentSource: this.sourcesList[this.currentSourceIndex],
-                retrying: this.active,
-            });
-            if (this.active) {
-                this.reset();
-                // TODO make poster reset its state on enable
-                this.core.activeContainer?.getPlugin('poster_custom')?.enable();
-                this.core.activeContainer?.getPlugin('spinner')?.hide();
-            }
-        });
-    }
-    reset() {
-        this.active = false;
-        this.sourcesDelay = {};
-    }
-    retryPlayback() {
-        trace(`${T} retryPlayback enter`, {
-            currentSourceIndex: this.currentSourceIndex,
-            currentSource: this.sourcesList[this.currentSourceIndex],
-        });
-        this.active = true;
-        this.getNextMediaSource().then((nextSource) => {
-            trace(`${T} retryPlayback syncing...`, {
-                nextSource,
-            });
-            const rnd = RETRY_DELAY_BLUR * Math.random();
-            this.sync(() => {
-                trace(`${T} retryPlayback loading...`);
-                this.core.load(nextSource.source, nextSource.mimeType);
-                trace(`${T} retryPlayback loaded`, {
-                    nextSource,
-                });
-                setTimeout(() => {
-                    // this.core.activePlayback.consent()
-                    this.core.activePlayback.play();
-                    trace(`${T} retryPlayback playing`);
-                }, rnd);
-            });
-        });
-    }
-    getNextMediaSource() {
-        return new Promise((resolve) => {
-            this.sourcesDelay[this.currentSourceIndex] = Math.min(MAX_RETRY_DELAY, (this.sourcesDelay[this.currentSourceIndex] || INITIAL_RETRY_DELAY) * 2);
-            this.currentSourceIndex =
-                (this.currentSourceIndex + 1) % this.sourcesList.length;
-            const delay = this.sourcesDelay[this.currentSourceIndex] || INITIAL_RETRY_DELAY;
-            const s = this.sourcesList[this.currentSourceIndex];
-            setTimeout(() => resolve(s), delay);
-        });
-    }
-    /**
-     * @internal
-     */
-    static get version() {
-        return VERSION;
-    }
-}
-
 var VolumeFadeEvents;
 (function (VolumeFadeEvents) {
     VolumeFadeEvents["FADE"] = "core:volume:fade";
 })(VolumeFadeEvents || (VolumeFadeEvents = {}));
 /**
+ * Applies fade effect to the player's volume change.
  * @beta
  */
 class VolumeFade extends UICorePlugin {
@@ -51494,15 +51744,22 @@ class VolumeFade extends UICorePlugin {
     container = null;
     delay = 0;
     interval = null;
+    /**
+     * @internal
+     */
     get name() {
         return 'volume_fade';
     }
+    /**
+     * @internal
+     */
     bindEvents() {
+        // TODO on container changed
         this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
         if (this.core.mediaControl) {
             this.listenTo(this.core.mediaControl, 'mediacontrol:volume:user', this._onUserChangeVolume);
         }
-        this.listenTo(this.core, 'core:volume:config', this._onVolumeConfig);
+        // this.listenTo(this.core, 'core:volume:config', this._onVolumeConfig);
     }
     unBindEvents() {
         this.core.$el.off('mouseleave.volume');
@@ -51574,4 +51831,4 @@ class VolumeFade extends UICorePlugin {
     }
 }
 
-export { AudioSelector, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ContextMenu, DisableControls, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, Kibo, LevelSelector, LogTracer, Logger, Logo, MediaControl, MultiCamera, PictureInPicture, PlaybackErrorCode, PlaybackRate, Player, PlayerEvent, Poster, SeekTime, SentryTracer, Share, SkipTime, SourceController, SpinnerEvents, SpinnerThreeBounce, Statistics, Subtitles, Thumbnails, VolumeFade, VolumeFadeEvents, reportError, setTracer, trace, version };
+export { AudioSelector, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, Kibo, LevelSelector, LogTracer, Logger, Logo, MediaControl, MultiCamera, PictureInPicture, PlaybackErrorCode, PlaybackRate, Player, PlayerEvent, Poster, SeekTime, SentryTracer, Share, SkipTime, SourceController, SpinnerEvents, SpinnerThreeBounce, Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents, reportError, setTracer, trace, version };