@gcorevideo/player 2.20.1 → 2.20.4

package/dist/index.js

@@ -42494,7 +42494,7 @@ class Player {
             Log.setLevel(0);
         }
         const coreOpts = this.buildCoreOptions(playerElement);
-        const { core, container } = Loader.registeredPlugins;
+        const { core, container } = Player.getRegisteredPlugins();
         trace(`${T$d} init`, {
             registeredPlaybacks: Loader.registeredPlaybacks.map((p) => p.name),
         });
@@ -42656,13 +42656,35 @@ class Player {
      * ```
      */
     static registerPlugin(plugin) {
+        assert.ok(plugin.type === 'core' || plugin.type === 'container', 'Invalid plugin type');
+        if (plugin.type === 'core') {
+            if (plugin.prototype.name === 'media_control') {
+                Player.corePlugins.unshift(plugin);
+            }
+            else {
+                Player.corePlugins.push(plugin);
+            }
+            return;
+        }
         Loader.registerPlugin(plugin);
     }
+    static getRegisteredPlugins() {
+        for (const plugin of Player.corePlugins) {
+            Loader.registerPlugin(plugin);
+        }
+        return Loader.registeredPlugins;
+    }
+    static corePlugins = [];
     /**
      * Unregisters a plugin registered earlier with {@link Player.registerPlugin}.
      * @param plugin - a plugin class
      */
     static unregisterPlugin(plugin) {
+        assert.ok(plugin.type === 'core' || plugin.type === 'container', 'Invalid plugin type');
+        if (plugin.type === 'core') {
+            Player.corePlugins = Player.corePlugins.filter((p) => p !== plugin);
+            return;
+        }
         Loader.unregisterPlugin(plugin);
     }
     setConfig(config) {
@@ -42803,8 +42825,10 @@ class Player {
         }, null);
     }
     bindCoreListeners() {
-        const core = this.player?.core;
-        core?.on(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, ({ orientation }) => {
+        // TODO create an class inherited from PlayerClappr
+        assert.ok(this.player, 'Player is not initialized');
+        const core = this.player.core;
+        core.on(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, ({ orientation }) => {
             trace(`${T$d} on CORE_SCREEN_ORIENTATION_CHANGED`, {
                 orientation,
                 rootNode: {
@@ -42819,14 +42843,14 @@ class Player {
                 });
             }
         }, null);
-        core?.on(Events$1.CORE_RESIZE, ({ width, height }) => {
+        core.on(Events$1.CORE_RESIZE, ({ width, height }) => {
             trace(`${T$d} on CORE_RESIZE`, {
                 width,
                 height,
             });
             this.safeTriggerEvent(PlayerEvent.Resize, { width, height });
         }, null);
-        core?.on(Events$1.CORE_FULLSCREEN, (isFullscreen) => {
+        core.on(Events$1.CORE_FULLSCREEN, (isFullscreen) => {
             trace(`${T$d} CORE_FULLSCREEN`, {
                 isFullscreen,
             });
@@ -42835,7 +42859,7 @@ class Player {
     }
 }
 
-var version$1 = "2.20.1";
+var version$1 = "2.20.4";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -42867,38 +42891,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 +42982,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 +43033,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 +43120,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 +43192,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$c = "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,21 +43204,31 @@ 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);
@@ -43175,17 +43239,6 @@ class BigMuteButton extends UICorePlugin {
         });
         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);
@@ -43242,12 +43295,15 @@ class BigMuteButton extends UICorePlugin {
         });
         return autoPlay && !wasMuted && volume === 0;
     }
+    /**
+     * @internal
+     */
     render() {
         if (this.shouldRender()) {
             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');
@@ -43293,6 +43349,7 @@ const VERSION$5 = '2.19.12';
 const T$b = 'plugins.bottom_gear';
 /**
  * Custom events emitted by the plugin
+ * @beta
  */
 var GearEvents;
 (function (GearEvents) {
@@ -44490,6 +44547,9 @@ function requireMousetrap () {
 var mousetrapExports = requireMousetrap();
 const Mousetrap = /*@__PURE__*/getDefaultExportFromCjs$1(mousetrapExports);
 
+/**
+ * @beta
+ */
 var ClapprStatsEvents;
 (function (ClapprStatsEvents) {
     ClapprStatsEvents["REPORT_EVENT"] = "clappr:stats:report";
@@ -45823,7 +45883,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;
@@ -45845,9 +45908,15 @@ class ClapprStats extends ContainerPlugin {
     updateFn = updateMetrics;
     urisToMeasureBandwidth;
     uriToMeasureLatency;
+    /**
+     * @internal
+     */
     get name() {
         return 'clappr_stats';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
@@ -45875,6 +45944,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;
     }
@@ -45893,6 +45966,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);
@@ -45911,10 +45987,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);
     }
@@ -45936,6 +46019,7 @@ class ClapprStats extends ContainerPlugin {
             this.intervalId = null;
         }
         this._newMetrics();
+        // TODO
         // @ts-ignore
         this.stopListening();
         this.bindEvents();
@@ -46153,20 +46237,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.
+// 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);
@@ -46282,23 +46376,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() {
@@ -46308,12 +46424,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();
     }
@@ -46327,9 +46437,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) {
@@ -46346,13 +46457,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, {
@@ -46363,6 +46478,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) {
@@ -46373,14 +46493,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;
         });
@@ -46393,7 +46513,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');
         }
@@ -46401,7 +46522,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}`);
@@ -46411,28 +46533,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/';
@@ -46440,16 +46571,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;
         }
