@gcorevideo/player 2.28.16 → 2.28.18

package/dist/core.js

@@ -51319,7 +51319,7 @@ class Player {
     }
 }
 
-var version$1 = "2.28.16";
+var version$1 = "2.28.18";
 
 var packages = {
 	"node_modules/@clappr/core": {

package/dist/index.css

@@ -122,6 +122,100 @@
 .gplayer-lite-btn::-moz-focus-inner {
   border: 0;
   padding: 0;
+}.big-mute-icon-wrapper[data-big-mute] {
+  position: absolute;
+  z-index: 9998;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: calc(100% - 50px);
+  margin: 0 auto;
+  opacity: 0.75;
+  transition: opacity 0.1s ease;
+  pointer-events: auto;
+}
+.big-mute-icon-wrapper[data-big-mute].hide {
+  display: none;
+}
+.big-mute-icon-wrapper[data-big-mute]:hover {
+  cursor: pointer;
+}
+
+.big-mute-icon[data-big-mute-icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  width: 120px;
+  height: 120px;
+  border: 2px solid white;
+  border-radius: 50%;
+  filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+  filter: alpha(opacity=60);
+  opacity: 1;
+  box-shadow: 0 0 1px 0 white;
+  background: rgba(240, 243, 247, 0.9411764706);
+  z-index: 10000;
+}
+.big-mute-icon[data-big-mute-icon] svg {
+  margin-left: 5px;
+  width: 80px;
+  height: 80px;
+}
+.big-mute-icon[data-big-mute-icon] svg path {
+  fill: #1f1e1e !important;
+}
+.big-mute-icon[data-big-mute-icon]:hover {
+  background: rgba(240, 243, 247, 0.8784313725);
+}
+.big-mute-icon[data-big-mute-icon]:hover svg path {
+  fill: #151515 !important;
+}.media-control-skin-1 .media-control-item.media-control-gear {
+  order: 99;
+}
+.media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
+  position: absolute;
+  right: 16px;
+  bottom: 52px;
+  width: 250px;
+  min-height: 48px;
+  z-index: 9999;
+  border-radius: 4px;
+  box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
+}
+.media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
+  padding: 8px 0;
+}
+.media-control-skin-1 .media-control-item.media-control-gear .gear-option {
+  margin: 0;
+  text-align: left;
+  line-height: 22px;
+  padding: 5px 14px;
+  width: 250px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+}
+.media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
+  flex: 24px 0 0;
+  height: 24px;
+}
+.media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
+  visibility: hidden;
+  display: inline-block;
+}
+.media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
+  flex: 0 1 100%;
+}
+.media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
+  flex: 0 0 14px;
+  height: 24px;
+}
+.media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
+  flex: 1 0 auto;
 }*,
 :focus,
 :visited {
@@ -185,100 +279,6 @@
 }
 .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
   display: inline;
