@gcorevideo/player 2.25.7 → 2.25.9

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,
@@ -43396,7 +43396,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.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  margin: 0;\n  top: -40px;\n  padding: 0;\n  margin-left: -32px;\n  margin-top: -3px;\n  width: 80px;\n}\n.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.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.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.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.w370 .media-control-cc {\n  width: 28px;\n}\n.media-control-skin-1.w370 .media-control-cc svg {\n  height: 17px;\n}\n.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.w370 .share_plugin[data-share] .share-container .share-container-header {\n  border: none;\n}\n.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.w370 .media-control-quality {\n  display: block;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera {\n  margin-top: 0;\n  margin-right: 10px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera button {\n  height: 32px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera button svg {\n  height: 17px;\n  margin: 0;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] {\n  padding-left: 10px;\n  padding-right: 12px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator {\n  line-height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .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.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.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.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.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.w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n  height: 33px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] button.media-control-button svg {\n  height: 17px;\n}\n.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.w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n  max-width: 50px;\n}\n.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.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.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.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n  display: none;\n}\n.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.w370 .media-control-layer[data-controls] .media-control-button,\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-item {\n  height: 32px;\n}\n\n:root {\n  --font-size-media-controls: 14px;\n  --font-size-media-controls-dropdown: 16px;\n  --gplayer-mc-font-size-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  --gplayer-mc-text-color: #fff;\n  --gplayer-mc-popup-border-color: rgb(255 255 255 / 10%);\n  --gplayer-mc-popup-bg: rgb(74 74 74 / 60%);\n}\n\n.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.dragging {\n  pointer-events: auto;\n  cursor: grabbing !important;\n  cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1.dragging * {\n  cursor: grabbing !important;\n  cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1 .media-control-icon {\n  line-height: 0;\n  letter-spacing: 0;\n  speak: none;\n  color: var(--gplayer-mc-text-color);\n  vertical-align: middle;\n  text-align: left;\n  transition: all 0.1s ease;\n}\n.media-control-skin-1 .media-control-icon:hover {\n  color: white;\n}\n.media-control-skin-1.media-control-hide .media-control-background[data-background] {\n  opacity: 0;\n}\n.media-control-skin-1.media-control-hide .media-control-layer[data-controls] {\n  bottom: -50px;\n}\n.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 .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 .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 .media-control-button,\n.media-control-skin-1 .media-control-indicator,\n.media-control-skin-1 .media-control-item {\n  order: 50;\n}\n.media-control-skin-1 .media-control-item {\n  display: flex;\n  align-items: center;\n}\n.media-control-skin-1 [data-playpause],\n.media-control-skin-1 [data-playstop] {\n  order: 1;\n}\n.media-control-skin-1 [data-volume] {\n  order: 2;\n}\n.media-control-skin-1 [data-position] {\n  order: 3;\n}\n.media-control-skin-1 [data-duration] {\n  order: 3;\n}\n.media-control-skin-1 .media-control-center-panel {\n  height: 100%;\n  text-align: center;\n  line-height: var(--bottom-panel);\n}\n.media-control-skin-1 .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 .media-control-right-panel {\n    gap: 0.5rem;\n  }\n}\n.media-control-skin-1 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 button.media-control-button svg {\n  height: 20px;\n}\n.media-control-skin-1 button.media-control-button svg path {\n  fill: white;\n}\n.media-control-skin-1 button.media-control-button:focus {\n  outline: none;\n}\n.media-control-skin-1 button.media-control-button[data-play] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-pause] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-stop] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1 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 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 .media-control-indicator[data-position], .media-control-skin-1 .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 .media-control-indicator[data-position] {\n  margin: 1px 0 0 7px;\n}\n.media-control-skin-1 .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 .media-control-indicator[data-duration]::before {\n  content: \"|\";\n  margin-right: 7px;\n}\n.media-control-skin-1 .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 .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 .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 .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 .bar-container[data-seekbar].seek-disabled {\n  cursor: default;\n  display: none;\n}\n.media-control-skin-1 .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {\n  cursor: default;\n  display: none;\n}\n.media-control-skin-1 .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 .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 .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 .drawer-container[data-volume] .drawer-icon-container[data-volume] {\n  bottom: 0;\n}\n.media-control-skin-1 .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 .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 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {\n  fill: white;\n}\n.media-control-skin-1 .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 .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 .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 .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 .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 .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 .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 .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 .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 .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 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {\n  transform: scaleY(1.5);\n}\n.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 .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 .seek-time .seek-time__pos {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n.media-control-skin-1 .media-control-dd {\n  display: flex;\n  height: 32px;\n  line-height: 32px;\n  align-items: baseline;\n  gap: 4px;\n  vertical-align: baseline;\n  padding: 0;\n  background-color: transparent;\n  color: var(--gplayer-mc-text-color);\n  -webkit-font-smoothing: antialiased;\n  border: none;\n  cursor: pointer;\n}\n.media-control-skin-1 .media-control-dd__text {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  max-width: 100px;\n}\n.media-control-skin-1 .media-control-dd.changing {\n  animation: pulse 0.5s infinite alternate;\n}\n.media-control-skin-1 .media-control-dd__arrow {\n  width: 9px;\n  height: 6px;\n}\n.media-control-skin-1 .media-control-dd__wrap {\n  position: relative;\n}\n.media-control-skin-1 .media-control-dd__popup {\n  max-width: 114px;\n  list-style-type: none;\n  position: absolute;\n  box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);\n  border: none;\n  min-width: 60px;\n  border-radius: 4px;\n  bottom: 40px;\n  right: -2px;\n  overflow: hidden;\n}\n.media-control-skin-1 .media-control-dd__popup li {\n  font-size: var(--gplayer-mc-font-size-dropdown);\n  text-align: right;\n  height: 30px;\n}\n.media-control-skin-1 .media-control-dd__popup li[data-title] {\n  background-color: #c3c2c2;\n  padding: 5px;\n}\n.media-control-skin-1 .media-control-dd__popup li a {\n  display: block;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  height: 30px;\n  padding: 5px 10px;\n  line-height: 20px;\n  color: #fffffe;\n}\n.media-control-skin-1 .media-control-dd__popup li a:hover {\n  text-decoration: none;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: white;\n}\n.media-control-skin-1 .media-control-dd__popup li.current a {\n  color: #f00;\n}\n.media-control-skin-1 .media-control-dd__popup li:first-child a {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-dd__popup li:last-child a {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n\n@keyframes pulse {\n  0% {\n    color: #fff;\n  }\n  50% {\n    color: #ff0101;\n  }\n  100% {\n    color: #B80000;\n  }\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 .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.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  margin: 0;\n  top: -40px;\n  padding: 0;\n  margin-left: -32px;\n  margin-top: -3px;\n  width: 80px;\n}\n.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.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.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.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.media-control-skin-1.w270 .media-control-dd__popup {\n  max-width: 114px;\n}\n\n.media-control-skin-1.w370 .media-control-cc {\n  width: 28px;\n}\n.media-control-skin-1.w370 .media-control-cc svg {\n  height: 17px;\n}\n.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.w370 .share_plugin[data-share] .share-container .share-container-header {\n  border: none;\n}\n.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.w370 .media-control-quality {\n  display: block;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera {\n  margin-top: 0;\n  margin-right: 10px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera button {\n  height: 32px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera button svg {\n  height: 17px;\n  margin: 0;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] {\n  padding-left: 10px;\n  padding-right: 12px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator {\n  line-height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .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.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.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.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.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.w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n  height: 33px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] button.media-control-button svg {\n  height: 17px;\n}\n.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.w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n  max-width: 50px;\n}\n.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.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.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.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n  display: none;\n}\n.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.w370 .media-control-layer[data-controls] .media-control-button,\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-item {\n  height: 32px;\n}\n.media-control-skin-1.w370 .media-control-dd__popup {\n  max-width: 150px;\n}\n\n:root {\n  --font-size-media-controls: 14px;\n  --font-size-media-controls-dropdown: 16px;\n  --gplayer-mc-font-size-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  --gplayer-mc-text-color: #fff;\n  --gplayer-mc-text-dim-color: #fffffe;\n  --gplayer-mc-popup-border-color: rgb(255 255 255 / 10%);\n  --gplayer-mc-popup-bg: rgb(74 74 74 / 60%);\n}\n\n.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.dragging {\n  pointer-events: auto;\n  cursor: grabbing !important;\n  cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1.dragging * {\n  cursor: grabbing !important;\n  cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1 .media-control-icon {\n  line-height: 0;\n  letter-spacing: 0;\n  speak: none;\n  color: var(--gplayer-mc-text-color);\n  vertical-align: middle;\n  text-align: left;\n  transition: all 0.1s ease;\n}\n.media-control-skin-1 .media-control-icon:hover {\n  color: white;\n}\n.media-control-skin-1.media-control-hide .media-control-background[data-background] {\n  opacity: 0;\n}\n.media-control-skin-1.media-control-hide .media-control-layer[data-controls] {\n  bottom: -50px;\n}\n.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 .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 .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 .media-control-button,\n.media-control-skin-1 .media-control-indicator,\n.media-control-skin-1 .media-control-item {\n  order: 50;\n}\n.media-control-skin-1 .media-control-item {\n  display: flex;\n  align-items: center;\n}\n.media-control-skin-1 [data-playpause],\n.media-control-skin-1 [data-playstop] {\n  order: 1;\n}\n.media-control-skin-1 [data-volume] {\n  order: 2;\n}\n.media-control-skin-1 [data-position] {\n  order: 3;\n}\n.media-control-skin-1 [data-duration] {\n  order: 3;\n}\n.media-control-skin-1 .media-control-center-panel {\n  height: 100%;\n  text-align: center;\n  line-height: var(--bottom-panel);\n}\n.media-control-skin-1 .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 .media-control-right-panel {\n    gap: 0.5rem;\n  }\n}\n.media-control-skin-1 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 button.media-control-button svg {\n  height: 20px;\n}\n.media-control-skin-1 button.media-control-button svg path {\n  fill: white;\n}\n.media-control-skin-1 button.media-control-button:focus {\n  outline: none;\n}\n.media-control-skin-1 button.media-control-button[data-play] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-pause] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-stop] {\n  float: left;\n  height: 100%;\n}\n.media-control-skin-1 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 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 .media-control-indicator[data-position], .media-control-skin-1 .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 .media-control-indicator[data-position] {\n  margin: 1px 0 0 7px;\n}\n.media-control-skin-1 .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 .media-control-indicator[data-duration]::before {\n  content: \"|\";\n  margin-right: 7px;\n}\n.media-control-skin-1 .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 .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 .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 .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 .bar-container[data-seekbar].seek-disabled {\n  cursor: default;\n  display: none;\n}\n.media-control-skin-1 .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {\n  cursor: default;\n  display: none;\n}\n.media-control-skin-1 .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 .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 .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 .drawer-container[data-volume] .drawer-icon-container[data-volume] {\n  bottom: 0;\n}\n.media-control-skin-1 .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 .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 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {\n  fill: white;\n}\n.media-control-skin-1 .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 .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 .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 .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 .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 .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 .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 .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 .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 .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 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {\n  transform: scaleY(1.5);\n}\n.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 .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 .seek-time .seek-time__pos {\n  padding-left: 8px;\n  padding-right: 8px;\n}\n.media-control-skin-1 .media-control-dd {\n  display: flex;\n  height: 32px;\n  line-height: 32px;\n  align-items: baseline;\n  gap: 4px;\n  vertical-align: baseline;\n  padding: 0;\n  background-color: transparent;\n  color: var(--gplayer-mc-text-color);\n  -webkit-font-smoothing: antialiased;\n  border: none;\n  cursor: pointer;\n}\n.media-control-skin-1 .media-control-dd__text {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  max-width: 100px;\n}\n.media-control-skin-1 .media-control-dd.changing {\n  animation: pulse 0.5s infinite alternate;\n}\n.media-control-skin-1 .media-control-dd svg {\n  fill: var(--gplayer-mc-text-color);\n}\n.media-control-skin-1 .media-control-dd__arrow {\n  width: 9px;\n  height: 6px;\n}\n.media-control-skin-1 .media-control-dd__wrap {\n  position: relative;\n}\n.media-control-skin-1 .media-control-dd__popup {\n  max-width: 200px;\n  list-style-type: none;\n  position: absolute;\n  box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);\n  border: none;\n  min-width: 60px;\n  border-radius: 4px;\n  bottom: 40px;\n  right: -2px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding: 5px 0;\n}\n.media-control-skin-1 .media-control-dd__popup li {\n  font-size: var(--gplayer-mc-font-size-dropdown);\n  text-align: right;\n  height: 30px;\n}\n.media-control-skin-1 .media-control-dd__popup li a {\n  display: block;\n  text-decoration: none;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  padding: 5px 10px;\n  line-height: 20px;\n  color: #fffffe;\n}\n.media-control-skin-1 .media-control-dd__popup li a:hover {\n  text-decoration: none;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: var(--gplayer-mc-text-color);\n}\n.media-control-skin-1 .media-control-dd__popup li.current a {\n  color: #f00;\n}\n.media-control-skin-1 .media-control-dd__popup li:first-child a {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-dd__popup li:last-child a {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n\n@keyframes pulse {\n  0% {\n    color: #fff;\n  }\n  50% {\n    color: #ff0101;\n  }\n  100% {\n    color: #B80000;\n  }\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";
 
@@ -43429,6 +43429,7 @@ const STANDARD_MEDIA_CONTROL_ELEMENTS = [
     'seekbar',
     'volume',
 ];
+const MENU_VMARGIN = 12;
 // TODO export
 const DEFAULT_SETTINGS = {
     default: ['seekbar'],
@@ -43752,6 +43753,12 @@ class MediaControl extends UICorePlugin {
     getAvailableHeight() {
         return (this.core.$el.height() - this.$el.find('.media-control-layer').height());
     }
+    /**
+     * @returns Vertical space available to render a popup menu
+     */
+    getAvailablePopupHeight() {
+        return this.getAvailableHeight() - MENU_VMARGIN * 2;
+    }
     /**
      * Set the initial volume, which is preserved when playback is interrupted by an advertisement
      */
@@ -44860,7 +44867,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$a = 'plugins.big_mute_button';
+const T$9 = '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.
@@ -44923,7 +44930,7 @@ class BigMuteButton extends UICorePlugin {
         if (autoPlay) {
             this.autoPlay = true;
         }
-        trace(`${T$a} onPlay`, {
+        trace(`${T$9} onPlay`, {
             autoPlay: this.autoPlay});
         if (this.autoPlay && !wasMuted && volume === 0) {
             this.mount();
@@ -44999,14 +45006,13 @@ const pluginHtml$3 = "<button class=\"media-control-button gplayer-lite-btn gcor
 
 insertStyle(".media-control-skin-1 .media-control-item.media-control-gear {\n  order: 99;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {\n  position: absolute;\n  right: 16px;\n  bottom: 52px;\n  width: 250px;\n  min-height: 48px;\n  z-index: 9999;\n  border-radius: 4px;\n  box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {\n  padding: 8px 0;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option {\n  margin: 0;\n  text-align: left;\n  line-height: 22px;\n  padding: 5px 14px;\n  width: 250px;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 8px;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {\n  flex: 24px 0 0;\n  height: 24px;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {\n  visibility: hidden;\n  display: inline-block;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {\n  flex: 0 1 100%;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {\n  flex: 0 0 14px;\n  height: 24px;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {\n  flex: 1 0 auto;\n}");
 
-insertStyle("*, :focus, :visited {\n  outline: none !important;\n}\n\n.gear-wrapper .go-back {\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 20px;\n  width: 100%;\n  text-align: left;\n  padding: 12px;\n}\n.gear-wrapper .go-back .arrow-left-icon {\n  float: left;\n  padding-top: 2px;\n  padding-right: 2px;\n}\n.gear-wrapper .go-back .arrow-left-icon svg {\n  height: 16px;\n}\n.gear-wrapper ul.gear-sub-menu {\n  width: 100%;\n  list-style-type: none;\n  min-width: 60px;\n  border-top: 2px solid rgb(36, 36, 36);\n  overflow-y: auto;\n}\n.gear-wrapper ul.gear-sub-menu li {\n  font-size: 12px;\n  text-align: left;\n}\n.gear-wrapper ul.gear-sub-menu li[data-title] {\n  background-color: #c3c2c2;\n  padding: 5px;\n}\n.gear-wrapper ul.gear-sub-menu li a {\n  display: block;\n  text-decoration: none;\n  height: 32px;\n  padding: 5px 10px;\n  line-height: 22px;\n  color: #fffffe;\n}\n.gear-wrapper ul.gear-sub-menu li a:hover {\n  color: white;\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.gear-wrapper ul.gear-sub-menu li a:hover a {\n  color: white;\n  text-decoration: none;\n}\n.gear-wrapper ul.gear-sub-menu li a .check-icon {\n  width: 30px;\n  height: 20px;\n  float: left;\n  display: block;\n}\n.gear-wrapper ul.gear-sub-menu li a .check-icon svg {\n  display: none;\n}\n.gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {\n  display: inline;\n}");
+insertStyle("*, :focus, :visited {\n  outline: none !important;\n}\n\n.gear-wrapper .go-back {\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 20px;\n  width: 100%;\n  text-align: left;\n  padding: 12px;\n}\n.gear-wrapper .go-back .arrow-left-icon {\n  float: left;\n  padding-top: 2px;\n  padding-right: 2px;\n}\n.gear-wrapper .go-back .arrow-left-icon svg {\n  height: 16px;\n}\n.gear-wrapper ul.gear-sub-menu {\n  width: 100%;\n  list-style-type: none;\n  min-width: 60px;\n  border-top: 2px solid rgb(36, 36, 36);\n  overflow-y: auto;\n}\n.gear-wrapper ul.gear-sub-menu li {\n  font-size: 12px;\n  text-align: left;\n}\n.gear-wrapper ul.gear-sub-menu li a {\n  display: block;\n  text-decoration: none;\n  height: 30px;\n  padding: 5px 10px;\n  line-height: 22px;\n  color: var(--gplayer-mc-text-dim-color);\n}\n.gear-wrapper ul.gear-sub-menu li a:hover {\n  color: var(--gplayer-mc-text-color);\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.gear-wrapper ul.gear-sub-menu li a:hover a {\n  color: var(--gplayer-mc-text-color);\n  text-decoration: none;\n}\n.gear-wrapper ul.gear-sub-menu li a .check-icon {\n  width: 30px;\n  height: 20px;\n  float: left;\n  display: block;\n}\n.gear-wrapper ul.gear-sub-menu li a .check-icon svg {\n  display: none;\n}\n.gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {\n  display: inline;\n}");
 
 const gearIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g clip-path=\"url(#clip0_660_1503)\">\n    <path\n      d=\"M19.14 12.94C19.18 12.64 19.2 12.33 19.2 12C19.2 11.68 19.18 11.36 19.13 11.06L21.16 9.47999C21.34 9.33999 21.39 9.06999 21.28 8.86999L19.36 5.54999C19.24 5.32999 18.99 5.25999 18.77 5.32999L16.38 6.28999C15.88 5.90999 15.35 5.58999 14.76 5.34999L14.4 2.80999C14.36 2.56999 14.16 2.39999 13.92 2.39999H10.08C9.83999 2.39999 9.64999 2.56999 9.60999 2.80999L9.24999 5.34999C8.65999 5.58999 8.11999 5.91999 7.62999 6.28999L5.23999 5.32999C5.01999 5.24999 4.76999 5.32999 4.64999 5.54999L2.73999 8.86999C2.61999 9.07999 2.65999 9.33999 2.85999 9.47999L4.88999 11.06C4.83999 11.36 4.79999 11.69 4.79999 12C4.79999 12.31 4.81999 12.64 4.86999 12.94L2.83999 14.52C2.65999 14.66 2.60999 14.93 2.71999 15.13L4.63999 18.45C4.75999 18.67 5.00999 18.74 5.22999 18.67L7.61999 17.71C8.11999 18.09 8.64999 18.41 9.23999 18.65L9.59999 21.19C9.64999 21.43 9.83999 21.6 10.08 21.6H13.92C14.16 21.6 14.36 21.43 14.39 21.19L14.75 18.65C15.34 18.41 15.88 18.09 16.37 17.71L18.76 18.67C18.98 18.75 19.23 18.67 19.35 18.45L21.27 15.13C21.39 14.91 21.34 14.66 21.15 14.52L19.14 12.94ZM12 15.6C10.02 15.6 8.39999 13.98 8.39999 12C8.39999 10.02 10.02 8.39999 12 8.39999C13.98 8.39999 15.6 10.02 15.6 12C15.6 13.98 13.98 15.6 12 15.6Z\"\n      fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_660_1503\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
 
 const gearHdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g clip-path=\"url(#clip0_28_1567)\">\n    <path\n      d=\"M19.14 12.94C19.18 12.64 19.2 12.33 19.2 12C19.2 11.68 19.18 11.36 19.13 11.06L21.16 9.47999C21.34 9.33999 21.39 9.06999 21.28 8.86999L19.36 5.54999C19.24 5.32999 18.99 5.25999 18.77 5.32999L16.38 6.28999C15.88 5.90999 15.35 5.58999 14.76 5.34999L14.4 2.80999C14.36 2.56999 14.16 2.39999 13.92 2.39999H10.08C9.83999 2.39999 9.64999 2.56999 9.60999 2.80999L9.24999 5.34999C8.65999 5.58999 8.11999 5.91999 7.62999 6.28999L5.23999 5.32999C5.01999 5.24999 4.76999 5.32999 4.64999 5.54999L2.73999 8.86999C2.61999 9.07999 2.65999 9.33999 2.85999 9.47999L4.88999 11.06C4.83999 11.36 4.79999 11.69 4.79999 12C4.79999 12.31 4.81999 12.64 4.86999 12.94L2.83999 14.52C2.65999 14.66 2.60999 14.93 2.71999 15.13L4.63999 18.45C4.75999 18.67 5.00999 18.74 5.22999 18.67L7.61999 17.71C8.11999 18.09 8.64999 18.41 9.23999 18.65L9.59999 21.19C9.64999 21.43 9.83999 21.6 10.08 21.6H13.92C14.16 21.6 14.36 21.43 14.39 21.19L14.75 18.65C15.34 18.41 15.88 18.09 16.37 17.71L18.76 18.67C18.98 18.75 19.23 18.67 19.35 18.45L21.27 15.13C21.39 14.91 21.34 14.66 21.15 14.52L19.14 12.94ZM12 15.6C10.02 15.6 8.39999 13.98 8.39999 12C8.39999 10.02 10.02 8.39999 12 8.39999C13.98 8.39999 15.6 10.02 15.6 12C15.6 13.98 13.98 15.6 12 15.6Z\"\n      fill=\"#C9C9C9\"/>\n    <rect x=\"13\" width=\"11\" height=\"7\" rx=\"1\" fill=\"#F6413B\"/>\n    <path\n      d=\"M14.6962 6V1.63636H15.3546V3.53267H17.53V1.63636H18.1905V6H17.53V4.0973H15.3546V6H14.6962ZM20.562 6H19.1493V1.63636H20.6067C21.0343 1.63636 21.4015 1.72372 21.7083 1.89844C22.0151 2.07173 22.2502 2.32102 22.4135 2.64631C22.5783 2.97017 22.6607 3.35866 22.6607 3.81179C22.6607 4.26634 22.5776 4.65696 22.4114 4.98366C22.2466 5.31037 22.008 5.56179 21.6955 5.73793C21.383 5.91264 21.0051 6 20.562 6ZM19.8077 5.42472H20.5257C20.8581 5.42472 21.1344 5.36222 21.3546 5.23722C21.5748 5.1108 21.7395 4.92827 21.8489 4.68963C21.9583 4.44957 22.013 4.15696 22.013 3.81179C22.013 3.46946 21.9583 3.17898 21.8489 2.94034C21.7409 2.7017 21.5797 2.5206 21.3652 2.39702C21.1507 2.27344 20.8844 2.21165 20.5662 2.21165H19.8077V5.42472Z\"\n      fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_28_1567\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
 
 const VERSION$5 = '2.19.12';
-const MENU_VMARGIN = 12;
 const MENU_BACKLINK_HEIGHT = 44;
 /**
  * Events triggered by the plugin
@@ -45169,7 +45175,7 @@ class BottomGear extends UICorePlugin {
                 .appendTo(this.$el.find('#gear-options-wrapper'));
             $item.on('click', (e) => {
                 e.stopPropagation();
-                this.alignSubmenu($subMenu);
+                this.clampPopup($subMenu);
                 $subMenu.show();
                 this.$el.find('#gear-options').hide();
             });
@@ -45265,9 +45271,8 @@ class BottomGear extends UICorePlugin {
         const mediaControl = this.core.getPlugin('media_control');
         mediaControl.slot('gear', this.$el);
     }
-    alignSubmenu($subMenu) {
-        const availableHeight = this.core.getPlugin('media_control').getAvailableHeight() -
-            MENU_VMARGIN * 2;
+    clampPopup($subMenu) {
+        const availableHeight = this.core.getPlugin('media_control').getAvailablePopupHeight();
         $subMenu.css('max-height', `${availableHeight}px`);
         $subMenu
             .find('.gear-sub-menu')
@@ -48494,7 +48499,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$9 = 'plugins.error_screen';
+const T$8 = 'plugins.error_screen';
 /**
  * `PLUGIN` that displays fatal errors nicely in the overlay on top of the player.
  * @public
@@ -48570,7 +48575,7 @@ class ErrorScreen extends UICorePlugin {
         }, 0);
     }
     onActiveContainerChanged() {
-        trace(`${T$9} onActiveContainerChanged`, {
+        trace(`${T$8} onActiveContainerChanged`, {
             reloading: this.core.options.reloading,
         });
         this.err = null;
@@ -48620,7 +48625,7 @@ class ErrorScreen extends UICorePlugin {
 
 insertStyle(".player-logo[data-logo] {\n  position: absolute;\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n}\n\n.clappr-logo {\n  position: absolute;\n}");
 
-insertStyle("*,\n:focus,\n:visited {\n  outline: none !important;\n}\n\n.multicamera[data-multicamera] {\n  float: right;\n  margin-top: 4px;\n  position: relative;\n  margin-right: 20px;\n  width: 20px;\n}\n.multicamera[data-multicamera] button {\n  background-color: transparent;\n  color: #fff;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  border: none;\n  font-size: 14px;\n  padding: 0;\n}\n.multicamera[data-multicamera] button svg {\n  height: 20px;\n  position: relative;\n  margin-top: 6px;\n}\n.multicamera[data-multicamera] button:hover {\n  color: #c9c9c9;\n}\n.multicamera[data-multicamera] button.changing {\n  animation: pulse 0.5s infinite alternate;\n}\n.multicamera[data-multicamera] button span.quality-arrow {\n  width: 9px;\n  height: 6px;\n  margin-top: 11px;\n  margin-left: 5px;\n}\n.multicamera[data-multicamera] > ul {\n  padding: 6px 0;\n  right: -24px;\n  width: 245px;\n  list-style-type: none;\n  position: absolute;\n  bottom: 48px;\n  border-radius: 4px;\n  display: none;\n  background-color: rgba(74, 74, 74, 0.9);\n}\n.multicamera[data-multicamera] > ul::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 85%;\n  margin-left: -10px;\n  width: 0;\n  height: 0;\n  border-top: 10px solid rgba(74, 74, 74, 0.9);\n  border-right: 10px solid transparent;\n  border-left: 10px solid transparent;\n}\n.multicamera[data-multicamera] li {\n  font-size: 10px;\n  cursor: pointer;\n}\n.multicamera[data-multicamera] li .multicamera-item {\n  display: flex;\n  padding: 10px 0;\n  justify-content: center;\n  position: relative;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {\n  pointer-events: none;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {\n  opacity: 0.5;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {\n  opacity: 0.5;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {\n  background-color: rgba(0, 0, 0, 0);\n}\n.multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {\n  background-color: rgba(0, 0, 0, 0.3);\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {\n  width: 80px;\n  height: 60px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {\n  width: 80px;\n  height: 60px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text {\n  width: 120px;\n  text-align: left;\n  margin-left: 15px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {\n  width: 120px;\n  height: 20px;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  font-style: normal;\n  font-stretch: normal;\n  line-height: 1.43;\n  letter-spacing: normal;\n  text-align: left;\n  color: #fff;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {\n  opacity: 0.6;\n}\n.multicamera[data-multicamera] li[data-title] {\n  background-color: #c3c2c2;\n  padding: 5px;\n}\n.multicamera[data-multicamera] li a {\n  color: #444;\n  padding: 2px 10px;\n  display: block;\n  text-decoration: none;\n}\n.multicamera[data-multicamera] li a:hover {\n  background-color: #555;\n  color: white;\n}\n.multicamera[data-multicamera] li a:hover a {\n  color: white;\n  text-decoration: none;\n}\n.multicamera[data-multicamera] li.current a {\n  color: #f00;\n}");
+insertStyle("*,\n:focus,\n:visited {\n  outline: none !important;\n}\n\n.multicamera[data-multicamera] {\n  float: right;\n  margin-top: 4px;\n  position: relative;\n  margin-right: 20px;\n  width: 20px;\n}\n.multicamera[data-multicamera] button {\n  background-color: transparent;\n  color: #fff;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  border: none;\n  font-size: 14px;\n  padding: 0;\n}\n.multicamera[data-multicamera] button svg {\n  height: 20px;\n  position: relative;\n  margin-top: 6px;\n}\n.multicamera[data-multicamera] button:hover {\n  color: #c9c9c9;\n}\n.multicamera[data-multicamera] button.changing {\n  animation: pulse 0.5s infinite alternate;\n}\n.multicamera[data-multicamera] button span.quality-arrow {\n  width: 9px;\n  height: 6px;\n  margin-top: 11px;\n  margin-left: 5px;\n}\n.multicamera[data-multicamera] > ul {\n  padding: 6px 0;\n  right: -24px;\n  width: 245px;\n  list-style-type: none;\n  position: absolute;\n  bottom: 48px;\n  border-radius: 4px;\n  display: none;\n  background-color: rgba(74, 74, 74, 0.9);\n}\n.multicamera[data-multicamera] > ul::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 85%;\n  margin-left: -10px;\n  width: 0;\n  height: 0;\n  border-top: 10px solid rgba(74, 74, 74, 0.9);\n  border-right: 10px solid transparent;\n  border-left: 10px solid transparent;\n}\n.multicamera[data-multicamera] li {\n  font-size: 10px;\n  cursor: pointer;\n}\n.multicamera[data-multicamera] li .multicamera-item {\n  display: flex;\n  padding: 10px 0;\n  justify-content: center;\n  position: relative;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {\n  pointer-events: none;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {\n  opacity: 0.5;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {\n  opacity: 0.5;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {\n  background-color: rgba(0, 0, 0, 0);\n}\n.multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {\n  background-color: rgba(0, 0, 0, 0.3);\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {\n  width: 80px;\n  height: 60px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {\n  width: 80px;\n  height: 60px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text {\n  width: 120px;\n  text-align: left;\n  margin-left: 15px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {\n  width: 120px;\n  height: 20px;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  font-style: normal;\n  font-stretch: normal;\n  line-height: 1.43;\n  letter-spacing: normal;\n  text-align: left;\n  color: #fff;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {\n  opacity: 0.6;\n}\n.multicamera[data-multicamera] li a {\n  color: #444;\n  padding: 2px 10px;\n  display: block;\n  text-decoration: none;\n}\n.multicamera[data-multicamera] li a:hover {\n  background-color: #555;\n  color: white;\n}\n.multicamera[data-multicamera] li a:hover a {\n  color: white;\n  text-decoration: none;\n}\n.multicamera[data-multicamera] li.current a {\n  color: #f00;\n}");
 
 const pipIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M21.05 3.00001C21.302 3.00001 21.5435 3.10003 21.7217 3.27833C21.9 3.45646 22 3.69802 22 3.95003V10.6H20.1V4.90003H4.90001V18.2H10.6V20.1H3.95001C3.69802 20.1 3.45647 20 3.27832 19.8217C3.10002 19.6436 3 19.402 3 19.15V3.95001C3 3.69802 3.10002 3.45647 3.27832 3.27832C3.45644 3.10002 3.69801 3 3.95001 3L21.05 3.00001ZM21.05 12.5C21.302 12.5 21.5435 12.6 21.7217 12.7783C21.9 12.9565 22 13.198 22 13.45V19.15C22 19.402 21.9 19.6436 21.7217 19.8217C21.5436 20 21.302 20.1 21.05 20.1H13.45C13.198 20.1 12.9564 20 12.7783 19.8217C12.6 19.6436 12.5 19.402 12.5 19.15V13.45C12.5 13.198 12.6 12.9565 12.7783 12.7783C12.9564 12.6 13.198 12.5 13.45 12.5H21.05ZM7.47178 6.12823L9.60928 8.26572L11.5501 6.32492V11.5499H6.32509L8.26589 9.60911L6.12839 7.47161L7.47178 6.12823Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
@@ -48629,7 +48634,7 @@ const buttonHtml$2 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\"
 insertStyle(".media-control-skin-1 .media-control-item.media-control-pip {\n  order: 95;\n}\n.media-control-skin-1 .media-control-item.media-control-pip button {\n  height: 20px;\n}\n.media-control-skin-1 .media-control-item.media-control-pip button svg {\n  height: 20px;\n}");
 
 const VERSION$3 = '0.0.1';
-const T$8 = `plugins.pip`;
+const T$7 = `plugins.pip`;
 /**
  * `PLUGIN` that enables picture in picture mode.
  * @beta
@@ -48712,7 +48717,7 @@ class PictureInPicture extends UICorePlugin {
         }
     }
     requestPictureInPicture() {
-        trace(`${T$8} requestPictureInPicture`, {
+        trace(`${T$7} requestPictureInPicture`, {
             videoElement: !!this.videoElement,
         });
         this.videoElement.requestPictureInPicture();
@@ -48744,7 +48749,7 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: 2.0, label: '2x' },
 ];
 const DEFAULT_PLAYBACK_RATE = 1;
-const T$7 = 'plugins.playback_rate';
+const T$6 = 'plugins.playback_rate';
 /**
  * `PLUGIN` that allows changing the playback speed of the video.
  * @beta
@@ -48851,7 +48856,7 @@ class PlaybackRate extends UICorePlugin {
         this.mount();
     }
     mount() {
-        trace(`${T$7} mount`, {
+        trace(`${T$6} mount`, {
             shouldMount: this.shouldMount(),
         });
         if (!this.shouldMount()) {
@@ -48868,7 +48873,7 @@ class PlaybackRate extends UICorePlugin {
         })));
     }
     onMetaDataLoaded() {
-        trace(`${T$7} onMetaDataLoaded`, {
+        trace(`${T$6} onMetaDataLoaded`, {
             playbackType: this.core.activePlayback.getPlaybackType(),
             dvrEnabled: this.core.activePlayback.dvrEnabled,
         });
@@ -48890,13 +48895,13 @@ class PlaybackRate extends UICorePlugin {
             this.core.activePlayback?.setPlaybackRate(this.selectedRate);
         }
         else {
-            trace(`${T$7} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
+            trace(`${T$6} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
                 selectedRate: this.selectedRate,
             });
         }
     }
     shouldMount() {
-        trace(`${T$7} shouldMount`, {
+        trace(`${T$6} shouldMount`, {
             playbackType: this.core.activePlayback?.getPlaybackType(),
             dvrEnabled: this.core.activePlayback?.dvrEnabled,
         });
@@ -48913,7 +48918,7 @@ class PlaybackRate extends UICorePlugin {
      * @internal
      */
     render() {
-        trace(`${T$7} render`, {
+        trace(`${T$6} render`, {
             shouldMount: this.shouldMount(),
         });
         this.$el.html(PlaybackRate.listTemplate({
@@ -48959,13 +48964,13 @@ class PlaybackRate extends UICorePlugin {
         }
     }
     syncRate() {
-        trace(`${T$7} syncRate`, {
+        trace(`${T$6} syncRate`, {
             selectedRate: this.selectedRate,
         });
         this.core.activePlayback?.setPlaybackRate(this.selectedRate);
     }
     resetPlaybackRate() {
-        trace(`${T$7} resetPlaybackRate`, {
+        trace(`${T$6} resetPlaybackRate`, {
             selectedRate: this.selectedRate,
         });
         this.core.activePlayback?.setPlaybackRate(DEFAULT_PLAYBACK_RATE);
@@ -49000,7 +49005,7 @@ class PlaybackRate extends UICorePlugin {
             ?.label || `x${rate}`);
     }
     highlightCurrentRate() {
-        trace(`${T$7} highlightCurrentRate`, {
+        trace(`${T$6} highlightCurrentRate`, {
             selectedRate: this.selectedRate,
         });
         this.allRateElements().removeClass('current');
@@ -49011,7 +49016,7 @@ class PlaybackRate extends UICorePlugin {
             .addClass('gcore-skin-active');
     }
     updateGearOptionLabel() {
-        trace(`${T$7} updateGearOptionLabel`, {
+        trace(`${T$6} updateGearOptionLabel`, {
             selectedRate: this.selectedRate,
         });
         this.mount();
@@ -49025,7 +49030,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$6 = 'plugins.poster';
+const T$5 = 'plugins.poster';
 /**
  * `PLUGIN` that displays a poster image in the background and a big play button on top when playback is stopped
  * @beta
@@ -49129,7 +49134,7 @@ class Poster extends UIContainerPlugin {
         super.disable();
     }
     onError(error) {
-        trace(`${T$6} onError`, {
+        trace(`${T$5} onError`, {
             enabled: this.enabled,
         });
         if (this.hasFatalError) {
@@ -49262,7 +49267,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$5 = 'plugins.quality_levels';
+const T$4 = 'plugins.quality_levels';
 const VERSION$2 = 'v2.22.5';
 /**
  * `PLUGIN` that provides a UI to select the desired quality level of the playback.
@@ -49505,7 +49510,7 @@ class QualityLevels extends UICorePlugin {
         this.highlightCurrentLevel();
     }
     highlightCurrentLevel() {
-        trace(`${T$5} highlightCurrentLevel`, {
+        trace(`${T$4} highlightCurrentLevel`, {
             selectedLevelId: this.selectedLevelId,
         });
         this.allLevelElements()
@@ -49533,7 +49538,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$4 = 'plugins.seek_time';
+const T$3 = 'plugins.seek_time';
 /**
  * `PLUGIN` that adds a seek time indicator when the mouse pointer is over the seek bar.
  * @beta
@@ -49592,7 +49597,7 @@ class SeekTime extends UICorePlugin {
     showTime(event) {
         this.hoveringOverSeekBar = true;
         this.calculateHoverPosition(event);
-        trace(`${T$4} showTime`, {
+        trace(`${T$3} showTime`, {
             hoverPosition: this.hoverPosition,
         });
         this.update();
@@ -49679,7 +49684,7 @@ const pluginHtml$1 = "<div class=\"skip-container\" id=\"mc-skip-container\">\n
 
 insertStyle(".container-with-poster-clickable .mc-skip-time {\n  height: 0;\n}\n\n.mc-skip-time {\n  position: absolute;\n  width: 100%;\n  height: calc(100% - 50px);\n  z-index: 9998;\n  background-color: transparent;\n  font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n}\n.mc-skip-time .skip-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: space-between;\n}\n.mc-skip-time .skip-container .skip-item {\n  flex: 1 0 0px;\n  height: 100%;\n}");
 
-const T$3 = 'plugins.skip_time';
+const T$2 = 'plugins.skip_time';
 /**
  * `PLUGIN` that allows skipping time by tapping on the left or right side of the video.
  * @beta
@@ -49729,7 +49734,7 @@ class SkipTime extends UICorePlugin {
         this.position = 'left';
     }
     handleRewindClicks() {
-        trace(`${T$3} handleRewindClicks`, {
+        trace(`${T$2} handleRewindClicks`, {
             position: this.position,
         });
         if (this.core.getPlaybackType() === Playback.LIVE &&
@@ -49740,7 +49745,7 @@ class SkipTime extends UICorePlugin {
         this.handleSkip();
     }
     handleSkip() {
-        trace(`${T$3} handleSkip`, {
+        trace(`${T$2} handleSkip`, {
             position: this.position,
         });
         if (Browser.isMobile) {
@@ -49795,7 +49800,7 @@ insertStyle(".spinner-three-bounce[data-spinner] {\n  position: absolute;\n  wid
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 // https://github.com/clappr/clappr-plugins/blob/ffaa9d27005fa5a8a7c243ffc47eb5655b84b371/LICENSE
-const T$2 = 'plugins.spinner';
+const T$1 = 'plugins.spinner';
 /**
  * Custom events emitted by the plugin
  * @public
@@ -49868,14 +49873,14 @@ class SpinnerThreeBounce extends UIContainerPlugin {
         this._hide();
     }
     onStop() {
-        trace(`${T$2} onStop`, {
+        trace(`${T$1} onStop`, {
             hasFatalError: this.hasFatalError,
         });
         this._hide();
     }
     onError(e) {
         this.hasFatalError = e.code === PlaybackErrorCode.MediaSourceUnavailable;
-        trace(`${T$2} onError`, {
+        trace(`${T$1} onError`, {
             hasFatalError: this.hasFatalError,
             error: e.code,
         });
@@ -49908,7 +49913,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
         }
     }
     _hide() {
-        trace(`${T$2} _hide`, {
+        trace(`${T$1} _hide`, {
             userShown: this.userShown,
         });
         if (this.userShown) {
@@ -49925,7 +49930,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
      * @internal
      */
     render() {
-        trace(`${T$2} render`, {
+        trace(`${T$1} render`, {
             buffering: this.container.buffering,
         });
         this.$el.html(this.template());
@@ -49943,7 +49948,7 @@ class SpinnerThreeBounce extends UIContainerPlugin {
     }
 }
 
-const T$1 = 'plugins.source_controller';
+const T = 'plugins.source_controller';
 const INITIAL_RETRY_DELAY = 1000;
 const MAX_RETRY_DELAY = 5000;
 const RETRY_DELAY_BLUR = 500;
@@ -50089,7 +50094,7 @@ class SourceController extends CorePlugin {
         this.core.getPlugin('error_screen')?.disable(); //  TODO test
     }
     onActiveContainerChanged() {
-        trace(`${T$1} onActiveContainerChanged`, {
+        trace(`${T} onActiveContainerChanged`, {
             retrying: this.active,
             currentSource: this.sourcesList[this.currentSourceIndex],
         });
@@ -50110,7 +50115,7 @@ class SourceController extends CorePlugin {
     }
     bindContainerEventListeners() {
         this.core.activePlayback.on(Events$1.PLAYBACK_ERROR, (error) => {
-            trace(`${T$1} on PLAYBACK_ERROR`, {
+            trace(`${T} on PLAYBACK_ERROR`, {
                 error: {
                     code: error?.code,
                     description: error?.description,
@@ -50134,7 +50139,7 @@ class SourceController extends CorePlugin {
             }
         });
         this.core.activePlayback.on(Events$1.PLAYBACK_PLAY, () => {
-            trace(`${T$1} on PLAYBACK_PLAY`, {
+            trace(`${T} on PLAYBACK_PLAY`, {
                 currentSource: this.sourcesList[this.currentSourceIndex],
                 retrying: this.active,
             });
@@ -50153,7 +50158,7 @@ class SourceController extends CorePlugin {
         this.sourcesDelay = {};
     }
     retryPlayback() {
-        trace(`${T$1} retryPlayback enter`, {
+        trace(`${T} retryPlayback enter`, {
             currentSourceIndex: this.currentSourceIndex,
             currentSource: this.sourcesList[this.currentSourceIndex],
         });
@@ -50166,7 +50171,7 @@ class SourceController extends CorePlugin {
                 this.switching = false;
                 this.core.load(nextSource.source, nextSource.mimeType);
                 setTimeout(() => {
-                    trace(`${T$1} retryPlayback playing`, {
+                    trace(`${T} retryPlayback playing`, {
                         autoPlay: this.autoPlay,
                     });
                     this.core.activeContainer.play({
@@ -50194,19 +50199,18 @@ class SourceController extends CorePlugin {
     }
 }
 
-insertStyle(".media-control-skin-1 .media-control-cc button.media-control-button {\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  align-items: center;\n  vertical-align: top;\n}\n.media-control-skin-1 .media-control-cc button.media-control-button:hover {\n  color: white;\n}\n.media-control-skin-1 .media-control-cc ul {\n  width: auto;\n  border-radius: 4px;\n  bottom: 52px;\n  margin-left: -28px;\n}\n.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 .media-control-cc ul li a {\n  height: 30px;\n  padding: 5px 10px;\n  color: #fffffe;\n}\n.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 .media-control-cc ul li.current a {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.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 .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 .media-control-cc {\n  position: relative;\n  order: 85;\n}\n.media-control-skin-1 .media-control-cc button {\n  background-color: transparent;\n  color: #fff;\n  -webkit-font-smoothing: antialiased;\n  border: none;\n  cursor: pointer;\n}\n.media-control-skin-1 .media-control-cc button .cc-text svg {\n  fill: white;\n}\n.media-control-skin-1 .media-control-cc button:hover {\n  color: #c9c9c9;\n}\n.media-control-skin-1 .media-control-cc button.changing {\n  animation: pulse 0.5s infinite alternate;\n}\n.media-control-skin-1 .media-control-cc ul {\n  width: 80px;\n  overflow: hidden;\n  list-style-type: none;\n  position: absolute;\n  bottom: 25px;\n  border: none;\n  background-color: #e6e6e6;\n  padding: 8px 0;\n  box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);\n}\n.media-control-skin-1 .media-control-cc li a {\n  color: #444;\n  padding: 2px 10px;\n  display: block;\n  text-decoration: none;\n}\n.media-control-skin-1 .media-control-cc li a:hover {\n  background-color: #555;\n  color: white;\n}\n.media-control-skin-1 .media-control-cc li a:hover a {\n  color: white;\n  text-decoration: none;\n}\n.media-control-skin-1 .media-control-cc li.current a {\n  color: #f00;\n  background-color: #555;\n}");
+insertStyle(".media-control-skin-1 .media-control-cc button.media-control-button {\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  align-items: center;\n  vertical-align: top;\n}\n.media-control-skin-1 .media-control-cc button.media-control-button:hover {\n  color: white;\n}\n.media-control-skin-1 .media-control-cc ul li {\n  text-align: center;\n}\n.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 .media-control-cc ul li a:hover {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n.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 .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 .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 .media-control-cc {\n  position: relative;\n  order: 85;\n}\n\n.container .gplayer-cc-line {\n  position: absolute;\n  bottom: calc(var(--bottom-panel) + 5px);\n  width: 100%;\n}\n.container .gplayer-cc-line p {\n  width: auto;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: white;\n  display: inline-block;\n}");
 
 const subtitlesOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M16.238 16.1C13.979 16.1 12.578 14.538 12.578 11.997C12.578 9.462 13.973 7.9 16.238 7.9C18.087 7.9 19.5029 9.127 19.6219 10.824H18.032C17.876 9.927 17.168 9.338 16.238 9.338C15.011 9.338 14.249 10.354 14.249 11.997C14.249 13.641 15.011 14.662 16.243 14.662C17.178 14.662 17.881 14.111 18.038 13.251H19.627C19.492 14.938 18.119 16.1 16.238 16.1ZM8.03198 16.1C5.77298 16.1 4.37299 14.538 4.37299 11.997C4.37299 9.462 5.76798 7.9 8.03198 7.9C9.88098 7.9 11.298 9.127 11.416 10.824H9.82697C9.67097 9.927 8.96198 9.338 8.03198 9.338C6.80598 9.338 6.04297 10.354 6.04297 11.997C6.04297 13.641 6.80596 14.662 8.03796 14.662C8.97296 14.662 9.67601 14.111 9.83301 13.251H11.422C11.287 14.938 9.91398 16.1 8.03198 16.1ZM22.5 3H1.5C0.672 3 0 3.671 0 4.5V19.5C0 20.329 0.672 21 1.5 21H22.5C23.329 21 24 20.329 24 19.5V4.5C24 3.671 23.329 3 22.5 3Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
 const subtitlesOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M16.238 16.1C13.979 16.1 12.578 14.538 12.578 11.997C12.578 9.462 13.973 7.9 16.238 7.9C18.087 7.9 19.5029 9.127 19.6219 10.824H18.032C17.876 9.927 17.168 9.338 16.238 9.338C15.011 9.338 14.249 10.354 14.249 11.997C14.249 13.641 15.011 14.662 16.243 14.662C17.178 14.662 17.881 14.111 18.038 13.251H19.627C19.492 14.938 18.119 16.1 16.238 16.1ZM8.03198 16.1C5.77298 16.1 4.37299 14.538 4.37299 11.997C4.37299 9.462 5.76798 7.9 8.03198 7.9C9.88098 7.9 11.298 9.127 11.416 10.824H9.82697C9.67097 9.927 8.96198 9.338 8.03198 9.338C6.80598 9.338 6.04297 10.354 6.04297 11.997C6.04297 13.641 6.80596 14.662 8.03796 14.662C8.97296 14.662 9.67601 14.111 9.83301 13.251H11.422C11.287 14.938 9.91398 16.1 8.03198 16.1ZM22.5 3H1.5C0.672 3 0 3.671 0 4.5V19.5C0 20.329 0.672 21 1.5 21H22.5C23.329 21 24 20.329 24 19.5V4.5C24 3.671 23.329 3 22.5 3Z\"\n    fill=\"#C9C9C9\"/>\n  <rect y=\"22\" width=\"24\" height=\"2\" rx=\"1\" fill=\"#F6413B\"/>\n</svg>\n";
 
-const comboboxHTML = "<button data-cc-button class='media-control-button media-control-icon gcore-skin-button-color' id=\"cc-button\">\n    <span class='cc-text'></span>\n</button>\n\n<ul class='gcore-skin-bg-color' id=\"cc-select\">\n    <% for (const t of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-cc-select=\"<%= t.id %>\">\n                <%= t.name %>\n            </a>\n        </li>\n    <% } %>\n    <li><a href=\"#\" class='gcore-skin-text-color' data-cc-select=\"-1\"><%= i18n.t('off') %></a></li>\n</ul>\n";
+const comboboxHTML = "<button\n    class='media-control-button media-control-icon gcore-skin-button-color media-control-dd'\n    id=\"gplayer-cc-button\"\n    aria-haspopup=\"menu\"\n    aria-expanded=\"false\"\n    aria-controls=\"gplayer-cc-menu\"\n>\n</button>\n\n<ul class='gcore-skin-bg-color media-control-dd__popup' id=\"gplayer-cc-menu\" role=\"menu\">\n    <% for (const t of tracks) { %>\n        <li>\n            <a\n                href=\"#\"\n                class=\"gcore-skin-text-color\"\n                data-item=\"<%= t.id %>\"\n                role=\"menuitemradio\"\n                aria-checked=\"<%= t.id === current %>\"\n            >\n                <%= t.name %>\n            </a>\n        </li>\n    <% } %>\n    <li class=\"current\">\n        <a\n            href=\"#\"\n            class='gcore-skin-text-color gcore-skin-active'\n            data-item=\"-1\"\n            role=\"menuitemradio\"\n            aria-checked=\"<%= current === -1 %>\"\n        >\n            <%= i18n.t('off') %>\n        </a>\n    </li>\n</ul>";
 
-const stringHTML = "<div class=\"cc-line\" id=\"cc-line\">\n  <p></p>\n</div>\n";
+const stringHTML = "<div class=\"gplayer-cc-line\" id=\"gplayer-cc-line\">\n  <p></p>\n</div>\n";
 
 const VERSION = '2.19.14';
 const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected';
-const T = 'plugins.cc';
 /**
  * `PLUGIN` that provides a UI to select the subtitles when available.
  * @beta
@@ -50237,6 +50241,7 @@ const T = 'plugins.cc';
 class ClosedCaptions extends UICorePlugin {
     isPreselectedApplied = false;
     active = false;
+    open = false;
     track = null;
     tracks = [];
     $line = null;
@@ -50258,14 +50263,14 @@ class ClosedCaptions extends UICorePlugin {
     static get version() {
         return VERSION;
     }
-    static template = tmpl(comboboxHTML);
-    static templateString = tmpl(stringHTML);
+    static templateControl = tmpl(comboboxHTML);
+    static templateLine = tmpl(stringHTML);
     /**
      * @internal
      */
     get attributes() {
         return {
-            class: 'media-control-cc',
+            class: 'media-control-cc media-control-dd__wrap',
         };
     }
     /**
@@ -50273,8 +50278,8 @@ class ClosedCaptions extends UICorePlugin {
      */
     get events() {
         return {
-            'click #cc-select li a': 'onItemSelect',
-            'click #cc-button': 'toggleMenu',
+            'click #gplayer-cc-menu [data-item]': 'onItemSelect',
+            'click #gplayer-cc-button': 'toggleMenu',
         };
     }
     get preselectedLanguage() {
@@ -50287,13 +50292,12 @@ class ClosedCaptions extends UICorePlugin {
      */
     bindEvents() {
         this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
-        this.listenTo(this.core, Events$1.CORE_RESIZE, this.playerResize);
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
     }
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.render); // TODO mount to media control
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.mount);
         this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, () => {
             this.hideMenu();
         });
@@ -50304,10 +50308,15 @@ class ClosedCaptions extends UICorePlugin {
         });
     }
     onContainerChanged() {
-        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_FULLSCREEN, this.playerResize);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_FULLSCREEN, this.onContainerResize);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_RESIZE, this.onContainerResize);
         this.listenTo(this.core.activeContainer, 'container:advertisement:start', this.onStartAd);
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_SUBTITLE_AVAILABLE, this.onSubtitleAvailable);
         this.listenTo(this.core.activePlayback, Events$1.PLAYBACK_SUBTITLE_CHANGED, this.onSubtitleChanged);
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_CLICK, () => {
+            // TODO test
+            this.hideMenu();
+        });
         // fix for iOS
         const video = this.core.activePlayback.el;
         assert(video, 'video element is required');
@@ -50324,6 +50333,7 @@ class ClosedCaptions extends UICorePlugin {
     }
     onSubtitleAvailable() {
         this.applyTracks();
+        this.mount();
     }
     onSubtitleChanged({ id }) {
         if (id === -1) {
@@ -50372,7 +50382,7 @@ class ClosedCaptions extends UICorePlugin {
         this.show();
         this.stopListening(this.core.activeContainer, 'container:advertisement:finish', this.onFinishAd);
     }
-    playerResize() {
+    onContainerResize() {
         const shouldShow = this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
             this.track &&
@@ -50384,6 +50394,7 @@ class ClosedCaptions extends UICorePlugin {
         }
         try {
             this.resizeFont();
+            this.clampPopup();
         }
         catch (error) {
         }
@@ -50393,7 +50404,10 @@ class ClosedCaptions extends UICorePlugin {
      */
     hide() {
         this.active = false;
+        this.open = false;
         this.renderIcon();
+        this.$el.find('#gplayer-cc-menu').hide();
+        this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false');
         this.$line.hide();
         if (this.tracks) {
             for (const t of this.tracks) {
@@ -50436,17 +50450,18 @@ class ClosedCaptions extends UICorePlugin {
         if (!this.core.activeContainer) {
             return this;
         }
-        if (!this.shouldRender()) {
-            return this;
-        }
-        const mediaControl = this.core.getPlugin('media_control');
-        this.$el.html(ClosedCaptions.template({ tracks: this.tracks, i18n: this.core.i18n }));
-        this.$el.find('#cc-select').hide();
-        this.core.activeContainer.$el.find('#cc-line').remove();
-        this.$line = $(ClosedCaptions.templateString());
+        this.$el.html(ClosedCaptions.templateControl({
+            tracks: this.tracks ?? [],
+            i18n: this.core.i18n,
+            current: this.track?.id ?? -1,
+        }));
+        this.$el.find('#gplayer-cc-menu').hide();
+        this.open = false;
+        this.core.activeContainer.$el.find('#gplayer-cc-line').remove();
+        this.$line = $(ClosedCaptions.templateLine());
         this.resizeFont();
+        this.clampPopup();
         this.core.activeContainer.$el.append(this.$line);
-        mediaControl.slot('cc', this.$el);
         this.updateSelection();
         this.renderIcon();
         return this;
@@ -50460,8 +50475,10 @@ class ClosedCaptions extends UICorePlugin {
         this.updateSelection();
     }
     onItemSelect(event) {
-        const id = event.target.dataset.ccSelect ?? '-1';
-        localStorage.setItem(LOCAL_STORAGE_CC_ID, id);
+        // event.target does not exist for some reason in tests
+        const id = (event.target ?? event.currentTarget).dataset?.item ??
+            '-1';
+        localStorage.setItem(LOCAL_STORAGE_CC_ID, id); // TODO store language instead
         this.selectItem(this.findById(Number(id)));
         this.hideMenu();
         return false;
@@ -50478,25 +50495,33 @@ class ClosedCaptions extends UICorePlugin {
         }
     }
     hideMenu() {
-        this.$el.find('#cc-select').hide();
+        this.open = false;
+        this.$el.find('#gplayer-cc-menu').hide();
+        this.$el.find('#gplayer-cc-button').attr('aria-expanded', 'false');
     }
     toggleMenu() {
-        trace(`${T} toggleMenu`, { display: this.$el.find('#cc-select').css('display') });
         this.core
             .getPlugin('media_control')
             .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name);
-        this.$el.find('#cc-select').toggle();
-        // TODO hold state, add aria-expanded to the button, add active state to the button
+        this.open = !this.open;
+        if (this.open) {
+            this.$el.find('#gplayer-cc-menu').show();
+        }
+        else {
+            this.$el.find('#gplayer-cc-menu').hide();
+        }
+        this.$el.find('#gplayer-cc-button').attr('aria-expanded', this.open);
     }
     itemElement(id) {
-        return this.$el.find(`#cc-select li a[data-cc-select="${id}"]`).parent();
+        // TODO fix semantically
+        return this.$el.find(`#gplayer-cc-menu [data-item="${id}"]`).parent();
     }
     allItemElements() {
-        return this.$('#cc-select li');
+        return this.$el.find('#gplayer-cc-menu li'); // TODO fix semantically
     }
     selectSubtitles() {
         const trackId = this.track ? this.track.id : -1;
-        this.core.activePlayback.closedCaptionsTrackId = trackId;
+        this.core.activePlayback.closedCaptionsTrackId = trackId; // TODO test
     }
     getSubtitleText(track) {
         const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
@@ -50506,6 +50531,7 @@ class ClosedCaptions extends UICorePlugin {
             for (const cue of cues) {
                 if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
                     lines.push(cue.getCueAsHTML().textContent);
+                    // TODO break?
                 }
             }
         }
@@ -50531,19 +50557,31 @@ class ClosedCaptions extends UICorePlugin {
         this.allItemElements()
             .removeClass('current')
             .find('a')
-            .removeClass('gcore-skin-active');
-        trace(`${T} highlightCurrentSubtitles`, {
-            track: this.track?.id,
-        });
+            .removeClass('gcore-skin-active')
+            .attr('aria-checked', 'false');
         const currentLevelElement = this.itemElement(this.track ? this.track.id : -1);
         currentLevelElement
             .addClass('current')
             .find('a')
-            .addClass('gcore-skin-active');
+            .addClass('gcore-skin-active')
+            .attr('aria-checked', 'true');
     }
     renderIcon() {
+        // render both icons at once
         const icon = this.active ? subtitlesOnIcon : subtitlesOffIcon;
-        this.$el.find('span.cc-text').html(icon);
+        this.$el.find('#gplayer-cc-button').html(icon);
+    }
+    clampPopup() {
+        const availableHeight = this.core
+            .getPlugin('media_control')
+            .getAvailablePopupHeight();
+        this.$el.find('#gplayer-cc-menu').css('max-height', `${availableHeight}px`);
+    }
+    mount() {
+        if (this.shouldRender()) {
+            const mediaControl = this.core.getPlugin('media_control');
+            mediaControl.slot('cc', this.$el);
+        }
     }
 }