@@ -46459,28 +46593,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();
@@ -46488,7 +46615,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 });
@@ -46500,80 +46628,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";
@@ -46585,7 +46652,7 @@ const dvrHTML = "<div class=\"live-info\"><%= live %></div>\n<button type=\"butt
  * @remarks
  * Depends on:
  *
- * - {@link MediaControl | media_control}
+ * - {@link MediaControl}
  *
  * The plugin renders the live stream indicator and the DVR seek bar, if DVR is enabled, in the media control UI.
  */
@@ -46595,7 +46662,7 @@ class DvrControls extends UICorePlugin {
      * @internal
      */
     get name() {
-        return 'media_control_dvr';
+        return 'dvr_controls';
     }
     /**
      * @internal
@@ -46628,32 +46695,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) {
@@ -46686,7 +46736,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());
@@ -46706,7 +46756,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');
@@ -46726,7 +46776,6 @@ const T$9 = 'plugins.error_screen';
 /**
  * Displays a descriptive error in the overlay on top of the player.
  * @beta
- * TODO
  */
 class ErrorScreen extends UICorePlugin {
     _retry = 0;
@@ -46909,6 +46958,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;
@@ -47010,7 +47063,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 = '';
@@ -47660,6 +47717,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;
@@ -47937,7 +47998,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;
     }
     /**
@@ -48618,6 +48679,8 @@ class MediaControl extends UICorePlugin {
      */
     getElement(name) {
         switch (name) {
+            case 'audioTracksSelector':
+                return this.$audioTracksSelector;
             case 'clipText':
                 return this.$clipText;
             case 'bottomGear':
@@ -48922,7 +48985,11 @@ 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$7 = 'plugins.media_control_multicamera';
+const T$7 = 'plugins.multicamera';
+/**
+ * The plugin adds support for loading multiple streams and switching between them using the media control UI.
+ * @beta
+ */
 class MultiCamera extends UICorePlugin {
     currentCamera = null;
     currentTime = 0;
@@ -48930,7 +48997,7 @@ class MultiCamera extends UICorePlugin {
     multicamera = [];
     noActiveStreams = false;
     get name() {
-        return 'media_control_multicamera';
+        return 'multicamera';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -49877,11 +49944,15 @@ 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';
+        return 'seek_time';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -50035,11 +50106,14 @@ 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;
     get name() {
-        return 'media_control_share';
+        return 'share';
     }
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
@@ -50152,6 +50226,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';
@@ -50949,6 +51026,7 @@ const STALL_MEASURE_PERIOD = 10;
 const T$1 = 'plugins.telemetry';
 /**
  * Telemetry event type
+ * @beta
  */
 var TelemetryEvent;
 (function (TelemetryEvent) {
@@ -51236,7 +51314,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 = '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;
@@ -51251,20 +51351,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.
      *
@@ -51308,6 +51415,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);
@@ -51324,7 +51434,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;
             }
@@ -51375,7 +51487,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;
     }
@@ -51476,7 +51588,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);
@@ -51518,7 +51630,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();
@@ -51543,9 +51655,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;
@@ -51561,7 +51673,7 @@ 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);
         }
     }
@@ -51577,7 +51689,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);
@@ -51589,7 +51701,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);
@@ -51630,9 +51742,9 @@ class Thumbnails extends UICorePlugin {
     }
     _createElements() {
         trace(`${T} _createElements`);
-        this.$el.html(this.template({
-            'backdropHeight': this._getOptions().backdropHeight,
-            'spotlightHeight': this._getOptions().spotlightHeight
+        this.$el.html(Thumbnails.template({
+            backdropHeight: this._getOptions().backdropHeight,
+            spotlightHeight: this._getOptions().spotlightHeight,
         }));
         // cache dom references
         this._$spotlight = this.$el.find('.spotlight');
@@ -51644,11 +51756,16 @@ class Thumbnails extends UICorePlugin {
     }
 }
 
+/**
+ * Events emitted by the VolumeFade plugin.
+ * @beta
+ */
 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 {
@@ -51743,4 +51860,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, Subtitles, Telemetry, TelemetryEvent, 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 };