-}.media-control-skin-1 .media-control-item.media-control-gear {
-  order: 99;
-}
-.media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
-  position: absolute;
-  right: 16px;
-  bottom: 52px;
-  width: 250px;
-  min-height: 48px;
-  z-index: 9999;
-  border-radius: 4px;
-  box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
-}
-.media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
-  padding: 8px 0;
-}
-.media-control-skin-1 .media-control-item.media-control-gear .gear-option {
-  margin: 0;
-  text-align: left;
-  line-height: 22px;
-  padding: 5px 14px;
-  width: 250px;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-}
-.media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
-  flex: 24px 0 0;
-  height: 24px;
-}
-.media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
-  visibility: hidden;
-  display: inline-block;
-}
-.media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
-  flex: 0 1 100%;
-}
-.media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
-  flex: 0 0 14px;
-  height: 24px;
-}
-.media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
-  flex: 1 0 auto;
-}.big-mute-icon-wrapper[data-big-mute] {
-  position: absolute;
-  z-index: 9998;
-  background-color: transparent;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  height: calc(100% - 50px);
-  margin: 0 auto;
-  opacity: 0.75;
-  transition: opacity 0.1s ease;
-  pointer-events: auto;
-}
-.big-mute-icon-wrapper[data-big-mute].hide {
-  display: none;
-}
-.big-mute-icon-wrapper[data-big-mute]:hover {
-  cursor: pointer;
-}
-
-.big-mute-icon[data-big-mute-icon] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: center;
-  width: 120px;
-  height: 120px;
-  border: 2px solid white;
-  border-radius: 50%;
-  filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-  filter: alpha(opacity=60);
-  opacity: 1;
-  box-shadow: 0 0 1px 0 white;
-  background: rgba(240, 243, 247, 0.9411764706);
-  z-index: 10000;
-}
-.big-mute-icon[data-big-mute-icon] svg {
-  margin-left: 5px;
-  width: 80px;
-  height: 80px;
-}
-.big-mute-icon[data-big-mute-icon] svg path {
-  fill: #1f1e1e !important;
-}
-.big-mute-icon[data-big-mute-icon]:hover {
-  background: rgba(240, 243, 247, 0.8784313725);
-}
-.big-mute-icon[data-big-mute-icon]:hover svg path {
-  fill: #151515 !important;
 }:root {
   --primary-background-color: #000;
   --secondary-background-color: #262626;
@@ -1557,6 +1557,39 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
   100% {
     color: #B80000;
   }
+}.seek-time {
+  position: absolute;
+  white-space: nowrap;
+  height: 20px;
+  line-height: 20px;
+  font-size: 0;
+  left: -100%;
+  bottom: 55px;
+  background-color: rgba(2, 2, 2, 0.5);
+  z-index: 9999;
+  transition: opacity 0.1s ease;
+}
+.seek-time.hidden {
+  opacity: 0;
+}
+.seek-time .seek-time__pos {
+  display: inline-block;
+  color: white;
+  font-size: 10px;
+  padding-left: 7px;
+  padding-right: 7px;
+  vertical-align: top;
+}
+.seek-time .seek-time__duration {
+  display: inline-block;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 10px;
+  padding-right: 7px;
+  vertical-align: top;
+}
+.seek-time .seek-time__duration::before {
+  content: "|";
+  margin-right: 7px;
 }.player-poster {
   display: flex;
   justify-content: center;
@@ -1591,66 +1624,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
 }
 .player-poster .play-wrapper svg path {
   fill: #fff;
-}.quality-levels li.disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-.quality-levels li.current {
-  background-color: #000;
-}.container-with-poster-clickable .mc-skip-time {
-  height: 0;
-}
-
-.mc-skip-time {
-  position: absolute;
-  width: 100%;
-  height: calc(100% - 50px);
-  z-index: 9998;
-  background-color: transparent;
-  font-family: Roboto, "Open Sans", Arial, sans-serif;
-}
-.mc-skip-time .skip-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-}
-.mc-skip-time .skip-container .skip-item {
-  flex: 1 0 0px;
-  height: 100%;
-}.seek-time {
-  position: absolute;
-  white-space: nowrap;
-  height: 20px;
-  line-height: 20px;
-  font-size: 0;
-  left: -100%;
-  bottom: 55px;
-  background-color: rgba(2, 2, 2, 0.5);
-  z-index: 9999;
-  transition: opacity 0.1s ease;
-}
-.seek-time.hidden {
-  opacity: 0;
-}
-.seek-time .seek-time__pos {
-  display: inline-block;
-  color: white;
-  font-size: 10px;
-  padding-left: 7px;
-  padding-right: 7px;
-  vertical-align: top;
-}
-.seek-time .seek-time__duration {
-  display: inline-block;
-  color: rgba(255, 255, 255, 0.5);
-  font-size: 10px;
-  padding-right: 7px;
-  vertical-align: top;
-}
-.seek-time .seek-time__duration::before {
-  content: "|";
-  margin-right: 7px;
 }.share_plugin[data-share] {
   pointer-events: auto;
   z-index: 5;
@@ -1734,6 +1707,12 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
   display: inline-block;
   margin-right: 5px;
   cursor: pointer;
+}.quality-levels li.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.quality-levels li.current {
+  background-color: #000;
 }.spinner-three-bounce[data-spinner] {
   position: absolute;
   width: 70px;
@@ -1882,6 +1861,27 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
 }
 .scrub-thumbnails .backdrop .carousel img {
   width: auto;
+}.container-with-poster-clickable .mc-skip-time {
+  height: 0;
+}
+
+.mc-skip-time {
+  position: absolute;
+  width: 100%;
+  height: calc(100% - 50px);
+  z-index: 9998;
+  background-color: transparent;
+  font-family: Roboto, "Open Sans", Arial, sans-serif;
+}
+.mc-skip-time .skip-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.mc-skip-time .skip-container .skip-item {
+  flex: 1 0 0px;
+  height: 100%;
 }.player-logo[data-logo] {
   position: absolute;
   z-index: 2;

package/dist/index.embed.js

@@ -49802,7 +49802,7 @@ const AUTO = -1;
 const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-const T$7 = 'playback.hls';
+const T$8 = 'playback.hls';
 class HlsPlayback extends BasePlayback {
     _ccIsSetup = false;
     _ccTracksUpdated = false;
@@ -50126,7 +50126,7 @@ class HlsPlayback extends BasePlayback {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$7} _recover failed to recover`, {
+            trace(`${T$8} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -50212,7 +50212,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$7} _onHLSJSError`, {
+        trace(`${T$8} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -50260,7 +50260,7 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$7} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$8} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
@@ -50273,7 +50273,7 @@ class HlsPlayback extends BasePlayback {
                             evt,
                             data,
                         });
