@gcorevideo/player 2.20.9 → 2.20.12

package/dist/index.js

@@ -12470,7 +12470,7 @@ const EventEmitter$1 = /*@__PURE__*/getDefaultExportFromCjs$1(eventemitter3Expor
 
 /**
  * A top-level event on the player object
- * @beta
+ * @public
  */
 var PlayerEvent;
 (function (PlayerEvent) {
@@ -12605,7 +12605,7 @@ const DASHJS = /*@__PURE__*/getDefaultExportFromCjs$1(dash_all_minExports);
 
 /**
  * Codes of errors occurring within the playback component.
- * @beta
+ * @public
  */
 var PlaybackErrorCode;
 (function (PlaybackErrorCode) {
@@ -42638,8 +42638,8 @@ const DEFAULT_OPTIONS = {
     strings: {},
 };
 /**
- * The main component to use in the application code.
- * @beta
+ * `MAIN` component to use in the application code.
+ * @public
  * @remarks
  * The Player object provides very basic API to control playback.
  * To build a sophisticated UI, use the plugins framework to tap into the Clappr core.
@@ -43090,7 +43090,7 @@ class Player {
     }
 }
 
-var version$1 = "2.20.9";
+var version$1 = "2.20.12";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43122,7 +43122,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 {
@@ -43426,7 +43426,7 @@ const pluginHtml$6 = "<div class=\"big-mute-icon-wrapper\" data-big-mute>\n    <
 const T$f = '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
  */
@@ -43461,7 +43461,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);
@@ -43847,9 +43846,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
@@ -43878,11 +43879,11 @@ function orderByOrderPattern(arr, order) {
     return [...ordered, ...rest];
 }
 /**
- * PLUGIN that 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
@@ -44670,6 +44671,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();
@@ -44946,7 +44957,7 @@ MediaControl.extend = function (properties) {
 const VERSION$5 = '2.19.12';
 const T$d = 'plugins.bottom_gear';
 /**
- * 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
@@ -47208,7 +47219,7 @@ const drawSummary = (customMetrics, vodContainer, liveContainer) => {
 };
 // const T = 'plugins.clappr_nerd_stats';
 /**
- * PLUGIN that displays useful network-related statistics.
+ * `PLUGIN` that displays useful network-related statistics.
  * @beta
  *
  * @remarks
@@ -47468,7 +47479,7 @@ function newMetrics() {
 // TODO: fix
 const updateMetrics = () => { };
 /**
- * PLIGIN that 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.
@@ -47826,7 +47837,7 @@ class ClapprStats extends ContainerPlugin {
 // license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE.
 const T$c = 'plugins.click_to_pause_custom';
 /**
- * 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 {
@@ -47901,7 +47912,7 @@ class ClickToPause extends ContainerPlugin {
 }
 
 /**
- * PLUGIN that shows 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:
@@ -48058,7 +48069,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";
 
 /**
- * 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}
@@ -48170,7 +48181,7 @@ const dvrHTML = "<div class=\"live-info\"><%= live %></div>\n<button type=\"butt
 
 const T$b = 'plugins.dvr_controls';
 /**
- * PLUGIN that adds the DVR controls to the media control UI
+ * `PLUGIN` that adds the DVR controls to the media control UI
  *
  * @beta
  *
@@ -48179,7 +48190,9 @@ const T$b = 'plugins.dvr_controls';
  *
  * - {@link MediaControl}
  *
- * The plugin renders 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);
@@ -48212,67 +48225,60 @@ 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) {
         trace(`${T$b} onDvrChanged`, {
-            dvrEnabled,
+            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();
+        trace(`${T$b} settingsUpdate`);
+        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;
     }
     /**
@@ -48281,6 +48287,7 @@ class DvrControls extends UICorePlugin {
     render() {
         trace(`${T$b} render`, {
             dvrEnabled: this.core.activePlayback?.dvrEnabled,
+            playbackType: this.core.getPlaybackType(),
         });
         if (!this.shouldRender()) {
             return this;
@@ -48290,12 +48297,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;
     }
 }
@@ -48306,7 +48309,7 @@ const templateHtml = "<div class=\"player-error-screen__content\" data-error-scr
 
 const T$a = 'plugins.error_screen';
 /**
- * PLUGIN that displays errors 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 {
@@ -48408,7 +48411,6 @@ class ErrorScreen extends UICorePlugin {
             ...this.err,
             reloadIcon: this.options.errorScreen?.noReload ? null : reloadIcon,
         }));
-        // TODO append to container instead of core?
         if (!this.el.parentElement) {
             this.core.$el.append(this.el);
         }
@@ -48418,26 +48420,32 @@ class ErrorScreen extends UICorePlugin {
 
 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 changes the favicon according to the player's state.
  * @beta
+ * @remarks
+ * There are three states: stopped, playing and paused.
  */
 class Favicon extends CorePlugin {
-    _container = null;
     oldIcon;
     playIcon = null;
     pauseIcon = null;
     stopIcon = null;
+    /**
+     * @internal
+     */
     get name() {
         return 'favicon';
     }
+    /**
+     * @internal
+     */
     get supportedVersion() {
         return { min: CLAPPR_VERSION };
     }
-    //   get oldIcon() {
-    //     return oldIcon;
-    //   }
+    /**
+     * @internal
+     */
     constructor(core) {
         super(core);
         this.oldIcon = $(FAVICON_SELECTOR);
@@ -48445,41 +48453,31 @@ class Favicon extends CorePlugin {
             this.stopIcon = this.createIcon(stopIcon);
             this.changeIcon(this.stopIcon);
         }
-        this.configure();
-    }
-    configure() {
-        if (this.core.options.changeFavicon) {
-            if (!this.enabled) {
-                // @ts-ignore
-                this.stopListening(this.core, Events$1.CORE_OPTIONS_CHANGE);
-                this.enable();
-            }
-        }
-        else if (this.enabled) {
-            this.disable();
-            this.listenTo(this.core, Events$1.CORE_OPTIONS_CHANGE, this.configure);
-        }
     }
+    /**
+     * @internal
+     */
     bindEvents() {
-        this.listenTo(this.core, Events$1.CORE_OPTIONS_CHANGE, this.configure);
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.containerChanged);
-        this.core.activeContainer && this.containerChanged();
     }
     containerChanged() {
-        // @ts-ignore
-        this._container && this.stopListening(this._container);
-        this._container = this.core.activeContainer;
-        this.listenTo(this._container, Events$1.CONTAINER_PLAY, this.setPlayIcon);
-        this.listenTo(this._container, Events$1.CONTAINER_PAUSE, this.setPauseIcon);
-        this.listenTo(this._container, Events$1.CONTAINER_STOP, this.resetIcon);
-        this.listenTo(this._container, Events$1.CONTAINER_ENDED, this.resetIcon);
-        this.listenTo(this._container, Events$1.CONTAINER_ERROR, this.resetIcon);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAY, this.setPlayIcon);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PAUSE, this.setPauseIcon);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_STOP, this.resetIcon);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_ENDED, this.resetIcon);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_ERROR, this.resetIcon);
         this.resetIcon();
     }
