@gcorevideo/player 2.28.28 → 2.28.30

package/dist/index.embed.js

@@ -12692,6 +12692,7 @@ var PlaybackEvents;
 // https://github.com/clappr/clappr/blob/8752995ea439321ac7ca3cd35e8c64de7a3c3d17/LICENSE
 const AUTO$1 = -1;
 const { now: now$2 } = Utils;
+const T$8 = 'playback.dash';
 class DashPlayback extends BasePlayback {
     _levels = [];
     _currentLevel = AUTO$1;
@@ -12728,6 +12729,8 @@ class DashPlayback extends BasePlayback {
     startChangeQuality = false;
     manifestInfo = null;
     _timeUpdateTimer = null;
+    oncueenter = null;
+    oncueexit = null;
     get name() {
         return 'dash';
     }
@@ -12770,6 +12773,7 @@ class DashPlayback extends BasePlayback {
         }
     }
     get _startTime() {
+        // TODO review
         if (this._playbackType === Playback.LIVE &&
             this._playlistType !== 'EVENT') {
             return this._extrapolatedStartTime;
@@ -12824,12 +12828,12 @@ class DashPlayback extends BasePlayback {
                 streaming: {
                     text: {
                         defaultEnabled: false,
+                        dispatchForManualRendering: true,
                     },
                 },
             }, this.options.dash);
             this._dash.updateSettings(settings);
         }
-        assert.ok(this.el instanceof HTMLMediaElement, 'el must be an HTMLMediaElement');
         this._dash.attachView(this.el);
         this._dash.setAutoPlay(false);
         this._dash.attachSource(this.options.src);
@@ -12873,6 +12877,19 @@ class DashPlayback extends BasePlayback {
                 this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack$1(e.newMediaInfo));
             }
         });