-                        trace(`${T$7} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$8} _onHLSJSError trying to recover from media error`, {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
@@ -50303,7 +50303,7 @@ class HlsPlayback extends BasePlayback {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$7} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$8} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -50780,7 +50780,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$6 = 'gplayer';
+const T$7 = 'gplayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -51130,7 +51130,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$6} onReady`, {
+            trace(`${T$7} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -51562,7 +51562,7 @@ const INITIAL_SETTINGS = {
     default: [],
     seekEnabled: false,
 };
-const T$5 = 'plugins.media_control';
+const T$6 = 'plugins.media_control';
 /**
  * Extended events for the {@link MediaControl} plugin
  * @public
@@ -51798,8 +51798,8 @@ class MediaControl extends UICorePlugin {
         this.listenTo(this.core, Events$1.CORE_FULLSCREEN, this.show);
         this.listenTo(this.core, Events$1.CORE_OPTIONS_CHANGE, this.configure);
         this.listenTo(this.core, Events$1.CORE_RESIZE, this.playerResize);
-        this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
-        this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
+        // this.listenTo(this.core, 'core:advertisement:start', this.onStartAd)
+        // this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd)
         // const has360 = this.core?.getPlugin('video_360');
         // if (Browser.isiOS && has360) {
         //   this.container?.el.addEventListener('click', e => {
@@ -51825,6 +51825,9 @@ 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);
@@ -51841,6 +51844,9 @@ class MediaControl extends UICorePlugin {
         });
         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
@@ -51849,12 +51855,16 @@ class MediaControl extends UICorePlugin {
         this.userDisabled = true; // TODO distinguish between user and system (e.g., unplayable) disabled?
         this.hide();
         this.unbindKeyEvents();
-        this.$el.hide(); // TODO why?
+        this.$el.hide();
     }
     /**
      * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
      */
     enable() {
+        trace(`${T$6} enable`, {
+            chromeless: this.options.chromeless,
+            userDisabled: this.userDisabled,
+        });
         if (this.options.chromeless) {
             return;
         }
@@ -52008,7 +52018,7 @@ class MediaControl extends UICorePlugin {
         this.$el.removeClass('w370');
         this.$el.removeClass('w270');
         this.verticalVolume = false;
-        trace(`${T$5} playerResize`, {
+        trace(`${T$6} playerResize`, {
             width: this.container.$el.width(),
             height: this.container.$el.height(),
             hideVolumeBar: this.options.hideVolumeBar});
@@ -52186,7 +52196,7 @@ class MediaControl extends UICorePlugin {
         else {
             this.hideVolumeId = setTimeout(() => {
                 this.hideVolumeId = null;
-                trace(`${T$5} hideVolumeBar`, {
+                trace(`${T$6} hideVolumeBar`, {
                     volumeBarContainer: !!this.$volumeBarContainer,
                 });
                 this.$volumeBarContainer?.addClass('volume-bar-hide');
@@ -52258,15 +52268,24 @@ class MediaControl extends UICorePlugin {
         this.setSeekPercentage(pos);
     }
     setUserKeepVisible() {
+        trace(`${T$6} setUserKeepVisible`, {
+            userKeepVisible: this.userKeepVisible,
+        });
         this.userKeepVisible = true;
     }
-    resetUserKeepVisible() {
+    resetUserKeepVisible = () => {
+        trace(`${T$6} resetUserKeepVisible`, {
+            userKeepVisible: this.userKeepVisible,
+        });
         this.userKeepVisible = false;
-    }
+    };
     isVisible() {
         return !this.$el.hasClass('media-control-hide');
     }
     show(event) {
+        trace(`${T$6} show`, {
+            disabled: this.disabled,
+            disableControlPanel: this.options.disableControlPanel});
         if (this.disabled || this.options.disableControlPanel) {
             return;
         }
@@ -52293,7 +52312,7 @@ class MediaControl extends UICorePlugin {
         this.updateCursorStyle(showing);
     }
     hide(delay = 0) {
-        trace(`${T$5} hide`, {
+        trace(`${T$6} hide`, {
             visible: this.isVisible(),
             disabled: this.disabled,
             hideMediaControl: this.options.hideMediaControl,
@@ -52704,23 +52723,6 @@ class MediaControl extends UICorePlugin {
         }
         this.resetUserKeepVisible();
     }
-    // TODO manage by the ads plugin
-    onStartAd() {
-        // this.advertisementPlaying = true
-        this.disable();
-    }
-    // TODO manage by the ads plugin
-    onFinishAd() {
-        // this.advertisementPlaying = false
-        this.enable();
-    }
-    // TODO remove
-    hideControllAds() {
-        if (this.container.advertisement &&
-            this.container.advertisement.type !== 'idle') {
-            this.hide();
-        }
-    }
     static getPageX(event) {
         return getPageX(event);
     }
@@ -52764,6 +52766,7 @@ class MediaControl extends UICorePlugin {
     delayHide(e) {
         this.hide(this.options.hideMediaControlDelay || DEFAULT_HIDE_DELAY);
     }
+    clickaway = clickaway(this.resetUserKeepVisible);
 }
 MediaControl.extend = function (properties) {
     return extend(MediaControl, properties);
@@ -52804,6 +52807,22 @@ function mergeElements(a, b) {
         return acc;
     }, a);
 }
+function clickaway(callback) {
+    let handler = (event) => { };
+    return (node) => {
+        window.removeEventListener('click', handler);
+        if (!node) {
+            return;
+        }
+        handler = (event) => {
+            if (!node.contains(event.target)) {
+                callback();
+                window.removeEventListener('click', handler);
+            }
+        };
+        window.addEventListener('click', handler);
+    };
+}
 
 const VERSION$6 = '2.22.4';
 // const T = 'plugins.audiotracks'
@@ -53002,7 +53021,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$4 = 'plugins.big_mute_button';
+const T$5 = '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.
@@ -53065,7 +53084,7 @@ class BigMuteButton extends UICorePlugin {
         if (autoPlay) {
             this.autoPlay = true;
         }
-        trace(`${T$4} onPlay`, {
+        trace(`${T$5} onPlay`, {
             autoPlay: this.autoPlay});
         if (this.autoPlay && !wasMuted && volume === 0) {
             this.mount();
@@ -55623,11 +55642,13 @@ const initSpeedTest = (customMetrics) => {
                 }
             }
         };
-        // getElementById('dlText').textContent = DEFAULT_DOWNLOAD_SPEED;
-        await fetch('https://iam.gcdn.co/info/json')
+        const myinfoUrl = 'https://gcore.com/.well-known/cdn-debug/json';
+        // await fetch('https://iam.gcdn.co/info/json')
+        await fetch(myinfoUrl)
             .then(r => r.json())
             .then(data => {
-            const country = data['Server Country code'].toLowerCase();
+            // const country = data['Server Country code'].toLowerCase();
+            const country = getCountryCodeFromClientHeaders(data.client_headers);
             const server = serversList.find(s => s.country === country) || serversList[0];
             if (!server) {
                 throw new Error('Failed to select a server');
@@ -55673,6 +55694,15 @@ function rankConnectionSpeed(dlSpeed) {
     }
     return 0;
 }
+function getCountryCodeFromClientHeaders(clientHeaders) {
+    if (clientHeaders && clientHeaders['country']) {
+        const m = clientHeaders['country'].match(/'code':\s*'([A-Za-z]{2})'/);
+        if (m) {
+            return m[1].toLowerCase();
+        }
+    }
+    return 'lu';
+}
 
 insertStyle(":root {\n  --primary-background-color: #000;\n  --secondary-background-color: #262626;\n  --primary-text-color: #fff;\n  --secondary-text-color: #fff4f2;\n  --hover-text-color: #f9b090;\n  --speedtest-red: #df564d;\n  --speedtest-orange: #df934d;\n  --speedtest-yellow: #dfd04d;\n  --speedtest-light-green: #c2df4d;\n  --speedtest-green: #73df4d;\n}\n\n.clappr-nerd-stats {\n  cursor: default;\n}\n.clappr-nerd-stats .stats-box {\n  position: absolute;\n  display: inline-block;\n  bottom: 52px;\n  right: 0;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  padding: 0 10px 12px;\n  margin: 0;\n  line-height: 20px;\n  font-size: 12px;\n  font-weight: 500;\n  background: var(--primary-background-color);\n  color: #fff;\n  z-index: 20000;\n  overflow: auto;\n  max-width: 100%;\n}\n.clappr-nerd-stats .stats-box-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100%;\n  height: 32px;\n  background: var(--primary-background-color);\n}\n.clappr-nerd-stats .stats-box-top .close-button {\n  position: absolute;\n  right: 12px;\n  top: 10px;\n  display: block;\n  width: 12px;\n  height: 12px;\n}\n.clappr-nerd-stats .stats-box-top .close-button svg path {\n  fill: var(--primary-text-color);\n}\n.clappr-nerd-stats .stats-box-top .close-button:hover svg path {\n  fill: var(--hover-text-color);\n}\n.clappr-nerd-stats .stats-box-main {\n  overflow: hidden;\n  margin-top: 44px;\n  display: flex;\n  flex-wrap: wrap;\n}\n.clappr-nerd-stats .stats-box-main ul {\n  flex: 0 1 1fr;\n  min-width: 200px;\n}\n.clappr-nerd-stats .stats-box.wide {\n  width: 820px;\n}\n.clappr-nerd-stats .stats-box ul, .clappr-nerd-stats .stats-box li {\n  list-style-type: none;\n}\n.clappr-nerd-stats .stats-box ul div, .clappr-nerd-stats .stats-box li div {\n  padding-left: 2px;\n  padding-right: 2px;\n  background: var(--primary-background-color);\n  gap: 10px;\n}\n.clappr-nerd-stats .stats-box ul {\n  padding: 5px;\n  width: 200px;\n  flex: 0 1 50%;\n}\n.clappr-nerd-stats .stats-box ul li {\n  position: relative;\n  padding: 0 5px;\n  text-align: left;\n}\n.clappr-nerd-stats .stats-box ul li.canvas-wrapper {\n  padding: 0;\n}\n.clappr-nerd-stats .stats-box ul li.canvas-wrapper canvas {\n  width: 100%;\n}\n.clappr-nerd-stats .stats-box ul li:nth-child(2n) {\n  background: var(--secondary-background-color);\n}\n.clappr-nerd-stats .stats-box ul li:nth-child(2n) div {\n  background: var(--secondary-background-color);\n}\n.clappr-nerd-stats .stats-box ul li.title {\n  text-align: center;\n  font-weight: bold;\n  padding-bottom: 4px;\n  font-size: 14px;\n}\n.clappr-nerd-stats .stats-box ul li div {\n  margin: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.desktop .clappr-nerd-stats .stats-box.narrow {\n  width: 250px;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow ul {\n  width: 100%;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary {\n  padding: 0 5px;\n  height: auto;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-block {\n  width: 100%;\n  flex-direction: column;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-block .speedtest-summary-subblock {\n  width: 100%;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-block .speedtest-summary-subblock-content {\n  width: 100%;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-header {\n  padding-top: 12px;\n  height: 38px;\n  text-align: center;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-quality-header {\n  text-align: center;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-footer {\n  height: 80px;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-footer-about-link {\n  bottom: 0;\n  left: 0;\n}\n.desktop .clappr-nerd-stats .stats-box.narrow .speedtest-footer .speedtest-footer-refresh {\n  inset: 50% auto auto 50%;\n  transform: translate(-50%, -50%);\n}\n\n.speed-test-button {\n  margin: 10px 0 0;\n  color: #000;\n}\n\n.speed-test {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9999;\n}\n.speed-test .speed-test-header {\n  width: 100%;\n  height: 32px;\n}\n.speed-test .speed-test-header .close-speed-test {\n  float: right;\n  margin-right: 5px;\n  line-height: 32px;\n  cursor: pointer;\n  color: var(--primary-text-color);\n}\n.speed-test .speed-test-header .close-speed-test:hover {\n  color: var(--hover-text-color);\n}\n\n.settings-button {\n  float: right;\n  margin: 0 12px 0 0;\n  height: 40px;\n  width: 24px;\n  border: none;\n  padding: 0;\n}\n\n.speedtest-summary {\n  width: 100%;\n  border-top: 1px solid var(--secondary-background-color) !important;\n  border-bottom: 1px solid var(--secondary-background-color) !important;\n  display: flex !important;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: space-between;\n}\n.speedtest-summary .speedtest-summary-header {\n  width: 100%;\n  padding-top: 4px;\n  text-align: left;\n  height: 32px;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n}\n.speedtest-summary .speedtest-summary-block {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n.speedtest-summary .speedtest-summary-block .speedtest-summary-subblock {\n  width: 50%;\n  margin-top: 4px;\n  margin-bottom: 12px;\n}\n.speedtest-summary .speedtest-summary-block .speedtest-summary-subblock-content {\n  padding: 2px;\n  width: 248px;\n  max-width: 100%;\n}\n\n.speedtest-quality {\n  width: 100%;\n  height: 36px;\n  display: flex !important;\n  flex-direction: column !important;\n  justify-content: space-between !important;\n}\n.speedtest-quality .speedtest-quality-header {\n  font-size: 12px;\n  height: 20px;\n  border-left: 2px solid var(--secondary-background-color) !important;\n  background-color: var(--secondary-background-color);\n  text-align: left;\n}\n.speedtest-quality-content {\n  width: 100%;\n  margin-top: 8px;\n  height: 8px;\n  display: flex !important;\n  flex-direction: row !important;\n  align-items: stretch !important;\n  justify-content: space-between;\n}\n.speedtest-quality-content-item {\n  width: 18.8%;\n  background-color: #fff;\n}\n.speedtest-quality-content-item.speedtest-quality-value-1 {\n  background-color: var(--speedtest-red);\n}\n.speedtest-quality-content-item.speedtest-quality-value-2 {\n  background-color: var(--speedtest-orange);\n}\n.speedtest-quality-content-item.speedtest-quality-value-3 {\n  background-color: var(--speedtest-yellow);\n}\n.speedtest-quality-content-item.speedtest-quality-value-4 {\n  background-color: var(--speedtest-light-green);\n}\n.speedtest-quality-content-item.speedtest-quality-value-5 {\n  background-color: var(--speedtest-green);\n}\n\n.speedtest-footer {\n  position: relative;\n  float: left;\n  width: 100%;\n  height: 30px;\n  line-height: 16px;\n}\n.speedtest-footer-about-link {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  color: var(--secondary-text-color);\n  text-decoration: underline !important;\n}\n.speedtest-footer-about-link:hover {\n  color: var(--hover-text-color);\n}\n.speedtest-footer .speedtest-footer-refresh {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  color: var(--secondary-text-color);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.speedtest-footer .speedtest-footer-refresh svg path {\n  fill: var(--secondary-text-color);\n}\n.speedtest-footer .speedtest-footer-refresh:hover {\n  color: var(--hover-text-color);\n}\n.speedtest-footer .speedtest-footer-refresh:hover svg path {\n  fill: var(--hover-text-color);\n}\n\n.mobile .clappr-nerd-stats .stats-box {\n  position: fixed;\n  height: auto;\n  width: auto;\n  inset: 0;\n  min-width: 100vw;\n  padding-bottom: 4px;\n  padding-left: 4px;\n  padding-right: 4px;\n}\n.mobile .clappr-nerd-stats .stats-box-top {\n  position: fixed;\n}\n.mobile .clappr-nerd-stats .stats-box-main ul {\n  flex: 0 1 50%;\n}\n\n@media only screen and (orientation: portrait) {\n  .mobile .speedtest-summary {\n    padding: 0 5px;\n    height: auto;\n  }\n  .mobile .speedtest-summary-block {\n    width: 100%;\n    flex-direction: column;\n  }\n  .mobile .speedtest-summary-block .speedtest-summary-subblock {\n    width: 100%;\n  }\n  .mobile .speedtest-summary-block .speedtest-summary-subblock-content {\n    width: 100%;\n  }\n  .mobile .speedtest-summary-header {\n    padding-top: 12px;\n    height: 38px;\n    text-align: center;\n  }\n  .mobile .speedtest-quality-header {\n    text-align: center;\n  }\n  .mobile .speedtest-footer .speedtest-footer-refresh {\n    inset: 50% auto auto 50%;\n    transform: translate(-50%, -50%);\n  }\n}\n@media only screen and (orientation: landscape) {\n  .mobile .clappr-nerd-stats .stats-box-main ul {\n    flex-basis: 1fr;\n  }\n}\n@media only screen and (min-width: 1100px) {\n  .fullscreen .clappr-nerd-stats .stats-box {\n    top: unset;\n  }\n}");
 
@@ -55754,7 +55784,7 @@ const PLAYBACK_NAMES = {
     hls: 'HLS.js',
     html5_video: 'Native',
 };
-// const T = 'plugins.nerd_stats'
+const T$4 = 'plugins.nerd_stats';
 /**
  * `PLUGIN` that displays useful statistics regarding the playback as well as the network quality estimation.
  * @public
@@ -55891,6 +55921,9 @@ class NerdStats extends UICorePlugin {
         return super.destroy();
     }
     toggle = () => {
+        trace(`${T$4} toggle`, {
+            open: this.open,
+        });
         if (this.open) {
             this.hide();
         }
@@ -55900,7 +55933,7 @@ class NerdStats extends UICorePlugin {
     };
     show() {
         this.$el.show();
-        this.statsBoxElem.scrollTop(this.statsBoxElem.scrollTop());
+        this.statsBoxElem.scrollTop(this.statsBoxElem?.scrollTop());
         this.open = true;
         initSpeedTest(this.speedtestMetrics)
             .then(() => {