+    /**
+     * @internal
+     */
     disable() {
         super.disable();
         this.resetIcon();
     }
+    /**
+     * @internal
+     */
     destroy() {
         super.destroy();
         this.resetIcon();
@@ -48510,15 +48508,12 @@ class Favicon extends CorePlugin {
         this.changeIcon(this.pauseIcon);
     }
     resetIcon() {
-        $(FAVICON_SELECTOR).remove();
         const icon = this.oldIcon.length > 0 ? this.oldIcon : this.stopIcon;
         this.changeIcon(icon);
     }
     changeIcon(icon) {
-        if (icon) {
-            $('link[rel="shortcut icon"]').remove();
-            $('head').append(icon);
-        }
+        $('link[rel="shortcut icon"]').remove();
+        $('head').append(icon);
     }
 }
 
@@ -48526,7 +48521,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 {
@@ -48654,7 +48649,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';
 /**
- * PLUGIN that provides a UI to select the desired quality level of the playback.
+ * `PLUGIN` that provides a UI to select the desired quality level of the playback.
  * @beta
  *
  * @remarks
@@ -48989,7 +48984,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 {
@@ -49176,7 +49171,7 @@ const streamsWhiteNightsIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:
 const VERSION$3 = '0.0.1';
 const T$8 = 'plugins.multicamera';
 /**
- * PLUGIN that 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 {
@@ -49529,7 +49524,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:
@@ -49635,7 +49630,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
@@ -49845,7 +49840,7 @@ const posterHTML = "<div class=\"play-wrapper\" data-poster></div>\n";
 // license that can be found in the LICENSE file.
 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.
@@ -50122,7 +50117,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 {
@@ -50282,7 +50277,7 @@ 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>";
 
 /**
- * PLUGIN that 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 {
@@ -50403,7 +50398,7 @@ 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";
 
 /**
- * PLUGIN that adds skip controls to the media control UI.
+ * `PLUGIN` that adds skip controls to the media control UI.
  * @beta
  */
 class SkipTime extends UICorePlugin {
@@ -50508,7 +50503,7 @@ var SpinnerEvents;
     SpinnerEvents["SYNC"] = "plugins:spinner:sync";
 })(SpinnerEvents || (SpinnerEvents = {}));
 /**
- * PLUGIN that shows a pending operation indicator when playback is buffering or in a similar state
+ * `PLUGIN` that shows a pending operation indicator when playback is buffering or in a similar state
  * @beta
  * @remarks
  * Events emitted- {@link SpinnerEvents}
@@ -50662,7 +50657,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
@@ -50874,7 +50869,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
@@ -51251,7 +51246,7 @@ var TelemetryEvent;
     TelemetryEvent[TelemetryEvent["Stall"] = 4] = "Stall";
 })(TelemetryEvent || (TelemetryEvent = {}));
 /**
- * PLUGIN that 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.
@@ -51531,7 +51526,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
@@ -51980,7 +51975,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 {