@gcorevideo/player 2.20.8 → 2.20.11

package/dist/plugins/index.js

@@ -32340,7 +32340,7 @@ const VERSION$6 = '0.0.1';
 // const T = 'plugins.audio_selector';
 const AUTO = 0;
 /**
- * Adds an audio track selector to the media control UI.
+ * `PLUGIN` that adds an audio track selector to the media control UI.
  * @beta
  */
 class AudioSelector extends UICorePlugin {
@@ -32652,7 +32652,7 @@ const pluginHtml$6 = "<div class=\"big-mute-icon-wrapper\" data-big-mute>\n    <
 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.
+ * `PLUGIN` that displays a big mute button over the video when it's muted.
  * Once pressed, it unmutes the video.
  * @beta
  */
@@ -32687,7 +32687,6 @@ class BigMuteButton extends UICorePlugin {
      * @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);
@@ -32796,9 +32795,6 @@ const gearHdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\
 /* eslint-disable */
 // Kibo is released under the MIT License. Copyright (c) 2013 marquete.
 // see https://github.com/marquete/kibo
-/**
- * @internal
- */
 class Kibo {
     element;
     lastKeyCode = -1;
@@ -33066,9 +33062,11 @@ const fullscreenOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"
 
 const fullscreenOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M15.1568 23.15C15.7408 23.15 16.2142 22.6766 16.2142 22.0926V17.1947C16.2142 16.7253 16.5948 16.3447 17.0642 16.3447H21.9621C22.5461 16.3447 23.0195 15.8713 23.0195 15.2873C23.0195 14.7034 22.5461 14.2299 21.9621 14.2299H16.0642C14.9832 14.2299 14.0995 15.1137 14.0995 16.1947V22.0926C14.0995 22.6766 14.5729 23.15 15.1568 23.15Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n  <path\n    d=\"M1.90739 10.7701H7.80528C8.88627 10.7701 9.77006 9.88627 9.77006 8.80528V2.90739C9.77006 2.32341 9.29665 1.85 8.71267 1.85C8.12869 1.85 7.65528 2.32341 7.65528 2.90739V7.80528C7.65528 8.27472 7.27472 8.65528 6.80528 8.65528H1.90739C1.32341 8.65528 0.85 9.12869 0.85 9.71267C0.85 10.2966 1.32341 10.7701 1.90739 10.7701Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n  <path\n    d=\"M8.71261 23.15C9.29659 23.15 9.77 22.6766 9.77 22.0926V16.1947C9.77 15.1137 8.88621 14.2299 7.80521 14.2299H1.90733C1.32335 14.2299 0.849939 14.7034 0.849939 15.2873C0.849939 15.8713 1.32335 16.3447 1.90733 16.3447H6.80521C7.27466 16.3447 7.65521 16.7253 7.65521 17.1947V22.0926C7.65521 22.6766 8.12862 23.15 8.71261 23.15Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n  <path\n    d=\"M21.9621 10.7701C22.5461 10.7701 23.0195 10.2966 23.0195 9.71267C23.0195 9.12869 22.5461 8.65528 21.9621 8.65528H17.0642C16.5948 8.65528 16.2142 8.27472 16.2142 7.80528V2.90739C16.2142 2.32341 15.7408 1.85 15.1568 1.85C14.5729 1.85 14.0995 2.32341 14.0995 2.90739V8.80528C14.0995 9.88627 14.9832 10.7701 16.0642 10.7701H21.9621Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n</svg>\n";
 
+// This is a derived work from the {@link https://github.com/clappr/clappr-plugins/tree/ffaa9d27005fa5a8a7c243ffc47eb5655b84b371/src/plugins/media_control | Clappr MediaControl plugin}
+// It is redistributed under the terms of the {@link ../../../../../LICENSE | Apache 2.0} license.
 // 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 in the {@link https://github.com/clappr/clappr-plugins/blob/master/LICENSE | LICENSE}.
 /**
  * Custom events emitted by the plugins to communicate with one another
  * @beta
@@ -33096,11 +33094,11 @@ function orderByOrderPattern(arr, order) {
     return [...ordered, ...rest];
 }
 /**
- * The MediaControl provides a foundation for developing custom media controls UI.
+ * `PLUGIN` that provides a foundation for developing custom media controls UI.
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
- * The plugin registration should be arranged so that MediaControl is initialized before every other plugin that depends on it.
+ * The plugin registration should be arranged so that MediaControl is initialized before every other `PLUGIN` that depends on it.
  * @example
  * ```ts
  * Player.registerPlugin(MediaControl) // <--- This must go first
@@ -33178,14 +33176,14 @@ class MediaControl extends UICorePlugin {
     }
     /**
      * @internal
-     * @deprecated
+     * @deprecated Use core.activeContainer directly
      */
     get container() {
         return this.core.activeContainer;
     }
     /**
      * @internal
-     * @deprecated
+     * @deprecated Use core.activePlayback directly
      */
     get playback() {
         return this.core.activePlayback;
@@ -33885,6 +33883,16 @@ class MediaControl extends UICorePlugin {
     getRightPanel() {
         return this.$el.find('.media-control-right-panel');
     }
+    /**
+     * Get the left panel area to append custom elements to
+     * @returns  ZeptoSelector of the left panel element
+     */
+    getLeftPanel() {
+        return this.$el.find('.media-control-left-panel');
+    }
+    getCenterPanel() {
+        return this.$el.find('.media-control-center-panel');
+    }
     resetIndicators() {
         assert.ok(this.$duration && this.$position, 'duration and position elements must be present');
         this.displayedPosition = this.$position.text();
@@ -34160,7 +34168,7 @@ MediaControl.extend = function (properties) {
 
 const VERSION$5 = '2.19.12';
 /**
- * Adds the gear button that triggers extra options menu on the right side of the {@link MediaControl | media control} UI
+ * `PLUGIN` that adds the gear button with an extra options menu on the right side of the {@link MediaControl | media control} UI
  * @beta
  * @remarks
  * The plugins provides a base for attaching custom settings UI in the gear menu
@@ -35923,7 +35931,7 @@ class Speedtest {
             this._state = 1;
         }
         if (this._state !== 1) {
-            throw 'You can\'t add a server after server selection';
+            throw "You can't add a server after server selection";
         }
         this._settings.mpot = true;
         this._serverList.push(server);
@@ -35942,7 +35950,7 @@ class Speedtest {
     setSelectedServer(server) {
         this._checkServerDefinition(server);
         if (this._state === 3) {
-            throw 'You can\'t select a server while the test is running';
+            throw "You can't select a server while the test is running";
         }
         this._selectedServer = server;
         this._state = 2;
@@ -35956,7 +35964,7 @@ class Speedtest {
                 throw 'Server already selected';
             }
             if (this._state >= 3) {
-                throw 'You can\'t select a server while the test is running';
+                throw "You can't select a server while the test is running";
             }
         }
         if (this._selectServerCalled) {
@@ -35966,7 +35974,7 @@ class Speedtest {
             this._selectServerCalled = true;
         }
         /*this function goes through a list of servers. For each server, the ping is measured, then the server with the function result is called with the best server, or null if all the servers were down.
-             */
+         */
         const select = (serverList, result) => {
             //pings the specified URL, then calls the function result. Result will receive a parameter which is either the time it took to ping the URL, or -1 if something went wrong.
             const PING_TIMEOUT = 2000;
@@ -36064,7 +36072,7 @@ class Speedtest {
                 }
                 result(bestServer);
             };
-            serverList.forEach(server => {
+            serverList.forEach((server) => {
                 checkServer(server, done);
             });
             if (i === serverList.length) {
@@ -36153,12 +36161,12 @@ class Speedtest {
             if (typeof this._originalExtra !== 'undefined') {
                 this._settings.telemetry_extra = JSON.stringify({
                     server: this._selectedServer.name,
-                    extra: this._originalExtra
+                    extra: this._originalExtra,
                 });
             }
             else {
                 this._settings.telemetry_extra = JSON.stringify({
-                    server: this._selectedServer.name
+                    server: this._selectedServer.name,
                 });
             }
         }
@@ -36168,7 +36176,7 @@ class Speedtest {
     }
     abort() {
         if (this._state < 3) {
-            throw new Error('You cannot abort a test that\'s not started yet');
+            throw new Error("You cannot abort a test that's not started yet");
         }
         if (this._state < 4) {
             this.worker?.postMessage('abort');
@@ -36413,7 +36421,7 @@ const drawSummary = (customMetrics, vodContainer, liveContainer) => {
 };
 // const T = 'plugins.clappr_nerd_stats';
 /**
- * Displays useful network-related statistics.
+ * `PLUGIN` that displays useful network-related statistics.
  * @beta
  *
  * @remarks
@@ -36669,7 +36677,7 @@ function newMetrics() {
 // TODO: fix
 const updateMetrics = () => { };
 /**
- * Collects useful statistics about playback performance.
+ * `PLUGIN` that 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.
@@ -36732,9 +36740,10 @@ class ClapprStats extends ContainerPlugin {
     }
     /**
      * Registers a callback to receive the metrics.
-     * @param updateMetricsFn
+     * @param updateMetricsFn - The callback to receive the metrics
      */
     setUpdateMetrics(updateMetricsFn) {
+        // TODO use events instead
         this.updateFn = updateMetricsFn;
     }
     _defaultReport(metrics) {
@@ -36782,7 +36791,7 @@ class ClapprStats extends ContainerPlugin {
     }
     /**
      * Returns the collected metrics.
-     * @returns The collected metrics
+     * @returns Currently collected metrics
      */
     exportMetrics() {
         return structuredClone(this.metrics);
@@ -37025,7 +37034,7 @@ class ClapprStats extends ContainerPlugin {
 // Use of this source code is governed by a BSD-style
 // license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE.
 /**
- * Adds a behavior of toggling the playback state on click over the container
+ * `PLUGIN` that adds a behavior of toggling the playback state on click over the container
  * @beta
  */
 class ClickToPause extends ContainerPlugin {
@@ -37092,7 +37101,7 @@ class ClickToPause extends ContainerPlugin {
 }
 
 /**
- * Adds a behavior of showing a text over the seekbar to indicate the current clip.
+ * `PLUGIN` that shows text over the seekbar to indicate the current clip.
  * @beta
  * @remarks
  * Depends on:
@@ -37248,7 +37257,7 @@ 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";
 
-var version$1 = "2.20.8";
+var version$1 = "2.20.11";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -37273,7 +37282,7 @@ function version() {
 }
 
 /**
- * Displays a small context menu when clicked on the player container.
+ * `PLUGIN` that displays a small context menu when clicked on the player container.
  * @beta
  * @remarks
  * Configuration options - {@link ContextMenuPluginSettings}
@@ -37385,7 +37394,8 @@ const dvrHTML = "<div class=\"live-info\"><%= live %></div>\n<button type=\"butt
 
 const T$b = 'plugins.dvr_controls';
 /**
- * Adds the DVR controls to the media control UI
+ * `PLUGIN` that adds the DVR controls to the media control UI
+ *
  * @beta
  *
  * @remarks
@@ -37393,7 +37403,9 @@ const T$b = 'plugins.dvr_controls';
  *
  * - {@link MediaControl}
  *
- * The plugin renders the live stream indicator and the DVR seek bar, if DVR is enabled, in the media control UI.
+ * The plugin renders live stream indicator.
+ * If DVR is enabled, the indicator shows whether the current position is at the live edge of the stream or not.
+ * In the latter case, the indicator can be clicked to seek to the live edge.
  */
 class DvrControls extends UICorePlugin {
     static template = tmpl(dvrHTML);
@@ -37426,64 +37438,56 @@ class DvrControls extends UICorePlugin {
             'data-dvr-controls': '',
         };
     }
-    constructor(core) {
-        super(core);
-        this.settingsUpdate();
-    }
     /**
      * @internal
      */
     bindEvents() {
+        this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events$1.CORE_OPTIONS_CHANGE, this.render);
+        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.bindContainerEvents);
+    }
+    onCoreReady() {
         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);
+        this.settingsUpdate();
     }
     bindContainerEvents() {
         this.listenToOnce(this.core.activeContainer, Events$1.CONTAINER_TIMEUPDATE, this.render);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrChanged);
     }
-    onDvrChanged(dvrEnabled) {
+    onDvrChanged(dvrInUse) {
         if (this.core.getPlaybackType() !== Playback.LIVE) {
             return;
         }
-        this.settingsUpdate();
-        this.core.mediaControl.$el.addClass('live');
-        if (dvrEnabled) {
-            // TODO
-            this.core.mediaControl.$el
+        this.render();
+        const mediaControl = this.core.getPlugin('media_control');
+        mediaControl.$el.addClass('live');
+        if (dvrInUse) {
+            mediaControl.$el
                 .addClass('dvr')
-                .find('.media-control-indicator[data-position], .media-control-indicator[data-duration]')
+                .find(
+            // TODO add API, test
+            '.media-control-indicator[data-position], .media-control-indicator[data-duration]')
                 .hide();
         }
         else {
-            this.core.mediaControl.$el.removeClass('dvr');
+            mediaControl.$el.removeClass('dvr');
         }
     }
     click() {
-        const mediaControl = this.core.getPlugin('media_control');
         const container = this.core.activeContainer;
         if (!container.isPlaying()) {
             container.play();
         }
-        if (mediaControl.$el.hasClass('dvr')) {
-            container.seek(container.getDuration());
-        }
+        container.seek(container.getDuration());
     }
     settingsUpdate() {
-        // @ts-ignore
-        this.stopListening(); // TODO sort out
-        this.core.getPlugin('media_control').$el.removeClass('live'); // TODO don't access directly
-        if (this.shouldRender()) {
-            this.render();
-            this.$el.click(() => this.click());
-        }
-        this.bindEvents();
+        this.core.getPlugin('media_control').$el.removeClass('live');
+        this.render();
     }
     shouldRender() {
-        const useDvrControls = this.core.options.useDvrControls === undefined ||
-            !!this.core.options.useDvrControls;
+        const useDvrControls = this.core.options.useDvrControls !== false;
         return useDvrControls && this.core.getPlaybackType() === Playback.LIVE;
     }
     /**
@@ -37492,6 +37496,7 @@ class DvrControls extends UICorePlugin {
     render() {
         trace(`${T$b} render`, {
             dvrEnabled: this.core.activePlayback?.dvrEnabled,
+            playbackType: this.core.getPlaybackType(),
         });
         if (!this.shouldRender()) {
             return this;
@@ -37501,12 +37506,8 @@ class DvrControls extends UICorePlugin {
             backToLive: this.core.i18n.t('back_to_live'),
         }));
         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');
-        mediaControl
-            .$('.media-control-left-panel[data-media-control]')
-            .append(this.$el);
+        mediaControl.getLeftPanel().append(this.$el);
         return this;
     }
 }
@@ -37517,7 +37518,7 @@ const templateHtml = "<div class=\"player-error-screen__content\" data-error-scr
 
 const T$a = 'plugins.error_screen';
 /**
- * Displays an error nicely in the overlay on top of the player.
+ * `PLUGIN` that displays errors nicely in the overlay on top of the player.
  * @beta
  */
 class ErrorScreen extends UICorePlugin {
@@ -37628,7 +37629,7 @@ 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.
+ * `PLUGIN` that adds custom favicon to the player's tab.
  * @beta
  */
 class Favicon extends CorePlugin {
@@ -37734,7 +37735,7 @@ class Favicon extends CorePlugin {
 // Use of this source code is governed by a BSD-style
 // license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE
 /**
- * An example Google Analytics integration plugin
+ * `PLUGIN` that integrates with Google Analytics
  * @beta
  */
 class GoogleAnalytics extends ContainerPlugin {
@@ -37862,7 +37863,7 @@ const checkIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"
 const T$9 = '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.
+ * `PLUGIN` that provides a UI to select the desired quality level of the playback.
  * @beta
  *
  * @remarks
@@ -37872,9 +37873,7 @@ const VERSION$4 = '2.19.4';
  *
  * - {@link BottomGear}
  *
- * The plugin is rendered as an item in the gear menu.
- *
- * When clicked, it shows a list of quality levels to choose from.
+ * The plugin is rendered as an item in the gear menu, which, when clicked, shows a list of quality levels to choose from.
  *
  * Configuration options - {@link LevelSelectorPluginSettings}
  *
@@ -38187,7 +38186,7 @@ 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.
+ * `PLUGIN` that adds custom logo to the player.
  * @beta
  */
 class Logo extends UIContainerPlugin {
@@ -38374,7 +38373,7 @@ const streamsWhiteNightsIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:
 const VERSION$3 = '0.0.1';
 const T$8 = 'plugins.multicamera';
 /**
- * The plugin adds support for loading multiple streams and switching between them using the media control UI.
+ * `PLUGIN` that adds support for loading multiple streams and switching between them using the media control UI.
  * @beta
  */
 class MultiCamera extends UICorePlugin {
@@ -38720,7 +38719,7 @@ const buttonHtml$1 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\"
 const VERSION$2 = '0.0.1';
 const T$7 = `plugins.pip`;
 /**
- * Enables picture in picture mode.
+ * `PLUGIN` that enables picture in picture mode.
  * @beta
  * @remarks
  * Depends on:
@@ -38830,7 +38829,7 @@ const DEFAULT_PLAYBACK_RATES = [
 const DEFAULT_PLAYBACK_RATE = '1.0';
 const T$6 = 'plugins.playback_rate';
 /**
- * PLUGIN that allows changing the playback speed of the video.
+ * `PLUGIN` that allows changing the playback speed of the video.
  * @beta
  *
  * @remarks
@@ -39031,9 +39030,9 @@ 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$5 = 'plugins.poster_custom';
+const T$5 = 'plugins.poster';
 /**
- * Displays a poster image in the background and a big play button on top when playback is stopped
+ * `PLUGIN` that displays a poster image in the background and a big play button on top when playback is stopped
  * @beta
  * @remarks
  * When the playback is stopped, media control UI is disabled.
@@ -39069,7 +39068,7 @@ class Poster extends UIContainerPlugin {
      * @internal
      */
     get name() {
-        return 'poster_custom';
+        return 'poster';
     }
     /**
      * @internal
@@ -39305,7 +39304,7 @@ const seekTimeHTML = "<span data-seek-time></span>\n<span data-duration></span>\
 // 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.
+ * `PLUGIN` that adds a seek time indicator to the media control UI.
  * @beta
  */
 class SeekTime extends UICorePlugin {
@@ -39465,7 +39464,8 @@ 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.
+ * `PLUGIN` that adds a share button to the media control UI.
+ * @beta
  */
 class Share extends UICorePlugin {
     hide = false;
@@ -39585,7 +39585,8 @@ 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.
+ * `PLUGIN` that adds skip controls to the media control UI.
+ * @beta
  */
 class SkipTime extends UICorePlugin {
     get name() {
@@ -39672,7 +39673,7 @@ class SkipTime extends UICorePlugin {
 
 /**
  * Codes of errors occurring within the playback component.
- * @beta
+ * @public
  */
 var PlaybackErrorCode;
 (function (PlaybackErrorCode) {
@@ -39698,6 +39699,7 @@ const spinnerHTML = "<div data-bounce1></div>\n<div data-bounce2></div>\n<div da
 const T$4 = 'plugins.spinner';
 /**
  * Custom events emitted by the plugin
+ * @beta
  */
 var SpinnerEvents;
 (function (SpinnerEvents) {
@@ -39708,10 +39710,12 @@ var SpinnerEvents;
     SpinnerEvents["SYNC"] = "plugins:spinner:sync";
 })(SpinnerEvents || (SpinnerEvents = {}));
 /**
- * Shows a pending operation indicator when playback is buffering or in other appropriate cases
+ * `PLUGIN` that shows a pending operation indicator when playback is buffering or in a similar state
  * @beta
  * @remarks
- * The plugin emits
+ * Events emitted- {@link SpinnerEvents}
+ * Other plugins can use {@link SpinnerThreeBounce.show | show} and {@link SpinnerThreeBounce.hide | hide} methods to
+ * implement custom pending/progress indication scenarios.
  */
 class SpinnerThreeBounce extends UIContainerPlugin {
     userShown = false;
@@ -39789,7 +39793,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
     /**
      * Shows the spinner.
      *
-     * When called, the spinner will not hide (due to its built-in logic) until {@link SpinnerThreeBounce#hide} is called
+     * When called, the spinner will not hide (due to its built-in logic) until {@link SpinnerThreeBounce.hide} is called
      */
     show(delay = 300) {
         this.userShown = true;
@@ -39855,7 +39859,7 @@ function noSync(cb) {
     queueMicrotask(cb);
 }
 /**
- * This plugin is responsible for managing the automatic failover between sources.
+ * `PLUGIN` that 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
@@ -39966,7 +39970,7 @@ class SourceController extends CorePlugin {
         }
         this.bindContainerEventListeners();
         if (this.active) {
-            this.core.activeContainer?.getPlugin('poster_custom')?.disable();
+            this.core.activeContainer?.getPlugin('poster')?.disable();
             spinner?.show(0);
         }
     }
@@ -39987,7 +39991,7 @@ class SourceController extends CorePlugin {
             }
             switch (error.code) {
                 case PlaybackErrorCode.MediaSourceUnavailable:
-                    this.core.activeContainer?.getPlugin('poster_custom')?.disable();
+                    this.core.activeContainer?.getPlugin('poster')?.disable();
                     this.retryPlayback();
                     break;
             }
@@ -39999,7 +40003,7 @@ class SourceController extends CorePlugin {
             });
             if (this.active) {
                 this.reset();
-                this.core.activeContainer?.getPlugin('poster_custom')?.enable();
+                this.core.activeContainer?.getPlugin('poster')?.enable();
                 this.core.activeContainer?.getPlugin('spinner')?.hide();
             }
         });
@@ -40058,7 +40062,7 @@ const LOCAL_STORAGE_SUBTITLES_ID = 'gplayer.plugins.subtitles.selected';
 const T$2 = 'plugins.subtitles';
 const NO_TRACK = { language: 'off' };
 /**
- * A {@link MediaControl | media control} plugin that provides a UI to select the subtitles when available.
+ * `PLUGIN` that provides a UI to select the subtitles when available.
  * @beta
  *
  * @remarks
@@ -40430,7 +40434,7 @@ var TelemetryEvent;
     TelemetryEvent[TelemetryEvent["Stall"] = 4] = "Stall";
 })(TelemetryEvent || (TelemetryEvent = {}));
 /**
- * Collects and reports the performance statistics.
+ * `PLUGIN` that collects and reports the performance statistics.
  * @beta
  * @remarks
  * This plugin is experimental and its API is likely to change.
@@ -40709,7 +40713,7 @@ const pluginHtml = "<div class=\"thumbnails-text\"></div>\n<% if (backdropHeight
 
 const T = 'plugins.thumbnails';
 /**
- * Displays the thumbnails of the video when available.
+ * `PLUGIN` that displays the thumbnails of the video when available.
  * @beta
  * @example
  * ```ts
@@ -41156,7 +41160,7 @@ var VolumeFadeEvents;
     VolumeFadeEvents["FADE"] = "core:volume:fade";
 })(VolumeFadeEvents || (VolumeFadeEvents = {}));
 /**
- * Applies fade effect to the player's volume change.
+ * `PLUGIN` that applies fade effect to the player's volume change.
  * @beta
  */
 class VolumeFade extends UICorePlugin {
@@ -41249,4 +41253,4 @@ class VolumeFade extends UICorePlugin {
     }
 }
 
-export { AudioSelector, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ContextMenu, DvrControls, ErrorScreen, Favicon, GoogleAnalytics, Kibo, LevelSelector, Logo, MediaControl, MediaControlEvents, MultiCamera, PictureInPicture, PlaybackRate, Poster, SeekTime, Share, SkipTime, SourceController, SpinnerEvents, SpinnerThreeBounce, Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };
+export { AudioSelector, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ContextMenu, DvrControls, ErrorScreen, Favicon, GoogleAnalytics, LevelSelector, Logo, MediaControl, MediaControlEvents, MultiCamera, PictureInPicture, PlaybackRate, Poster, SeekTime, Share, SkipTime, SourceController, SpinnerEvents, SpinnerThreeBounce, Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };

package/docs/api/player.audioselector.md

@@ -7,7 +7,7 @@
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
-Adds an audio track selector to the media control UI.
+`PLUGIN` that adds an audio track selector to the media control UI.
 
 **Signature:**
 

package/docs/api/player.bigmutebutton.md

@@ -7,7 +7,7 @@
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
-Displays a big mute button over the video when it's muted. Once pressed, it unmutes the video.
+`PLUGIN` that displays a big mute button over the video when it's muted. Once pressed, it unmutes the video.
 
 **Signature:**
 

package/docs/api/player.bottomgear.md

@@ -7,7 +7,7 @@
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
-Adds the gear button that triggers extra options menu on the right side of the [media control](./player.mediacontrol.md) UI
+`PLUGIN` that adds the gear button with an extra options menu on the right side of the [media control](./player.mediacontrol.md) UI
 
 **Signature:**
 
@@ -55,6 +55,20 @@ Description
 **_(BETA)_**
 
 
+</td></tr>
+<tr><td>
+
+[refresh()](./player.bottomgear.refresh.md)
+
+
+</td><td>
+
+
+</td><td>
+
+**_(BETA)_** Re-renders the gear menu. It fires the [MEDIACONTROL\_GEAR\_RENDERED](./player.mediacontrolevents.md) event, which the plugins that attach to the gear menu can listen to to re-render themselves.
+
+
 </td></tr>
 <tr><td>