@gcorevideo/player 2.25.3 → 2.25.5

package/dist/index.embed.js

@@ -12524,7 +12524,7 @@ var PlaybackEvents;
 // https://github.com/clappr/clappr/blob/8752995ea439321ac7ca3cd35e8c64de7a3c3d17/LICENSE
 const AUTO$1 = -1;
 const { now: now$2 } = Utils;
-const T$d = 'playback.dash';
+const T$e = 'playback.dash';
 class DashPlayback extends BasePlayback {
     _levels = null;
     _currentLevel = null;
@@ -12873,7 +12873,7 @@ class DashPlayback extends BasePlayback {
         if (!this._dash) {
             return false;
         }
-        trace(`${T$d} get.dvrEnabled`, {
+        trace(`${T$e} get.dvrEnabled`, {
             dvrWindowSize: this._dash?.getDVRWindowSize(),
             minDvrSize: this._minDvrSize,
             playbackType: this.getPlaybackType(),
@@ -12895,7 +12895,7 @@ class DashPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_PROGRESS, progress, {});
     }
     play() {
-        trace(`${T$d} play`, { dash: !!this._dash });
+        trace(`${T$e} play`, { dash: !!this._dash });
         !this._dash && this._setup();
         super.play();
         this._startTimeUpdateTimer();
@@ -41688,7 +41688,7 @@ const AUTO = -1;
 const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-const T$c = 'playback.hls';
+const T$d = 'playback.hls';
 class HlsPlayback extends BasePlayback {
     _ccIsSetup = false;
     _ccTracksUpdated = false;
@@ -42012,7 +42012,7 @@ class HlsPlayback extends BasePlayback {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$c} _recover failed to recover`, {
+            trace(`${T$d} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42098,7 +42098,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$c} _onHLSJSError`, {
+        trace(`${T$d} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -42146,7 +42146,7 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$c} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$d} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
@@ -42159,7 +42159,7 @@ class HlsPlayback extends BasePlayback {
                             evt,
                             data,
                         });
-                        trace(`${T$c} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$d} _onHLSJSError trying to recover from media error`, {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
@@ -42189,7 +42189,7 @@ class HlsPlayback extends BasePlayback {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$c} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$d} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42546,7 +42546,7 @@ function toClapprTrack(t) {
     };
 }
 
-const T$b = 'playback.html5_video';
+const T$c = 'playback.html5_video';
 const STALL_TIMEOUT = 15000;
 class HTML5Video extends BasePlayback {
     stallTimerId = null;
@@ -42554,7 +42554,7 @@ class HTML5Video extends BasePlayback {
      * @internal
      */
     createError(errorData, options) {
-        trace(`${T$b} createError`, {
+        trace(`${T$c} createError`, {
             errorData: { ...errorData },
         });
         const i18n = this.i18n ||
@@ -42580,12 +42580,12 @@ class HTML5Video extends BasePlayback {
         super._onEnded();
     }
     _handleBufferingEvents() {
-        trace(`${T$b} _handleBufferingEvents`, {
+        trace(`${T$c} _handleBufferingEvents`, {
             networkState: this.el.networkState,
         });
         if (!this.stallTimerId) {
             this.stallTimerId = setTimeout(() => {
-                trace(`${T$b} _handleBufferingEvents stall timeout`, {
+                trace(`${T$c} _handleBufferingEvents stall timeout`, {
                     buffering: this.buffering,
                     ended: this.ended,
                 });
@@ -42671,7 +42671,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$a = 'gplayer';
+const T$b = 'gplayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -42759,7 +42759,7 @@ class Player {
      * ```
      */
     attachTo(playerElement) {
-        trace(`${T$a} attachTo`, {
+        trace(`${T$b} attachTo`, {
             player: !!this.player,
         });
         assert.ok(!this.player, 'Player already initialized');
@@ -42769,7 +42769,7 @@ class Player {
         }
         const coreOpts = this.buildCoreOptions(playerElement);
         const { core, container } = Player.getRegisteredPlugins();
-        trace(`${T$a} init`, {
+        trace(`${T$b} init`, {
             registeredPlaybacks: Loader.registeredPlaybacks.map((p) => p.prototype.name),
         });
         coreOpts.plugins = {
@@ -42783,7 +42783,7 @@ class Player {
      * Destroys the player, releasing all resources and unmounting its UI from the DOM.
      */
     destroy() {
-        trace(`${T$a} destroy`, {
+        trace(`${T$b} destroy`, {
             player: !!this.player,
         });
         if (this.player) {
@@ -42970,7 +42970,7 @@ class Player {
         this.config = $.extend(true, this.config, config);
     }
     initPlayer(coreOptions) {
-        trace(`${T$a} initPlayer`, {
+        trace(`${T$b} initPlayer`, {
             autoPlay: coreOptions.autoPlay,
             sources: coreOptions.sources,
             player: !!this.player,
@@ -43010,7 +43010,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$a} onReady`, {
+            trace(`${T$b} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -43100,7 +43100,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$a} on CORE_SCREEN_ORIENTATION_CHANGED`, {
+            trace(`${T$b} on CORE_SCREEN_ORIENTATION_CHANGED`, {
                 rootNode: {
                     width: this.rootNode?.clientWidth,
                     height: this.rootNode?.clientHeight,
@@ -43398,7 +43398,7 @@ const FullscreenIOS = {
     },
 };
 
-insertStyle("[data-player] {\n  --bottom-panel: 40px;\n}\n\n.container .media-control-notransition {\n  transition: none !important;\n}\n.container .player-poster .play-wrapper {\n  opacity: 1;\n}\n.container.crop-video [data-html5-video] {\n  object-fit: cover;\n}\n.container .cc-line {\n  position: absolute;\n  bottom: calc(var(--bottom-panel) + 5px);\n  width: 100%;\n}\n.container .cc-line p {\n  width: auto;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: white;\n  display: inline-block;\n}\n.container .player-poster .circle-poster {\n  top: 50%;\n  margin-top: -60px;\n  left: 50%;\n  margin-left: -60px;\n  position: absolute;\n  width: 120px;\n  height: 120px;\n  border: 2px solid white;\n  border-radius: 50%;\n  filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)\";\n  filter: alpha(opacity=60);\n  opacity: 1;\n  box-shadow: 0 0 1px 0 white;\n}\n.container .player-poster .circle-poster svg {\n  margin-left: 5px;\n  width: 80px;\n}\n.container .spinner-three-bounce[data-spinner] > div {\n  background-color: #ff5700;\n}\n\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-audiotracks {\n  display: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n  transform: rotate(270deg);\n  float: none;\n  display: block;\n  position: absolute;\n  /* bottom: 12px; */\n  margin: 0;\n  top: -40px;\n  padding: 0;\n  /* right: 20px; */\n  margin-left: -32px;\n  margin-top: -3px;\n  width: 80px;\n  /* padding-left: 12px; */\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: -5px;\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n  display: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {\n  margin-left: 11px;\n  top: 7px;\n  width: 80px;\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {\n  margin-left: 11px;\n  top: 1px;\n}\n\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc {\n  width: 28px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc svg {\n  height: 17px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {\n  top: calc(50% - 150px);\n  left: calc(50% - 125px);\n  width: 250px;\n  height: calc(100% - 32px);\n  max-height: 300px;\n  transform: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {\n  border: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {\n  visibility: hidden;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks {\n  display: block;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] {\n  margin-top: 3px;\n  margin-right: 10px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul {\n  bottom: 30px;\n  width: 50px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li {\n  height: 23px;\n  font-size: 14px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li a {\n  height: 23px;\n  padding: 2px 5px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .quality-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .audio-text {\n  font-size: 13px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.quality-arrow,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.audio-arrow {\n  width: 7px;\n  height: 5px;\n  margin-left: 4px;\n  margin-top: 11px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera {\n  margin-top: 0;\n  margin-right: 10px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button {\n  height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button svg {\n  height: 17px;\n  margin: 0;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] {\n  padding-left: 10px;\n  padding-right: 12px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator {\n  line-height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n  font-size: 11px;\n  line-height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls {\n  height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-button {\n  margin-left: 10px;\n  height: 32px;\n  font-size: 12px;\n  line-height: 32px;\n  text-shadow: none;\n  letter-spacing: 0.6px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-button::before {\n  width: 8px;\n  height: 8px;\n  margin-right: 4px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-info {\n  margin-left: 10px;\n  height: 32px;\n  font-size: 12px;\n  line-height: 32px;\n  text-shadow: none;\n  letter-spacing: 0.6px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-info::before {\n  width: 8px;\n  height: 8px;\n  margin-right: 4px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button {\n  height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n  height: 33px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button svg {\n  height: 17px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n  line-height: 33px;\n  font-size: 11px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n  max-width: 50px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] {\n  height: 32px;\n  margin-right: 8px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n  height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n  height: 17px;\n  margin-top: 5px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n  display: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n  width: 0;\n  height: 12px;\n  top: 9px;\n  padding: 0;\n}\n\n:root {\n  --font-size-media-controls: 14px;\n  --font-size-media-controls-dropdown: 16px;\n  --player-vod-color: #005aff;\n  --player-dvr-color: #fff;\n  --player-live-color: #ff0101;\n  --player-seekbar-current-color: #ff5700;\n  --player-seekbar-buffer-color: #fff;\n}\n\n.media-control-skin-1[data-media-control-skin-1] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 9999;\n  pointer-events: none;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  font-size: var(--font-size-media-controls);\n}\n.media-control-skin-1[data-media-control-skin-1].dragging {\n  pointer-events: auto;\n  cursor: grabbing !important;\n  cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1[data-media-control-skin-1].dragging * {\n  cursor: grabbing !important;\n  cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-icon {\n  line-height: 0;\n  letter-spacing: 0;\n  speak: none;\n  color: #fff;\n  vertical-align: middle;\n  text-align: left;\n  transition: all 0.1s ease;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {\n  color: white;\n}\n.media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {\n  opacity: 0;\n}\n.media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {\n  bottom: -50px;\n}\n.media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {\n  opacity: 0;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 0 12px 0 8px;\n  height: var(--bottom-panel);\n  vertical-align: middle;\n  pointer-events: auto;\n  transition: bottom 0.4s ease-out;\n  display: flex;\n  justify-content: space-between;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  justify-content: flex-start;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-button,\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator,\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .gplayer-mc-panel-item {\n  order: 10;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-playpause],\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-playstop] {\n  order: 1;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-volume] {\n  order: 2;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-position] {\n  order: 3;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-duration] {\n  order: 3;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel {\n  height: 100%;\n  text-align: center;\n  line-height: var(--bottom-panel);\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  justify-content: flex-end;\n}\n@media (max-width: 420px) {\n  .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {\n    gap: 0.5rem;\n    overflow: hidden;\n  }\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  cursor: pointer;\n  display: inline-block;\n  height: 20px;\n  width: 24px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {\n  height: 20px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {\n  fill: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {\n  outline: none;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n  order: 100;\n  background-color: transparent;\n  border: 0;\n  height: 40px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {\n  background-color: transparent;\n  border: 0;\n  cursor: default;\n  display: none !important;\n  float: right;\n  height: 100%;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n  display: flex;\n  color: white;\n  cursor: default;\n  line-height: var(--bottom-panel);\n  position: relative;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {\n  margin: 1px 0 0 7px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n  color: rgb(255, 255, 255);\n  opacity: 0.5;\n  margin-top: 1px;\n  margin-right: 6px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {\n  content: \"|\";\n  margin-right: 7px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {\n  position: absolute;\n  top: -11px;\n  left: 0;\n  display: inline-block;\n  vertical-align: middle;\n  width: 100%;\n  height: 20px;\n  cursor: pointer;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {\n  width: 100%;\n  height: 3px;\n  position: relative;\n  top: 8px;\n  background-color: #666;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  background-color: var(--player-seekbar-buffer-color);\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  background-color: var(--player-seekbar-current-color);\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {\n  cursor: default;\n  display: none;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .gplayer-mc-panel-item {\n  height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {\n  cursor: default;\n  display: none;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {\n  position: absolute;\n  transform: translateX(-50%);\n  top: -11.5px;\n  left: 0;\n  width: 20px;\n  height: 20px;\n  opacity: 1;\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {\n  position: absolute;\n  left: 4.5px;\n  top: 4.5px;\n  width: 11px;\n  height: 11px;\n  border-radius: 50%;\n  background-color: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {\n  display: flex;\n  justify-content: flex-start;\n  height: var(--bottom-panel);\n  cursor: pointer;\n  box-sizing: border-box;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {\n  bottom: 0;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n  background-color: transparent;\n  border: 0;\n  box-sizing: content-box;\n  height: var(--bottom-panel);\n  width: 20px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n  height: 20px;\n  position: relative;\n  top: 3px;\n  margin-top: 7px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {\n  fill: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {\n  margin-left: 2px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n  position: relative;\n  margin-left: 10px;\n  top: 8px;\n  width: 80px;\n  height: 23px;\n  padding: 3px 0;\n  transition: width 0.2s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {\n  height: 3px;\n  border-radius: 100px;\n  position: relative;\n  top: 7px;\n  background-color: #666;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  border-radius: 100px;\n  background-color: white;\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  background-color: var(--player-vod-color);\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {\n  position: absolute;\n  transform: translateX(-50%);\n  top: 3px;\n  margin-left: 3px;\n  width: 16px;\n  height: 16px;\n  opacity: 1;\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {\n  position: absolute;\n  left: 3px;\n  top: 5px;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background-color: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {\n  float: left;\n  width: 4px;\n  padding-left: 2px;\n  height: 12px;\n  opacity: 0.5;\n  box-shadow: inset 2px 0 0 white;\n  transition: transform 0.2s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {\n  box-shadow: inset 2px 0 0 #fff;\n  opacity: 1;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {\n  padding-left: 0;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {\n  transform: scaleY(1.5);\n}\n\n/* TODO distribute between plugins' styles */\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button] {\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  align-items: center;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button]:hover {\n  color: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul {\n  background-color: rgba(74, 74, 74, 0.6);\n  border: none;\n  width: auto;\n  border-radius: 4px;\n  bottom: 52px;\n  margin-left: -28px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li {\n  font-size: 16px;\n  text-align: center;\n  white-space: nowrap;\n  height: 30px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a {\n  height: 30px;\n  padding: 5px 10px;\n  color: #fffffe;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a:hover {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li.current a {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:first-child a {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:last-child a {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.media-control-skin-1[data-media-control-skin-1] .seek-time {\n  height: 26px;\n  line-height: 26px;\n  bottom: 52px;\n  border-radius: 3px;\n  background-color: rgba(74, 74, 74, 0.7);\n}\n.media-control-skin-1[data-media-control-skin-1] .seek-time span {\n  letter-spacing: 0.8px;\n  font-size: 14px;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n}\n.media-control-skin-1[data-media-control-skin-1] .seek-time .seek-time__pos {\n  padding-left: 8px;\n  padding-right: 8px;\n}");
+insertStyle("[data-player] {\n  --bottom-panel: 40px;\n}\n\n.container .media-control-notransition {\n  transition: none !important;\n}\n.container .player-poster .play-wrapper {\n  opacity: 1;\n}\n.container.crop-video [data-html5-video] {\n  object-fit: cover;\n}\n.container .cc-line {\n  position: absolute;\n  bottom: calc(var(--bottom-panel) + 5px);\n  width: 100%;\n}\n.container .cc-line p {\n  width: auto;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: white;\n  display: inline-block;\n}\n.container .player-poster .circle-poster {\n  top: 50%;\n  margin-top: -60px;\n  left: 50%;\n  margin-left: -60px;\n  position: absolute;\n  width: 120px;\n  height: 120px;\n  border: 2px solid white;\n  border-radius: 50%;\n  filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)\";\n  filter: alpha(opacity=60);\n  opacity: 1;\n  box-shadow: 0 0 1px 0 white;\n}\n.container .player-poster .circle-poster svg {\n  margin-left: 5px;\n  width: 80px;\n}\n.container .spinner-three-bounce[data-spinner] > div {\n  background-color: #ff5700;\n}\n\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-audiotracks {\n  display: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n  transform: rotate(270deg);\n  float: none;\n  display: block;\n  position: absolute;\n  /* bottom: 12px; */\n  margin: 0;\n  top: -40px;\n  padding: 0;\n  /* right: 20px; */\n  margin-left: -32px;\n  margin-top: -3px;\n  width: 80px;\n  /* padding-left: 12px; */\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: -5px;\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n  display: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {\n  margin-left: 11px;\n  top: 7px;\n  width: 80px;\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {\n  margin-left: 11px;\n  top: 1px;\n}\n\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc {\n  width: 28px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc svg {\n  height: 17px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {\n  top: calc(50% - 150px);\n  left: calc(50% - 125px);\n  width: 250px;\n  height: calc(100% - 32px);\n  max-height: 300px;\n  transform: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {\n  border: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {\n  visibility: hidden;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks {\n  display: block;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] {\n  margin-top: 3px;\n  margin-right: 10px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul {\n  bottom: 30px;\n  width: 50px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li {\n  height: 23px;\n  font-size: 14px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li a {\n  height: 23px;\n  padding: 2px 5px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .quality-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .audio-text {\n  font-size: 13px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.quality-arrow,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.audio-arrow {\n  width: 7px;\n  height: 5px;\n  margin-left: 4px;\n  margin-top: 11px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera {\n  margin-top: 0;\n  margin-right: 10px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button {\n  height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button svg {\n  height: 17px;\n  margin: 0;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] {\n  padding-left: 10px;\n  padding-right: 12px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator {\n  line-height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n  font-size: 11px;\n  line-height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-button {\n  margin-left: 10px;\n  height: 32px;\n  font-size: 12px;\n  line-height: 32px;\n  text-shadow: none;\n  letter-spacing: 0.6px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-button::before {\n  width: 8px;\n  height: 8px;\n  margin-right: 4px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-info {\n  margin-left: 10px;\n  height: 32px;\n  font-size: 12px;\n  line-height: 32px;\n  text-shadow: none;\n  letter-spacing: 0.6px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-info::before {\n  width: 8px;\n  height: 8px;\n  margin-right: 4px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n  height: 33px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button svg {\n  height: 17px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n  line-height: 33px;\n  font-size: 11px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n  max-width: 50px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] {\n  height: 32px;\n  margin-right: 8px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n  height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n  height: 17px;\n  margin-top: 5px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n  display: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n  width: 0;\n  height: 12px;\n  top: 9px;\n  padding: 0;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-button,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .gplayer-mc-panel-item {\n  height: 32px;\n}\n\n:root {\n  --font-size-media-controls: 14px;\n  --font-size-media-controls-dropdown: 16px;\n  --player-vod-color: #005aff;\n  --player-dvr-color: #fff;\n  --player-live-color: #ff0101;\n  --player-seekbar-current-color: #ff5700;\n  --player-seekbar-buffer-color: #fff;\n}\n\n.media-control-skin-1[data-media-control-skin-1] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 9999;\n  pointer-events: none;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  font-size: var(--font-size-media-controls);\n}\n.media-control-skin-1[data-media-control-skin-1].dragging {\n  pointer-events: auto;\n  cursor: grabbing !important;\n  cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1[data-media-control-skin-1].dragging * {\n  cursor: grabbing !important;\n  cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-icon {\n  line-height: 0;\n  letter-spacing: 0;\n  speak: none;\n  color: #fff;\n  vertical-align: middle;\n  text-align: left;\n  transition: all 0.1s ease;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {\n  color: white;\n}\n.media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {\n  opacity: 0;\n}\n.media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {\n  bottom: -50px;\n}\n.media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {\n  opacity: 0;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 0 12px 0 8px;\n  height: var(--bottom-panel);\n  vertical-align: middle;\n  pointer-events: auto;\n  transition: bottom 0.4s ease-out;\n  display: flex;\n  justify-content: space-between;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  justify-content: flex-start;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-button,\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator,\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .gplayer-mc-panel-item {\n  order: 10;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-playpause],\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-playstop] {\n  order: 1;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-volume] {\n  order: 2;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-position] {\n  order: 3;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-duration] {\n  order: 3;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel {\n  height: 100%;\n  text-align: center;\n  line-height: var(--bottom-panel);\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  justify-content: flex-end;\n}\n@media (max-width: 420px) {\n  .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {\n    gap: 0.5rem;\n    overflow: hidden;\n  }\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  cursor: pointer;\n  display: inline-block;\n  height: 20px;\n  width: 24px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {\n  height: 20px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {\n  fill: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {\n  outline: none;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n  order: 100;\n  background-color: transparent;\n  border: 0;\n  height: 40px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {\n  background-color: transparent;\n  border: 0;\n  cursor: default;\n  display: none !important;\n  float: right;\n  height: 100%;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n  display: flex;\n  color: white;\n  cursor: default;\n  line-height: var(--bottom-panel);\n  position: relative;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {\n  margin: 1px 0 0 7px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n  color: rgb(255, 255, 255);\n  opacity: 0.5;\n  margin-top: 1px;\n  margin-right: 6px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {\n  content: \"|\";\n  margin-right: 7px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {\n  position: absolute;\n  top: -11px;\n  left: 0;\n  display: inline-block;\n  vertical-align: middle;\n  width: 100%;\n  height: 20px;\n  cursor: pointer;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {\n  width: 100%;\n  height: 3px;\n  position: relative;\n  top: 8px;\n  background-color: #666;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  background-color: var(--player-seekbar-buffer-color);\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  background-color: var(--player-seekbar-current-color);\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {\n  cursor: default;\n  display: none;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {\n  cursor: default;\n  display: none;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {\n  position: absolute;\n  transform: translateX(-50%);\n  top: -11.5px;\n  left: 0;\n  width: 20px;\n  height: 20px;\n  opacity: 1;\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {\n  position: absolute;\n  left: 4.5px;\n  top: 4.5px;\n  width: 11px;\n  height: 11px;\n  border-radius: 50%;\n  background-color: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {\n  display: flex;\n  justify-content: flex-start;\n  height: var(--bottom-panel);\n  cursor: pointer;\n  box-sizing: border-box;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {\n  bottom: 0;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n  background-color: transparent;\n  border: 0;\n  box-sizing: content-box;\n  height: var(--bottom-panel);\n  width: 20px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n  height: 20px;\n  position: relative;\n  top: 3px;\n  margin-top: 7px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {\n  fill: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {\n  margin-left: 2px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n  position: relative;\n  margin-left: 10px;\n  top: 8px;\n  width: 80px;\n  height: 23px;\n  padding: 3px 0;\n  transition: width 0.2s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {\n  height: 3px;\n  border-radius: 100px;\n  position: relative;\n  top: 7px;\n  background-color: #666;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  border-radius: 100px;\n  background-color: white;\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  background-color: var(--player-vod-color);\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {\n  position: absolute;\n  transform: translateX(-50%);\n  top: 3px;\n  margin-left: 3px;\n  width: 16px;\n  height: 16px;\n  opacity: 1;\n  transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {\n  position: absolute;\n  left: 3px;\n  top: 5px;\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background-color: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {\n  float: left;\n  width: 4px;\n  padding-left: 2px;\n  height: 12px;\n  opacity: 0.5;\n  box-shadow: inset 2px 0 0 white;\n  transition: transform 0.2s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {\n  box-shadow: inset 2px 0 0 #fff;\n  opacity: 1;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {\n  padding-left: 0;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {\n  transform: scaleY(1.5);\n}\n\n/* TODO distribute between plugins' styles */\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button] {\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  align-items: center;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button]:hover {\n  color: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul {\n  background-color: rgba(74, 74, 74, 0.6);\n  border: none;\n  width: auto;\n  border-radius: 4px;\n  bottom: 52px;\n  margin-left: -28px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li {\n  font-size: 16px;\n  text-align: center;\n  white-space: nowrap;\n  height: 30px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a {\n  height: 30px;\n  padding: 5px 10px;\n  color: #fffffe;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a:hover {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li.current a {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:first-child a {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:last-child a {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.media-control-skin-1[data-media-control-skin-1] .seek-time {\n  height: 26px;\n  line-height: 26px;\n  bottom: 52px;\n  border-radius: 3px;\n  background-color: rgba(74, 74, 74, 0.7);\n}\n.media-control-skin-1[data-media-control-skin-1] .seek-time span {\n  letter-spacing: 0.8px;\n  font-size: 14px;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n}\n.media-control-skin-1[data-media-control-skin-1] .seek-time .seek-time__pos {\n  padding-left: 8px;\n  padding-right: 8px;\n}");
 
 const mediaControlHTML = "<div class=\"media-control-background\" data-background></div>\n\n<div class=\"media-control-layer gcore-skin-bg-color\" data-controls>\n    <% var renderBar = function(name) { %>\n        <div class=\"bar-container\" data-<%= name %>>\n            <div class=\"bar-background\" data-<%= name %>>\n                <div class=\"bar-fill-1\" data-<%= name %>></div>\n                <div class=\"bar-fill-2 gcore-skin-main-color\" data-<%= name %>></div>\n                <div class=\"bar-hover\" data-<%= name %>></div>\n            </div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    <% }; %>\n    <% var renderSegmentedBar = function(name, segments) {\n        segments = segments || 10; %>\n    <div class=\"bar-container\" data-<%= name %>>\n        <div class=\"bar-background\" data-<%= name %>>\n            <div class=\"bar-fill-1 gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n            <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n        </div>\n    </div>\n    <% }; %>\n    <% var renderDrawer = function(name, renderContent) { %>\n        <div class=\"drawer-container\" data-<%= name %>>\n            <div class=\"drawer-icon-container\" data-<%= name %>>\n                <div class=\"drawer-icon media-control-icon gcore-skin-button-color\" data-<%= name %>></div>\n                <span class=\"drawer-text\" data-<%= name %>></span>\n            </div>\n            <% renderContent(name); %>\n        </div>\n    <% }; %>\n    <% var renderIndicator = function(name) { %>\n        <div class=\"media-control-indicator gcore-skin-text-color\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderQuality = function(name) { %>\n        <div class=\"media-control-quality\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderNerd = function(name) { %>\n        <div class=\"media-control-nerd\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderMultiCamera = function(name) { %>\n        <div class=\"media-control-multicamera\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderVR = function(name) { %>\n        <div class=\"media-control-vr\" data-<%= name %>></div>\n    <% }; %>\n    <% var renderButton = function(name) { %>\n        <button type=\"button\" class=\"media-control-button media-control-icon gcore-skin-button-color\" data-<%= name %>\n            aria-label=\"<%= name %>\"></button>\n    <% }; %>\n\n    <% var templates = {\n        bar: renderBar,\n        segmentedBar: renderSegmentedBar,\n    };\n    var render = function (settingsList) {\n        settingsList.forEach(function (setting) {\n\n            if (setting === \"seekbar\") {\n                renderBar(setting);\n            } else if (setting === \"volume\") {\n                renderDrawer(setting, settings.volumeBarTemplate ? templates[settings.volumeBarTemplate] : function (name) {\n                    return renderSegmentedBar(name);\n                });\n            } else if (setting === \"duration\" || setting === \"position\" || setting === \"clips\") {\n                renderIndicator(setting);\n            } else if (setting === \"quality\") {\n                renderQuality(setting)\n            } else if (setting === \"nerd\") {\n                renderNerd(setting)\n            } else if (setting === \"multicamera\") {\n                renderMultiCamera(setting)\n            } else if (setting === \"vr\") {\n                renderVR(setting)\n            } else if ([\"playpause\", \"playstop\", \"fullscreen\"].includes(setting)) {\n                renderButton(setting);\n            }\n        });\n    }; %>\n    <% if (settings.left && settings.left.length) { %>\n        <div class=\"media-control-left-panel\" data-media-control>\n            <% render(settings.left); %>\n        </div>\n    <% } %>\n    <% if (settings.default && settings.default.length) { %>\n        <div class=\"media-control-center-panel\" data-media-control>\n            <% render(settings.default); %>\n        </div>\n    <% } %>\n    <% if (settings.right && settings.right.length) { %>\n        <div class=\"media-control-right-panel\" data-media-control>\n            <% render(settings.right); %>\n        </div>\n    <% } %>\n</div>\n";
 
@@ -44841,7 +44841,7 @@ const templateHtml$2 = "<div class=\"big-mute-icon-wrapper\" data-big-mute id=\"
 
 insertStyle(".big-mute-icon-wrapper[data-big-mute] {\n  position: absolute;\n  z-index: 9998;\n  background-color: transparent;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  height: calc(100% - 50px);\n  margin: 0 auto;\n  opacity: 0.75;\n  transition: opacity 0.1s ease;\n  pointer-events: auto;\n}\n.big-mute-icon-wrapper[data-big-mute].hide {\n  display: none;\n}\n.big-mute-icon-wrapper[data-big-mute]:hover {\n  cursor: pointer;\n}\n\n.big-mute-icon[data-big-mute-icon] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  width: 120px;\n  height: 120px;\n  border: 2px solid white;\n  border-radius: 50%;\n  filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)\";\n  filter: alpha(opacity=60);\n  opacity: 1;\n  box-shadow: 0 0 1px 0 white;\n  background: rgba(240, 243, 247, 0.9411764706);\n  z-index: 10000;\n}\n.big-mute-icon[data-big-mute-icon] svg {\n  margin-left: 5px;\n  width: 80px;\n  height: 80px;\n}\n.big-mute-icon[data-big-mute-icon] svg path {\n  fill: #1f1e1e !important;\n}\n.big-mute-icon[data-big-mute-icon]:hover {\n  background: rgba(240, 243, 247, 0.8784313725);\n}\n.big-mute-icon[data-big-mute-icon]:hover svg path {\n  fill: #151515 !important;\n}");
 
-const T$9 = 'plugins.big_mute_button';
+const T$a = 'plugins.big_mute_button';
 // TODO rewrite as a container plugin
 /**
  * `PLUGIN` that displays a big mute button over the video when it's being played muted.
@@ -44904,7 +44904,7 @@ class BigMuteButton extends UICorePlugin {
         if (autoPlay) {
             this.autoPlay = true;
         }
-        trace(`${T$9} onPlay`, {
+        trace(`${T$a} onPlay`, {
             autoPlay: this.autoPlay});
         if (this.autoPlay && !wasMuted && volume === 0) {
             this.mount();
@@ -48103,7 +48103,7 @@ class Clips extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: 'media-control-clips gplayer-mc-clips',
+            class: 'gplayer-mc-clips',
         };
     }
     get version() {
@@ -48162,8 +48162,7 @@ class Clips extends UICorePlugin {
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.onMcRender);
     }
     onMcRender() {
-        const mediaControl = this.core.getPlugin('media_control');
-        mediaControl.slot('clips', this.$el);
+        this.core.getPlugin('media_control')?.slot('clips', this.$el);
     }
     onContainerChanged() {
         // TODO figure out the conditions of changing the container (without destroying the previous one)
@@ -48476,7 +48475,7 @@ const templateHtml = "<div class=\"player-error-screen__content\" data-error-scr
 
 insertStyle("div.player-error-screen, [data-player] div.player-error-screen {\n  color: #CCCACA;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  background-color: rgba(0, 0, 0, 0.7);\n  z-index: 2000;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\ndiv.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {\n  font-size: 14px;\n  color: #CCCACA;\n  margin-top: 45px;\n}\ndiv.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {\n  font-weight: bold;\n  line-height: 30px;\n  font-size: 18px;\n}\ndiv.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {\n  width: 90%;\n  margin: 0 auto;\n}\ndiv.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {\n  font-size: 13px;\n  margin-top: 15px;\n}\ndiv.player-error-screen__reload, [data-player] div.player-error-screen__reload {\n  cursor: pointer;\n  width: 30px;\n  margin: 15px auto 0;\n}");
 
-const T$8 = 'plugins.error_screen';
+const T$9 = 'plugins.error_screen';
 /**
  * `PLUGIN` that displays fatal errors nicely in the overlay on top of the player.
  * @public
@@ -48552,7 +48551,7 @@ class ErrorScreen extends UICorePlugin {
         }, 0);
     }
     onActiveContainerChanged() {
-        trace(`${T$8} onActiveContainerChanged`, {
+        trace(`${T$9} onActiveContainerChanged`, {
             reloading: this.core.options.reloading,
         });
         this.err = null;
@@ -48611,7 +48610,7 @@ const buttonHtml$2 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\"
 insertStyle(".media-control-pip {\n  order: 95;\n  display: flex;\n}\n.media-control-pip button {\n  height: 20px;\n}\n.media-control-pip button svg {\n  height: 20px;\n}");
 
 const VERSION$3 = '0.0.1';
-const T$7 = `plugins.pip`;
+const T$8 = `plugins.pip`;
 /**
  * `PLUGIN` that enables picture in picture mode.
  * @beta
@@ -48694,7 +48693,7 @@ class PictureInPicture extends UICorePlugin {
         }
     }
     requestPictureInPicture() {
-        trace(`${T$7} requestPictureInPicture`, {
+        trace(`${T$8} requestPictureInPicture`, {
             videoElement: !!this.videoElement,
         });
         this.videoElement.requestPictureInPicture();
@@ -48726,7 +48725,7 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: 2.0, label: '2x' },
 ];
 const DEFAULT_PLAYBACK_RATE = 1;
-const T$6 = 'plugins.playback_rate';
+const T$7 = 'plugins.playback_rate';
 /**
  * `PLUGIN` that allows changing the playback speed of the video.
  * @beta
@@ -48833,7 +48832,7 @@ class PlaybackRate extends UICorePlugin {
         this.mount();
     }
     mount() {
-        trace(`${T$6} mount`, {
+        trace(`${T$7} mount`, {
             shouldMount: this.shouldMount(),
         });
         if (!this.shouldMount()) {
@@ -48850,7 +48849,7 @@ class PlaybackRate extends UICorePlugin {
         })));
     }
     onMetaDataLoaded() {
-        trace(`${T$6} onMetaDataLoaded`, {
+        trace(`${T$7} onMetaDataLoaded`, {
             playbackType: this.core.activePlayback.getPlaybackType(),
             dvrEnabled: this.core.activePlayback.dvrEnabled,
         });
@@ -48872,13 +48871,13 @@ class PlaybackRate extends UICorePlugin {
             this.core.activePlayback?.setPlaybackRate(this.selectedRate);
         }
         else {
-            trace(`${T$6} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
+            trace(`${T$7} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
                 selectedRate: this.selectedRate,
             });
         }
     }
     shouldMount() {
-        trace(`${T$6} shouldMount`, {
+        trace(`${T$7} shouldMount`, {
             playbackType: this.core.activePlayback?.getPlaybackType(),
             dvrEnabled: this.core.activePlayback?.dvrEnabled,
         });
@@ -48895,7 +48894,7 @@ class PlaybackRate extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$6} render`, {
+        trace(`${T$7} render`, {
             shouldMount: this.shouldMount(),
         });
         this.$el.html(PlaybackRate.listTemplate({
@@ -48941,13 +48940,13 @@ class PlaybackRate extends UICorePlugin {
         }
     }
     syncRate() {
-        trace(`${T$6} syncRate`, {
+        trace(`${T$7} syncRate`, {
             selectedRate: this.selectedRate,
         });
         this.core.activePlayback?.setPlaybackRate(this.selectedRate);
     }
     resetPlaybackRate() {
-        trace(`${T$6} resetPlaybackRate`, {
+        trace(`${T$7} resetPlaybackRate`, {
             selectedRate: this.selectedRate,
         });
         this.core.activePlayback?.setPlaybackRate(DEFAULT_PLAYBACK_RATE);
@@ -48982,7 +48981,7 @@ class PlaybackRate extends UICorePlugin {
             ?.label || `x${rate}`);
     }
     highlightCurrentRate() {
-        trace(`${T$6} highlightCurrentRate`, {
+        trace(`${T$7} highlightCurrentRate`, {
             selectedRate: this.selectedRate,
         });
         this.allRateElements().removeClass('current');
@@ -48993,7 +48992,7 @@ class PlaybackRate extends UICorePlugin {
             .addClass('gcore-skin-active');
     }
     updateGearOptionLabel() {
-        trace(`${T$6} updateGearOptionLabel`, {
+        trace(`${T$7} updateGearOptionLabel`, {
             selectedRate: this.selectedRate,
         });
         this.mount();
@@ -49007,7 +49006,7 @@ const posterHTML = "<div class=\"play-wrapper\" id=\"gplayer-poster\">\n    <div
 //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';
+const T$6 = 'plugins.poster';
 /**
  * `PLUGIN` that displays a poster image in the background and a big play button on top when playback is stopped
  * @beta
@@ -49111,7 +49110,7 @@ class Poster extends UIContainerPlugin {
         super.disable();
     }
     onError(error) {
-        trace(`${T$5} onError`, {
+        trace(`${T$6} onError`, {
             enabled: this.enabled,
         });
         if (this.hasFatalError) {
@@ -49244,7 +49243,7 @@ const hdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"non
 
 insertStyle(".quality-levels li.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n.quality-levels li.current {\n  background-color: #000;\n}");
 
-const T$4 = 'plugins.quality_levels';
+const T$5 = 'plugins.quality_levels';
 const VERSION$2 = 'v2.22.5';
 /**
  * `PLUGIN` that provides a UI to select the desired quality level of the playback.
@@ -49487,7 +49486,7 @@ class QualityLevels extends UICorePlugin {
         this.highlightCurrentLevel();
     }
     highlightCurrentLevel() {
-        trace(`${T$4} highlightCurrentLevel`, {
+        trace(`${T$5} highlightCurrentLevel`, {
             selectedLevelId: this.selectedLevelId,
         });
         this.allLevelElements()
@@ -49515,7 +49514,7 @@ insertStyle(".seek-time {\n  position: absolute;\n  white-space: nowrap;\n  heig
 // 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 { formatTime } = Utils;
-// const T = 'plugins.seek_time'
+const T$4 = 'plugins.seek_time';
 /**
  * `PLUGIN` that adds a seek time indicator when the mouse pointer is over the seek bar.
  * @beta
@@ -49574,6 +49573,9 @@ class SeekTime extends UICorePlugin {
     showTime(event) {
         this.hoveringOverSeekBar = true;
         this.calculateHoverPosition(event);
+        trace(`${T$4} showTime`, {
+            hoverPosition: this.hoverPosition,
+        });
         this.update();
     }
     hideTime() {
@@ -49648,7 +49650,7 @@ class SeekTime extends UICorePlugin {
         return this;
     }
     mount() {
-        this.core.getPlugin('media_control').$el.append(this.$el); // TODO use a method
+        this.core.getPlugin('media_control').$el.append(this.$el); // TODO MediaControl.mount('root', this.$el)
     }
 }