+        this._dash.on(_.events.CUE_ENTER, (e) => {
+            this.oncueenter?.({
+                end: e.end,
+                id: e.id,
+                start: e.start,
+                text: e.text,
+            });
+        });
+        this._dash.on(_.events.CUE_EXIT, (e) => {
+            this.oncueexit?.({
+                id: e.id,
+            });
+        });
     }
     render() {
         this._ready();
@@ -12961,6 +12978,7 @@ class DashPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onPlaybackError = (event) => {
+        trace(`${T$8} _onPlaybackError`, { type: event.type, code: event.error.code, message: event.error.message });
     };
     _onDASHJSSError = (event) => {
         this._stopTimeUpdateTimer();
@@ -13079,7 +13097,14 @@ class DashPlayback extends BasePlayback {
             this._dash.off(_.events.ERROR, this._onDASHJSSError);
             this._dash.off(_.events.PLAYBACK_ERROR, this._onPlaybackError);
             this._dash.off(_.events.MANIFEST_LOADED, this.getDuration);
+            const tracks = this._dash.getTracksFor('text');
+            tracks.forEach(track => {
+                if (track.id) {
+                    this._dash.removeExternalSubtitleById(track.id);
+                }
+            });
             this._dash.reset();
+            this._dash.destroy();
             this._dash = null;
         }
     }
@@ -13173,6 +13198,31 @@ class DashPlayback extends BasePlayback {
         super._handleTextTrackChange();
         this._dash?.setTextTrack(this.closedCaptionsTrackId);
     }
+    setTextTrack(id) {
+        this._dash?.setTextTrack(id);
+    }
+    /**
+     * @override
+     */
+    get closedCaptionsTracks() {
+        const tt = this.getTextTracks();
+        return tt;
+    }
+    getTextTracks() {
+        return this._dash?.getTracksFor('text').map((t, index) => ({
+            id: index,
+            name: getTextTrackLabel(t) || "",
+            track: {
+                id: index,
+                label: getTextTrackLabel(t) || "",
+                language: t.lang,
+                mode: "hidden",
+            },
+        })) || [];
+    }
+}
+function getTextTrackLabel(t) {
+    return t.labels.find((l) => !l.lang || l.lang === t.lang)?.text;
 }
 DashPlayback.canPlay = function (resource, mimeType) {
     if (!isDashSource(resource, mimeType)) {
@@ -49827,11 +49877,9 @@ const CLAPPR_VERSION$1 = '0.13.0';
 const { now } = Utils;
 const AUTO = -1;
 const DEFAULT_RECOVER_ATTEMPTS = 16;
-Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-const T$8 = 'playback.hls';
+const T$7 = 'playback.hls';
 class HlsPlayback extends BasePlayback {
-    _ccIsSetup = false;
     _ccTracksUpdated = false;
     _currentFragment = null;
     _currentLevel = null;
@@ -49855,6 +49903,10 @@ class HlsPlayback extends BasePlayback {
     _recoveredDecodingError = false;
     _segmentTargetDuration = null;
     _timeUpdateTimer = null;
+    oncueenter = null;
+    oncueexit = null;
+    cues = []; // TODO check the list size and use BST if needed
+    currentCueId = null;
     /**
      * @internal
      */
@@ -50049,7 +50101,7 @@ class HlsPlayback extends BasePlayback {
             return;
         }
         this._manifestParsed = false;
-        this._ccIsSetup = false;
+        // this._ccIsSetup = false
         this._ccTracksUpdated = false;
         this._setInitialState();
         this._hls.destroy();
@@ -50060,6 +50112,7 @@ class HlsPlayback extends BasePlayback {
             maxBufferLength: 2,
             maxMaxBufferLength: 4,
             autoStartLoad: false,
+            renderTextTracksNatively: false,
         }, this.options.playback.hlsjsConfig);
         this._hls = new Hls(config);
     }
@@ -50073,7 +50126,7 @@ class HlsPlayback extends BasePlayback {
         if (!this._hls) {
             return;
         }
-        this._hls.once(Hls.Events.MEDIA_ATTACHED, () => {
+        this._hls.once(Events.MEDIA_ATTACHED, () => {
             assert.ok(this._hls, 'HLS.js is not initialized');
             this.options.hlsPlayback.preload && this._hls.loadSource(this.options.src);
         });
@@ -50088,25 +50141,29 @@ class HlsPlayback extends BasePlayback {
             this.el.removeEventListener('playing', onPlaying);
         };
         this.el.addEventListener('playing', onPlaying);
-        this._hls.on(Hls.Events.MANIFEST_PARSED, () => {
+        this._hls.on(Events.MANIFEST_PARSED, () => {
             this._manifestParsed = true;
-            this._hls.startLoad(-1);
+            this.reload();
         });
-        this._hls.on(Hls.Events.LEVEL_LOADED, (evt, data) => {
+        this._hls.on(Events.LEVEL_LOADED, (evt, data) => {
             this._updatePlaybackType(evt, data);
         });
-        this._hls.on(Hls.Events.LEVEL_UPDATED, (evt, data) => this._onLevelUpdated(evt, data));
-        this._hls.on(Hls.Events.LEVEL_SWITCHING, (evt, data) => this._onLevelSwitch(evt, data));
-        this._hls.on(Hls.Events.LEVEL_SWITCHED, (evt, data) => this._onLevelSwitched(evt, data));
-        this._hls.on(Hls.Events.FRAG_CHANGED, (evt, data) => this._onFragmentChanged(evt, data));
-        this._hls.on(Hls.Events.FRAG_LOADED, (evt, data) => this._onFragmentLoaded(evt, data));
-        this._hls.on(Hls.Events.FRAG_PARSING_METADATA, (evt, data) => this._onFragmentParsingMetadata(evt, data));
-        this._hls.on(Hls.Events.ERROR, (evt, data) => this._onHLSJSError(evt, data));
-        // this._hls.on(HLSJS.Events.SUBTITLE_TRACK_LOADED, () =>
-        //   this._onSubtitleLoaded(),
-        // )
+        this._hls.on(Events.LEVEL_UPDATED, (evt, data) => this._onLevelUpdated(evt, data));
+        this._hls.on(Events.LEVEL_SWITCHING, (evt, data) => this._onLevelSwitch(evt, data));
+        this._hls.on(Events.LEVEL_SWITCHED, (evt, data) => this._onLevelSwitched(evt, data));
+        this._hls.on(Events.ERROR, (evt, data) => this._onHLSJSError(evt, data));
         this._hls.on(Events.AUDIO_TRACKS_UPDATED, (evt, data) => this._onAudioTracksUpdated(evt, data));
         this._hls.on(Events.AUDIO_TRACK_SWITCHED, (evt, data) => this._onAudioTrackSwitched(evt, data));
+        this._hls.on(Events.CUES_PARSED, (evt, data) => {
+            data.cues?.forEach((cue) => {
+                this.cues.push({
+                    id: cue.id,
+                    start: cue.startTime,
+                    end: cue.endTime,
+                    text: cue.text,
+                });
+            });
+        });
         this.bindCustomListeners();
     }
     bindCustomListeners() {
@@ -50125,13 +50182,6 @@ class HlsPlayback extends BasePlayback {
             requestedEventName && this._hls.off(requestedEventName, item.callback);
         });
     }
-    _onFragmentParsingMetadata(evt, data) {
-        // @ts-ignore
-        this.trigger(Events$1.Custom.PLAYBACK_FRAGMENT_PARSING_METADATA, {
-            evt,
-            data,
-        });
-    }
     render() {
         this._ready();
         return super.render();
@@ -50153,7 +50203,7 @@ class HlsPlayback extends BasePlayback {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$8} _recover failed to recover`, {
+            trace(`${T$7} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -50213,6 +50263,7 @@ class HlsPlayback extends BasePlayback {
         this.dvrEnabled && this._updateDvr(time < this.getDuration() - 3);
         time += this._startTime;
         this.el.currentTime = time;
+        this.triggerCues();
     }
     seekToLivePoint() {
         this.seek(this.getDuration());
@@ -50239,7 +50290,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$8} _onHLSJSError`, {
+        trace(`${T$7} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -50261,20 +50312,20 @@ class HlsPlayback extends BasePlayback {
             if (this._recoverAttemptsRemaining > 0) {
                 this._recoverAttemptsRemaining -= 1;
                 switch (data.type) {
-                    case Hls.ErrorTypes.NETWORK_ERROR:
+                    case ErrorTypes.NETWORK_ERROR:
                         switch (data.details) {
                             // The following network errors cannot be recovered with HLS.startLoad()
                             // For more details, see https://github.com/video-dev/hls.js/blob/master/doc/design.md#error-detection-and-handling
                             // For "level load" fatal errors, see https://github.com/video-dev/hls.js/issues/1138
                             // TODO test handling of these errors
-                            case Hls.ErrorDetails.MANIFEST_LOAD_ERROR:
-                            case Hls.ErrorDetails.MANIFEST_LOAD_TIMEOUT:
-                            case Hls.ErrorDetails.MANIFEST_PARSING_ERROR:
+                            case ErrorDetails.MANIFEST_LOAD_ERROR:
+                            case ErrorDetails.MANIFEST_LOAD_TIMEOUT:
+                            case ErrorDetails.MANIFEST_PARSING_ERROR:
                             // TODO sort out the errors below, perhaps some of them are recoverable
-                            case Hls.ErrorDetails.LEVEL_LOAD_ERROR:
-                            case Hls.ErrorDetails.LEVEL_LOAD_TIMEOUT:
-                            case Hls.ErrorDetails.FRAG_LOAD_ERROR:
-                            case Hls.ErrorDetails.FRAG_LOAD_TIMEOUT:
+                            case ErrorDetails.LEVEL_LOAD_ERROR:
+                            case ErrorDetails.LEVEL_LOAD_TIMEOUT:
+                            case ErrorDetails.FRAG_LOAD_ERROR:
+                            case ErrorDetails.FRAG_LOAD_TIMEOUT:
                                 Log.error('hlsjs: unrecoverable network fatal error.', {
                                     evt,
                                     data,
@@ -50287,20 +50338,20 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$8} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$7} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
-                                this._hls?.startLoad();
+                                this.reload();
                                 break;
                         }
                         break;
-                    case Hls.ErrorTypes.MEDIA_ERROR:
+                    case ErrorTypes.MEDIA_ERROR:
                         Log.warn('hlsjs: trying to recover from media error.', {
                             evt,
                             data,
                         });
-                        trace(`${T$8} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$7} _onHLSJSError trying to recover from media error`, {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
@@ -50330,15 +50381,20 @@ class HlsPlayback extends BasePlayback {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$8} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$7} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
         }
     }
+    reload() {
+        this.cues = [];
+        this.currentCueId = null;
+        this._hls?.startLoad(-1);
+    }
     _keyIsDenied(data) {
-        return (data.type === Hls.ErrorTypes.NETWORK_ERROR &&
-            data.details === Hls.ErrorDetails.KEY_LOAD_ERROR &&
+        return (data.type === ErrorTypes.NETWORK_ERROR &&
+            data.details === ErrorDetails.KEY_LOAD_ERROR &&
             data.response &&
             data.response.code &&
             data.response.code >= 400);
@@ -50356,6 +50412,7 @@ class HlsPlayback extends BasePlayback {
         }
         this._lastTimeUpdate = update;
         this.trigger(Events$1.PLAYBACK_TIMEUPDATE, update, this.name);
+        this.triggerCues();
     }
     _onDurationChange() {
         const duration = this.getDuration();
@@ -50394,6 +50451,20 @@ class HlsPlayback extends BasePlayback {
         };
         this.trigger(Events$1.PLAYBACK_PROGRESS, progress, buffered);
     }
+    triggerCues() {
+        const currentTime = this.getCurrentTime();
+        // const cues = Object.values(this.cues)
+        // TODO build a search tree
+        const cue = this.cues.find((cue) => currentTime >= cue.start && currentTime <= cue.end);
+        if (cue) {
+            this.currentCueId = cue.id;
+            this.oncueenter?.(cue);
+        }
+        else if (this.currentCueId) {
+            this.oncueexit?.({ id: this.currentCueId });
+            this.currentCueId = null;
+        }
+    }
     load(url) {
         this._stopTimeUpdateTimer();
         this.options.src = url;
@@ -50585,26 +50656,6 @@ class HlsPlayback extends BasePlayback {
         durationChanged && this._onDurationChange();
         startTimeChanged && this._onProgress();
     }
-    _onFragmentChanged(evt, data) {
-        this._currentFragment = data.frag;
-        // @ts-ignore
-        this.trigger(Events$1.Custom.PLAYBACK_FRAGMENT_CHANGED, data);
-    }
-    _onFragmentLoaded(evt, data) {
-        this.trigger(Events$1.PLAYBACK_FRAGMENT_LOADED, data);
-    }
-    // _onSubtitleLoaded() {
-    //   trace(`${T} _onSubtitleLoaded`)
-    //   // This event may be triggered multiple times
-    //   // Setup CC only once (disable CC by default)
-    //   if (!this._ccIsSetup) {
-    //     this.trigger(Events.PLAYBACK_SUBTITLE_AVAILABLE)
-    //     const trackId =
-    //       this._playbackType === Playback.LIVE ? -1 : this.closedCaptionsTrackId
-    //     this.closedCaptionsTrackId = trackId
-    //     this._ccIsSetup = true
-    //   }
-    // }
     _onLevelSwitch(evt, data) {
         if (!this.levels.length) {
             this._fillLevels();
@@ -50675,6 +50726,26 @@ class HlsPlayback extends BasePlayback {
         const track = this._hls.audioTracks[data.id];
         this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack(track));
     }
+    setTextTrack(id) {
+        this._hls.subtitleTrack = id;
+    }
+    /**
+     * @override
+     */
+    get closedCaptionsTracks() {
+        return this.getTextTracks();
+    }
+    getTextTracks() {
+        return this._hls?.subtitleTracks.map((t) => ({
+            id: t.id,
+            name: t.name,
+            track: {
+                id: t.id,
+                label: t.name,
+                language: t.lang,
+            },
+        })) || [];
+    }
 }
 HlsPlayback.canPlay = function (resource, mimeType) {
     if (!isHlsSource(resource, mimeType)) {
@@ -50807,7 +50878,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$7 = 'gplayer';
+const T$6 = 'gplayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -51157,7 +51228,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$7} onReady`, {
+            trace(`${T$6} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -51589,23 +51660,9 @@ 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 .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]::before {\n  content: \"|\";\n  margin-right: 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 .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-scrubber[data-seekbar] {\n  position: absolute;\n  transform: translateX(-50%);\n  top: 0;\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 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 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";
-
-const playIcon = "<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_1564)\">\n    <path d=\"M6 3V20L19.3571 11.5L6 3Z\" fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_28_1564\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
-
-const pauseIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M18.05 3H15.35C14.6057 3 14 3.6057 14 4.35V19.65C14 20.3943 14.6057 21 15.35 21H18.05C18.7943 21 19.4 20.3943 19.4 19.65V4.35C19.4 3.6057 18.7943 3 18.05 3ZM10.4 4.35V19.65C10.4 20.3943 9.7943 21 9.05 21H6.35C5.6057 21 5 20.3943 5 19.65V4.35C5 3.6057 5.6057 3 6.35 3H9.05C9.7943 3 10.4 3.6057 10.4 4.35Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
-
-const stopIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#C9C9C9\" d=\"M4.568 3.86h14.9v16.28h-14.9z\"/>\n</svg>\n";
-
-const volumeMaxIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M14.187 7.71405C13.759 8.06405 13.697 8.69307 14.046 9.12107C14.662 9.87207 15 10.8941 15 11.9961C15 13.0991 14.662 14.1201 14.046 14.8711C13.697 15.2991 13.759 15.9291 14.187 16.2781C14.373 16.4311 14.597 16.5051 14.82 16.5051C15.109 16.5051 15.396 16.3801 15.594 16.1391C16.501 15.0301 17 13.5601 17 11.9961C17 10.4331 16.501 8.96207 15.594 7.85407C15.245 7.42707 14.614 7.36405 14.187 7.71405ZM19.772 5.14408C19.443 4.70008 18.816 4.60907 18.374 4.94007C17.931 5.27007 17.839 5.89605 18.169 6.33905C19.367 7.94705 20 9.90307 20 11.9961C20 14.0891 19.367 16.0451 18.169 17.6531C17.839 18.0971 17.931 18.7231 18.374 19.0531C18.553 19.1871 18.762 19.2511 18.97 19.2511C19.275 19.2511 19.576 19.1121 19.772 18.8491C21.23 16.8921 22 14.5231 22 11.9961C22 9.47007 21.23 7.10108 19.772 5.14408ZM12 3.85108V20.1421C12 20.4881 11.793 20.7971 11.473 20.9291C11.368 20.9721 11.258 20.9921 11.149 20.9921C10.926 20.9921 10.708 20.9031 10.544 20.7371L6.317 16.4431C6.038 16.1591 5.648 15.9961 5.249 15.9961H3.5C2.673 15.9961 2 15.3231 2 14.4961V9.49607C2 8.66907 2.673 7.99607 3.5 7.99607H5.249C5.648 7.99607 6.038 7.83308 6.317 7.54908L10.544 3.25507C10.787 3.00807 11.151 2.93206 11.473 3.06406C11.793 3.19506 12 3.50408 12 3.85108Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
-
-const volumeMuteIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M5.50025 8.00025C4.67125 8.00025 4.00025 8.67225 4.00025 9.50025V14.5003C4.00025 15.3283 4.67125 16.0003 5.50025 16.0003H7.24824C7.65024 16.0003 8.03627 16.1613 8.31727 16.4483L12.5443 20.7413C12.7083 20.9073 12.9262 20.9963 13.1492 20.9963C13.2572 20.9963 13.3672 20.9763 13.4722 20.9333C13.7932 20.8013 14.0003 20.4923 14.0003 20.1462V16.3283C14.0003 16.1963 13.9473 16.0683 13.8543 15.9753L6.02528 8.14625C5.93228 8.05325 5.80425 8.00025 5.67225 8.00025H5.50025ZM14.0003 3.85426C14.0003 3.50826 13.7932 3.19927 13.4722 3.06727C13.1502 2.93627 12.7873 3.01226 12.5443 3.25926L9.33827 6.51527C9.14627 6.71127 9.14626 7.02625 9.34126 7.22025L13.5733 11.4522C13.7313 11.6102 14.0003 11.4982 14.0003 11.2752V3.85426ZM20.8543 20.8543C20.7563 20.9513 20.6283 21.0003 20.5003 21.0003C20.3723 21.0003 20.2442 20.9513 20.1462 20.8543L3.14625 3.85426C2.95125 3.65826 2.95125 3.34225 3.14625 3.14625C3.34225 2.95125 3.65826 2.95125 3.85426 3.14625L20.8543 20.1462C21.0493 20.3422 21.0493 20.6583 20.8543 20.8543Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
-
-const fullscreenOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M17.1999 4.85023H21.1498V8.80019C21.1498 9.0786 21.2604 9.34577 21.4574 9.54268C21.6283 9.71365 21.8523 9.81956 22.0906 9.84449L22.0965 9.85041H22.2001C22.4785 9.85041 22.7456 9.73981 22.9426 9.5429C23.1395 9.346 23.2501 9.07883 23.2501 8.80042V3.80024C23.2501 3.52182 23.1395 3.25465 22.9426 3.05775L22.7658 3.23453L22.9426 3.05775C22.7456 2.86085 22.4785 2.75024 22.2001 2.75024H17.1999C16.8247 2.75024 16.478 2.95039 16.2905 3.27526C16.103 3.6001 16.103 4.00037 16.2905 4.32521C16.478 4.65009 16.8247 4.85023 17.1999 4.85023Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n  <path\n    d=\"M1.79999 9.85017H1.90368L1.90961 9.84423C2.14785 9.81928 2.37176 9.71338 2.54271 9.54243C2.73961 9.34553 2.85021 9.07836 2.85021 8.79995V4.84999H6.80017C7.17536 4.84999 7.52201 4.64984 7.70953 4.32497C7.89703 4.00013 7.89703 3.59986 7.70953 3.27502C7.52201 2.95014 7.17537 2.75 6.80017 2.75H1.79999C1.52158 2.75 1.25441 2.8606 1.05751 3.05751C0.860605 3.25441 0.75 3.52158 0.75 3.79999V8.80017C0.75 9.07859 0.860605 9.34576 1.05751 9.54266C1.25441 9.73956 1.52158 9.85017 1.79999 9.85017Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n  <path\n    d=\"M21.1496 18.7498H17.1996C16.8245 18.7498 16.4778 18.95 16.2903 19.2748C16.1028 19.5997 16.1028 19.9999 16.2903 20.3248C16.4778 20.6497 16.8244 20.8498 17.1996 20.8498H21.5963L21.596 20.85H22.1996C22.478 20.85 22.7452 20.7394 22.9421 20.5425C23.139 20.3456 23.2496 20.0785 23.2496 19.8V14.7999C23.2496 14.4247 23.0494 14.078 22.7246 13.8905C22.3997 13.703 21.9995 13.703 21.6746 13.8905C21.3497 14.078 21.1496 14.4247 21.1496 14.7999V18.7498Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n  <path\n    d=\"M2.85003 18.7498H6.79999C7.17518 18.7498 7.52183 18.95 7.70935 19.2748C7.89685 19.5997 7.89685 19.9999 7.70935 20.3248C7.52183 20.6497 7.17519 20.8498 6.79999 20.8498H2.40337L2.40359 20.85H1.80004C1.52163 20.85 1.25446 20.7394 1.05756 20.5425C0.860653 20.3456 0.750049 20.0785 0.750049 19.8V14.7999C0.750049 14.4247 0.950194 14.078 1.27507 13.8905C1.5999 13.703 2.00018 13.703 2.32501 13.8905C2.64989 14.078 2.85003 14.4247 2.85003 14.7999V18.7498Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n</svg>\n";
-
-const fullscreenOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M15.1568 23.15C15.7408 23.15 16.2142 22.6766 16.2142 22.0926V17.1947C16.2142 16.7253 16.5948 16.3447 17.0642 16.3447H21.9621C22.5461 16.3447 23.0195 15.8713 23.0195 15.2873C23.0195 14.7034 22.5461 14.2299 21.9621 14.2299H16.0642C14.9832 14.2299 14.0995 15.1137 14.0995 16.1947V22.0926C14.0995 22.6766 14.5729 23.15 15.1568 23.15Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n  <path\n    d=\"M1.90739 10.7701H7.80528C8.88627 10.7701 9.77006 9.88627 9.77006 8.80528V2.90739C9.77006 2.32341 9.29665 1.85 8.71267 1.85C8.12869 1.85 7.65528 2.32341 7.65528 2.90739V7.80528C7.65528 8.27472 7.27472 8.65528 6.80528 8.65528H1.90739C1.32341 8.65528 0.85 9.12869 0.85 9.71267C0.85 10.2966 1.32341 10.7701 1.90739 10.7701Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n  <path\n    d=\"M8.71261 23.15C9.29659 23.15 9.77 22.6766 9.77 22.0926V16.1947C9.77 15.1137 8.88621 14.2299 7.80521 14.2299H1.90733C1.32335 14.2299 0.849939 14.7034 0.849939 15.2873C0.849939 15.8713 1.32335 16.3447 1.90733 16.3447H6.80521C7.27466 16.3447 7.65521 16.7253 7.65521 17.1947V22.0926C7.65521 22.6766 8.12862 23.15 8.71261 23.15Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n  <path\n    d=\"M21.9621 10.7701C22.5461 10.7701 23.0195 10.2966 23.0195 9.71267C23.0195 9.12869 22.5461 8.65528 21.9621 8.65528H17.0642C16.5948 8.65528 16.2142 8.27472 16.2142 7.80528V2.90739C16.2142 2.32341 15.7408 1.85 15.1568 1.85C14.5729 1.85 14.0995 2.32341 14.0995 2.90739V8.80528C14.0995 9.88627 14.9832 10.7701 16.0642 10.7701H21.9621Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n</svg>\n";
+function isMobile() {
+    return Browser.isMobile;
+}
 
 /**
  *
@@ -51647,6 +51704,24 @@ function mediaControlClickaway(callback) {
     };
 }
 
+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]::before {\n  content: \"|\";\n  margin-right: 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 .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-scrubber[data-seekbar] {\n  position: absolute;\n  transform: translateX(-50%);\n  top: 0;\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 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 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";
+
+const playIcon = "<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_1564)\">\n    <path d=\"M6 3V20L19.3571 11.5L6 3Z\" fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_28_1564\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
+
+const pauseIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M18.05 3H15.35C14.6057 3 14 3.6057 14 4.35V19.65C14 20.3943 14.6057 21 15.35 21H18.05C18.7943 21 19.4 20.3943 19.4 19.65V4.35C19.4 3.6057 18.7943 3 18.05 3ZM10.4 4.35V19.65C10.4 20.3943 9.7943 21 9.05 21H6.35C5.6057 21 5 20.3943 5 19.65V4.35C5 3.6057 5.6057 3 6.35 3H9.05C9.7943 3 10.4 3.6057 10.4 4.35Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
+
+const stopIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#C9C9C9\" d=\"M4.568 3.86h14.9v16.28h-14.9z\"/>\n</svg>\n";
+
+const volumeMaxIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M14.187 7.71405C13.759 8.06405 13.697 8.69307 14.046 9.12107C14.662 9.87207 15 10.8941 15 11.9961C15 13.0991 14.662 14.1201 14.046 14.8711C13.697 15.2991 13.759 15.9291 14.187 16.2781C14.373 16.4311 14.597 16.5051 14.82 16.5051C15.109 16.5051 15.396 16.3801 15.594 16.1391C16.501 15.0301 17 13.5601 17 11.9961C17 10.4331 16.501 8.96207 15.594 7.85407C15.245 7.42707 14.614 7.36405 14.187 7.71405ZM19.772 5.14408C19.443 4.70008 18.816 4.60907 18.374 4.94007C17.931 5.27007 17.839 5.89605 18.169 6.33905C19.367 7.94705 20 9.90307 20 11.9961C20 14.0891 19.367 16.0451 18.169 17.6531C17.839 18.0971 17.931 18.7231 18.374 19.0531C18.553 19.1871 18.762 19.2511 18.97 19.2511C19.275 19.2511 19.576 19.1121 19.772 18.8491C21.23 16.8921 22 14.5231 22 11.9961C22 9.47007 21.23 7.10108 19.772 5.14408ZM12 3.85108V20.1421C12 20.4881 11.793 20.7971 11.473 20.9291C11.368 20.9721 11.258 20.9921 11.149 20.9921C10.926 20.9921 10.708 20.9031 10.544 20.7371L6.317 16.4431C6.038 16.1591 5.648 15.9961 5.249 15.9961H3.5C2.673 15.9961 2 15.3231 2 14.4961V9.49607C2 8.66907 2.673 7.99607 3.5 7.99607H5.249C5.648 7.99607 6.038 7.83308 6.317 7.54908L10.544 3.25507C10.787 3.00807 11.151 2.93206 11.473 3.06406C11.793 3.19506 12 3.50408 12 3.85108Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
+
+const volumeMuteIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M5.50025 8.00025C4.67125 8.00025 4.00025 8.67225 4.00025 9.50025V14.5003C4.00025 15.3283 4.67125 16.0003 5.50025 16.0003H7.24824C7.65024 16.0003 8.03627 16.1613 8.31727 16.4483L12.5443 20.7413C12.7083 20.9073 12.9262 20.9963 13.1492 20.9963C13.2572 20.9963 13.3672 20.9763 13.4722 20.9333C13.7932 20.8013 14.0003 20.4923 14.0003 20.1462V16.3283C14.0003 16.1963 13.9473 16.0683 13.8543 15.9753L6.02528 8.14625C5.93228 8.05325 5.80425 8.00025 5.67225 8.00025H5.50025ZM14.0003 3.85426C14.0003 3.50826 13.7932 3.19927 13.4722 3.06727C13.1502 2.93627 12.7873 3.01226 12.5443 3.25926L9.33827 6.51527C9.14627 6.71127 9.14626 7.02625 9.34126 7.22025L13.5733 11.4522C13.7313 11.6102 14.0003 11.4982 14.0003 11.2752V3.85426ZM20.8543 20.8543C20.7563 20.9513 20.6283 21.0003 20.5003 21.0003C20.3723 21.0003 20.2442 20.9513 20.1462 20.8543L3.14625 3.85426C2.95125 3.65826 2.95125 3.34225 3.14625 3.14625C3.34225 2.95125 3.65826 2.95125 3.85426 3.14625L20.8543 20.1462C21.0493 20.3422 21.0493 20.6583 20.8543 20.8543Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
+
+const fullscreenOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M17.1999 4.85023H21.1498V8.80019C21.1498 9.0786 21.2604 9.34577 21.4574 9.54268C21.6283 9.71365 21.8523 9.81956 22.0906 9.84449L22.0965 9.85041H22.2001C22.4785 9.85041 22.7456 9.73981 22.9426 9.5429C23.1395 9.346 23.2501 9.07883 23.2501 8.80042V3.80024C23.2501 3.52182 23.1395 3.25465 22.9426 3.05775L22.7658 3.23453L22.9426 3.05775C22.7456 2.86085 22.4785 2.75024 22.2001 2.75024H17.1999C16.8247 2.75024 16.478 2.95039 16.2905 3.27526C16.103 3.6001 16.103 4.00037 16.2905 4.32521C16.478 4.65009 16.8247 4.85023 17.1999 4.85023Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n  <path\n    d=\"M1.79999 9.85017H1.90368L1.90961 9.84423C2.14785 9.81928 2.37176 9.71338 2.54271 9.54243C2.73961 9.34553 2.85021 9.07836 2.85021 8.79995V4.84999H6.80017C7.17536 4.84999 7.52201 4.64984 7.70953 4.32497C7.89703 4.00013 7.89703 3.59986 7.70953 3.27502C7.52201 2.95014 7.17537 2.75 6.80017 2.75H1.79999C1.52158 2.75 1.25441 2.8606 1.05751 3.05751C0.860605 3.25441 0.75 3.52158 0.75 3.79999V8.80017C0.75 9.07859 0.860605 9.34576 1.05751 9.54266C1.25441 9.73956 1.52158 9.85017 1.79999 9.85017Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n  <path\n    d=\"M21.1496 18.7498H17.1996C16.8245 18.7498 16.4778 18.95 16.2903 19.2748C16.1028 19.5997 16.1028 19.9999 16.2903 20.3248C16.4778 20.6497 16.8244 20.8498 17.1996 20.8498H21.5963L21.596 20.85H22.1996C22.478 20.85 22.7452 20.7394 22.9421 20.5425C23.139 20.3456 23.2496 20.0785 23.2496 19.8V14.7999C23.2496 14.4247 23.0494 14.078 22.7246 13.8905C22.3997 13.703 21.9995 13.703 21.6746 13.8905C21.3497 14.078 21.1496 14.4247 21.1496 14.7999V18.7498Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n  <path\n    d=\"M2.85003 18.7498H6.79999C7.17518 18.7498 7.52183 18.95 7.70935 19.2748C7.89685 19.5997 7.89685 19.9999 7.70935 20.3248C7.52183 20.6497 7.17519 20.8498 6.79999 20.8498H2.40337L2.40359 20.85H1.80004C1.52163 20.85 1.25446 20.7394 1.05756 20.5425C0.860653 20.3456 0.750049 20.0785 0.750049 19.8V14.7999C0.750049 14.4247 0.950194 14.078 1.27507 13.8905C1.5999 13.703 2.00018 13.703 2.32501 13.8905C2.64989 14.078 2.85003 14.4247 2.85003 14.7999V18.7498Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n</svg>\n";
+
+const fullscreenOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M15.1568 23.15C15.7408 23.15 16.2142 22.6766 16.2142 22.0926V17.1947C16.2142 16.7253 16.5948 16.3447 17.0642 16.3447H21.9621C22.5461 16.3447 23.0195 15.8713 23.0195 15.2873C23.0195 14.7034 22.5461 14.2299 21.9621 14.2299H16.0642C14.9832 14.2299 14.0995 15.1137 14.0995 16.1947V22.0926C14.0995 22.6766 14.5729 23.15 15.1568 23.15Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n  <path\n    d=\"M1.90739 10.7701H7.80528C8.88627 10.7701 9.77006 9.88627 9.77006 8.80528V2.90739C9.77006 2.32341 9.29665 1.85 8.71267 1.85C8.12869 1.85 7.65528 2.32341 7.65528 2.90739V7.80528C7.65528 8.27472 7.27472 8.65528 6.80528 8.65528H1.90739C1.32341 8.65528 0.85 9.12869 0.85 9.71267C0.85 10.2966 1.32341 10.7701 1.90739 10.7701Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n  <path\n    d=\"M8.71261 23.15C9.29659 23.15 9.77 22.6766 9.77 22.0926V16.1947C9.77 15.1137 8.88621 14.2299 7.80521 14.2299H1.90733C1.32335 14.2299 0.849939 14.7034 0.849939 15.2873C0.849939 15.8713 1.32335 16.3447 1.90733 16.3447H6.80521C7.27466 16.3447 7.65521 16.7253 7.65521 17.1947V22.0926C7.65521 22.6766 8.12862 23.15 8.71261 23.15Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n  <path\n    d=\"M21.9621 10.7701C22.5461 10.7701 23.0195 10.2966 23.0195 9.71267C23.0195 9.12869 22.5461 8.65528 21.9621 8.65528H17.0642C16.5948 8.65528 16.2142 8.27472 16.2142 7.80528V2.90739C16.2142 2.32341 15.7408 1.85 15.1568 1.85C14.5729 1.85 14.0995 2.32341 14.0995 2.90739V8.80528C14.0995 9.88627 14.9832 10.7701 16.0642 10.7701H21.9621Z\"\n    fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n</svg>\n";
+
 // This is a derived work from the {@link https://github.com/clappr/clappr-plugins/tree/ffaa9d27005fa5a8a7c243ffc47eb5655b84b371/src/plugins/media_control | Clappr MediaControl plugin}
 // It is redistributed under the terms of the {@link ../../../../../LICENSE | Apache 2.0} license.
 // Copyright 2014 Globo.com Player authors. All rights reserved.
@@ -51681,7 +51756,7 @@ const INITIAL_SETTINGS = {
     default: [],
     seekEnabled: false,
 };
-const T$6 = 'plugins.media_control';
+const T$5 = 'plugins.media_control';
 /**
  * Extended events for the {@link MediaControl} plugin
  * @public
@@ -51862,8 +51937,6 @@ class MediaControl extends UICorePlugin {
             'touchmove .bar-container[data-seekbar]': 'mousemoveOnSeekBar',
             'mouseleave .bar-container[data-seekbar]': 'mouseleaveOnSeekBar',
             'touchend .bar-container[data-seekbar]': 'mouseleaveOnSeekBar',
-            'mouseenter .media-control-layer[data-controls]': 'setUserKeepVisible',
-            'mouseleave .media-control-layer[data-controls]': 'resetUserKeepVisible',
         };
     }
     get currentSeekPos() {
@@ -51945,7 +52018,6 @@ class MediaControl extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PAUSE, this.changeTogglePlay);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_STOP, this.changeTogglePlay);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_DBLCLICK, this.toggleFullscreen);
-        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_CLICK, () => this.clickaway(this.core.activeContainer.$el[0]));
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PROGRESS, this.updateProgressBar);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_SETTINGSUPDATE, this.updateSettings);
@@ -51959,12 +52031,10 @@ class MediaControl extends UICorePlugin {
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_LOADEDMETADATA, this.onLoadedMetadata);
         this.listenTo(this.core, Events$1.CONTAINER_DESTROYED, () => {
             this.cancelRenderTimer();
+            this.setKeepVisible(false);
         });
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_MOUSE_ENTER, this.show);
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_MOUSE_LEAVE, this.delayHide);
-        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_DESTROYED, () => {
-            this.clickaway(null);
-        });
     }
     /**
      * Hides the media control UI
@@ -51979,7 +52049,7 @@ class MediaControl extends UICorePlugin {
      * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
      */
     enable() {
-        trace(`${T$6} enable`, {
+        trace(`${T$5} enable`, {
             chromeless: this.options.chromeless,
             userDisabled: this.userDisabled,
         });
@@ -52095,7 +52165,7 @@ class MediaControl extends UICorePlugin {
             this.$playPauseToggle?.append(playIcon);
             this.$playStopToggle?.append(playIcon);
             this.trigger(Events$1.MEDIACONTROL_NOTPLAYING);
-            if (Browser.isMobile) {
+            if (isMobile()) {
                 this.show();
             }
         }
@@ -52136,7 +52206,7 @@ class MediaControl extends UICorePlugin {
         this.$el.removeClass('w370');
         this.$el.removeClass('w270');
         this.verticalVolume = false;
-        trace(`${T$6} playerResize`, {
+        trace(`${T$5} playerResize`, {
             width: this.container.$el.width(),
             height: this.container.$el.height(),
             hideVolumeBar: this.options.hideVolumeBar});
@@ -52145,7 +52215,7 @@ class MediaControl extends UICorePlugin {
             if (skinWidth <= 370 || this.options.hideVolumeBar) {
                 this.$el.addClass('w370');
             }
-            if (skinWidth <= 270 && !Browser.isMobile) {
+            if (skinWidth <= 270 && !isMobile()) {
                 this.verticalVolume = true;
                 this.$el.addClass('w270');
             }
@@ -52157,6 +52227,15 @@ class MediaControl extends UICorePlugin {
         this.container.isPlaying() ? this.container.pause() : this.container.play();
         return false;
     }
+    play() {
+        this.container && this.container.play();
+    }
+    pause() {
+        this.container && this.container.pause();
+    }
+    stop() {
+        this.container && this.container.stop();
+    }
     togglePlayStop() {
         this.container.isPlaying()
             ? this.container.stop({ ui: true })
@@ -52257,11 +52336,11 @@ class MediaControl extends UICorePlugin {
         }
     }
     toggleFullscreen() {
-        if (!Browser.isMobile) {
+        if (!isMobile()) {
             this.trigger(Events$1.MEDIACONTROL_FULLSCREEN, this.name);
             this.core.activeContainer.fullscreen();
             this.core.toggleFullscreen();
-            this.resetUserKeepVisible();
+            // this.resetUserKeepVisible()
         }
     }
     onActiveContainerChanged() {
@@ -52382,13 +52461,6 @@ class MediaControl extends UICorePlugin {
         this.core.activeContainer && this.core.activeContainer.seekPercentage(pos);
         this.setSeekPercentage(pos);
     }
-    setUserKeepVisible(e) {
-        this.userKeepVisible = true;
-        this.clickaway(this.core.activeContainer.$el[0]);
-    }
-    resetUserKeepVisible = (e) => {
-        this.userKeepVisible = false;
-    };
     isVisible() {
         return !this.$el.hasClass('media-control-hide');
     }
@@ -52396,7 +52468,6 @@ class MediaControl extends UICorePlugin {
         if (this.disabled || this.options.disableControlPanel) {
             return;
         }
-        const timeout = DEFAULT_HIDE_DELAY;
         const mousePointerMoved = event &&
             event.clientX !== this.lastMouseX &&
             event.clientY !== this.lastMouseY;
@@ -52405,26 +52476,25 @@ class MediaControl extends UICorePlugin {
                 clearTimeout(this.hideId);
                 this.hideId = null;
             }
+            this.hideId = setTimeout(() => this.hide(), DEFAULT_HIDE_DELAY);
             this.$el.show();
             this.trigger(Events$1.MEDIACONTROL_SHOW, this.name);
             this.core.activeContainer?.trigger(Events$1.CONTAINER_MEDIACONTROL_SHOW, this.name);
             this.$el.removeClass('media-control-hide');
-            this.hideId = setTimeout(() => this.hide(), timeout);
             if (event) {
                 this.lastMouseX = event.clientX;
                 this.lastMouseY = event.clientY;
             }
         }
-        const showing = true;
-        this.updateCursorStyle(showing);
+        this.updateCursorStyle(true);
     }
     hide(delay = 0) {
         if (!this.isVisible()) {
             return;
         }
-        const timeout = delay || 2000;
         if (this.hideId !== null) {
             clearTimeout(this.hideId);
+            this.hideId = null;
         }
         if (!this.disabled && this.options.hideMediaControl === false) {
             return;
@@ -52433,7 +52503,7 @@ class MediaControl extends UICorePlugin {
         const hasDraggingAction = this.draggingSeekBar || this.draggingVolumeBar;
         if (!this.disabled &&
             (delay || hasKeepVisibleRequested || hasDraggingAction)) {
-            this.hideId = setTimeout(() => this.hide(), timeout);
+            this.hideId = setTimeout(() => this.hide(), delay || 2000);
         }
         else {
             if (!this.options.controlsDontHide || isFullscreen(this.container.el)) {
@@ -52568,19 +52638,13 @@ class MediaControl extends UICorePlugin {
     /**
      * Set or reset the keep visibility state
      *
-     * Keep visibility state controls whether the media control is hidden automatically after a delay.
-     * Keep visibility prevents the the auto-hide behaviour
+     * Keep visibility state controls whether the media control is hidden automatically after a delay, which is a default behaviour.
      *
      * @param keepVisible - The state
      */
     setKeepVisible(keepVisible) {
         this.keepVisible = keepVisible;
-        if (keepVisible) {
-            this.clickaway(this.core.activeContainer.$el[0]);
-        }
-        else {
-            this.clickaway(null);
-        }
+        this.clickaway(keepVisible ? this.core.activeContainer.$el[0] : null);
     }
     getMountParent(name) {
         switch (name) {
@@ -52661,7 +52725,7 @@ class MediaControl extends UICorePlugin {
         });
     }
     bindKeyEvents() {
-        if (Browser.isMobile || this.options.disableKeyboardShortcuts) {
+        if (isMobile() || this.options.disableKeyboardShortcuts) {
             return;
         }
         this.unbindKeyEvents();
@@ -52748,6 +52812,7 @@ class MediaControl extends UICorePlugin {
      * @internal
      */
     destroy() {
+        this.cancelTimers();
         this.cancelRenderTimer();
         $(document).unbind('mouseup', this.stopDrag);
         $(document).unbind('mousemove', this.updateDrag);
@@ -52756,6 +52821,17 @@ class MediaControl extends UICorePlugin {
         this.unbindKeyEvents();
         return super.destroy();
     }
+    cancelTimers() {
+        if (this.hideId !== null) {
+            clearTimeout(this.hideId);
+            this.hideId = null;
+        }
+        if (this.hideVolumeId !== null) {
+            clearTimeout(this.hideVolumeId);
+            this.hideVolumeId = null;
+        }
+        this.cancelRenderTimer();
+    }
     cancelRenderTimer() {
         if (this.renderTimerId) {
             clearTimeout(this.renderTimerId);
@@ -52785,7 +52861,7 @@ class MediaControl extends UICorePlugin {
         }
         // Video volume cannot be changed with Safari on mobile devices
         // Display mute/unmute icon only if Safari version >= 10
-        if (Browser.isSafari && Browser.isMobile) {
+        if (Browser.isSafari && isMobile()) {
             if (Browser.version < 10) {
                 this.$volumeContainer?.css({ display: 'none' });
             }
@@ -52802,7 +52878,7 @@ class MediaControl extends UICorePlugin {
         setTimeout(() => {
             !this.settings.seekEnabled &&
                 this.$seekBarContainer?.addClass('seek-disabled');
-            !Browser.isMobile &&
+            !isMobile() &&
                 !this.options.disableKeyboardShortcuts &&
                 this.bindKeyEvents();
             this.playerResize({
@@ -52826,6 +52902,7 @@ class MediaControl extends UICorePlugin {
         this.container.fullscreen();
         // TODO: fix after it full screen will be fixed on iOS
         if (Browser.isiOS) {
+            // TODO use isFullscreen utility function
             if (this.core.isFullscreen()) {
                 Fullscreen.cancelFullscreen(this.core.el);
             }
@@ -52836,7 +52913,6 @@ class MediaControl extends UICorePlugin {
         else {
             this.core.toggleFullscreen();
         }
-        this.resetUserKeepVisible();
     }
     static getPageX(event) {
         return getPageX(event);
@@ -52881,7 +52957,7 @@ class MediaControl extends UICorePlugin {
     delayHide() {
         this.hide(this.options.hideMediaControlDelay || DEFAULT_HIDE_DELAY);
     }
-    clickaway = mediaControlClickaway(() => this.resetUserKeepVisible());
+    clickaway = mediaControlClickaway(() => this.setKeepVisible(false));
 }
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
@@ -53130,7 +53206,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$5 = 'plugins.big_mute_button';
+const T$4 = '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.
@@ -53193,7 +53269,7 @@ class BigMuteButton extends UICorePlugin {
         if (autoPlay) {
             this.autoPlay = true;
         }
-        trace(`${T$5} onPlay`, {
+        trace(`${T$4} onPlay`, {
             autoPlay: this.autoPlay});
         if (this.autoPlay && !wasMuted && volume === 0) {
             this.mount();
@@ -55909,7 +55985,7 @@ const PLAYBACK_NAMES = {
     hls: 'HLS.js',
     html5_video: 'Native',
 };
-const T$4 = 'plugins.nerd_stats';
+const T$3 = 'plugins.nerd_stats';
 /**
  * `PLUGIN` that displays useful statistics regarding the playback as well as the network quality estimation.
  * @public
@@ -56046,7 +56122,7 @@ class NerdStats extends UICorePlugin {
         return super.destroy();
     }
     toggle = () => {
-        trace(`${T$4} toggle`, {
+        trace(`${T$3} toggle`, {
             open: this.open,
         });
         if (this.open) {
@@ -56940,7 +57016,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$3 = `plugins.pip`;
+const T$2 = `plugins.pip`;
 /**
  * `PLUGIN` that enables picture-in-picture mode.
  * @public
@@ -57024,7 +57100,7 @@ class PictureInPicture extends UICorePlugin {
         }
     }
     requestPictureInPicture() {
-        trace(`${T$3} requestPictureInPicture`, {
+        trace(`${T$2} requestPictureInPicture`, {
             videoElement: !!this.videoElement,
         });
         this.videoElement.requestPictureInPicture();
@@ -57056,7 +57132,7 @@ const DEFAULT_PLAYBACK_RATES = [
     { value: 2.0, label: '2x' },
 ];
 const DEFAULT_PLAYBACK_RATE = 1;
-const T$2 = 'plugins.playback_rate';
+const T$1 = 'plugins.playback_rate';
 /**
  * `PLUGIN` that allows changing the playback speed of the video.
  * @public
@@ -57163,7 +57239,7 @@ class PlaybackRate extends UICorePlugin {
         this.mount();
     }
     mount() {
-        trace(`${T$2} mount`, {
+        trace(`${T$1} mount`, {
             shouldMount: this.shouldMount(),
         });
         if (!this.shouldMount()) {
@@ -57180,7 +57256,7 @@ class PlaybackRate extends UICorePlugin {
         })));
     }
     onMetaDataLoaded() {
-        trace(`${T$2} onMetaDataLoaded`, {
+        trace(`${T$1} onMetaDataLoaded`, {
             playbackType: this.core.activePlayback.getPlaybackType(),
             dvrEnabled: this.core.activePlayback.dvrEnabled,
         });
@@ -57202,7 +57278,7 @@ class PlaybackRate extends UICorePlugin {
             this.core.activePlayback?.setPlaybackRate(this.selectedRate);
         }
         else {
-            trace(`${T$2} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
+            trace(`${T$1} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
                 selectedRate: this.selectedRate,
             });
         }
@@ -57264,13 +57340,13 @@ class PlaybackRate extends UICorePlugin {
         }
     }
     syncRate() {
-        trace(`${T$2} syncRate`, {
+        trace(`${T$1} syncRate`, {
             selectedRate: this.selectedRate,
         });
         this.core.activePlayback?.setPlaybackRate(this.selectedRate);
     }
     resetPlaybackRate() {
-        trace(`${T$2} resetPlaybackRate`, {
+        trace(`${T$1} resetPlaybackRate`, {
             selectedRate: this.selectedRate,
         });
         this.core.activePlayback?.setPlaybackRate(DEFAULT_PLAYBACK_RATE);
@@ -57305,7 +57381,7 @@ class PlaybackRate extends UICorePlugin {
             ?.label || `x${rate}`);
     }
     highlightCurrentRate() {
-        trace(`${T$2} highlightCurrentRate`, {
+        trace(`${T$1} highlightCurrentRate`, {
             selectedRate: this.selectedRate,
         });
         this.allRateElements().removeClass('current');
@@ -58219,7 +58295,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;
@@ -58392,7 +58468,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,
@@ -58416,7 +58492,7 @@ class SourceController extends CorePlugin {
             }
         });
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PLAY, (_, { autoPlay }) => {
-            trace(`${T$1} onContainerPlay`, {
+            trace(`${T} onContainerPlay`, {
                 currentSource: this.sourcesList[this.currentSourceIndex],
                 retrying: this.active,
             });
@@ -58433,7 +58509,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],
         });
@@ -58446,7 +58522,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({
                         autoPlay: this.autoPlay,
@@ -58485,7 +58561,6 @@ const stringHTML = "<div class=\"gplayer-cc-line\" id=\"gplayer-cc-line\">\n  <p
 
 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.
  * @public
@@ -58580,6 +58655,7 @@ class ClosedCaptions extends UICorePlugin {
     bindEvents() {
         this.listenTo(this.core, Events$1.CORE_READY, this.onCoreReady);
         this.listenTo(this.core, Events$1.CORE_ACTIVE_CONTAINER_CHANGED, this.onContainerChanged);
+        this.listenTo(this.core, Events$1.PLAYBACK_READY, this.onPlaybackReady);
     }
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
@@ -58593,18 +58669,15 @@ class ClosedCaptions extends UICorePlugin {
                 this.hideMenu();
             }
         });
+        this.onPlaybackReady();
     }
     onContainerChanged() {
+        this.tracks = [];
         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, Events$1.CONTAINER_DESTROYED, () => {
             this.clickaway(null);
         });
-        // 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, () => {
@@ -58626,23 +58699,32 @@ class ClosedCaptions extends UICorePlugin {
         });
         this.isPreselectedApplied = false;
     }
+    onPlaybackReady() {
+        this.core.activePlayback.oncueenter = (e) => {
+            this.setSubtitleText(e.text);
+        };
+        this.core.activePlayback.oncueexit = () => {
+            this.clearSubtitleText();
+        };
+    }
     onSubtitleAvailable() {
-        trace(`${T} onSubtitleAvailable`, {
-            tracks: this.core.activePlayback.closedCaptionsTracks.length,
-        });
         this.applyTracks();
         this.mount();
     }
     onSubtitleChanged({ id: changedId }) {
         // ignoring the subtitle selected by the playback engine or user agent
-        const id = this.track?.id ?? -1;
+        const id = this.currentTrack?.id ?? -1;
         if (id === -1) {
             this.clearSubtitleText();
         }
         this.activateTrack(id);
     }
     activateTrack(id) {
-        for (const track of this.tracks) {
+        if (['dash', 'hls'].includes(this.core.activePlayback?.name)) {
+            this.core.activePlayback.setTextTrack(id);
+            return;
+        }
+        for (const track of this.currentTracks) {
             if (track.id === id) {
                 if (this.useNativeSubtitles) {
                     track.track.mode = 'showing';
@@ -58666,43 +58748,26 @@ class ClosedCaptions extends UICorePlugin {
                 };
             }
             else {
-                track.track.oncuechange = null;
+                track.track.oncuechange = () => { };
                 track.track.mode = 'disabled';
             }
         }
     }
     applyTracks() {
         try {
-            this.tracks = this.core.activePlayback.closedCaptionsTracks;
+            // TODO ensure to apply only once
+            this.currentTracks = this.core.activePlayback.closedCaptionsTracks;
             this.applyPreselectedSubtitles();
             this.render();
         }
         catch (error) {
         }
     }
-    // private onStartAd() {
-    //   if (this.active && this.core.activeContainer) {
-    //     this.hide()
-    //     this.listenTo(
-    //       this.core.activeContainer,
-    //       'container:advertisement:finish',
-    //       this.onFinishAd,
-    //     )
-    //   }
-    // }
-    // private onFinishAd() {
-    //   this.show()
-    //   this.stopListening(
-    //     this.core.activeContainer,
-    //     'container:advertisement:finish',
-    //     this.onFinishAd,
-    //   )
-    // }
     onContainerResize() {
         const shouldShow = this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
-            this.track &&
-            this.track.track.mode &&
+            this.currentTrack &&
+            this.currentTrack.track.mode &&
             Browser.isiOS &&
             this.active;
         if (shouldShow) {
@@ -58725,10 +58790,8 @@ class ClosedCaptions extends UICorePlugin {
         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) {
-                t.track.mode = 'hidden';
-            }
+        for (const track of this.currentTracks) {
+            track.track.mode = 'hidden';
         }
     }
     /**
@@ -58739,18 +58802,19 @@ class ClosedCaptions extends UICorePlugin {
         this.renderIcon();
         if (this.core.activeContainer &&
             isFullscreen(this.core.activeContainer.el) &&
-            this.track &&
-            this.track.track.mode &&
+            this.currentTrack &&
+            // this.currentTrack.track.mode &&
             (Browser.isiOS || this.useNativeSubtitles)) {
             this.$line.hide();
-            this.track.track.mode = 'showing';
+            this.currentTrack.track.mode = 'showing';
         }
         else {
             this.$line.show();
         }
     }
     shouldRender() {
-        return this.tracks?.length > 0;
+        // this might not have been fully initialized yet since `render` is called from the parent class constructor
+        return this.currentTracks?.length > 0;
     }
     resizeFont() {
         if (!this.$line) {
@@ -58763,13 +58827,16 @@ class ClosedCaptions extends UICorePlugin {
      * @internal
      */
     render() {
+        if (!this.shouldRender()) {
+            return this;
+        }
         if (!this.core.activeContainer) {
             return this;
         }
         this.$el.html(ClosedCaptions.templateControl({
-            tracks: this.tracks ?? [],
+            tracks: this.currentTracks,
             i18n: this.core.i18n,
-            current: this.track?.id ?? -1,
+            current: this.currentTrack?.id ?? -1,
         }));
         this.$el.find('#gplayer-cc-menu').hide();
         this.open = false;
@@ -58783,11 +58850,11 @@ class ClosedCaptions extends UICorePlugin {
         return this;
     }
     findById(id) {
-        return this.tracks.find((track) => track.id === id) ?? null;
+        return this.currentTracks.find((track) => track.id === id) || null;
     }
     selectItem(item) {
         this.clearSubtitleText();
-        this.track = item;
+        this.currentTrack = item;
         const trackId = item?.id ?? -1;
         this.core.activePlayback.closedCaptionsTrackId = trackId;
         this.updateSelection();
@@ -58844,7 +58911,7 @@ class ClosedCaptions extends UICorePlugin {
         return this.$el.find('#gplayer-cc-menu li'); // TODO fix semantically
     }
     selectSubtitles() {
-        const trackId = this.track ? this.track.id : -1;
+        const trackId = this.currentTrack?.id ?? -1;
         // TODO find out if this is needed
         this.core.activePlayback.closedCaptionsTrackId = trackId;
         // this.core.activePlayback.closedCaptionsTrackId = -1
@@ -58870,7 +58937,7 @@ class ClosedCaptions extends UICorePlugin {
         this.setSubtitleText('');
     }
     updateSelection() {
-        if (!this.track) {
+        if (!this.currentTrack) {
             this.hide();
         }
         else {
@@ -58885,7 +58952,7 @@ class ClosedCaptions extends UICorePlugin {
             .find('a')
             .removeClass('gcore-skin-active')
             .attr('aria-checked', 'false');
-        const currentLevelElement = this.itemElement(this.track ? this.track.id : -1);
+        const currentLevelElement = this.itemElement(this.currentTrack?.id ?? -1);
         currentLevelElement
             .addClass('current')
             .find('a')
@@ -58910,15 +58977,28 @@ class ClosedCaptions extends UICorePlugin {
         }
     }
     get useNativeSubtitles() {
-        if (this.core.activePlayback?.name === 'dash') {
-            return true;
-        }
         const mode = this.core.options.cc?.mode ??
             this.core.options.subtitles?.mode ??
             'custom';
         // TODO or Safari? or iOS?
         return mode === 'native';
     }
+    get currentTracks() {
+        return this.tracks;
+    }
+    get currentTrack() {
+        return this.track;
+    }
+    set currentTrack(track) {
+        this.track = track;
+    }
+    set currentTracks(tracks) {
+        this.tracks = tracks.map(track => ({
+            id: track.id,
+            name: !track.name || track.name === "null" ? track.track.language : track.name,
+            track: track.track,
+        }));
+    }
     clickaway = mediaControlClickaway(() => this.hideMenu());
 }