@gcorevideo/player 2.24.13 → 2.25.0

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$e = 'playback.dash';
+const T$d = '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$e} get.dvrEnabled`, {
+        trace(`${T$d} 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$e} play`, { dash: !!this._dash });
+        trace(`${T$d} 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$d = 'playback.hls';
+const T$c = '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$d} _recover failed to recover`, {
+            trace(`${T$c} _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$d} _onHLSJSError`, {
+        trace(`${T$c} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -42146,7 +42146,7 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$d} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$c} _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$d} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$c} _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$d} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$c} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -42546,7 +42546,7 @@ function toClapprTrack(t) {
     };
 }
 
-const T$c = 'playback.html5_video';
+const T$b = '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$c} createError`, {
+        trace(`${T$b} createError`, {
             errorData: { ...errorData },
         });
         const i18n = this.i18n ||
@@ -42580,12 +42580,12 @@ class HTML5Video extends BasePlayback {
         super._onEnded();
     }
     _handleBufferingEvents() {
-        trace(`${T$c} _handleBufferingEvents`, {
+        trace(`${T$b} _handleBufferingEvents`, {
             networkState: this.el.networkState,
         });
         if (!this.stallTimerId) {
             this.stallTimerId = setTimeout(() => {
-                trace(`${T$c} _handleBufferingEvents stall timeout`, {
+                trace(`${T$b} _handleBufferingEvents stall timeout`, {
                     buffering: this.buffering,
                     ended: this.ended,
                 });
@@ -42671,7 +42671,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$b = 'gplayer';
+const T$a = 'gplayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -42759,7 +42759,7 @@ class Player {
      * ```
      */
     attachTo(playerElement) {
-        trace(`${T$b} attachTo`, {
+        trace(`${T$a} 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$b} init`, {
+        trace(`${T$a} 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$b} destroy`, {
+        trace(`${T$a} destroy`, {
             player: !!this.player,
         });
         if (this.player) {
@@ -42970,7 +42970,7 @@ class Player {
         this.config = $.extend(true, this.config, config);
     }
     initPlayer(coreOptions) {
-        trace(`${T$b} initPlayer`, {
+        trace(`${T$a} initPlayer`, {
             autoPlay: coreOptions.autoPlay,
             sources: coreOptions.sources,
             player: !!this.player,
@@ -43010,7 +43010,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$b} onReady`, {
+            trace(`${T$a} 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$b} on CORE_SCREEN_ORIENTATION_CHANGED`, {
+            trace(`${T$a} 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 .level-selector[data-level-selector],\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 .level-selector[data-level-selector] ul,\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 .level-selector[data-level-selector] ul li,\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 .level-selector[data-level-selector] ul li a,\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 .level-selector[data-level-selector] button[data-level-selector-button] .quality-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] .audio-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .quality-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .audio-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .quality-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .audio-text,\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 .level-selector[data-level-selector] button[data-level-selector-button] span.quality-arrow,\n.media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,\n.media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.quality-arrow,\n.media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.audio-arrow,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.quality-arrow,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.audio-arrow,\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] .media-clip-container .media-clip-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-clips .media-clip-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] .media-clip-container .media-clip-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-clips .media-clip-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-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}");
+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 .level-selector[data-level-selector],\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 .level-selector[data-level-selector] ul,\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 .level-selector[data-level-selector] ul li,\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 .level-selector[data-level-selector] ul li a,\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 .level-selector[data-level-selector] button[data-level-selector-button] .quality-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] .audio-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .quality-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .audio-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .quality-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .audio-text,\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 .level-selector[data-level-selector] button[data-level-selector-button] span.quality-arrow,\n.media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,\n.media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.quality-arrow,\n.media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.audio-arrow,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.quality-arrow,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.audio-arrow,\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-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";
 
@@ -43421,31 +43421,33 @@ const fullscreenOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"
 // 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 {@link https://github.com/clappr/clappr-plugins/blob/master/LICENSE | LICENSE}.
+const STANDARD_MEDIA_CONTROL_ELEMENTS = [
+    'duration',
+    'fullscreen',
+    'hd-indicator',
+    'playpause',
+    'playstop',
+    'position',
+    'seekbar',
+    'volume',
+];
+// TODO export
 const DEFAULT_SETTINGS = {
+    default: ['seekbar'],
+    left: ['playpause', 'playstop', 'position', 'duration', 'volume'],
     right: [
-        'audiotracks',
-        'cc',
+        '*',
+        // 'hd-indicator',
         'fullscreen',
-        'gear',
-        'multicamera',
-        'pip',
-        'vr',
-    ]};
+    ],
+    seekEnabled: true,
+};
 const INITIAL_SETTINGS = {
     left: [],
     right: [],
     default: [],
     seekEnabled: false,
 };
-const T$a = 'plugins.media_control';
-const LEFT_ORDER = [
-    'playpause',
-    'playstop',
-    'volume',
-    'position',
-    'duration',
-    'dvr',
-];
 /**
  * Extended events for the {@link MediaControl} plugin
  * @beta
@@ -43456,25 +43458,21 @@ var ExtendedEvents;
     ExtendedEvents["MEDIACONTROL_MENU_COLLAPSE"] = "mediacontrol:menu:collapse";
 })(ExtendedEvents || (ExtendedEvents = {}));
 const { Config, Fullscreen, formatTime: formatTime$1, extend, removeArrayItem } = Utils;
-function orderByOrderPattern(arr, order) {
-    const arrWithoutDuplicates = [...new Set(arr)];
-    const ordered = order.filter((item) => arrWithoutDuplicates.includes(item));
-    const rest = arrWithoutDuplicates.filter((item) => !order.includes(item));
-    return [...ordered, ...rest];
-}
 /**
- * `PLUGIN` that provides basic playback controls UI and a foundation for developing custom UI.
+ * `PLUGIN` that provides framework for building media control UI.
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
  *
- * Configuration options:
+ * Configuration options (root level)
+ *
+ * - `hideMediaControlDelay`: number - specifies the delay in milliseconds before the media control UI is hidden after the last user interaction
  *
- * - `mediaControl`: {@link MediaControlSettings} - specifies the allowed media control elements in each area
+ * - `mediaControl`: {@link MediaControlSettings} - specifies the media control dashboard layout
  *
  * - `persistConfig`: boolean - `common` option, makes the plugin persist the media control settings
  *
- * - `chromeless`: boolean
+ * - `chromeless`: boolean - `common` option, hides the media control UI
  */
 class MediaControl extends UICorePlugin {
     // private advertisementPlaying = false
@@ -43482,7 +43480,7 @@ class MediaControl extends UICorePlugin {
     currentDurationValue = 0;
     currentPositionValue = 0;
     currentSeekBarPercentage = 0;
-    disabledClickableList = [];
+    // private disabledClickableList: DisabledClickable[] = []
     displayedDuration = null;
     displayedPosition = null;
     displayedSeekBarPercentage = null;
@@ -43507,7 +43505,6 @@ class MediaControl extends UICorePlugin {
     verticalVolume = false;
     $duration = null;
     $fullscreenToggle = null;
-    $multiCameraSelector = null;
     $playPauseToggle = null;
     $playStopToggle = null;
     $position = null;
@@ -43535,6 +43532,46 @@ class MediaControl extends UICorePlugin {
     get supportedVersion() {
         return { min: CLAPPR_VERSION$1 };
     }
+    /**
+     * @returns  Default media control layout settings
+     * @remark
+     * The method can be used to change the default dashboard layout, for example, removing the standard UI elements
+     * @example
+     * ```ts
+     * const settings = MediaControl.defaultSettings()
+     * settings.left = settings.filter(item => item !== 'playpause' && item !== 'playstop')
+     * ...
+     * new Player({
+     *   mediaControl: settings,
+     * })
+     * ```
+     */
+    static defaultSettings() {
+        return $.extend(true, {}, DEFAULT_SETTINGS);
+    }
+    /**
+     * Extend the default media control layout settings
+     * @param settings - Additional settings
+     * @returns The extended settings
+     * @remarks
+     * This method allows adding custom elements to the media control dashboard.
+     * The default settings are not modified.
+     * @example
+     * ```ts
+     * new Player({
+     *   mediaControl: MediaControl.extendSettings({
+     *     left: ['*'], // add all custom elements to the left panel
+     *   }),
+     * })
+     * ```
+     */
+    static extendSettings(settings) {
+        return {
+            left: mergeElements(DEFAULT_SETTINGS.left, settings.left ?? []),
+            right: mergeElements(DEFAULT_SETTINGS.right, settings.right ?? []),
+            default: mergeElements(DEFAULT_SETTINGS.default, settings.default ?? []),
+        };
+    }
     get disabled() {
         const playbackIsNOOP = this.core.activeContainer &&
             this.core.activeContainer.getPlaybackType() === Playback.NO_OP;
@@ -43796,9 +43833,7 @@ class MediaControl extends UICorePlugin {
         this.applyButtonStyle(this.$volumeIcon);
     }
     changeTogglePlay() {
-        // assert.ok(this.$playPauseToggle, 'play/pause toggle must be present');
         this.$playPauseToggle?.html('');
-        // assert.ok(this.$playStopToggle, 'play/stop toggle must be present');
         this.$playStopToggle?.html('');
         if (this.container && this.container.isPlaying()) {
             this.$playPauseToggle?.append(pauseIcon);
@@ -44163,36 +44198,32 @@ class MediaControl extends UICorePlugin {
         }
     }
     updateSettings() {
-        const newSettings = $.extend(true, {
+        // TODO use this.options.mediaControl to additionally filter the settings
+        const container = $.extend(true, {
             left: [],
             default: [],
             right: [],
         }, this.core.activeContainer.settings);
-        newSettings.left.push('clips'); // TODO settings
-        // TODO make order controlled via CSS
-        newSettings.left = orderByOrderPattern([...newSettings.left, 'volume', 'clips'], LEFT_ORDER);
-        if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
-            this.core.activePlayback.dvrEnabled) {
-            newSettings.left.push('dvr');
-        }
-        // actual order of the items appear rendered is controlled by CSS
-        newSettings.right = DEFAULT_SETTINGS.right; // TODO get from the options
+        container.left.push('volume');
+        const setup = this.options.mediaControl ?? DEFAULT_SETTINGS;
         if ((!this.fullScreenOnVideoTagSupported && !fullscreenEnabled()) ||
             this.options.fullscreenDisable) {
             // remove fullscreen from settings if it is not available
-            removeArrayItem(newSettings.default, 'fullscreen');
-            removeArrayItem(newSettings.left, 'fullscreen');
-            removeArrayItem(newSettings.right, 'fullscreen');
+            removeArrayItem(container.default, 'fullscreen');
+            removeArrayItem(container.left, 'fullscreen');
+            removeArrayItem(container.right, 'fullscreen');
         }
-        removeArrayItem(newSettings.default, 'hd-indicator');
-        removeArrayItem(newSettings.left, 'hd-indicator');
         // TODO get from container's settings
         if (this.core.activePlayback.name === 'html5_video') {
-            newSettings.seekEnabled = this.isSeekEnabledForHtml5Playback();
+            container.seekEnabled = this.isSeekEnabledForHtml5Playback();
+            // TODO remove seekbar if seek is disabled?
         }
-        const settingsChanged = !isEqualSettings(this.settings, newSettings);
+        container.left = evalSettings(container.left, setup.left);
+        container.right = evalSettings(container.right, setup.right);
+        container.default = evalSettings(container.default, setup.default);
+        const settingsChanged = !isEqualSettings(this.settings, container);
         if (settingsChanged) {
-            this.settings = newSettings;
+            this.settings = container;
             this.hasUpdate = true;
             this.render();
         }
@@ -44218,15 +44249,37 @@ class MediaControl extends UICorePlugin {
         this.$volumeBarBackground = this.$el.find('.bar-background[data-volume]');
         this.$volumeBarFill = this.$el.find('.bar-fill-1[data-volume]');
         this.$volumeBarScrubber = this.$el.find('.bar-scrubber[data-volume]');
-        this.$multiCameraSelector = this.$el.find('.media-control-multicamera[data-multicamera]');
         this.resetIndicators();
         this.initializeIcons();
     }
     /**
-     * Get a media control element DOM node
+     * Mount a media control to its configured location
      * @param name - The name of the media control element
      * @param element - The DOM node/fragment to mount
-     * @deprecated Use {@link MediaControl.mount} instead
+     * @remarks
+     * Media controls layout is configured via {@link MediaControlSettings}.
+     * A plugin implementing custom elements on the media control dashboard,
+     * should use this method to mount the element to the correct location.
+     * The actual location is defined by the occurence of the element token in the `left`, `right` or `default` section
+     * of the {@link MediaControlSettings}.
+     * @example
+     * ```ts
+     * class MyPlugin extends UICorePlugin {
+     *   override render() {
+     *     // mount the element where it is configured in the layout
+     *     this.core.getPlugin('media_control').slot('my-element', this.$el)
+     *   }
+     * }
+     * ...
+     * Player.registerPlugin(MyPlugin)
+     * ...
+     * // Configuration of the media control layout
+     * new Player({
+     *   mediaControl: {
+     *     left: ['my-element'], // the element will be mounted to the left panel
+     *   },
+     * })
+     * ```
      */
     slot(name, element) {
         const panel = this.getElementLocation(name);
@@ -44446,7 +44499,6 @@ class MediaControl extends UICorePlugin {
             return this;
         }
         const timeout = this.options.hideMediaControlDelay || 2000;
-        trace(`${T$a} 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]);
@@ -44543,22 +44595,6 @@ class MediaControl extends UICorePlugin {
         }
         return 0;
     }
-    /**
-     * Enable the user interaction disabled earlier
-     */
-    enableControlButton() {
-        this.disabledClickableList.forEach((element) => {
-            element.el.css({ 'pointer-events': element.pointerEventValue });
-        });
-    }
-    /**
-     * Disable the user interaction for the control buttons
-     */
-    disabledControlButton() {
-        this.disabledClickableList.forEach((element) => {
-            element.el.css({ 'pointer-events': 'none' });
-        });
-    }
     // TODO drop
     isSeekEnabledForHtml5Playback() {
         if (this.core.getPlaybackType() === Playback.LIVE) {
@@ -44567,13 +44603,14 @@ class MediaControl extends UICorePlugin {
         return isFinite(this.core.activePlayback.getDuration());
     }
     getElementLocation(name) {
-        if (this.settings.right?.includes(name)) {
-            return this.getRightPanel();
-        }
-        if (this.settings.left?.includes(name)) {
+        if (this.settings.left.includes(name) || this.settings.left.includes('*')) {
             return this.getLeftPanel();
         }
-        if (this.settings.default?.includes(name)) {
+        if (this.settings.right.includes(name) ||
+            this.settings.right.includes('*')) {
+            return this.getRightPanel();
+        }
+        if (this.settings.default.includes(name)) {
             return this.getCenterPanel();
         }
         return null;
@@ -44591,7 +44628,8 @@ MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
 };
 function serializeSettings(s) {
-    return s.left.slice()
+    return s.left
+        .slice()
         .sort()
         .concat(s.right.slice().sort())
         .concat(s.default.slice().sort())
@@ -44606,6 +44644,25 @@ function mountTo(parent, element) {
         parent.append(element);
     }
 }
+function isStandardMediaControl(name) {
+    return STANDARD_MEDIA_CONTROL_ELEMENTS.includes(name);
+}
+function evalSettings(container, setup) {
+    return setup.filter((item) => {
+        if (isStandardMediaControl(item)) {
+            return container.includes(item);
+        }
+        return true;
+    });
+}
+function mergeElements(a, b) {
+    return b.reduce((acc, item) => {
+        if (!acc.includes(item)) {
+            acc.push(item);
+        }
+        return acc;
+    }, a);
+}
 
 const VERSION$6 = '2.22.4';
 /**
@@ -47973,7 +48030,7 @@ class ClickToPause extends ContainerPlugin {
     }
 }
 
-insertStyle("@charset \"UTF-8\";\n.media-control-clips {\n  display: flex;\n  gap: 6px;\n}\n.media-control-clips .media-clip-text {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  text-overflow: ellipsis;\n  color: white;\n  cursor: default;\n  line-height: var(--bottom-panel);\n  position: relative;\n}\n.media-control-clips .media-clip-text::before {\n  content: \"•\";\n  padding-right: 6px;\n}\n.media-control-clips .media-clip-text {\n  max-width: 100px;\n}");
+insertStyle("@charset \"UTF-8\";\n.gplayer-mc-clips {\n  display: flex;\n  gap: 6px;\n}\n.gplayer-mc-clips .gplayer-mc-clips-text {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n  text-overflow: ellipsis;\n  color: white;\n  cursor: default;\n  line-height: var(--bottom-panel);\n  position: relative;\n  max-width: 150px;\n}\n.gplayer-mc-clips .gplayer-mc-clips-text::before {\n  content: \"•\";\n  padding-right: 6px;\n}\n.gplayer-mc-clips .gplayer-mc-clips-text.compact {\n  max-width: 100px;\n}");
 
 function parseClips(text) {
     const clipsArr = text
@@ -48011,10 +48068,11 @@ function buildSvg(clips, duration, barWidth) {
     return svg;
 }
 
-const clipsHTML = "<div class=\"media-clip-text\" id=\"clips-text\"></div>";
+const clipsHTML = "<div class=\"gplayer-mc-clips-text\" id=\"gplayer-mc-clips-text\"></div>";
 
 const VERSION$4 = '2.22.16';
 const CLAPPR_VERSION = '0.11.4';
+const COMPACT_WIDTH = 495;
 /**
  * `PLUGIN` that allows marking up the timeline of the video
  * @beta
@@ -48044,7 +48102,7 @@ class Clips extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: 'media-control-clips',
+            class: 'media-control-clips gplayer-mc-clips',
         };
     }
     get version() {
@@ -48108,6 +48166,7 @@ class Clips extends UICorePlugin {
     }
     onContainerChanged() {
         // TODO figure out the conditions of changing the container (without destroying the previous one)
+        // probably it is the case with the MultiCamera plugin
         if (this.oldContainer) {
             this.stopListening(this.oldContainer, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         }
@@ -48117,12 +48176,24 @@ class Clips extends UICorePlugin {
             this.svgMask = null;
         }
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
+        this.toggleCompact();
     }
     playerResize() {
         const duration = this.core.activeContainer.getDuration();
+        // TODO check
         if (duration) {
             this.makeSvg(duration);
         }
+        this.toggleCompact();
+    }
+    toggleCompact() {
+        const elText = this.$el.find('#gplayer-mc-clips-text');
+        if (this.core.activeContainer.el.clientWidth <= COMPACT_WIDTH) {
+            elText.addClass('compact');
+        }
+        else {
+            elText.removeClass('compact');
+        }
     }
     onTimeUpdate(event) {
         if (!this.svgMask) {
@@ -48160,7 +48231,7 @@ class Clips extends UICorePlugin {
     }
     setClipText(text) {
         if (text) {
-            this.$el.show().find('#clips-text').text(text);
+            this.$el.show().find('#gplayer-mc-clips-text').text(text);
         }
         else {
             this.$el.hide();
@@ -48286,7 +48357,7 @@ class ContextMenu extends UIContainerPlugin {
 
 const dvrHTML = "<div class=\"live-info\" id=\"gplayer-mc-live\"><%= i18n.t('live') %></div>\n<button type=\"button\"\n    class=\"live-button\"\n    aria-label=\"<%= i18n.t('back_to_live') %>\"\n    id=\"gplayer-mc-back-to-live\"\n>\n    <%= i18n.t('back_to_live') %>\n</button>\n";
 
-insertStyle(".dvr-controls {\n  --disabled-opacity: 0.3;\n  --circle-radius: 5px;\n  display: flex;\n  align-items: center;\n  color: var(--player-dvr-color);\n  font-size: 10px;\n  font-weight: 500;\n  height: var(--bottom-panel);\n  line-height: var(--bottom-panel);\n  margin-left: 0;\n}\n.dvr-controls .live-info,\n.dvr-controls .live-button {\n  font-size: 14px;\n  font-weight: 500;\n  margin-left: 20px;\n  letter-spacing: 0.8px;\n  text-transform: uppercase;\n}\n.dvr-controls .live-info::before,\n.dvr-controls .live-button::before {\n  margin-right: 8px;\n  content: \"\";\n  display: inline-block;\n  position: relative;\n  width: calc(var(--circle-radius) * 2);\n  height: calc(var(--circle-radius) * 2);\n  border-radius: var(--circle-radius);\n  background-color: var(--player-dvr-color);\n}\n.dvr-controls.disabled {\n  opacity: var(--disabled-opacity);\n}\n.dvr-controls.disabled:before {\n  background-color: var(--player-dvr-color);\n}\n\n.live-info {\n  text-transform: uppercase;\n  color: #fffffe;\n}\n.live-info::before {\n  background-color: var(--player-live-color);\n  background-color: #ed4f4a;\n}\n\n.live-button {\n  cursor: pointer;\n  outline: none;\n  border: 0;\n  color: var(--player-dvr-color);\n  background-color: transparent;\n  padding: 0;\n  opacity: 0.7;\n  transition: all 0.1s ease;\n}\n.live-button:hover {\n  opacity: 1;\n  text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;\n}");
+insertStyle(".dvr-controls {\n  --disabled-opacity: 0.3;\n  --circle-radius: 5px;\n  display: flex;\n  align-items: center;\n  color: var(--player-dvr-color);\n  font-size: 10px;\n  font-weight: 500;\n  height: var(--bottom-panel);\n  line-height: var(--bottom-panel);\n  margin-left: 0;\n}\n.dvr-controls .live-info,\n.dvr-controls .live-button {\n  font-size: 14px;\n  font-weight: 500;\n  margin-left: 20px;\n  letter-spacing: 0.8px;\n  text-transform: uppercase;\n}\n.dvr-controls .live-info::before,\n.dvr-controls .live-button::before {\n  margin-right: 8px;\n  content: \"\";\n  display: inline-block;\n  position: relative;\n  width: calc(var(--circle-radius) * 2);\n  height: calc(var(--circle-radius) * 2);\n  border-radius: var(--circle-radius);\n  background-color: var(--player-dvr-color);\n}\n.dvr-controls.disabled {\n  opacity: var(--disabled-opacity);\n}\n.dvr-controls.disabled:before {\n  background-color: var(--player-dvr-color);\n}\n.dvr-controls .live-info {\n  text-transform: uppercase;\n  color: #fffffe;\n}\n.dvr-controls .live-info::before {\n  background-color: #ed4f4a;\n}\n.dvr-controls .live-button {\n  cursor: pointer;\n  outline: none;\n  border: 0;\n  color: var(--player-dvr-color);\n  background-color: transparent;\n  padding: 0;\n  opacity: 0.7;\n  transition: all 0.1s ease;\n}\n.dvr-controls .live-button:hover {\n  opacity: 1;\n  text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;\n}");
 
 /**
  * `PLUGIN` that adds the DVR controls to the media control UI
@@ -48381,7 +48452,7 @@ class DvrControls extends UICorePlugin {
         // TODO -> to MediaControl (auto hide)
         mediaControl.toggleElement('duration', false);
         mediaControl.toggleElement('position', false);
-        mediaControl.mount('left', this.$el); // TODO use independent mount point
+        mediaControl.slot('dvr', this.$el); // TODO use independent mount point
     }
     onDvrStateChanged(dvrInUse) {
         this.toggleState(dvrInUse);