@gcorevideo/player 2.22.29 → 2.22.31

package/dist/index.js

@@ -12680,7 +12680,7 @@ var PlaybackEvents;
 // https://github.com/clappr/clappr/blob/8752995ea439321ac7ca3cd35e8c64de7a3c3d17/LICENSE
 const AUTO$1 = -1;
 const { now: now$2 } = Utils;
-const T$m = 'playback.dash';
+const T$n = 'playback.dash';
 class DashPlayback extends BasePlayback {
     _levels = null;
     _currentLevel = null;
@@ -12955,10 +12955,10 @@ class DashPlayback extends BasePlayback {
     }
     _onPlaybackError = (event) => {
         // TODO
-        trace(`${T$m} _onPlaybackError`, { event });
+        trace(`${T$n} _onPlaybackError`, { event });
     };
     _onDASHJSSError = (event) => {
-        trace(`${T$m} _onDASHJSSError`, { event });
+        trace(`${T$n} _onDASHJSSError`, { event });
         this._stopTimeUpdateTimer();
         // Note that the other error types are deprecated
         const e = event.error;
@@ -12993,7 +12993,7 @@ class DashPlayback extends BasePlayback {
         }
     };
     triggerError(error) {
-        trace(`${T$m} triggerError`, { error });
+        trace(`${T$n} triggerError`, { error });
         // this triggers Events.ERROR to be handled by the UI
         this.trigger(Events$1.PLAYBACK_ERROR, this.createError(error, {
             useCodePrefix: false,
@@ -13032,10 +13032,10 @@ class DashPlayback extends BasePlayback {
     }
     get dvrEnabled() {
         if (!this._dash) {
-            trace(`${T$m} dvrEnable no dash player instance`);
+            trace(`${T$n} dvrEnable no dash player instance`);
             return false;
         }
-        trace(`${T$m} get.dvrEnabled`, {
+        trace(`${T$n} get.dvrEnabled`, {
             dvrWindowSize: this._dash?.getDVRWindowSize(),
             minDvrSize: this._minDvrSize,
             playbackType: this.getPlaybackType(),
@@ -13057,7 +13057,7 @@ class DashPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_PROGRESS, progress, {});
     }
     play() {
-        trace(`${T$m} play`, { dash: !!this._dash });
+        trace(`${T$n} play`, { dash: !!this._dash });
         if (!this._dash) {
             this._setup();
         }
@@ -13143,7 +13143,7 @@ class DashPlayback extends BasePlayback {
     }
     // @ts-expect-error
     get currentAudioTrack() {
-        trace(`${T$m} get currentAudioTrack`);
+        trace(`${T$n} get currentAudioTrack`);
         assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized');
         const t = this._dash.getCurrentTrackFor('audio');
         if (!t) {
@@ -41844,7 +41844,7 @@ const AUTO = -1;
 const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-const T$l = 'playback.hls';
+const T$m = 'playback.hls';
 class HlsPlayback extends BasePlayback {
     _ccIsSetup = false;
     _ccTracksUpdated = false;
@@ -42073,7 +42073,7 @@ class HlsPlayback extends BasePlayback {
             maxBufferLength: 2,
             maxMaxBufferLength: 4,
         }, this.options.playback.hlsjsConfig);
-        trace(`${T$l} _createHLSInstance`, { config });
+        trace(`${T$m} _createHLSInstance`, { config });
         this._hls = new Hls(config);
     }
     _attachHLSMedia() {
@@ -42164,7 +42164,7 @@ class HlsPlayback extends BasePlayback {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$l} _recover failed to recover`, {
+            trace(`${T$m} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42250,7 +42250,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$l} _onHLSJSError`, {
+        trace(`${T$m} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -42298,7 +42298,7 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$l} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$m} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
@@ -42311,7 +42311,7 @@ class HlsPlayback extends BasePlayback {
                             evt,
                             data,
                         });
-                        trace(`${T$l} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$m} _onHLSJSError trying to recover from media error`, {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
@@ -42341,7 +42341,7 @@ class HlsPlayback extends BasePlayback {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$l} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$m} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42675,11 +42675,11 @@ class HlsPlayback extends BasePlayback {
         this._hls.audioTrack = Number(id); // TODO or find index by .id == id?
     }
     _onAudioTracksUpdated(_, data) {
-        trace(`${T$l} onAudioTracksUpdated`);
+        trace(`${T$m} onAudioTracksUpdated`);
         this.trigger(Events$1.PLAYBACK_AUDIO_AVAILABLE, data.audioTracks.map(toClapprTrack));
     }
     _onAudioTrackSwitched(_, data) {
-        trace(`${T$l} onAudioTrackSwitched`);
+        trace(`${T$m} onAudioTrackSwitched`);
         // @ts-ignore
         const track = this._hls.audioTracks[data.id];
         this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack(track));
@@ -42700,7 +42700,7 @@ function toClapprTrack(t) {
     };
 }
 
-const T$k = 'playback.html5_video';
+const T$l = 'playback.html5_video';
 const STALL_TIMEOUT = 15000;
 class HTML5Video extends BasePlayback {
     stallTimerId = null;
@@ -42708,7 +42708,7 @@ class HTML5Video extends BasePlayback {
      * @internal
      */
     createError(errorData, options) {
-        trace(`${T$k} createError`, {
+        trace(`${T$l} createError`, {
             errorData: { ...errorData },
         });
         const i18n = this.i18n ||
@@ -42724,11 +42724,11 @@ class HTML5Video extends BasePlayback {
         return super.createError(errorData, { ...options, useCodePrefix: false });
     }
     _onWaiting() {
-        trace(`${T$k} _onWaiting`);
+        trace(`${T$l} _onWaiting`);
         super._onWaiting();
     }
     _onEnded() {
-        trace(`${T$k} _onEnded`);
+        trace(`${T$l} _onEnded`);
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
             this.stallTimerId = null;
@@ -42736,12 +42736,12 @@ class HTML5Video extends BasePlayback {
         super._onEnded();
     }
     _handleBufferingEvents() {
-        trace(`${T$k} _handleBufferingEvents`, {
+        trace(`${T$l} _handleBufferingEvents`, {
             networkState: this.el.networkState,
         });
         if (!this.stallTimerId) {
             this.stallTimerId = setTimeout(() => {
-                trace(`${T$k} _handleBufferingEvents stall timeout`, {
+                trace(`${T$l} _handleBufferingEvents stall timeout`, {
                     buffering: this.buffering,
                     ended: this.ended,
                 });
@@ -42759,7 +42759,7 @@ class HTML5Video extends BasePlayback {
         super._handleBufferingEvents();
     }
     _onPlaying() {
-        trace(`${T$k} _onPlaying`);
+        trace(`${T$l} _onPlaying`);
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
             this.stallTimerId = null;
@@ -42767,7 +42767,7 @@ class HTML5Video extends BasePlayback {
         super._onPlaying();
     }
     _onPause() {
-        trace(`${T$k} _onPause`);
+        trace(`${T$l} _onPause`);
         super._onPause();
         if (this.stallTimerId) {
             clearTimeout(this.stallTimerId);
@@ -42777,7 +42777,7 @@ class HTML5Video extends BasePlayback {
     get audioTracks() {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$k} get audioTracks`, { supported });
+        trace(`${T$l} get audioTracks`, { supported });
         const retval = [];
         if (supported) {
             for (let i = 0; i < tracks.length; i++) {
@@ -42796,7 +42796,7 @@ class HTML5Video extends BasePlayback {
     get currentAudioTrack() {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$k} get currentAudioTrack`, {
+        trace(`${T$l} get currentAudioTrack`, {
             supported,
         });
         if (supported) {
@@ -42817,7 +42817,7 @@ class HTML5Video extends BasePlayback {
     switchAudioTrack(id) {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$k} switchAudioTrack`, {
+        trace(`${T$l} switchAudioTrack`, {
             supported,
         });
         if (supported) {
@@ -42836,7 +42836,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$j = 'GPlayer';
+const T$k = 'GPlayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -42924,7 +42924,7 @@ class Player {
      * ```
      */
     attachTo(playerElement) {
-        trace(`${T$j} attachTo`, {
+        trace(`${T$k} attachTo`, {
             player: !!this.player,
         });
         assert.ok(!this.player, 'Player already initialized');
@@ -42934,7 +42934,7 @@ class Player {
         }
         const coreOpts = this.buildCoreOptions(playerElement);
         const { core, container } = Player.getRegisteredPlugins();
-        trace(`${T$j} init`, {
+        trace(`${T$k} init`, {
             registeredPlaybacks: Loader.registeredPlaybacks.map((p) => p.prototype.name),
         });
         coreOpts.plugins = {
@@ -42948,7 +42948,7 @@ class Player {
      * Destroys the player, releasing all resources and unmounting its UI from the DOM.
      */
     destroy() {
-        trace(`${T$j} destroy`, {
+        trace(`${T$k} destroy`, {
             player: !!this.player,
         });
         if (this.player) {
@@ -43135,7 +43135,7 @@ class Player {
         this.config = $.extend(true, this.config, config);
     }
     initPlayer(coreOptions) {
-        trace(`${T$j} initPlayer`, {
+        trace(`${T$k} initPlayer`, {
             autoPlay: coreOptions.autoPlay,
             sources: coreOptions.sources,
             player: !!this.player,
@@ -43160,7 +43160,7 @@ class Player {
         }
     }
     triggerAutoPlay() {
-        trace(`${T$j} triggerAutoPlay`);
+        trace(`${T$k} triggerAutoPlay`);
         setTimeout(() => {
             this.player?.play({
                 autoPlay: true,
@@ -43178,7 +43178,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$j} onReady`, {
+            trace(`${T$k} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -43212,7 +43212,7 @@ class Player {
     buildCoreOptions(rootNode) {
         const sources = this.buildMediaSourcesList();
         const source = sources[0];
-        trace(`${T$j} buildCoreOptions`, {
+        trace(`${T$k} buildCoreOptions`, {
             source,
             sources,
         });
@@ -43273,7 +43273,7 @@ class Player {
         assert.ok(this.player, 'Player is not initialized');
         const core = this.player.core;
         core.on(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, ({ orientation }) => {
-            trace(`${T$j} on CORE_SCREEN_ORIENTATION_CHANGED`, {
+            trace(`${T$k} on CORE_SCREEN_ORIENTATION_CHANGED`, {
                 orientation,
                 rootNode: {
                     width: this.rootNode?.clientWidth,
@@ -43288,14 +43288,14 @@ class Player {
             }
         }, null);
         core.on(Events$1.CORE_RESIZE, ({ width, height }) => {
-            trace(`${T$j} on CORE_RESIZE`, {
+            trace(`${T$k} on CORE_RESIZE`, {
                 width,
                 height,
             });
             this.safeTriggerEvent(PlayerEvent.Resize, { width, height });
         }, null);
         core.on(Events$1.CORE_FULLSCREEN, (isFullscreen) => {
-            trace(`${T$j} CORE_FULLSCREEN`, {
+            trace(`${T$k} CORE_FULLSCREEN`, {
                 isFullscreen,
             });
             this.safeTriggerEvent(PlayerEvent.Fullscreen, isFullscreen);
@@ -43303,7 +43303,7 @@ class Player {
     }
 }
 
-var version$1 = "2.22.29";
+var version$1 = "2.22.31";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43627,7 +43627,7 @@ const INITIAL_SETTINGS = {
     default: [],
     seekEnabled: false,
 };
-const T$i = 'plugins.media_control';
+const T$j = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
     'playstop',
@@ -43878,7 +43878,7 @@ class MediaControl extends UICorePlugin {
      * Hides the media control UI
      */
     disable() {
-        trace(`${T$i} disable`);
+        trace(`${T$j} disable`);
         this.userDisabled = true; // TODO distinguish between user and system (e.g., unplayable) disabled?
         this.hide();
         this.unbindKeyEvents();
@@ -43888,7 +43888,7 @@ class MediaControl extends UICorePlugin {
      * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
      */
     enable() {
-        trace(`${T$i} enable`);
+        trace(`${T$j} enable`);
         if (this.options.chromeless) {
             return;
         }
@@ -44614,7 +44614,7 @@ class MediaControl extends UICorePlugin {
             return this;
         }
         const timeout = this.options.hideMediaControlDelay || 2000;
-        trace(`${T$i} render`, { settings: this.settings });
+        trace(`${T$j} render`, { settings: this.settings });
         this.$el.html(MediaControl.template({ settings: this.settings }));
         // const style = Styler.getStyleFor(mediaControlStyle, { baseUrl: this.options.baseUrl });
         // this.$el.append(style[0]);
@@ -44770,7 +44770,7 @@ function serializeSettings(s) {
 }
 
 const VERSION$7 = '2.22.4';
-const T$h = 'plugins.audiotracks';
+const T$i = 'plugins.audiotracks';
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @beta
@@ -44892,7 +44892,7 @@ class AudioTracks extends UICorePlugin {
         this.updateText();
     }
     hideMenu() {
-        trace(`${T$h} hideMenu`);
+        trace(`${T$i} hideMenu`);
         this.$el.find('#audiotracks-select').addClass('hidden');
         this.$el.find('#audiotracks-button').attr('aria-expanded', 'false');
     }
@@ -44945,7 +44945,7 @@ class AudioTracks extends UICorePlugin {
 
 const pluginHtml$6 = "<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$g = 'plugins.big_mute_button';
+const T$h = 'plugins.big_mute_button';
 // TODO rewrite as a container plugin
 /**
  * `PLUGIN` that displays a big mute button over the video when it's muted.
@@ -44986,7 +44986,7 @@ class BigMuteButton extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
         this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
         this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
-        trace(`${T$g} bindEvents`, {
+        trace(`${T$h} bindEvents`, {
             mediacontrol: !!this.core.mediaControl,
         });
         this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mediaControlRendered);
@@ -45011,12 +45011,12 @@ class BigMuteButton extends UICorePlugin {
     }
     mediaControlRendered() {
         const container = this.core.activeContainer;
-        trace(`${T$g} mediaControlRendered`, {
+        trace(`${T$h} mediaControlRendered`, {
             container: !!container,
         });
         if (container) {
             this.listenTo(container.playback, Events$1.PLAYBACK_PLAY, () => {
-                trace(`${T$g} PLAYBACK_PLAY`);
+                trace(`${T$h} PLAYBACK_PLAY`);
                 this.render();
             });
         }
@@ -45040,7 +45040,7 @@ class BigMuteButton extends UICorePlugin {
         }
         const { autoPlay, wasMuted } = this.options;
         const volume = container.volume;
-        trace(`${T$g} shouldRender`, {
+        trace(`${T$h} shouldRender`, {
             autoPlay,
             wasMuted,
             volume,
@@ -45052,7 +45052,7 @@ class BigMuteButton extends UICorePlugin {
      */
     render() {
         if (this.shouldRender()) {
-            trace(`${T$g} render`, {
+            trace(`${T$h} render`, {
                 el: !!this.$el,
             });
             this.$el.html(BigMuteButton.template());
@@ -45098,7 +45098,7 @@ const gearIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"n
 const gearHdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g clip-path=\"url(#clip0_28_1567)\">\n    <path\n      d=\"M19.14 12.94C19.18 12.64 19.2 12.33 19.2 12C19.2 11.68 19.18 11.36 19.13 11.06L21.16 9.47999C21.34 9.33999 21.39 9.06999 21.28 8.86999L19.36 5.54999C19.24 5.32999 18.99 5.25999 18.77 5.32999L16.38 6.28999C15.88 5.90999 15.35 5.58999 14.76 5.34999L14.4 2.80999C14.36 2.56999 14.16 2.39999 13.92 2.39999H10.08C9.83999 2.39999 9.64999 2.56999 9.60999 2.80999L9.24999 5.34999C8.65999 5.58999 8.11999 5.91999 7.62999 6.28999L5.23999 5.32999C5.01999 5.24999 4.76999 5.32999 4.64999 5.54999L2.73999 8.86999C2.61999 9.07999 2.65999 9.33999 2.85999 9.47999L4.88999 11.06C4.83999 11.36 4.79999 11.69 4.79999 12C4.79999 12.31 4.81999 12.64 4.86999 12.94L2.83999 14.52C2.65999 14.66 2.60999 14.93 2.71999 15.13L4.63999 18.45C4.75999 18.67 5.00999 18.74 5.22999 18.67L7.61999 17.71C8.11999 18.09 8.64999 18.41 9.23999 18.65L9.59999 21.19C9.64999 21.43 9.83999 21.6 10.08 21.6H13.92C14.16 21.6 14.36 21.43 14.39 21.19L14.75 18.65C15.34 18.41 15.88 18.09 16.37 17.71L18.76 18.67C18.98 18.75 19.23 18.67 19.35 18.45L21.27 15.13C21.39 14.91 21.34 14.66 21.15 14.52L19.14 12.94ZM12 15.6C10.02 15.6 8.39999 13.98 8.39999 12C8.39999 10.02 10.02 8.39999 12 8.39999C13.98 8.39999 15.6 10.02 15.6 12C15.6 13.98 13.98 15.6 12 15.6Z\"\n      fill=\"#C9C9C9\"/>\n    <rect x=\"13\" width=\"11\" height=\"7\" rx=\"1\" fill=\"#F6413B\"/>\n    <path\n      d=\"M14.6962 6V1.63636H15.3546V3.53267H17.53V1.63636H18.1905V6H17.53V4.0973H15.3546V6H14.6962ZM20.562 6H19.1493V1.63636H20.6067C21.0343 1.63636 21.4015 1.72372 21.7083 1.89844C22.0151 2.07173 22.2502 2.32102 22.4135 2.64631C22.5783 2.97017 22.6607 3.35866 22.6607 3.81179C22.6607 4.26634 22.5776 4.65696 22.4114 4.98366C22.2466 5.31037 22.008 5.56179 21.6955 5.73793C21.383 5.91264 21.0051 6 20.562 6ZM19.8077 5.42472H20.5257C20.8581 5.42472 21.1344 5.36222 21.3546 5.23722C21.5748 5.1108 21.7395 4.92827 21.8489 4.68963C21.9583 4.44957 22.013 4.15696 22.013 3.81179C22.013 3.46946 21.9583 3.17898 21.8489 2.94034C21.7409 2.7017 21.5797 2.5206 21.3652 2.39702C21.1507 2.27344 20.8844 2.21165 20.5662 2.21165H19.8077V5.42472Z\"\n      fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_28_1567\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
 
 const VERSION$6 = '2.19.12';
-const T$f = 'plugins.bottom_gear';
+const T$g = 'plugins.bottom_gear';
 /**
  * Events triggered by the plugin
  * @beta
@@ -45248,20 +45248,20 @@ class BottomGear extends UICorePlugin {
     addItem(name, $subMenu) {
         const $existingItem = this.$el.find(`#gear-options li[data-${name}`);
         if ($existingItem.length) {
-            trace(`${T$f} addItem already exists`, { name });
+            trace(`${T$g} addItem already exists`, { name });
             return $existingItem;
         }
         const $item = $('<li></li>')
             .attr(`data-${name}`, '')
             .appendTo(this.$el.find('#gear-options'));
         if ($subMenu) {
-            trace(`${T$f} addItem adding submenu`, { name });
+            trace(`${T$g} addItem adding submenu`, { name });
             $subMenu
                 .addClass('gear-sub-menu-wrapper')
                 .hide()
                 .appendTo(this.$el.find('#gear-options-wrapper'));
             $item.on('click', (e) => {
-                trace(`${T$f} addItem submenu clicked`, { name });
+                trace(`${T$g} addItem submenu clicked`, { name });
                 e.stopPropagation();
                 $subMenu.show();
                 this.$el.find('#gear-options').hide();
@@ -45270,15 +45270,15 @@ class BottomGear extends UICorePlugin {
         return $item;
     }
     onActiveContainerChanged() {
-        trace(`${T$f} onActiveContainerChanged`);
+        trace(`${T$g} onActiveContainerChanged`);
         this.bindContainerEvents();
     }
     bindContainerEvents() {
-        trace(`${T$f} bindContainerEvents`);
+        trace(`${T$g} bindContainerEvents`);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
     }
     highDefinitionUpdate(isHd) {
-        trace(`${T$f} highDefinitionUpdate`, { isHd });
+        trace(`${T$g} highDefinitionUpdate`, { isHd });
         this.hd = isHd;
         this.$el.find('.gear-icon').html(isHd ? gearHdIcon : gearIcon);
     }
@@ -45286,7 +45286,7 @@ class BottomGear extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$f} render`);
+        trace(`${T$g} render`);
         const mediaControl = this.core.getPlugin('media_control');
         if (!mediaControl) {
             return this; // TODO test
@@ -45318,11 +45318,11 @@ class BottomGear extends UICorePlugin {
         this.$el.find('#gear-options-wrapper').toggle();
     }
     hide() {
-        trace(`${T$f} hide`);
+        trace(`${T$g} hide`);
         this.$el.find('#gear-options-wrapper').hide();
     }
     onCoreReady() {
-        trace(`${T$f} onCoreReady`);
+        trace(`${T$g} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.onMediaControlRendered);
@@ -45334,7 +45334,7 @@ class BottomGear extends UICorePlugin {
         });
     }
     onMediaControlRendered() {
-        trace(`${T$f} onMediaControlRendered`);
+        trace(`${T$g} onMediaControlRendered`);
         const mediaControl = this.core.getPlugin('media_control');
         mediaControl.mount('gear', this.$el);
     }
@@ -47804,7 +47804,7 @@ const PLAYBACK_NAMES = {
     hls: 'HLS.js',
     html5_video: 'Native',
 };
-const T$e = 'plugins.nerd_stats';
+const T$f = 'plugins.nerd_stats';
 /**
  * `PLUGIN` that displays useful statistics regarding the playback as well as the network quality estimation.
  * @beta
@@ -48123,7 +48123,7 @@ class NerdStats extends UICorePlugin {
         return this;
     }
     attach() {
-        trace(`${T$e} attach`);
+        trace(`${T$f} attach`);
         const gear = this.core.getPlugin('bottom_gear');
         gear
             .addItem('nerd_stats')
@@ -48137,7 +48137,7 @@ class NerdStats extends UICorePlugin {
         });
     }
     clearSpeedtestMetrics() {
-        trace(`${T$e} clearSpeedtestMetrics`);
+        trace(`${T$f} clearSpeedtestMetrics`);
         const clapprStats = this.container?.getPlugin('clappr_stats');
         this.speedtestMetrics.connectionSpeed = 0;
         this.speedtestMetrics.ping = 0;
@@ -48192,7 +48192,7 @@ function newMetrics() {
 // 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 at https://github.com/clappr/clappr-plugins/blob/master/LICENSE.
-const T$d = 'plugins.click_to_pause';
+const T$e = 'plugins.click_to_pause';
 /**
  * A small `PLUGIN` that toggles the playback state on click over the video container
  * @beta
@@ -48222,7 +48222,7 @@ class ClickToPause extends ContainerPlugin {
     click() {
         const isLivePlayback = this.container.getPlaybackType() === Playback.LIVE;
         const isDvrEnabled = this.container.isDvrEnabled();
-        trace(`${T$d} click`, {
+        trace(`${T$e} click`, {
             isLivePlayback,
             isDvrEnabled,
         });
@@ -48301,7 +48301,7 @@ function buildSvg(clips, duration, barWidth) {
 
 const clipsHTML = "<div class=\"media-clip-text\" id=\"clips-text\"></div>";
 
-const T$c = 'plugins.clips';
+const T$d = 'plugins.clips';
 const VERSION$5 = '2.22.16';
 const CLAPPR_VERSION = '0.11.4';
 /**
@@ -48351,7 +48351,7 @@ class Clips extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
     }
     render() {
-        trace(`${T$c} render`);
+        trace(`${T$d} render`);
         if (!this.options.clips) {
             return this;
         }
@@ -48378,19 +48378,19 @@ class Clips extends UICorePlugin {
         return super.enable();
     }
     onCoreReady() {
-        trace(`${T$c} onCoreReady`);
+        trace(`${T$d} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.parseClips(this.options.clips.text);
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.onMcRender);
     }
     onMcRender() {
-        trace(`${T$c} onMcRender`);
+        trace(`${T$d} onMcRender`);
         const mediaControl = this.core.getPlugin('media_control');
         mediaControl.mount('clips', this.$el);
     }
     onContainerChanged() {
-        trace(`${T$c} onContainerChanged`);
+        trace(`${T$d} onContainerChanged`);
         // TODO figure out the conditions of changing the container (without destroying the previous one)
         if (this.oldContainer) {
             this.stopListening(this.oldContainer, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
@@ -48683,7 +48683,7 @@ const reloadIcon = "<svg fill=\"#FFFFFF\" height=\"24\" viewBox=\"0 0 24 24\" wi
 
 const templateHtml = "<div class=\"player-error-screen__content\" data-error-screen>\n    <% if (icon) { %>\n        <div class=\"player-error-screen__icon\" data-error-screen><%= icon %></div>\n    <% } %>\n    <div class=\"player-error-screen__title\" data-error-screen><%= title %></div>\n    <% if (message) { %>\n        <div class=\"player-error-screen__message\" data-error-screen><%= message %></div>\n    <% } %>\n    <% if (code) { %>\n        <div class=\"player-error-screen__code\" data-error-screen><%= i18n.t('error_code') %>: <%= code %></div>\n    <% } %>\n    <% if (reloadIcon) { %>\n        <div class=\"player-error-screen__reload\" data-error-screen><%= reloadIcon %></div>\n    <% } %>\n</div>\n";
 
-const T$b = 'plugins.error_screen';
+const T$c = 'plugins.error_screen';
 /**
  * `PLUGIN` that displays fatal errors nicely in the overlay on top of the player.
  * @public
@@ -48735,11 +48735,11 @@ class ErrorScreen extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
     onPlay() {
-        trace(`${T$b} onPlay`);
+        trace(`${T$c} onPlay`);
         this.unmount();
     }
     unmount() {
-        trace(`${T$b} unmount`);
+        trace(`${T$c} unmount`);
         this.err = null;
         this.$el.remove();
     }
@@ -48752,7 +48752,7 @@ class ErrorScreen extends UICorePlugin {
         };
     }
     reload() {
-        trace(`${T$b} reload`);
+        trace(`${T$c} reload`);
         setTimeout(() => {
             this.core.configure({
                 reloading: true,
@@ -48762,7 +48762,7 @@ class ErrorScreen extends UICorePlugin {
         }, 0);
     }
     onActiveContainerChanged() {
-        trace(`${T$b} onActiveContainerChanged`, {
+        trace(`${T$c} onActiveContainerChanged`, {
             reloading: this.core.options.reloading,
         });
         this.err = null;
@@ -48778,7 +48778,7 @@ class ErrorScreen extends UICorePlugin {
         }
     }
     onError(err) {
-        trace(`${T$b} onError`, { err });
+        trace(`${T$c} onError`, { err });
         if (err.UI) {
             if (this.err) {
                 this.unmount();
@@ -49248,7 +49248,7 @@ const streamsMomentoIcon = "<svg id=\"Слой_1\" data-name=\"Слой 1\" xmln
 const streamsWhiteNightsIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"50\" height=\"50\" viewBox=\"0 0 50 50\">\n  <defs>\n    <clipPath id=\"clip-Icon\">\n      <rect width=\"50\" height=\"50\"/>\n    </clipPath>\n  </defs>\n  <g id=\"Icon\" clip-path=\"url(#clip-Icon)\">\n    <g id=\"icon2\" transform=\"translate(-0.041 0)\">\n      <path id=\"Контур_77\" data-name=\"Контур 77\" d=\"M6.493,13v8.266h6.275V19.74H8.31V17.714h4.006V16.3H8.31V14.53h4.365V13Zm7.5,0v8.266h1.7V15.732h.023l3.438,5.534h1.818V13h-1.7v5.545h-.023L15.8,13Z\" fill=\"#fff\"/>\n      <path id=\"Контур_76\" data-name=\"Контур 76\" d=\"M29.949,29.1V26.774H31.94a1.4,1.4,0,0,1,.938.272,1.1,1.1,0,0,1,.313.874,1.155,1.155,0,0,1-.313.9,1.375,1.375,0,0,1-.938.278ZM28.132,25.36v8.266h1.817V30.4h1.818a1.353,1.353,0,0,1,.984.3,1.637,1.637,0,0,1,.394.949c.046.333.079.681.1,1.042a3.2,3.2,0,0,0,.185.938h1.819a1.218,1.218,0,0,1-.191-.423,3.611,3.611,0,0,1-.093-.527c-.019-.185-.033-.367-.041-.544s-.016-.332-.023-.463a5.052,5.052,0,0,0-.087-.625,2.109,2.109,0,0,0-.2-.573,1.586,1.586,0,0,0-.359-.451,1.414,1.414,0,0,0-.556-.284v-.023a1.926,1.926,0,0,0,1-.81,2.494,2.494,0,0,0,.307-1.262,2.308,2.308,0,0,0-.165-.88,2.128,2.128,0,0,0-.486-.724,2.3,2.3,0,0,0-.764-.492,2.67,2.67,0,0,0-1-.179ZM43.506,30.5V25.36H41.689V30.5a2.065,2.065,0,0,1-.37,1.36,1.7,1.7,0,0,1-1.343.434,2.086,2.086,0,0,1-.886-.156,1.283,1.283,0,0,1-.758-.978,3.748,3.748,0,0,1-.058-.66V25.36H36.456V30.5a3.16,3.16,0,0,0,.92,2.5,3.807,3.807,0,0,0,2.6.81,3.82,3.82,0,0,0,2.593-.816,3.132,3.132,0,0,0,.937-2.492Z\" fill=\"#fff\"/>\n      <path id=\"Контур_80\" data-name=\"Контур 80\" d=\"M22.646,31.2H4.689a4.505,4.505,0,0,1-4.5-4.5V8.5A4.505,4.505,0,0,1,4.689,4h18.2a4.505,4.505,0,0,1,4.5,4.5v8.445l-.893.1a3.184,3.184,0,0,0-2.846,3.177V30.5l-.465.7ZM4.689,6a2.5,2.5,0,0,0-2.5,2.5V26.7a2.5,2.5,0,0,0,2.5,2.5H21.65V20.22a5.18,5.18,0,0,1,3.739-4.992V8.5a2.5,2.5,0,0,0-2.5-2.5Z\" fill=\"#fff\"/>\n      <path id=\"Контур_81\" data-name=\"Контур 81\" d=\"M30.127,47.884a1,1,0,0,1-1-1V43.267H26.846a5.206,5.206,0,0,1-5.2-5.2V20.222a5.206,5.206,0,0,1,5.2-5.2H44.692a5.206,5.206,0,0,1,5.2,5.2V38.068a5.206,5.206,0,0,1-5.2,5.2H35.058l-4.216,4.316A1,1,0,0,1,30.127,47.884ZM26.846,17.022a3.2,3.2,0,0,0-3.2,3.2V38.067a3.2,3.2,0,0,0,3.2,3.2h3.281a1,1,0,0,1,1,1v2.162l2.8-2.86a1,1,0,0,1,.715-.3H44.692a3.2,3.2,0,0,0,3.2-3.2V20.222a3.2,3.2,0,0,0-3.2-3.2Z\" fill=\"#fff\"/>\n    </g>\n  </g>\n</svg>\n";
 
 const VERSION$4 = '0.0.1';
-const T$a = 'plugins.multicamera';
+const T$b = 'plugins.multicamera';
 /**
  * `PLUGIN` that adds support for loading multiple streams and switching between them using the media control UI.
  * @beta
@@ -49394,7 +49394,7 @@ class MultiCamera extends UICorePlugin {
     }
     onCameraSelect(event) {
         const value = event.currentTarget.dataset.multicameraSelectorSelect;
-        trace(`${T$a} onCameraSelect`, { value });
+        trace(`${T$b} onCameraSelect`, { value });
         if (value !== undefined) {
             this.changeById(parseInt(value, 10));
         }
@@ -49520,13 +49520,13 @@ class MultiCamera extends UICorePlugin {
         }
     }
     changeById(id) {
-        trace(`${T$a} changeById`, { id });
+        trace(`${T$b} changeById`, { id });
         queueMicrotask(() => {
             const playbackOptions = this.core.options.playback || {};
             // TODO figure out what this does
             playbackOptions.recycleVideo = Browser.isMobile;
             this.currentCamera = this.findElementById(id) ?? null;
-            trace(`${T$a} changeById`, { id, currentCamera: this.currentCamera, multicamera: this.multicamera });
+            trace(`${T$b} changeById`, { id, currentCamera: this.currentCamera, multicamera: this.multicamera });
             if (!this.currentCamera) {
                 return;
             }
@@ -49543,7 +49543,7 @@ class MultiCamera extends UICorePlugin {
             // TODO remove?
             // for html5 playback:
             this.options.dvrEnabled = this.currentCamera.dvr;
-            trace(`${T$a} changeById`, { currentCamera: this.currentCamera });
+            trace(`${T$b} changeById`, { currentCamera: this.currentCamera });
             // TODO
             this.core.configure({
                 playback: playbackOptions,
@@ -49601,7 +49601,7 @@ const pipIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"no
 const buttonHtml$2 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\">\n    <%= pipIcon %>\n</button>\n";
 
 const VERSION$3 = '0.0.1';
-const T$9 = `plugins.pip`;
+const T$a = `plugins.pip`;
 /**
  * `PLUGIN` that enables picture in picture mode.
  * @beta
@@ -49659,7 +49659,7 @@ class PictureInPicture extends UICorePlugin {
         });
     }
     isPiPSupported() {
-        trace(`${T$9} isPiPSupported`, {
+        trace(`${T$a} isPiPSupported`, {
             pictureInPictureEnabled: !!document.pictureInPictureEnabled,
             requestPictureInPicture: !!HTMLVideoElement.prototype.requestPictureInPicture,
         });
@@ -49680,7 +49680,7 @@ class PictureInPicture extends UICorePlugin {
         return this;
     }
     togglePictureInPicture() {
-        trace(`${T$9} togglePictureInPicture`);
+        trace(`${T$a} togglePictureInPicture`);
         if (this.videoElement !== document.pictureInPictureElement) {
             this.requestPictureInPicture();
         }
@@ -49689,13 +49689,13 @@ class PictureInPicture extends UICorePlugin {
         }
     }
     requestPictureInPicture() {
-        trace(`${T$9} requestPictureInPicture`, {
+        trace(`${T$a} requestPictureInPicture`, {
             videoElement: !!this.videoElement,
         });
         this.videoElement.requestPictureInPicture();
     }
     exitPictureInPicture() {
-        trace(`${T$9} exitPictureInPicture`);
+        trace(`${T$a} exitPictureInPicture`);
         document.exitPictureInPicture();
     }
 }
@@ -49722,7 +49722,7 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: 2.0, label: '2x' },
 ];
 const DEFAULT_PLAYBACK_RATE = 1;
-const T$8 = 'plugins.playback_rate';
+const T$9 = 'plugins.playback_rate';
 /**
  * `PLUGIN` that allows changing the playback speed of the video.
  * @beta
@@ -49808,7 +49808,7 @@ class PlaybackRate extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
     }
     onCoreReady() {
-        trace(`${T$8} onCoreReady`);
+        trace(`${T$9} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         const gear = this.core.getPlugin('bottom_gear');
@@ -49817,7 +49817,7 @@ class PlaybackRate extends UICorePlugin {
         this.listenTo(gear, GearEvents.RENDERED, this.onGearRendered);
     }
     onActiveContainerChange() {
-        trace(`${T$8} onActiveContainerChange`);
+        trace(`${T$9} onActiveContainerChange`);
         this.metadataLoaded = false;
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_STOP, this.onStop);
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_PLAY, this.onPlay);
@@ -49825,15 +49825,15 @@ class PlaybackRate extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_LOADEDMETADATA, this.onMetaDataLoaded);
     }
     onMediaControlRendered() {
-        trace(`${T$8} onMediaControlRendered`);
+        trace(`${T$9} onMediaControlRendered`);
         this.render();
     }
     onGearRendered() {
-        trace(`${T$8} onGearRendered`);
+        trace(`${T$9} onGearRendered`);
         this.mount();
     }
     mount() {
-        trace(`${T$8} mount`, {
+        trace(`${T$9} mount`, {
             shouldMount: this.shouldMount(),
         });
         if (!this.shouldMount()) {
@@ -49850,7 +49850,7 @@ class PlaybackRate extends UICorePlugin {
         })));
     }
     onMetaDataLoaded() {
-        trace(`${T$8} onMetaDataLoaded`, {
+        trace(`${T$9} onMetaDataLoaded`, {
             playbackType: this.core.activePlayback.getPlaybackType(),
             dvrEnabled: this.core.activePlayback.dvrEnabled,
         });
@@ -49872,14 +49872,14 @@ class PlaybackRate extends UICorePlugin {
             this.core.activePlayback?.setPlaybackRate(this.selectedRate);
         }
         else {
-            trace(`${T$8} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
+            trace(`${T$9} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
                 playbackRate,
                 selectedRate: this.selectedRate,
             });
         }
     }
     shouldMount() {
-        trace(`${T$8} shouldMount`, {
+        trace(`${T$9} shouldMount`, {
             playbackType: this.core.activePlayback?.getPlaybackType(),
             dvrEnabled: this.core.activePlayback?.dvrEnabled,
         });
@@ -49896,7 +49896,7 @@ class PlaybackRate extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$8} render`, {
+        trace(`${T$9} render`, {
             shouldMount: this.shouldMount(),
         });
         this.$el.html(PlaybackRate.listTemplate({
@@ -49942,13 +49942,13 @@ class PlaybackRate extends UICorePlugin {
         }
     }
     syncRate() {
-        trace(`${T$8} syncRate`, {
+        trace(`${T$9} syncRate`, {
             selectedRate: this.selectedRate,
         });
         this.core.activePlayback?.setPlaybackRate(this.selectedRate);
     }
     resetPlaybackRate() {
-        trace(`${T$8} resetPlaybackRate`, {
+        trace(`${T$9} resetPlaybackRate`, {
             selectedRate: this.selectedRate,
         });
         this.core.activePlayback?.setPlaybackRate(DEFAULT_PLAYBACK_RATE);
@@ -49983,7 +49983,7 @@ class PlaybackRate extends UICorePlugin {
             ?.label || `x${rate}`);
     }
     highlightCurrentRate() {
-        trace(`${T$8} highlightCurrentRate`, {
+        trace(`${T$9} highlightCurrentRate`, {
             selectedRate: this.selectedRate,
         });
         this.allRateElements().removeClass('current');
@@ -49994,36 +49994,30 @@ class PlaybackRate extends UICorePlugin {
             .addClass('gcore-skin-active');
     }
     updateGearOptionLabel() {
-        trace(`${T$8} updateGearOptionLabel`, {
+        trace(`${T$9} updateGearOptionLabel`, {
             selectedRate: this.selectedRate,
         });
         this.mount();
     }
 }
 
-const posterHTML = "<div class=\"play-wrapper\" data-poster></div>\n";
+const posterHTML = "<div class=\"play-wrapper\" id=\"gplayer-poster\">\n    <div class='circle-poster gcore-skin-button-color gcore-skin-border-color' id='poster-play'></div>\n</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$7 = 'plugins.poster';
+const T$8 = 'plugins.poster';
 /**
  * `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.
+ * When the playback is stopped or not yet started, the media control UI is disabled and hidden.
+ * Media control gets activated once the metadata is loaded after playback is initiated.
+ * This plugin displays a big play button on top of the poster image to allow user to start playback.
  * Note that the poster image, if specified via the player config, will be used to update video element's poster attribute by the
  * HTML5-video-based playback module.
  *
- * Configuration options:
- *
- * - `poster.custom` - custom CSS background
- *
- * - `poster.showForNoOp` - whether to show the poster when the playback is not started
- *
- * - `poster.url` - the URL of the poster image
- *
- * - `poster.showOnVideoEnd` - whether to show the poster when the playback is ended
+ * Configuration options - {@link PosterPluginSettings}
  *
  * @example
  * ```ts
@@ -50039,10 +50033,9 @@ const T$7 = 'plugins.poster';
 class Poster extends UIContainerPlugin {
     // TODO merge non-poster related functionality into the ClickToPause plugin
     hasFatalError = false;
-    hasStartedPlaying = false;
+    playing = false;
     playRequested = false;
     $playButton = null;
-    $playWrapper = null;
     /**
      * @internal
      */
@@ -50062,8 +50055,10 @@ class Poster extends UIContainerPlugin {
         }
         const showForNoOp = !!this.options.poster?.showForNoOp;
         return (this.container.playback.name !== 'html_img' &&
-            (this.container.playback.getPlaybackType() !== Playback.NO_OP ||
-                showForNoOp));
+            (!this.isNoOp || showForNoOp));
+    }
+    get isNoOp() {
+        return this.container.playback.getPlaybackType() === Playback.NO_OP;
     }
     /**
      * @internal
@@ -50071,7 +50066,6 @@ class Poster extends UIContainerPlugin {
     get attributes() {
         return {
             class: 'player-poster',
-            'data-poster': '',
         };
     }
     /**
@@ -50082,9 +50076,6 @@ class Poster extends UIContainerPlugin {
             click: 'clicked',
         };
     }
-    get showOnVideoEnd() {
-        return this.options.poster?.showOnVideoEnd !== false;
-    }
     /**
      * @internal
      */
@@ -50093,70 +50084,71 @@ class Poster extends UIContainerPlugin {
         this.listenTo(this.container, Events$1.CONTAINER_PLAY, this.onPlay);
         this.listenTo(this.container, Events$1.CONTAINER_STATE_BUFFERING, this.update);
         this.listenTo(this.container, Events$1.CONTAINER_STATE_BUFFERFULL, this.update);
-        this.listenTo(this.container, Events$1.CONTAINER_OPTIONS_CHANGE, this.render);
+        this.listenTo(this.container, Events$1.CONTAINER_OPTIONS_CHANGE, this.update);
         this.listenTo(this.container, Events$1.CONTAINER_ERROR, this.onError);
-        this.showOnVideoEnd &&
+        // TODO check if this event is always accompanied with the CONTAINER_STOP
+        if (this.options.poster?.showOnVideoEnd !== false) {
             this.listenTo(this.container, Events$1.CONTAINER_ENDED, this.onStop);
+        }
         this.listenTo(this.container, Events$1.CONTAINER_READY, this.render);
-        this.listenTo(this.container, Events$1.PLAYBACK_PLAY_INTENT, this.onPlayIntent);
+        this.listenTo(this.container.playback, Events$1.PLAYBACK_PLAY_INTENT, this.onPlayIntent);
     }
     /**
      * Reenables earlier disabled plugin
      */
     enable() {
+        trace(`${T$8} enable`);
         super.enable();
-        this.hasStartedPlaying = this.container.playback.isPlaying();
+        this.playing = this.container.playback.isPlaying();
         this.update();
     }
     /**
      * Disables the plugin, unmounting it from the DOM
      */
     disable() {
-        trace(`${T$7} disable`);
-        this.hasStartedPlaying = false;
+        trace(`${T$8} disable`);
+        this.playing = false;
         this.playRequested = false;
         super.disable();
     }
     onError(error) {
-        trace(`${T$7} onError`, {
+        trace(`${T$8} onError`, {
             error,
             enabled: this.enabled,
         });
-        this.hasFatalError = error.level === PlayerError.Levels.FATAL;
         if (this.hasFatalError) {
-            this.hasStartedPlaying = false;
-            if (!this.playRequested) {
-                this.showPlayButton();
-            }
+            return;
         }
+        this.hasFatalError = error.level === PlayerError.Levels.FATAL;
+        // this.hasFatalError is reset on container recreate
     }
     onPlay() {
-        trace(`${T$7} onPlay`);
-        this.hasStartedPlaying = true;
+        trace(`${T$8} onPlay`);
+        this.playing = true;
         this.playRequested = false;
         this.update();
     }
     onPlayIntent() {
-        trace(`${T$7} onPlayIntent`);
+        trace(`${T$8} onPlayIntent`);
         this.playRequested = true;
         this.update();
     }
     onStop() {
-        trace(`${T$7} onStop`, {
-            enabled: this.enabled,
-        });
-        this.hasStartedPlaying = false;
+        trace(`${T$8} onStop`);
+        this.playing = false;
         this.playRequested = false;
         this.update();
     }
-    updatePlayButton(show) {
-        trace(`${T$7} updatePlayButton`, {
-            show,
-            chromeless: this.options.chromeless,
-            allowUserInteraction: this.options.allowUserInteraction,
-        });
-        if (show &&
-            (!this.options.chromeless || this.options.allowUserInteraction)) {
+    updatePlayButton() {
+        trace(`${T$8} updatePlayButton`);
+        const show = !this.isNoOp &&
+            !(this.options.chromeless && !this.options.allowUserInteraction) &&
+            !this.playRequested &&
+            !this.playing &&
+            !this.container.buffering &&
+            !this.hasFatalError &&
+            !this.options.disableMediaControl;
+        if (show) {
             this.showPlayButton();
         }
         else {
@@ -50164,59 +50156,42 @@ class Poster extends UIContainerPlugin {
         }
     }
     showPlayButton() {
-        if (this.options.disableMediaControl) {
-            return;
-        }
-        if (this.hasFatalError && !this.options.disableErrorScreen) {
-            return;
-        }
-        this.$playButton?.show();
+        trace(`${T$8} showPlayButton`);
+        this.$el.find('#poster-play').show();
         this.$el.addClass('clickable');
         this.container.$el.addClass('container-with-poster-clickable');
     }
     hidePlayButton() {
-        this.$playButton.hide();
+        trace(`${T$8} hidePlayButton`);
+        this.$el.find('#poster-play').hide();
         this.$el.removeClass('clickable');
     }
-    clicked() {
-        trace(`${T$7} clicked`, {
-            hasStartedPlaying: this.hasStartedPlaying,
-            chromeless: this.options.chromeless,
-            allowUserInteraction: this.options.allowUserInteraction,
-        });
+    clicked(e) {
+        trace(`${T$8} clicked`);
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.options.chromeless && !this.options.allowUserInteraction) {
+            return;
+        }
         // Let "click_to_pause" plugin handle click event if media has started playing
-        if (!this.hasStartedPlaying) {
-            if (!this.options.chromeless || this.options.allowUserInteraction) {
-                this.playRequested = true;
-                this.update();
-                this.container.playback.consent();
-                this.container.playback.play();
-            }
+        if (!this.playing) {
+            this.playRequested = true;
+            this.update();
+            this.container.play();
         }
-        return false;
     }
     shouldHideOnPlay() {
         // Audio broadcasts should keep the poster up; video should hide poster while playing.
         return !this.container.playback.isAudioOnly;
     }
     update() {
-        trace(`${T$7} update`, {
-            shouldRender: this.shouldRender,
-        });
-        if (!this.shouldRender) {
-            return;
-        }
-        const showPlayButton = !this.playRequested &&
-            !this.hasStartedPlaying &&
-            !this.container.buffering;
-        this.updatePlayButton(showPlayButton);
+        trace(`${T$8} update`);
+        this.updatePlayButton();
         this.updatePoster();
     }
     updatePoster() {
-        trace(`${T$7} updatePoster`, {
-            hasStartedPlaying: this.hasStartedPlaying,
-        });
-        if (!this.hasStartedPlaying) {
+        trace(`${T$8} updatePoster`);
+        if (!this.playing) {
             this.showPoster();
         }
         else {
@@ -50228,9 +50203,7 @@ class Poster extends UIContainerPlugin {
         this.$el.show();
     }
     hidePoster() {
-        trace(`${T$7} hidePoster`, {
-            shouldHideOnPlay: this.shouldHideOnPlay(),
-        });
+        trace(`${T$8} hidePoster`);
         if (!this.options.disableMediaControl) {
             this.container.enableMediaControl();
         }
@@ -50246,27 +50219,24 @@ class Poster extends UIContainerPlugin {
             return this;
         }
         this.$el.html(Poster.template());
-        const isRegularPoster = this.options.poster && this.options.poster.custom === undefined;
-        if (isRegularPoster) {
-            const posterUrl = this.options.poster.url || this.options.poster;
-            this.$el.css({ 'background-image': 'url(' + posterUrl + ')' });
-        }
-        else if (this.options.poster) {
+        const isCustomPoster = this.options.poster?.custom !== undefined;
+        if (isCustomPoster) {
             this.$el.css({ background: this.options.poster.custom });
         }
+        else {
+            const posterUrl = typeof this.options.poster === 'string'
+                ? this.options.poster
+                : this.options.poster?.url;
+            if (posterUrl) {
+                this.$el.css({ 'background-image': 'url(' + posterUrl + ')' });
+            }
+        }
         this.container.$el.removeClass('container-with-poster-clickable');
         this.container.$el.append(this.el);
-        this.$playWrapper = this.$el.find('.play-wrapper');
-        this.$playWrapper.addClass('control-need-disable');
-        this.$playButton = $("<div class='circle-poster gcore-skin-button-color gcore-skin-border-color'></div>");
-        this.$playWrapper.append(this.$playButton);
-        this.$playButton.append(playIcon);
-        if (this.options.autoPlay) {
-            this.$playButton.hide();
+        this.$el.find('#poster-play').append(playIcon);
+        if (this.options.autoPlay || this.isNoOp) {
+            this.$el.find('#poster-play').hide();
         }
-        this.$playButton.addClass('poster-icon');
-        this.$playButton.attr('data-poster', '');
-        this.update();
         return this;
     }
     /**
@@ -50284,7 +50254,7 @@ const listHtml = "<button class=\"gplayer-lite-btn go-back gcore-skin-text-color
 
 const hdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M14.9562 8.22232H13.9961V15.1873H14.9562C15.8914 15.1873 16.766 14.8253 17.4195 14.1676C18.0786 13.5037 18.4415 12.6281 18.4415 11.7026C18.4415 9.7837 16.8781 8.22253 14.9561 8.22253L14.9562 8.22232Z\"\n    fill=\"#C9C9C9\"/>\n  <path\n    d=\"M22.0801 4H1.91994C0.859222 4 0 4.86406 0 5.91994V17.4878C0 18.5437 0.859222 19.4078 1.91994 19.4078H22.0801C23.1408 19.4078 24 18.5437 24 17.4878V5.91994C24 4.86406 23.1408 4 22.0801 4ZM10.3975 15.3473C10.3975 15.6124 10.1827 15.8272 9.91754 15.8272C9.65216 15.8272 9.43761 15.6122 9.43761 15.3473V12.0239H5.55956V15.3473C5.55956 15.6124 5.34481 15.8272 5.07963 15.8272C4.81425 15.8272 4.5997 15.6122 4.5997 15.3473L4.59949 7.74042C4.59949 7.47524 4.81425 7.26049 5.07943 7.26049C5.34481 7.26049 5.55936 7.47544 5.55936 7.74042V11.0636H9.43741V7.74042C9.43741 7.47524 9.65216 7.26049 9.91734 7.26049C10.1827 7.26049 10.3973 7.47544 10.3973 7.74042L10.3975 15.3473ZM18.1005 14.8438C17.2652 15.6844 16.1486 16.1472 14.9561 16.1472H13.5161C13.2507 16.1472 13.0361 15.9323 13.0361 15.6673V7.74263C13.0361 7.47745 13.2509 7.26269 13.5161 7.26269H14.9561C17.4072 7.26269 19.4013 9.25438 19.4013 11.7027C19.4013 12.8835 18.9392 13.9991 18.1005 14.844V14.8438Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
-const T$6 = 'plugins.quality_levels';
+const T$7 = 'plugins.quality_levels';
 const VERSION$2 = 'v2.22.5';
 /**
  * `PLUGIN` that provides a UI to select the desired quality level of the playback.
@@ -50361,14 +50331,14 @@ class QualityLevels extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChange);
     }
     onCoreReady() {
-        trace(`${T$6} onCoreReady`);
+        trace(`${T$7} onCoreReady`);
         const gear = this.core.getPlugin('bottom_gear');
         assert(gear, 'bottom_gear plugin is required');
         this.currentText = this.core.i18n.t('auto');
         this.listenTo(gear, GearEvents.RENDERED, this.onGearRendered);
     }
     onGearRendered() {
-        trace(`${T$6} onGearRendered`);
+        trace(`${T$7} onGearRendered`);
         this.render();
     }
     onActiveContainerChange() {
@@ -50397,7 +50367,7 @@ class QualityLevels extends UICorePlugin {
         }
     }
     onStop() {
-        trace(`${T$6} onStop`);
+        trace(`${T$7} onStop`);
         this.listenToOnce(this.core.activePlayback, Events$1.PLAYBACK_PLAY, () => {
             if (this.core.activePlayback.getPlaybackType() === 'live') {
                 if (this.selectedLevelId !== -1) {
@@ -50493,7 +50463,7 @@ class QualityLevels extends UICorePlugin {
         return false;
     }
     goBack() {
-        trace(`${T$6} goBack`);
+        trace(`${T$7} goBack`);
         this.core.getPlugin('bottom_gear').refresh();
     }
     setLevel(index) {
@@ -50528,11 +50498,11 @@ class QualityLevels extends UICorePlugin {
         return this.levelLabels[index] ?? formatLevelLabel(this.levels[index]);
     }
     onBitrate(info) {
-        trace(`${T$6} updateCurrentLevel`, { info });
+        trace(`${T$7} updateCurrentLevel`, { info });
         this.highlightCurrentLevel();
     }
     highlightCurrentLevel() {
-        trace(`${T$6} highlightCurrentLevel`, {
+        trace(`${T$7} highlightCurrentLevel`, {
             selectedLevelId: this.selectedLevelId,
         });
         this.allLevelElements()
@@ -50823,10 +50793,11 @@ 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";
+const pluginHtml$1 = "<div class=\"skip-container\" id=\"mc-skip-container\">\n    <div class=\"skip-item\" id=\"mc-skip-left\">\n    </div>\n    <div class=\"skip-item\" id=\"mc-skip-mid\">\n    </div>\n    <div class=\"skip-item\" id=\"mc-skip-right\">\n    </div>\n</div>\n";
 
+const T$6 = 'plugins.skip_time';
 /**
- * `PLUGIN` that adds skip controls to the media control UI.
+ * `PLUGIN` that allows skipping time by tapping on the left or right side of the video.
  * @beta
  */
 class SkipTime extends UICorePlugin {
@@ -50839,39 +50810,56 @@ class SkipTime extends UICorePlugin {
     get container() {
         return this.core && this.core.activeContainer;
     }
-    get template() {
-        return tmpl(pluginHtml$1);
-    }
+    static template = tmpl(pluginHtml$1);
+    /**
+     * @internal
+     */
     get attributes() {
         return {
-            class: this.name + '_plugin',
-            'data-skip-time': '',
+            class: 'mc-skip-time',
         };
     }
     position = 'mid';
+    /**
+     * @internal
+     */
     get events() {
         return {
-            'click [data-skip-left]': 'setBack',
-            'click [data-skip-mid]': 'setMidClick',
-            'click [data-skip-right]': 'setForward',
+            'click #mc-skip-left': 'setBack',
+            'click #mc-skip-mid': 'setMidClick',
+            'click #mc-skip-right': 'setForward',
         };
     }
+    /**
+     * @internal
+     */
     bindEvents() {
         this.listenTo(this.core, Events$1.CORE_READY, this.render);
-        if (!this.container) {
-            return;
-        }
+        this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
+    }
+    onContainerChanged() {
         this.listenTo(this.container, Events$1.CONTAINER_DBLCLICK, this.handleRewindClicks);
+        this.mount();
     }
     setBack() {
+        trace(`${T$6} setBack`);
         this.position = 'left';
     }
     handleRewindClicks() {
+        trace(`${T$6} handleRewindClicks`, {
+            position: this.position,
+        });
         if (this.core.getPlaybackType() === Playback.LIVE &&
             !this.container.isDvrEnabled()) {
             this.toggleFullscreen();
             return;
         }
+        this.handleSkip();
+    }
+    handleSkip() {
+        trace(`${T$6} handleSkip`, {
+            position: this.position,
+        });
         if (Browser.isMobile) {
             if (this.position === 'left') {
                 const seekPos = this.container.getCurrentTime() - 10;
@@ -50893,24 +50881,31 @@ class SkipTime extends UICorePlugin {
         }
     }
     setMidClick() {
+        trace(`${T$6} setMidClick`);
         this.position = 'mid';
     }
     setForward() {
+        trace(`${T$6} setForward`);
         this.position = 'right';
     }
     toggleFullscreen() {
+        trace(`${T$6} toggleFullscreen`);
         this.trigger(Events$1.MEDIACONTROL_FULLSCREEN, this.name);
         this.container.fullscreen();
         this.core.toggleFullscreen();
     }
+    /**
+     * @internal
+     */
     render() {
-        this.$el.html(tmpl(pluginHtml$1));
-        if (this.core.activeContainer) {
-            this.core.activeContainer.$el.append(this.el);
-        }
-        this.bindEvents();
+        trace(`${T$6} render`);
+        this.$el.html(SkipTime.template());
         return this;
     }
+    mount() {
+        trace(`${T$6} mount`);
+        this.core.activeContainer.$el.append(this.el);
+    }
 }
 
 const spinnerHTML = "<div data-bounce1></div>\n<div data-bounce2></div>\n<div data-bounce3></div>\n";