@gcorevideo/player 2.22.17 → 2.22.20

package/dist/plugins/index.js

@@ -9767,10 +9767,11 @@ function ifError(err) {
 // export const CLAPPR_VERSION: string = process.env.CLAPPR_VERSION || '0.11.3';
 const CLAPPR_VERSION$1 = '0.11.3';
 
-const pluginHtml$7 = "<button data-audiotracks-button class='gcore-skin-button-color' id=\"audiotracks-button\">\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"><%= icon %></span>\n</button>\n<ul class='gcore-skin-bg-color menu hidden' id=\"audiotracks-select\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-audiotracks-select=\"<%= track.id %>\">\n                <%= track.label %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
+const pluginHtml$7 = "<button data-audiotracks-button class='gcore-skin-button-color' id=\"audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"><%= icon %></span>\n</button>\n<ul class='gcore-skin-bg-color menu hidden' id=\"audiotracks-select\" role=\"menu\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-audiotracks-select=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\n                <%= track.label %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
 
 const audioArrow = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"9px\" height=\"6px\" viewBox=\"0 0 9 6\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n     xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->\n  <title>quality-arrow</title>\n  <desc>Created with Sketch.</desc>\n  <defs></defs>\n  <g id=\"quality-arrow\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n    <path\n      d=\"M5.07079194,5.78553848 C4.91457318,5.94277844 4.70551573,6.00941824 4.50028717,5.99893557 C4.2950586,6.00941824 4.08676693,5.94277844 3.92978239,5.78553848 L0.221118462,1.2997069 C-0.0737061539,1.00469478 -0.0737061539,0.526236029 0.221118462,0.231972666 C0.515177299,-0.0630394586 1.23500883,0.00734414472 1.64852907,0.00734414472 L7.77475484,0.00734414472 C8.21201421,0.00734414472 8.48539703,-0.0630394586 8.77945587,0.231972666 C9.07351471,0.526236029 9.07351471,1.00469478 8.77945587,1.2997069 L5.07079194,5.78553848 Z\"\n      fill=\"#FFFFFE\"></path>\n  </g>\n</svg>\n";
 
+// import { trace } from '@gcorevideo/utils'
 const VERSION$7 = '2.22.4';
 // const T = 'plugins.audiotracks'
 /**
@@ -9833,7 +9834,7 @@ class AudioTracks extends UICorePlugin {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, () => {
-            mediaControl.putElement('audiotracks', this.$el);
+            mediaControl.mount('audiotracks', this.$el);
         });
         this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
     }
@@ -9864,18 +9865,18 @@ class AudioTracks extends UICorePlugin {
         if (!this.shouldRender()) {
             return this;
         }
-        this.core.getPlugin('media_control');
         this.$el.html(AudioTracks.template({
             tracks: this.tracks,
             title: this.getTitle(),
             icon: audioArrow,
+            current: this.currentTrack?.id,
         }));
         this.updateText();
         this.highlightCurrentTrack();
         return this;
     }
     onTrackSelect(event) {
-        const id = event.target?.dataset?.audiotracksSelect;
+        const id = event.currentTarget?.dataset?.audiotracksSelect;
         if (id) {
             this.selectAudioTrack(id);
         }
@@ -9884,7 +9885,7 @@ class AudioTracks extends UICorePlugin {
         return false;
     }
     selectAudioTrack(id) {
-        this.startTrackSwitch();
+        this.startTrackSwitching();
         this.core.activeContainer.switchAudioTrack(id);
         this.updateText();
     }
@@ -9892,7 +9893,9 @@ class AudioTracks extends UICorePlugin {
         this.$el.find('#audiotracks-select').addClass('hidden');
     }
     toggleContextMenu() {
-        this.$el.find('#audiotracks-select').toggleClass('hidden');
+        this.$el.find('#audiotracks-select').toggleClass('hidden'); // TODO use plain CSS display: none
+        const open = !this.$el.find('#audiotracks-select').hasClass('hidden'); // TODO hold state
+        this.$el.find('#audiotracks-button').attr('aria-expanded', open);
     }
     buttonElement() {
         return this.$('button');
@@ -9910,7 +9913,7 @@ class AudioTracks extends UICorePlugin {
         }
         return this.currentTrack.label || this.currentTrack.language;
     }
-    startTrackSwitch() {
+    startTrackSwitching() {
         this.buttonElement().addClass('changing');
     }
     updateText() {
@@ -9921,12 +9924,16 @@ class AudioTracks extends UICorePlugin {
     }
     highlightCurrentTrack() {
         this.trackElement().removeClass('current');
-        this.trackElement().find('a').removeClass('gcore-skin-active');
+        this.trackElement()
+            .find('a')
+            .removeClass('gcore-skin-active')
+            .attr('aria-checked', 'false');
         if (this.currentTrack) {
             this.trackElement(this.currentTrack.id)
                 .addClass('current')
                 .find('a')
-                .addClass('gcore-skin-active');
+                .addClass('gcore-skin-active')
+                .attr('aria-checked', 'true');
         }
     }
 }
@@ -10080,7 +10087,7 @@ class BigMuteButton extends UICorePlugin {
     }
 }
 
-const pluginHtml$5 = "<button type=\"button\" class=\"media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon\" id=\"gear-button\">\n    <%= icon %>\n</button>\n<div class=\"gear-wrapper gcore-skin-bg-color\" id=\"gear-options-wrapper\" style=\"display: none;\">\n    <ul class=\"gear-options-list\" id=\"gear-options\"></ul>\n</div>\n";
+const pluginHtml$5 = "<button class=\"media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon\" id=\"gear-button\">\n    <%= icon %>\n</button>\n<div class=\"gear-wrapper gcore-skin-bg-color\" id=\"gear-options-wrapper\" style=\"display:none\">\n    <ul class=\"gear-options-list\" id=\"gear-options\" role=\"menu\"></ul>\n</div>\n";
 
 const gearIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g clip-path=\"url(#clip0_660_1503)\">\n    <path\n      d=\"M19.14 12.94C19.18 12.64 19.2 12.33 19.2 12C19.2 11.68 19.18 11.36 19.13 11.06L21.16 9.47999C21.34 9.33999 21.39 9.06999 21.28 8.86999L19.36 5.54999C19.24 5.32999 18.99 5.25999 18.77 5.32999L16.38 6.28999C15.88 5.90999 15.35 5.58999 14.76 5.34999L14.4 2.80999C14.36 2.56999 14.16 2.39999 13.92 2.39999H10.08C9.83999 2.39999 9.64999 2.56999 9.60999 2.80999L9.24999 5.34999C8.65999 5.58999 8.11999 5.91999 7.62999 6.28999L5.23999 5.32999C5.01999 5.24999 4.76999 5.32999 4.64999 5.54999L2.73999 8.86999C2.61999 9.07999 2.65999 9.33999 2.85999 9.47999L4.88999 11.06C4.83999 11.36 4.79999 11.69 4.79999 12C4.79999 12.31 4.81999 12.64 4.86999 12.94L2.83999 14.52C2.65999 14.66 2.60999 14.93 2.71999 15.13L4.63999 18.45C4.75999 18.67 5.00999 18.74 5.22999 18.67L7.61999 17.71C8.11999 18.09 8.64999 18.41 9.23999 18.65L9.59999 21.19C9.64999 21.43 9.83999 21.6 10.08 21.6H13.92C14.16 21.6 14.36 21.43 14.39 21.19L14.75 18.65C15.34 18.41 15.88 18.09 16.37 17.71L18.76 18.67C18.98 18.75 19.23 18.67 19.35 18.45L21.27 15.13C21.39 14.91 21.34 14.66 21.15 14.52L19.14 12.94ZM12 15.6C10.02 15.6 8.39999 13.98 8.39999 12C8.39999 10.02 10.02 8.39999 12 8.39999C13.98 8.39999 15.6 10.02 15.6 12C15.6 13.98 13.98 15.6 12 15.6Z\"\n      fill=\"#C9C9C9\"/>\n  </g>\n  <defs>\n    <clipPath id=\"clip0_660_1503\">\n      <rect width=\"24\" height=\"24\" fill=\"white\"/>\n    </clipPath>\n  </defs>\n</svg>\n";
 
@@ -10094,7 +10101,7 @@ const VERSION$6 = '2.19.12';
 var GearEvents;
 (function (GearEvents) {
     /**
-     * Use this event to accurately attach an item to the gear menu
+     * Subscribe to this event to accurately attach an item to the gear menu
      */
     GearEvents["RENDERED"] = "rendered";
 })(GearEvents || (GearEvents = {}));
@@ -10306,39 +10313,39 @@ class BottomGear extends UICorePlugin {
     }
     onMediaControlRendered() {
         const mediaControl = this.core.getPlugin('media_control');
-        mediaControl.putElement('gear', this.$el);
+        mediaControl.mount('gear', this.$el);
     }
 }
 
 /**
  * @beta
  */
-var Chronograph;
-(function (Chronograph) {
-    Chronograph["Startup"] = "startup";
-    Chronograph["Watch"] = "watch";
-    Chronograph["Pause"] = "pause";
-    Chronograph["Buffering"] = "buffering";
-    Chronograph["Session"] = "session";
+var ClapprStatsChronograph;
+(function (ClapprStatsChronograph) {
+    ClapprStatsChronograph["Startup"] = "startup";
+    ClapprStatsChronograph["Watch"] = "watch";
+    ClapprStatsChronograph["Pause"] = "pause";
+    ClapprStatsChronograph["Buffering"] = "buffering";
+    ClapprStatsChronograph["Session"] = "session";
     // Latency = 'latency',
-})(Chronograph || (Chronograph = {}));
+})(ClapprStatsChronograph || (ClapprStatsChronograph = {}));
 /**
  * @beta
  */
-var Counter;
-(function (Counter) {
-    Counter["Play"] = "play";
-    Counter["Pause"] = "pause";
-    Counter["Error"] = "error";
-    Counter["Buffering"] = "buffering";
-    Counter["DecodedFrames"] = "decodedFrames";
-    Counter["DroppedFrames"] = "droppedFrames";
-    Counter["Fps"] = "fps";
-    Counter["ChangeLevel"] = "changeLevel";
-    Counter["Seek"] = "seek";
-    Counter["Fullscreen"] = "fullscreen";
-    Counter["DvrUsage"] = "dvrUsage";
-})(Counter || (Counter = {}));
+var ClapprStatsCounter;
+(function (ClapprStatsCounter) {
+    ClapprStatsCounter["Play"] = "play";
+    ClapprStatsCounter["Pause"] = "pause";
+    ClapprStatsCounter["Error"] = "error";
+    ClapprStatsCounter["Buffering"] = "buffering";
+    ClapprStatsCounter["DecodedFrames"] = "decodedFrames";
+    ClapprStatsCounter["DroppedFrames"] = "droppedFrames";
+    ClapprStatsCounter["Fps"] = "fps";
+    ClapprStatsCounter["ChangeLevel"] = "changeLevel";
+    ClapprStatsCounter["Seek"] = "seek";
+    ClapprStatsCounter["Fullscreen"] = "fullscreen";
+    ClapprStatsCounter["DvrUsage"] = "dvrUsage";
+})(ClapprStatsCounter || (ClapprStatsCounter = {}));
 /**
  * @beta
  */
@@ -10390,7 +10397,6 @@ function newMetrics$1() {
             duration: 0,
             currentTime: 0,
         },
-        custom: {},
     };
 }
 
@@ -10400,6 +10406,8 @@ function newMetrics$1() {
  * @remarks
  * This plugin does not render anything and is supposed to be extended or used together with other plugins that actually render something.
  *
+ * @see {@link NerdStats} - a plugin that visualises the playback metrics
+ *
  * Configuration options - {@link ClapprStatsSettings}
  *
  * Events - {@link ClapprStatsEvents}
@@ -10409,11 +10417,11 @@ class ClapprStats extends ContainerPlugin {
     lastDecodedFramesCount = 0;
     metrics = newMetrics$1();
     timers = {
-        [Chronograph.Startup]: 0,
-        [Chronograph.Watch]: 0,
-        [Chronograph.Pause]: 0,
-        [Chronograph.Buffering]: 0,
-        [Chronograph.Session]: 0,
+        [ClapprStatsChronograph.Startup]: 0,
+        [ClapprStatsChronograph.Watch]: 0,
+        [ClapprStatsChronograph.Pause]: 0,
+        [ClapprStatsChronograph.Buffering]: 0,
+        [ClapprStatsChronograph.Session]: 0,
     };
     runEach;
     /**
@@ -10443,15 +10451,10 @@ class ClapprStats extends ContainerPlugin {
     inc(counter) {
         this.metrics.counters[counter] += 1;
     }
-    // _timerHasStarted(timer) {
-    //   return this[`_start${timer}`] !== undefined;
-    // }
     start(timer) {
-        // this[`_start${timer}`] = this._now();
         this.timers[timer] = this.now();
     }
     stop(timer) {
-        // this._metrics.timers[timer] += this._now() - this[`_start${timer}`];
         this.metrics.chrono[timer] += this.now() - this.timers[timer];
     }
     constructor(container) {
@@ -10471,10 +10474,10 @@ class ClapprStats extends ContainerPlugin {
         this.listenTo(this.container, Events.CONTAINER_PAUSE, this.onPause);
         this.listenToOnce(this.container, Events.CONTAINER_STATE_BUFFERING, this.onBuffering);
         this.listenTo(this.container, Events.CONTAINER_SEEK, this.onSeek);
-        this.listenTo(this.container, Events.CONTAINER_ERROR, () => this.inc(Counter.Error));
-        this.listenTo(this.container, Events.CONTAINER_FULLSCREEN, () => this.inc(Counter.Fullscreen));
+        this.listenTo(this.container, Events.CONTAINER_ERROR, () => this.inc(ClapprStatsCounter.Error));
+        this.listenTo(this.container, Events.CONTAINER_FULLSCREEN, () => this.inc(ClapprStatsCounter.Fullscreen));
         this.listenTo(this.container, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, (dvrInUse) => {
-            dvrInUse && this.inc(Counter.DvrUsage);
+            dvrInUse && this.inc(ClapprStatsCounter.DvrUsage);
         });
         this.listenTo(this.container.playback, Events.PLAYBACK_PROGRESS, this.onProgress);
         this.listenTo(this.container.playback, Events.PLAYBACK_TIMEUPDATE, this.onTimeUpdate);
@@ -10502,7 +10505,7 @@ class ClapprStats extends ContainerPlugin {
             last.time = now - last.start;
         }
         this.metrics.extra.bitratesHistory.push({ start: this.now(), bitrate });
-        this.inc(Counter.ChangeLevel);
+        this.inc(ClapprStatsCounter.ChangeLevel);
     }
     stopReporting() {
         this.buildReport();
@@ -10513,31 +10516,31 @@ class ClapprStats extends ContainerPlugin {
     }
     startTimers() {
         this.timerId = setInterval(this.buildReport.bind(this), this.runEach);
-        this.start(Chronograph.Session);
-        this.start(Chronograph.Startup);
+        this.start(ClapprStatsChronograph.Session);
+        this.start(ClapprStatsChronograph.Startup);
     }
     onFirstPlaying() {
         this.listenTo(this.container, Events.CONTAINER_TIMEUPDATE, this.onContainerUpdateWhilePlaying);
-        this.start(Chronograph.Watch);
-        this.stop(Chronograph.Startup);
+        this.start(ClapprStatsChronograph.Watch);
+        this.stop(ClapprStatsChronograph.Startup);
     }
     playAfterPause() {
         this.listenTo(this.container, Events.CONTAINER_TIMEUPDATE, this.onContainerUpdateWhilePlaying);
-        this.stop(Chronograph.Pause);
-        this.start(Chronograph.Watch);
+        this.stop(ClapprStatsChronograph.Pause);
+        this.start(ClapprStatsChronograph.Watch);
     }
     onPlay() {
-        this.inc(Counter.Play);
+        this.inc(ClapprStatsCounter.Play);
     }
     onPause() {
-        this.stop(Chronograph.Watch);
-        this.start(Chronograph.Pause);
-        this.inc(Counter.Pause);
+        this.stop(ClapprStatsChronograph.Watch);
+        this.start(ClapprStatsChronograph.Pause);
+        this.inc(ClapprStatsCounter.Pause);
         this.listenToOnce(this.container, Events.CONTAINER_PLAY, this.playAfterPause);
         this.stopListening(this.container, Events.CONTAINER_TIMEUPDATE, this.onContainerUpdateWhilePlaying);
     }
     onSeek(e) {
-        this.inc(Counter.Seek);
+        this.inc(ClapprStatsCounter.Seek);
         this.metrics.extra.watchHistory.push([e * 1000, e * 1000]);
     }
     onTimeUpdate(e) {
@@ -10562,17 +10565,17 @@ class ClapprStats extends ContainerPlugin {
     }
     onContainerUpdateWhilePlaying() {
         if (this.container.playback.isPlaying()) {
-            this.stop(Chronograph.Watch);
-            this.start(Chronograph.Watch);
+            this.stop(ClapprStatsChronograph.Watch);
+            this.start(ClapprStatsChronograph.Watch);
         }
     }
     onBuffering() {
-        this.inc(Counter.Buffering);
-        this.start(Chronograph.Buffering);
+        this.inc(ClapprStatsCounter.Buffering);
+        this.start(ClapprStatsChronograph.Buffering);
         this.listenToOnce(this.container, Events.CONTAINER_STATE_BUFFERFULL, this.onBufferfull);
     }
     onBufferfull() {
-        this.stop(Chronograph.Buffering);
+        this.stop(ClapprStatsChronograph.Buffering);
         this.listenToOnce(this.container, Events.CONTAINER_STATE_BUFFERING, this.onBuffering);
     }
     onProgress(progress) {
@@ -10584,8 +10587,8 @@ class ClapprStats extends ContainerPlugin {
         // this.trigger(ClapprStatsEvents.PERCENTAGE, currentPercentage);
     }
     buildReport() {
-        this.stop(Chronograph.Session);
-        this.start(Chronograph.Session);
+        this.stop(ClapprStatsChronograph.Session);
+        this.start(ClapprStatsChronograph.Session);
         this.metrics.extra.playbackName = this.playbackName;
         this.metrics.extra.playbackType = this.playbackType;
         this.calcBitrates();
@@ -12088,63 +12091,72 @@ const timeScale = new humanFormat.Scale({
     ms: 1,
     sec: 1000,
     min: 60000,
-    hours: 3600000
+    hours: 3600000,
 });
 const percentScale = new humanFormat.Scale({
-    '%': 1
+    '%': 1,
 });
+const metricTemplates = {
+    fps: {
+        scale: 'SI',
+        decimals: 0,
+    },
+    volume: {
+        scale: percentScale,
+    },
+};
 const formattingTemplate = {
     general: {
         volume: {
-            scale: percentScale
-        }
+            scale: percentScale,
+        },
     },
     timers: {
         startup: {
-            scale: timeScale
+            scale: timeScale,
         },
         watch: {
-            scale: timeScale
+            scale: timeScale,
         },
         pause: {
-            scale: timeScale
+            scale: timeScale,
         },
         buffering: {
-            scale: timeScale
+            scale: timeScale,
         },
         session: {
-            scale: timeScale
+            scale: timeScale,
         },
         latency: {
-            scale: timeScale
-        }
+            scale: timeScale,
+        },
     },
     extra: {
         buffersize: {
-            scale: timeScale
+            scale: timeScale,
         },
         duration: {
-            scale: timeScale
+            scale: timeScale,
         },
         currentTime: {
-            scale: timeScale
+            scale: timeScale,
         },
         bitrateWeightedMean: {
-            unit: 'bps'
+            unit: 'bps',
         },
         bitrateMostUsed: {
-            unit: 'bps'
+            unit: 'bps',
         },
         bandwidth: {
-            unit: 'bps'
+            unit: 'bps',
         },
         watchedPercentage: {
-            scale: percentScale
+            scale: percentScale,
         },
         bufferingPercentage: {
-            scale: percentScale
-        }
-    }
+            scale: percentScale,
+        },
+    },
 };
 class Formatter {
     static format(metrics) {
@@ -12154,8 +12166,10 @@ class Formatter {
             formattedMetrics[type] = fmt;
             const typeTemplate = formattingTemplate[type];
             Object.entries(mm).forEach(([name, value]) => {
-                // const value = mm[name];
-                if (typeTemplate && typeTemplate[name] && (typeof value === 'number') && !isNaN(value)) {
+                if (typeTemplate &&
+                    typeTemplate[name] &&
+                    typeof value === 'number' &&
+                    !isNaN(value)) {
                     // @ts-ignore
                     const templateScale = typeTemplate[name].scale || 'SI';
                     // @ts-ignore
@@ -12163,7 +12177,7 @@ class Formatter {
                     fmt[name] = humanFormat(value, {
                         scale: templateScale,
                         unit: templateUnit,
-                        decimals: 2
+                        decimals: 2,
                     });
                 }
                 else {
@@ -12173,6 +12187,27 @@ class Formatter {
         });
         return formattedMetrics;
     }
+    static formatVolume(volume) {
+        return humanFormat(volume, metricTemplates.volume);
+    }
+    static formatTime(time) {
+        return humanFormat(time, {
+            scale: timeScale,
+        });
+    }
+    static formatFps(fps) {
+        return humanFormat(fps, metricTemplates.fps);
+    }
+    static formatPercentage(percentage) {
+        return humanFormat(percentage, {
+            scale: percentScale,
+        });
+    }
+    static formatBitrate(bitrate) {
+        return humanFormat(bitrate, {
+            unit: 'bps',
+        });
+    }
 }
 
 const SpeedtestWorkerModule = "// data reported to main thread\n\n// -1=not started, 0=starting, 1=download test, 2=ping+jitter test, 3=upload test, 4=finished, 5=abort\nlet testState = -1;\n// download speed in megabit/s with 2 decimal digits\nlet dlStatus = 0;\n// upload speed in megabit/s with 2 decimal digits\nlet ulStatus = '';\n// ping in milliseconds with 2 decimal digits\nlet pingStatus = '';\n// jitter in milliseconds with 2 decimal digits\nlet jitterStatus = '';\n// client's IP address as reported by getIP.php\nlet clientIp = '';\nlet serverHostName = '';\n//progress of download test 0-1\nlet dlProgress = 0;\n//progress of upload test 0-1\nlet ulProgress = 0;\n//progress of ping+jitter test 0-1\nlet pingProgress = 0;\n//test ID (sent back by telemetry if used, null otherwise)\nlet testId = null;\n\nlet log = ''; //telemetry log\n\nfunction tlog(s) {\n  if (settings.telemetry_level >= 2) {\n    log += Date.now() + ': ' + s + '\\n';\n  }\n}\n\nfunction tverb(s) {\n  if (settings.telemetry_level >= 3) {\n    log += Date.now() + ': ' + s + '\\n';\n  }\n}\n\nfunction twarn(s) {\n  if (settings.telemetry_level >= 2) {\n    log += Date.now() + ' WARN: ' + s + '\\n';\n  }\n\n  console.warn(s);\n}\n\n// test settings. can be overridden by sending specific values with the start command\nconst settings = {\n  //set to true when in MPOT mode\n  mpot: false,\n  //order in which tests will be performed as a string. D=Download, U=Upload, P=Ping+Jitter, I=IP, _=1 second delay\n  test_order: 'P_D',\n  // max duration of upload test in seconds\n  time_ul_max: 0,\n  // max duration of download test in seconds\n  time_dl_max: 15,\n  // if set to true, tests will take less time on faster connections\n  time_auto: true,\n  //time to wait in seconds before actually measuring ul speed (wait for buffers to fill)\n  time_ulGraceTime: 3,\n  //time to wait in seconds before actually measuring dl speed (wait for TCP window to increase)\n  time_dlGraceTime: 1.5,\n  // number of pings to perform in ping test\n  count_ping: 10,\n  // path to a large file or garbage.php, used for download test. must be relative to this js file\n  url_dl: 'backend/garbage.php',\n  // path to an empty file, used for upload test. must be relative to this js file\n  url_ul: 'backend/empty.php',\n  // path to an empty file, used for ping test. must be relative to this js file\n  url_ping: 'backend/empty.php',\n  // path to getIP.php relative to this js file, or a similar thing that outputs the client's ip\n  url_getIp: 'backend/getIP.php',\n  // if set to true, the server will include ISP info with the IP address\n  getIp_ispInfo: true,\n  // km or mi=estimate distance from server in km/mi; set to false to disable distance estimation.\n  // getIp_ispInfo must be enabled in order for this to work\n  getIp_ispInfo_distance: false,\n  // number of download streams to use (can be different if enable_quirks is active)\n  xhr_dlMultistream: 6,\n  // number of upload streams to use (can be different if enable_quirks is active)\n  xhr_ulMultistream: 3,\n  // how much concurrent requests should be delayed\n  xhr_multistreamDelay: 300,\n  // 0=fail on errors, 1=attempt to restart a stream if it fails, 2=ignore all errors\n  xhr_ignoreErrors: 1,\n  // if set to true, it reduces ram usage but uses the hard drive (useful with large garbagePhp_chunkSize\n  // and/or high xhr_dlMultistream)\n  xhr_dlUseBlob: false,\n  // size in megabytes of the upload blobs sent in the upload test (forced to 4 on chrome mobile)\n  xhr_ul_blob_megabytes: 20,\n  // size of chunks sent by garbage.php (can be different if enable_quirks is active)\n  garbagePhp_chunkSize: 100,\n  // enable quirks for specific browsers. currently it overrides settings to optimize for specific browsers,\n  // unless they are already being overridden with the start command\n  enable_quirks: true,\n  // if enabled, the ping test will attempt to calculate the ping more precisely using the Performance API.\n  // Currently works perfectly in Chrome, badly in Edge, and not at all in Firefox.\n  // If Performance API is not supported or the result is obviously wrong, a fallback is provided.\n  ping_allowPerformanceApi: true,\n  // can be changed to compensatie for transport overhead. (see doc.md for some other values)\n  overheadCompensationFactor: 1.06,\n  //if set to true, speed will be reported in mebibits/s instead of megabits/s\n  useMebibits: false,\n  // 0=disabled, 1=basic (results only), 2=full (results and timing) 3=debug (results+log)\n  telemetry_level: 0,\n  // path to the script that adds telemetry data to the database\n  url_telemetry: 'results/telemetry.php',\n  //extra data that can be passed to the telemetry through the settings\n  telemetry_extra: ''\n};\n\nlet xhr = null; // array of currently active xhr requests\nlet interval = null; // timer used in tests\nlet test_pointer = 0; //pointer to the next test to run inside settings.test_order\n\n/*\n  this function is used on URLs passed in the settings to determine whether we need a ? or an & as a separator\n*/\nfunction url_sep(url) {\n  return url.match(/\\?/) ? '&' : '?';\n}\n\n/*\n    listener for commands from main thread to this worker.\n    commands:\n    -status: returns the current status as a JSON string containing testState,\n      dlStatus, ulStatus, pingStatus, clientIp, jitterStatus, dlProgress, ulProgress, pingProgress\n    -abort: aborts the current test\n    -start: starts the test. optionally, settings can be passed as JSON.\n        example: start {\"time_ul_max\":\"10\", \"time_dl_max\":\"10\", \"count_ping\":\"50\"}\n*/\nself.addEventListener('message', function (e) {\n  const params = e.data.split(' ');\n\n  if (params[0] === 'status') {\n    // return status\n    postMessage(\n      {\n        testState: testState,\n        dlStatus: dlStatus,\n        ulStatus: ulStatus,\n        pingStatus: pingStatus,\n        clientIp: clientIp,\n        serverHostName: serverHostName,\n        jitterStatus: jitterStatus,\n        dlProgress: dlProgress,\n        ulProgress: ulProgress,\n        pingProgress: pingProgress,\n        testId: testId\n      }\n    );\n  }\n  if (params[0] === 'start' && testState === -1) {\n    const ua = navigator.userAgent;\n\n    // start new test\n    testState = 0;\n    try {\n      // parse settings, if present\n      let s = {};\n\n      try {\n        const ss = e.data.substring(5);\n\n        if (ss) {\n          s = JSON.parse(ss);\n        }\n      } catch (e) {\n        twarn('Error parsing custom settings JSON. Please check your syntax');\n      }\n      //copy custom settings\n      for (const key in s) {\n        if (typeof settings[key] !== 'undefined') {\n          settings[key] = s[key];\n        } else {\n          twarn('Unknown setting ignored: ' + key);\n        }\n      }\n      // quirks for specific browsers. apply only if not overridden. more may be added in future releases\n      if (settings.enable_quirks || (typeof s.enable_quirks !== 'undefined' && s.enable_quirks)) {\n        if (/Firefox.(\\d+\\.\\d+)/i.test(ua)) {\n          if (typeof s.ping_allowPerformanceApi === 'undefined') {\n            // ff performance API sucks\n            settings.ping_allowPerformanceApi = false;\n          }\n        }\n        if (/Edge.(\\d+\\.\\d+)/i.test(ua)) {\n          if (typeof s.xhr_dlMultistream === 'undefined') {\n            // edge more precise with 3 download streams\n            settings.xhr_dlMultistream = 3;\n          }\n        }\n        if (/Chrome.(\\d+)/i.test(ua) && !!self.fetch) {\n          if (typeof s.xhr_dlMultistream === 'undefined') {\n            // chrome more precise with 5 streams\n            settings.xhr_dlMultistream = 5;\n          }\n        }\n      }\n      if (/Edge.(\\d+\\.\\d+)/i.test(ua)) {\n        //Edge 15 introduced a bug that causes onprogress events to not get fired,\n        // we have to use the \"small chunks\" workaround that reduces accuracy\n        settings.forceIE11Workaround = true;\n      }\n      if (/PlayStation 4.(\\d+\\.\\d+)/i.test(ua)) {\n        //PS4 browser has the same bug as IE11/Edge\n        settings.forceIE11Workaround = true;\n      }\n      if (/Chrome.(\\d+)/i.test(ua) && /Android|iPhone|iPad|iPod|Windows Phone/i.test(ua)) {\n        // cheap af\n        // Chrome mobile introduced a limitation somewhere around version 65,\n        // we have to limit XHR upload size to 4 megabytes\n        settings.xhr_ul_blob_megabytes = 4;\n      }\n      if (/^((?!chrome|android|crios|fxios).)*safari/i.test(ua)) {\n        //Safari also needs the IE11 workaround but only for the MPOT version\n        settings.forceIE11Workaround = true;\n      }\n      // telemetry_level has to be parsed and not just copied\n      if (typeof s.telemetry_level !== 'undefined') {\n        const telemetryLevels = {\n          'basic': 1,\n          'full': 2,\n          'debug': 3\n        };\n\n        settings.telemetry_level = telemetryLevels[s.telemetry_level] || 0;\n      } // telemetry level\n      // transform test_order to uppercase, just in case\n      settings.test_order = settings.test_order.toUpperCase();\n    } catch (e) {\n      twarn('Possible error in custom test settings. Some settings might not have been applied. Exception: ' + e);\n    }\n    // run the tests\n    tverb(JSON.stringify(settings));\n    test_pointer = 0;\n    let iRun = false,\n      dRun = false,\n      // uRun = false,\n      pRun = false;\n    // eslint-disable-next-line no-var\n    var runNextTest = function () {\n      if (testState === 5) {\n        return;\n      }\n      if (test_pointer >= settings.test_order.length) {\n        //test is finished\n        if (settings.telemetry_level > 0) {\n          sendTelemetry(function (id) {\n            testState = 4;\n            if (id !== null || id !== undefined) {\n              testId = id;\n            }\n          });\n        } else {\n          testState = 4;\n        }\n\n        return;\n      }\n      switch (settings.test_order.charAt(test_pointer)) {\n        case 'I': {\n          test_pointer++;\n          if (iRun) {\n            runNextTest();\n\n            return;\n          } else {\n            iRun = true;\n          }\n          getIp(runNextTest);\n        }\n          break;\n        case 'D': {\n          test_pointer++;\n          if (dRun) {\n            runNextTest();\n\n            return;\n          } else {\n            dRun = true;\n          }\n          testState = 1;\n          dlTest(runNextTest);\n        }\n          break;\n        case 'U': {\n        // test_pointer++;\n        // if (uRun) {\n        //     runNextTest();\n        //     return;\n        // } else uRun = true;\n        // testState = 3;\n        // ulTest(runNextTest);\n        }\n          break;\n        case 'P': {\n          test_pointer++;\n          if (pRun) {\n            runNextTest();\n\n            return;\n          } else {\n            pRun = true;\n          }\n          testState = 2;\n          pingTest(runNextTest);\n        }\n          break;\n        case '_': {\n          test_pointer++;\n          setTimeout(runNextTest, 1000);\n        }\n          break;\n        default:\n          test_pointer++;\n      }\n    };\n\n    runNextTest();\n  }\n  if (params[0] === 'abort') {\n    // abort command\n    if (testState >= 4) {\n      return;\n    }\n    tlog('manually aborted');\n    clearRequests(); // stop all xhr activity\n    runNextTest = null;\n    if (interval) {\n      clearInterval(interval);\n    } // clear timer if present\n    if (settings.telemetry_level > 1) {\n      sendTelemetry(function () {\n      });\n    }\n    testState = 5; //set test as aborted\n    dlStatus = 0;\n    ulStatus = '';\n    pingStatus = '';\n    jitterStatus = '';\n    clientIp = '';\n    serverHostName = '';\n    dlProgress = 0;\n    ulProgress = 0;\n    pingProgress = 0;\n  }\n});\n\n// stops all XHR activity, aggressively\nfunction clearRequests() {\n  tverb('stopping pending XHRs');\n  if (xhr) {\n    for (let i = 0; i < xhr.length; i++) {\n      try {\n        xhr[i].onprogress = null;\n        xhr[i].onload = null;\n        xhr[i].onerror = null;\n      } catch (e) {\n        console.warn(e);\n      }\n      try {\n        xhr[i].upload.onprogress = null;\n        xhr[i].upload.onload = null;\n        xhr[i].upload.onerror = null;\n      } catch (e) {\n        console.warn(e);\n      }\n      try {\n        xhr[i].abort();\n      } catch (e) {\n        console.warn(e);\n      }\n      try {\n        delete xhr[i];\n      } catch (e) {\n        console.warn(e);\n      }\n    }\n    xhr = null;\n  }\n}\n\n// gets client's IP using url_getIp, then calls the done function\nlet ipCalled = false; // used to prevent multiple accidental calls to getIp\nlet ispInfo = ''; //used for telemetry\n\nfunction getIp(done) {\n  tverb('getIp');\n  if (ipCalled) {\n    return;\n  } else {\n    ipCalled = true;\n  } // getIp already called?\n  const startT = new Date().getTime();\n\n  xhr = new XMLHttpRequest();\n  xhr.onload = function () {\n    tlog('IP: ' + xhr.responseText + ', took ' + (new Date().getTime() - startT) + 'ms');\n    try {\n      const data = JSON.parse(xhr.responseText);\n\n      clientIp = data.processedString;\n      serverHostName = data.serverHostName;\n      ispInfo = data.rawIspInfo;\n    } catch (e) {\n      clientIp = xhr.responseText;\n      ispInfo = '';\n    }\n    done();\n  };\n  xhr.onerror = function () {\n    tlog('getIp failed, took ' + (new Date().getTime() - startT) + 'ms');\n    done();\n  };\n  const queryParams = [\n    settings.mpot ? 'cors=true' : '',\n    settings.getIp_ispInfo ?\n      `isp=true${settings.getIp_ispInfo_distance ? '&distance=' + settings.getIp_ispInfo_distance : ''}` :\n      '',\n    'r=' + Math.random()\n  ].filter(Boolean).join('&');\n\n  const url = `${settings.url_getIp}${url_sep(settings.url_getIp)}${queryParams}`;\n\n  xhr.open(\n    'GET',\n    url,\n    true\n  );\n  xhr.send();\n}\n\n// download test, calls done function when it's over\nlet dlCalled = false; // used to prevent multiple accidental calls to dlTest\n\nfunction dlTest(done) {\n  tverb('dlTest');\n  if (dlCalled) {\n    return;\n  } else {\n    dlCalled = true;\n  } // dlTest already called?\n  let totLoaded = 0.0, // total number of loaded bytes\n    startT = new Date().getTime(), // timestamp when test was started\n    bonusT = 0, //how many milliseconds the test has been shortened by (higher on faster connections)\n    graceTimeDone = false, //set to true after the grace time is past\n    failed = false; // set to true if a stream fails\n\n  xhr = [];\n  // function to create a download stream. streams are slightly delayed so that they will not end at the same time\n  const testStream = function (i, delay) {\n    setTimeout(\n      function () {\n        if (testState !== 1) {\n          return;\n        } // delayed stream ended up starting after the end of the download test\n        tverb('dl test stream started ' + i + ' ' + delay);\n        let prevLoaded = 0; // number of bytes loaded last time onprogress was called\n        const x = new XMLHttpRequest();\n\n        xhr[i] = x;\n        xhr[i].onprogress = function (event) {\n          tverb('dl stream progress event ' + i + ' ' + event.loaded);\n          if (testState !== 1) {\n            try {\n              x.abort();\n            } catch (e) {\n              console.warn(e);\n            }\n          } // just in case this XHR is still running after the download test\n          // progress event, add number of new loaded bytes to totLoaded\n          const loadDiff = event.loaded <= 0 ? 0 : event.loaded - prevLoaded;\n\n          if (isNaN(loadDiff) || !isFinite(loadDiff) || loadDiff < 0) {\n            return;\n          } // just in case\n          totLoaded += loadDiff;\n          prevLoaded = event.loaded;\n        }.bind(this);\n        xhr[i].onload = function () {\n          // the large file has been loaded entirely, start again\n          tverb('dl stream finished ' + i);\n          try {\n            xhr[i].abort();\n          } catch (e) {\n            console.warn(e);\n          } // reset the stream data to empty ram\n          testStream(i, 0);\n        }.bind(this);\n        xhr[i].onerror = function () {\n          // error\n          tverb('dl stream failed ' + i);\n          if (settings.xhr_ignoreErrors === 0) {\n            failed = true;\n          } //abort\n          try {\n            xhr[i].abort();\n          } catch (e) {\n            console.warn(e);\n          }\n          delete xhr[i];\n          if (settings.xhr_ignoreErrors === 1) {\n            testStream(i, 0);\n          } //restart stream\n        }.bind(this);\n        // send xhr\n        try {\n          if (settings.xhr_dlUseBlob) {\n            xhr[i].responseType = 'blob';\n          } else {\n            xhr[i].responseType = 'arraybuffer';\n          }\n        } catch (e) {\n          console.warn(e);\n        }\n\n        const queryParams = [\n          settings.mpot ? 'cors=true' : '',\n          'r=' + Math.random(),\n          'ckSize=' + settings.garbagePhp_chunkSize\n        ].join('&');\n\n        const url = `${settings.url_dl}${url_sep(settings.url_dl)}${queryParams}`;\n\n        // random string to prevent caching\n        xhr[i].open('GET', url, true);\n        xhr[i].send();\n      }.bind(this),\n      1 + delay\n    );\n  }.bind(this);\n\n  // open streams\n  for (let i = 0; i < settings.xhr_dlMultistream; i++) {\n    testStream(i, settings.xhr_multistreamDelay * i);\n  }\n  // every 200ms, update dlStatus\n  interval = setInterval(\n    function () {\n      tverb('DL: ' + dlStatus + (graceTimeDone ? '' : ' (in grace time)'));\n      const t = new Date().getTime() - startT;\n\n      if (graceTimeDone) {\n        dlProgress = (t + bonusT) / (settings.time_dl_max * 1000);\n      }\n      if (t < 200) {\n        return;\n      }\n      if (!graceTimeDone) {\n        if (t > 1000 * settings.time_dlGraceTime) {\n          if (totLoaded > 0) {\n            // if the connection is so slow that we didn't get a single chunk yet, do not reset\n            startT = new Date().getTime();\n            bonusT = 0;\n            totLoaded = 0.0;\n          }\n          graceTimeDone = true;\n        }\n      } else {\n        const speed = totLoaded / (t / 1000.0);\n\n        if (settings.time_auto) {\n          //decide how much to shorten the test. Every 200ms, the test is shortened by the bonusT calculated here\n          const bonus = (6.4 * speed) / 100000;\n\n          bonusT += bonus > 800 ? 800 : bonus;\n        }\n        // update status\n        // speed is multiplied by 8 to go from bytes to bits, overhead compensation is applied,\n        // then everything is divided by 1048576 or 1000000 to go to megabits/mebibits\n        dlStatus = ((speed * 8 * settings.overheadCompensationFactor) / (settings.useMebibits ? 1048576 : 1000000));\n        if ((t + bonusT) / 1000.0 > settings.time_dl_max || failed) {\n          // test is over, stop streams and timer\n          if (failed || isNaN(dlStatus)) {\n            dlStatus = 'Fail';\n          }\n          clearRequests();\n          clearInterval(interval);\n          dlProgress = 1;\n          tlog('dlTest: ' + dlStatus + ', took ' + (new Date().getTime() - startT) + 'ms');\n          done();\n        }\n      }\n    }.bind(this),\n    200\n  );\n}\n\n// ping+jitter test, function done is called when it's over\nlet ptCalled = false; // used to prevent multiple accidental calls to pingTest\n\nfunction pingTest(done) {\n  tverb('pingTest');\n  if (ptCalled) {\n    return;\n  } else {\n    ptCalled = true;\n  } // pingTest already called?\n  const startT = new Date().getTime(); //when the test was started\n  let prevT = null; // last time a pong was received\n  let ping = 0.0; // current ping value\n  let jitter = 0.0; // current jitter value\n  let i = 0; // counter of pongs received\n  let prevInstspd = 0; // last ping time, used for jitter calculation\n\n  xhr = [];\n  // ping function\n  const doPing = function () {\n    tverb('ping');\n    pingProgress = i / settings.count_ping;\n    prevT = new Date().getTime();\n    xhr[0] = new XMLHttpRequest();\n    xhr[0].onload = function () {\n      // pong\n      tverb('pong');\n      if (i === 0) {\n        prevT = new Date().getTime(); // first pong\n      } else {\n        let instspd = new Date().getTime() - prevT;\n\n        if (settings.ping_allowPerformanceApi) {\n          try {\n            //try to get accurate performance timing using performance api\n            let p = performance.getEntries();\n\n            p = p[p.length - 1];\n            let d = p.responseStart - p.requestStart;\n\n            if (d <= 0) {\n              d = p.duration;\n            }\n            if (d > 0 && d < instspd) {\n              instspd = d;\n            }\n          } catch (e) {\n            //if not possible, keep the estimate\n            tverb('Performance API not supported, using estimate');\n          }\n        }\n        //noticed that some browsers randomly have 0ms ping\n        if (instspd < 1) {\n          instspd = prevInstspd;\n        }\n        if (instspd < 1) {\n          instspd = 1;\n        }\n        const instjitter = Math.abs(instspd - prevInstspd);\n\n        if (i === 1) {\n          ping = instspd;\n        }/* first ping, can't tell jitter yet*/ else {\n          if (instspd < ping) {\n            ping = instspd;\n          } // update ping, if the instant ping is lower\n          if (i === 2) {\n            jitter = instjitter;\n          } else {\n            //discard the first jitter measurement because it might be much higher than it should be\n            jitter = instjitter > jitter ? jitter * 0.3 + instjitter * 0.7 : jitter * 0.8 + instjitter * 0.2;\n          } // update jitter, weighted average. spikes in ping values are given more weight.\n        }\n        prevInstspd = instspd;\n      }\n      pingStatus = ping.toFixed(2);\n      jitterStatus = jitter.toFixed(2);\n      i++;\n      tverb('ping: ' + pingStatus + ' jitter: ' + jitterStatus);\n      if (i < settings.count_ping) {\n        doPing();\n      } else {\n        // more pings to do?\n        pingProgress = 1;\n        tlog('ping: ' + pingStatus + ' jitter: ' + jitterStatus + ', took ' + (new Date().getTime() - startT) + 'ms');\n        done();\n      }\n    }.bind(this);\n    xhr[0].onerror = function () {\n      // a ping failed, cancel test\n      tverb('ping failed');\n      if (settings.xhr_ignoreErrors === 0) {\n        //abort\n        pingStatus = 'Fail';\n        jitterStatus = 'Fail';\n        clearRequests();\n        tlog('ping test failed, took ' + (new Date().getTime() - startT) + 'ms');\n        pingProgress = 1;\n        done();\n      }\n      if (settings.xhr_ignoreErrors === 1) {\n        doPing();\n      } //retry ping\n      if (settings.xhr_ignoreErrors === 2) {\n        //ignore failed ping\n        i++;\n        if (i < settings.count_ping) {\n          doPing();\n        } else {\n          // more pings to do?\n          pingProgress = 1;\n          tlog('ping: ' + pingStatus + ' jitter: ' + jitterStatus + ', took ' + (new Date().getTime() - startT) + 'ms');\n          done();\n        }\n      }\n    }.bind(this);\n    // send xhr\n    const queryString = [\n      settings.mpot ? 'cors=true' : '',\n      `r=${Math.random()}`\n    ].filter(part => part !== '').join('&');\n\n    const url = `${settings.url_ping}${url_sep(settings.url_ping)}${queryString}`;\n\n    // random string to prevent caching\n    xhr[0].open('GET', url, true);\n    xhr[0].send();\n  }.bind(this);\n\n  doPing(); // start first ping\n}\n\n// telemetry\nfunction sendTelemetry(done) {\n  if (settings.telemetry_level < 1) {\n    return;\n  }\n  xhr = new XMLHttpRequest();\n  xhr.onload = function () {\n    try {\n      const parts = xhr.responseText.split(' ');\n\n      if (parts[0] === 'id') {\n        try {\n          const id = parts[1];\n\n          done(id);\n        } catch (e) {\n          done(null);\n        }\n      } else {\n        done(null);\n      }\n    } catch (e) {\n      done(null);\n    }\n  };\n  xhr.onerror = function () {\n    console.warn('TELEMETRY ERROR ' + xhr.status);\n    done(null);\n  };\n  xhr.open('POST', settings.url_telemetry + url_sep(settings.url_telemetry) + (settings.mpot ? 'cors=true&' : '') + 'r=' + Math.random(), true);\n  const telemetryIspInfo = {\n    processedString: clientIp,\n    serverHostName: serverHostName,\n    rawIspInfo: typeof ispInfo === 'object' ? ispInfo : ''\n  };\n\n  try {\n    const fd = new FormData();\n\n    fd.append('ispinfo', JSON.stringify(telemetryIspInfo));\n    fd.append('dl', dlStatus);\n    fd.append('ul', ulStatus);\n    fd.append('ping', pingStatus);\n    fd.append('jitter', jitterStatus);\n    fd.append('log', settings.telemetry_level > 1 ? log : '');\n    fd.append('extra', settings.telemetry_extra);\n    xhr.send(fd);\n  } catch (ex) {\n    const postData = 'extra=' + encodeURIComponent(settings.telemetry_extra) + '&ispinfo=' + encodeURIComponent(JSON.stringify(telemetryIspInfo)) + '&dl=' + encodeURIComponent(dlStatus) + '&ul=' + encodeURIComponent(ulStatus) + '&ping=' + encodeURIComponent(pingStatus) + '&jitter=' + encodeURIComponent(jitterStatus) + '&log=' + encodeURIComponent(settings.telemetry_level > 1 ? log : '');\n\n    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');\n    xhr.send(postData);\n  }\n}\n";
@@ -12655,7 +12690,7 @@ function rankConnectionSpeed(dlSpeed) {
     return 0;
 }
 
-const pluginHtml$4 = "<% general = metrics.general %>\n<% counters = metrics.counters %>\n<% timers = metrics.timers %>\n<% extra = metrics.extra %>\n<% custom = metrics.custom %>\n\n<div class=\"stats-box\">\n    <div class=\"stats-box-top\">\n        <a class=\"close-button gplayer-lite-btn\" data-close-button>\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <g clip-path=\"url(#clip0_184_1489)\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M7.41376 6.00013L13.7068 -0.292872C14.0978 -0.683872 14.0978 -1.31587 13.7068 -1.70687C13.3158 -2.09787 12.6838 -2.09787 12.2928 -1.70687L5.99976 4.58613L-0.293238 -1.70687C-0.684238 -2.09787 -1.31624 -2.09787 -1.70724 -1.70687C-2.09824 -1.31587 -2.09824 -0.683872 -1.70724 -0.292872L4.58576 6.00013L-1.70724 12.2931C-2.09824 12.6841 -2.09824 13.3161 -1.70724 13.7071C-1.51224 13.9021 -1.25624 14.0001 -1.00024 14.0001C-0.744238 14.0001 -0.488238 13.9021 -0.293238 13.7071L5.99976 7.41413L12.2928 13.7071C12.4878 13.9021 12.7438 14.0001 12.9998 14.0001C13.2558 14.0001 13.5118 13.9021 13.7068 13.7071C14.0978 13.3161 14.0978 12.6841 13.7068 12.2931L7.41376 6.00013Z\"\n                          fill=\"white\"/>\n                </g>\n                <defs>\n                    <clipPath id=\"clip0_184_1489\">\n                        <rect width=\"12\" height=\"12\" fill=\"white\"/>\n                    </clipPath>\n                </defs>\n            </svg>\n        </a>\n    </div>\n    <div class=\"stats-box-main\">\n        <ul>\n            <li class=\"title\"><span>General</span></li>\n            <li>\n                Display resolution:\n                <div><span><%= general.displayResolution %></span></div>\n            </li>\n            <li>\n                Volume:\n                <div><span><%= general.volume %></span></div>\n            </li>\n            <li>\n                Connection speed:\n                <div><span id=\"dlText\"><%= custom.connectionSpeed %></span> Mbps</div>\n            </li>\n            <li class=\"canvas-wrapper\">\n                <canvas id=\"speedTestCanvas\" width=\"190\" height=\"20\"></canvas>\n            </li>\n            <li>\n                Ping:\n                <div><span id=\"pingText\"><%= custom.ping %></span> ms</div>\n            </li>\n            <li>\n                Jitter:\n                <div><span id=\"jitterText\"><%= custom.jitter %></span> ms</div>\n            </li>\n        </ul>\n\n        <ul>\n            <li class=\"title\"><span>Counters</span></li>\n            <li>\n                Plays:\n                <div><span><%= counters.play %></span></div>\n            </li>\n            <li>\n                Pauses:\n                <div><span><%= counters.pause %></span></div>\n            </li>\n            <li>\n                Errors:\n                <div><span><%= counters.error %></span></div>\n            </li>\n            <li>\n                Bufferings:\n                <div><span><%= counters.buffering %></span></div>\n            </li>\n            <li>\n                Decoded frames:\n                <div><span><%= counters.decodedFrames %></span></div>\n            </li>\n            <li>\n                Dropped frames:\n                <div><span><%= counters.droppedFrames %></span></div>\n            </li>\n            <li>\n                Frames per second:\n                <div><span><%= counters.fps %></span></div>\n            </li>\n            <li>\n                Bitrate changes:\n                <div><span><%= counters.changeLevel %></span></div>\n            </li>\n            <li>\n                Seeks:\n                <div><span><%= counters.seek %></span></div>\n            </li>\n            <li>\n                Fullscreen:\n                <div><span><%= counters.fullscreen %></span></div>\n            </li>\n            <li>\n                DVR seeks:\n                <div><span><%= counters.dvrUsage %></span></div>\n            </li>\n        </ul>\n\n        <ul>\n            <li class=\"title\"><span>Timers</span></li>\n            <li>\n                Startup time:\n                <div><span><%= timers.startup %></span></div>\n            </li>\n            <li>\n                Watching time:\n                <div><span><%= timers.watch %></span></div>\n            </li>\n            <li>\n                Pause time:\n                <div><span><%= timers.pause %></span></div>\n            </li>\n            <li>\n                Buffering time:\n                <div><span><%= timers.buffering %></span></div>\n            </li>\n            <li>\n                Session time:\n                <div><span><%= timers.session %></span></div>\n            </li>\n            <!--    <li>-->\n            <!--      Latency:-->\n            <!--      <div><span><%= timers.latency %></span></div>-->\n            <!--    </li>-->\n        </ul>\n\n        <ul>\n            <li class=\"title\"><span>Extra</span></li>\n            <li>\n                Playback:\n                <div><span><%= extra.playbackName %></span></div>\n            </li>\n            <li>\n                Playback type:\n                <div><span><%= extra.playbackType %></span></div>\n            </li>\n            <li>\n                Buffer size:\n                <div><span><%= extra.buffersize %></span></div>\n            </li>\n            <li>\n                Video duration:\n                <div><span><%= extra.duration %></span></div>\n            </li>\n            <li>\n                Current time:\n                <div><span><%= extra.currentTime %></span></div>\n            </li>\n            <li>\n                Bitrate weighted mean:\n                <div><span><%= extra.bitrateWeightedMean %></span></div>\n            </li>\n            <li>\n                Bitrate most used:\n                <div><span><%= extra.bitrateMostUsed %></span></div>\n            </li>\n            <li>\n                % Watched:\n                <div><span><%= extra.watchedPercentage %></span></div>\n            </li>\n            <li>\n                % Buffering:\n                <div><span><%= extra.bufferingPercentage %></span></div>\n            </li>\n        </ul>\n    </div>\n    <div class=\"speedtest-summary\">\n        <div class=\"speedtest-summary-header\">Your internet quality summary</div>\n        <div class=\"speedtest-summary-block\">\n            <div class=\"speedtest-summary-subblock\">\n                <div class=\"speedtest-summary-subblock-content\">\n                    <div class=\"speedtest-quality\">\n                        <div class=\"speedtest-quality-header\">VOD: <%= custom.vodQuality %></div>\n                        <div class=\"speedtest-quality-content\" data-streaming-type=\"vod\">\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"speedtest-summary-subblock\">\n                <div class=\"speedtest-summary-subblock-content\">\n                    <div class=\"speedtest-quality\">\n                        <div class=\"speedtest-quality-header\">Live: <%= custom.liveQuality %></div>\n                        <div class=\"speedtest-quality-content\" data-streaming-type=\"live\">\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"speedtest-footer\">\n        <!--    <a class=\"speedtest-footer-about-link\" href=\"\" target=\"_blank\">I am not a nerd, what's this all about?</a>-->\n        <button class=\"gplayer-lite-btn speedtest-btn speedtest-footer-refresh\" data-refresh-button type=\"button\">\n            <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\">\n                <path\n                        d=\"M6.03968 0.124998C3.64268 0.124998 1.67268 1.9565 1.48068 4.2915H1.00018C0.925833 4.29146 0.853156 4.31353 0.791378 4.35489C0.729601 4.39625 0.681511 4.45503 0.653218 4.52378C0.624925 4.59253 0.617705 4.66814 0.632476 4.74101C0.647248 4.81387 0.683343 4.88069 0.736177 4.933L1.57618 5.766C1.64641 5.83561 1.74129 5.87467 1.84018 5.87467C1.93906 5.87467 2.03395 5.83561 2.10418 5.766L2.94418 4.933C2.99701 4.88069 3.03311 4.81387 3.04788 4.74101C3.06265 4.66814 3.05543 4.59253 3.02714 4.52378C2.99884 4.45503 2.95075 4.39625 2.88898 4.35489C2.8272 4.31353 2.75452 4.29146 2.68018 4.2915H2.23368C2.42368 2.376 4.05268 0.874998 6.03968 0.874998C6.6948 0.873639 7.33932 1.04039 7.91158 1.35931C8.48384 1.67822 8.9647 2.13863 9.30818 2.6965C9.33331 2.73978 9.36686 2.7776 9.40684 2.80771C9.44682 2.83783 9.49243 2.85963 9.54097 2.87184C9.58951 2.88405 9.64001 2.88643 9.68948 2.87881C9.73895 2.8712 9.7864 2.85377 9.82902 2.82753C9.87165 2.80129 9.90859 2.76679 9.93767 2.72605C9.96675 2.68531 9.98739 2.63916 9.99835 2.59032C10.0093 2.54148 10.0104 2.49095 10.0015 2.44168C9.99264 2.39242 9.974 2.34544 9.94668 2.3035C9.53615 1.63664 8.96146 1.08621 8.27752 0.704805C7.59359 0.323402 6.82277 0.123774 6.03968 0.124998ZM10.4207 4.2335C10.3505 4.16419 10.2558 4.12532 10.1572 4.12532C10.0585 4.12532 9.96386 4.16419 9.89368 4.2335L9.05018 5.0665C8.9972 5.11874 8.96096 5.18557 8.94608 5.25847C8.93119 5.33137 8.93833 5.40705 8.96658 5.47588C8.99483 5.54472 9.04292 5.60359 9.10473 5.64501C9.16654 5.68644 9.23927 5.70853 9.31368 5.7085H9.76318C9.57218 7.6235 7.93768 9.125 5.94118 9.125C5.28399 9.12683 4.63729 8.96035 4.06269 8.64141C3.48808 8.32247 3.00473 7.86169 2.65868 7.303C2.63281 7.26107 2.59893 7.22465 2.55899 7.19582C2.51904 7.16699 2.47381 7.14631 2.42587 7.13495C2.37793 7.1236 2.32823 7.1218 2.27959 7.12966C2.23096 7.13752 2.18435 7.15488 2.14243 7.18075C2.05776 7.233 1.99731 7.31674 1.97438 7.41355C1.95146 7.51037 1.96793 7.61233 2.02018 7.697C2.43345 8.36457 3.01076 8.91521 3.69713 9.29647C4.38349 9.67772 5.15604 9.87689 5.94118 9.875C8.34518 9.875 10.3237 8.045 10.5162 5.7085H11.0002C11.0746 5.70853 11.1473 5.68644 11.2091 5.64501C11.2709 5.60359 11.319 5.54472 11.3473 5.47588C11.3755 5.40705 11.3827 5.33137 11.3678 5.25847C11.3529 5.18557 11.3167 5.11874 11.2637 5.0665L10.4207 4.2335Z\"\n                        fill=\"white\"/>\n            </svg>\n            Refresh\n        </button>\n    </div>\n</div>\n";
+const pluginHtml$4 = "<% general = metrics.general %>\n<% counters = metrics.counters %>\n<% timers = metrics.chrono %>\n<% extra = metrics.extra %>\n<% custom = metrics.custom %>\n\n<div class=\"stats-box\" id=\"nerd-stats-box\">\n    <div class=\"stats-box-top\">\n        <a class=\"close-button gplayer-lite-btn\" id=\"nerd-stats-close\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <g clip-path=\"url(#clip0_184_1489)\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M7.41376 6.00013L13.7068 -0.292872C14.0978 -0.683872 14.0978 -1.31587 13.7068 -1.70687C13.3158 -2.09787 12.6838 -2.09787 12.2928 -1.70687L5.99976 4.58613L-0.293238 -1.70687C-0.684238 -2.09787 -1.31624 -2.09787 -1.70724 -1.70687C-2.09824 -1.31587 -2.09824 -0.683872 -1.70724 -0.292872L4.58576 6.00013L-1.70724 12.2931C-2.09824 12.6841 -2.09824 13.3161 -1.70724 13.7071C-1.51224 13.9021 -1.25624 14.0001 -1.00024 14.0001C-0.744238 14.0001 -0.488238 13.9021 -0.293238 13.7071L5.99976 7.41413L12.2928 13.7071C12.4878 13.9021 12.7438 14.0001 12.9998 14.0001C13.2558 14.0001 13.5118 13.9021 13.7068 13.7071C14.0978 13.3161 14.0978 12.6841 13.7068 12.2931L7.41376 6.00013Z\"\n                          fill=\"white\"/>\n                </g>\n                <defs>\n                    <clipPath id=\"clip0_184_1489\">\n                        <rect width=\"12\" height=\"12\" fill=\"white\"/>\n                    </clipPath>\n                </defs>\n            </svg>\n        </a>\n    </div>\n    <div class=\"stats-box-main\">\n        <ul>\n            <li class=\"title\"><span><%= i18n.t('stats.general') %></span></li>\n            <li>\n                <%= i18n.t('stats.display_resolution') %>\n                <div><span><span id=\"nerd-stats-resolution-width\"><%= general.resolution.width %></span>&times;<span id=\"nerd-stats-resolution-height\"><%= general.resolution.height %></span></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.volume') %>\n                <div id=\"nerd-stats-volume\"><span><%= general.volume %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.connection_speed') %>\n                <div><span id=\"dlText\"><%= custom.connectionSpeed %></span> <%= i18n.t('mbps') %></div>\n            </li>\n            <li class=\"canvas-wrapper\">\n                <canvas id=\"speedTestCanvas\" width=\"190\" height=\"20\"></canvas>\n            </li>\n            <li>\n                <%= i18n.t('stats.ping') %>\n                <div><span id=\"pingText\"><%= custom.ping %></span> <%= i18n.t('ms') %></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.jitter') %>\n                <div><span id=\"jitterText\"><%= custom.jitter %></span> <%= i18n.t('ms') %></div>\n            </li>\n        </ul>\n\n        <ul>\n            <li class=\"title\"><span><%= i18n.t('stats.counters') %></span></li>\n            <li>\n                <%= i18n.t('stats.plays') %>\n                <div><span id=\"nerd-stats-plays\"><%= counters.play %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.pauses') %>\n                <div><span id=\"nerd-stats-pauses\"><%= counters.pause %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.errors') %>\n                <div><span id=\"nerd-stats-errors\"><%= counters.error %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.bufferings') %>\n                <div><span id=\"nerd-stats-bufferings\"><%= counters.buffering %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.decoded_frames') %>\n                <div><span id=\"nerd-stats-decoded-frames\"><%= counters.decodedFrames %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.dropped_frames') %>\n                <div><span id=\"nerd-stats-dropped-frames\"><%= counters.droppedFrames %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.fps') %>\n                <div><span id=\"nerd-stats-fps\"><%= counters.fps %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.bitrate_changes') %>\n                <div><span id=\"nerd-stats-bitrate-changes\"><%= counters.changeLevel %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.seeks') %>\n                <div><span id=\"nerd-stats-seeks\"><%= counters.seek %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.fullscreen') %>\n                <div><span id=\"nerd-stats-fullscreen\"><%= counters.fullscreen %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.dvr_seeks') %>\n                <div><span id=\"nerd-stats-dvr-usage\"><%= counters.dvrUsage %></span></div>\n            </li>\n        </ul>\n\n        <ul>\n            <li class=\"title\"><span><%= i18n.t('stats.duration') %></span></li>\n            <li>\n                <%= i18n.t('stats.startup') %>\n                <div><span id=\"nerd-stats-startup-time\"><%= timers.startup %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.watching') %>\n                <div><span id=\"nerd-stats-watch-time\"><%= timers.watch %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.paused') %>\n                <div><span id=\"nerd-stats-pause-time\"><%= timers.pause %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.buffering') %>\n                <div><span id=\"nerd-stats-buffering-time\"><%= timers.buffering %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.session') %>\n                <div><span id=\"nerd-stats-session-time\"><%= timers.session %></span></div>\n            </li>\n        </ul>\n\n        <ul>\n            <li class=\"title\"><span><%= i18n.t('stats.extra') %></span></li>\n            <li>\n                <%= i18n.t('stats.playback') %>\n                <div><span id=\"nerd-stats-playback-name\"><%= extra.playbackName %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.playback_type') %>\n                <div><span id=\"nerd-stats-playback-type\"><%= extra.playbackType %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.buffer_size') %>\n                <div><span id=\"nerd-stats-buffer-size\"><%= extra.buffersize %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.video_duration') %>\n                <div><span id=\"nerd-stats-video-duration\"><%= extra.duration %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.current_time') %>\n                <div><span id=\"nerd-stats-current-time\"><%= extra.currentTime %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.bitrate_weighted_mean') %>\n                <div><span id=\"nerd-stats-bitrate-weighted-mean\"><%= extra.bitrateWeightedMean %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.bitrate_most_used') %>\n                <div><span id=\"nerd-stats-bitrate-most-used\"><%= extra.bitrateMostUsed %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.watched_percentage') %>\n                <div><span id=\"nerd-stats-watched-percentage\"><%= extra.watchedPercentage %></span></div>\n            </li>\n            <li>\n                <%= i18n.t('stats.buffering_percentage') %>\n                <div><span id=\"nerd-stats-buffering-percentage\"><%= extra.bufferingPercentage %></span></div>\n            </li>\n        </ul>\n    </div>\n    <div class=\"speedtest-summary\">\n        <div class=\"speedtest-summary-header\"><%= i18n.t('stats.your_internet_quality_summary') %>:</div>\n        <div class=\"speedtest-summary-block\">\n            <div class=\"speedtest-summary-subblock\">\n                <div class=\"speedtest-summary-subblock-content\">\n                    <div class=\"speedtest-quality\">\n                        <div class=\"speedtest-quality-header\"><%= i18n.t('vod') %>: \n                            <span id=\"nerd-stats-quality-vod-text\"><%= custom.vodQuality %></span></div>\n                        <div class=\"speedtest-quality-content\" data-streaming-type=\"vod\" id=\"nerd-stats-quality-vod\">\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"speedtest-summary-subblock\">\n                <div class=\"speedtest-summary-subblock-content\">\n                    <div class=\"speedtest-quality\">\n                        <div class=\"speedtest-quality-header\"><%= i18n.t('live') %>: \n                            <span id=\"nerd-stats-quality-live-text\"><%= custom.liveQuality %></span></div>\n                        <div class=\"speedtest-quality-content\" data-streaming-type=\"live\" id=\"nerd-stats-quality-live\">\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                            <div class=\"speedtest-quality-content-item\"></div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"speedtest-footer\">\n        <!--    <a class=\"speedtest-footer-about-link\" href=\"\" target=\"_blank\">I am not a nerd, what's this all about?</a>-->\n        <button class=\"gplayer-lite-btn speedtest-btn speedtest-footer-refresh\" type=\"button\" id=\"nerd-stats-refresh\">\n            <svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\">\n                <path\n                        d=\"M6.03968 0.124998C3.64268 0.124998 1.67268 1.9565 1.48068 4.2915H1.00018C0.925833 4.29146 0.853156 4.31353 0.791378 4.35489C0.729601 4.39625 0.681511 4.45503 0.653218 4.52378C0.624925 4.59253 0.617705 4.66814 0.632476 4.74101C0.647248 4.81387 0.683343 4.88069 0.736177 4.933L1.57618 5.766C1.64641 5.83561 1.74129 5.87467 1.84018 5.87467C1.93906 5.87467 2.03395 5.83561 2.10418 5.766L2.94418 4.933C2.99701 4.88069 3.03311 4.81387 3.04788 4.74101C3.06265 4.66814 3.05543 4.59253 3.02714 4.52378C2.99884 4.45503 2.95075 4.39625 2.88898 4.35489C2.8272 4.31353 2.75452 4.29146 2.68018 4.2915H2.23368C2.42368 2.376 4.05268 0.874998 6.03968 0.874998C6.6948 0.873639 7.33932 1.04039 7.91158 1.35931C8.48384 1.67822 8.9647 2.13863 9.30818 2.6965C9.33331 2.73978 9.36686 2.7776 9.40684 2.80771C9.44682 2.83783 9.49243 2.85963 9.54097 2.87184C9.58951 2.88405 9.64001 2.88643 9.68948 2.87881C9.73895 2.8712 9.7864 2.85377 9.82902 2.82753C9.87165 2.80129 9.90859 2.76679 9.93767 2.72605C9.96675 2.68531 9.98739 2.63916 9.99835 2.59032C10.0093 2.54148 10.0104 2.49095 10.0015 2.44168C9.99264 2.39242 9.974 2.34544 9.94668 2.3035C9.53615 1.63664 8.96146 1.08621 8.27752 0.704805C7.59359 0.323402 6.82277 0.123774 6.03968 0.124998ZM10.4207 4.2335C10.3505 4.16419 10.2558 4.12532 10.1572 4.12532C10.0585 4.12532 9.96386 4.16419 9.89368 4.2335L9.05018 5.0665C8.9972 5.11874 8.96096 5.18557 8.94608 5.25847C8.93119 5.33137 8.93833 5.40705 8.96658 5.47588C8.99483 5.54472 9.04292 5.60359 9.10473 5.64501C9.16654 5.68644 9.23927 5.70853 9.31368 5.7085H9.76318C9.57218 7.6235 7.93768 9.125 5.94118 9.125C5.28399 9.12683 4.63729 8.96035 4.06269 8.64141C3.48808 8.32247 3.00473 7.86169 2.65868 7.303C2.63281 7.26107 2.59893 7.22465 2.55899 7.19582C2.51904 7.16699 2.47381 7.14631 2.42587 7.13495C2.37793 7.1236 2.32823 7.1218 2.27959 7.12966C2.23096 7.13752 2.18435 7.15488 2.14243 7.18075C2.05776 7.233 1.99731 7.31674 1.97438 7.41355C1.95146 7.51037 1.96793 7.61233 2.02018 7.697C2.43345 8.36457 3.01076 8.91521 3.69713 9.29647C4.38349 9.67772 5.15604 9.87689 5.94118 9.875C8.34518 9.875 10.3237 8.045 10.5162 5.7085H11.0002C11.0746 5.70853 11.1473 5.68644 11.2091 5.64501C11.2709 5.60359 11.319 5.54472 11.3473 5.47588C11.3755 5.40705 11.3827 5.33137 11.3678 5.25847C11.3529 5.18557 11.3167 5.11874 11.2637 5.0665L10.4207 4.2335Z\"\n                        fill=\"white\"/>\n            </svg>\n            <%= i18n.t('stats.refresh') %>\n        </button>\n    </div>\n</div>\n";
 
 const buttonHtml$3 = "<button class='nerd-button gplayer-lite-btn gcore-skin-text-color gear-option' id=\"nerd-stats-button\">\n    <span class=\"gear-option_icon\"><%= icon %></span>\n    <span class=\"gear-option_label\"><%= i18n.t('statistics') %></span>\n</button>\n";
 
@@ -12728,17 +12763,24 @@ const drawSummary = (customMetrics, vodContainer, liveContainer) => {
     vodContainer.html(vodHtml);
     liveContainer.html(liveHtml);
 };
+
+const PLAYBACK_NAMES = {
+    dash: 'DASH.js',
+    hls: 'HLS.js',
+    html5_video: 'Native',
+};
+const T$c = 'plugins.nerd_stats';
 /**
- * `PLUGIN` that displays useful network-related statistics.
+ * `PLUGIN` that displays useful statistics regarding the playback as well as the network quality estimation.
  * @beta
  *
  * @remarks
  * Depends on:
  *
- * - {@link BottomGear}
- *
- * - {@link ClapprStats}
+ * - {@link BottomGear} - where the button is attached
  *
+ * - {@link ClapprStats} - to get the metrics from
+*
  * The plugin is rendered as an item in the gear menu.
  *
  * When clicked, it shows an overlay window with the information about the network speed, latency, etc,
@@ -12746,13 +12788,13 @@ const drawSummary = (customMetrics, vodContainer, liveContainer) => {
  */
 class NerdStats extends UICorePlugin {
     container = null;
-    customMetrics = {
+    speedtestMetrics = {
         connectionSpeed: 0,
         ping: 0,
         jitter: 0,
     };
     metrics = newMetrics();
-    showing = false;
+    open = false;
     shortcut;
     iconPosition;
     static buttonTemplate = tmpl(buttonHtml$3);
@@ -12774,7 +12816,6 @@ class NerdStats extends UICorePlugin {
      */
     get attributes() {
         return {
-            'data-clappr-nerd-stats': '',
             class: 'clappr-nerd-stats',
         };
     }
@@ -12783,13 +12824,17 @@ class NerdStats extends UICorePlugin {
      */
     get events() {
         return {
-            'click [data-show-stats-button]': 'showOrHide',
-            'click [data-close-button]': 'hide',
-            'click [data-refresh-button]': 'refreshSpeedTest',
+            click: 'clicked',
+            'click #nerd-stats-close': 'hide',
+            'click #nerd-stats-refresh': 'refreshSpeedTest',
         };
     }
+    clicked(e) {
+        e.stopPropagation();
+        e.preventDefault();
+    }
     get statsBoxElem() {
-        return '.clappr-nerd-stats[data-clappr-nerd-stats] .stats-box';
+        return this.$el.find('#nerd-stats-box');
     }
     get statsBoxWidthThreshold() {
         return 720;
@@ -12808,7 +12853,7 @@ class NerdStats extends UICorePlugin {
         ];
         this.iconPosition =
             core.options.clapprNerdStats?.iconPosition ?? 'bottom-right';
-        this.customMetrics = {
+        this.speedtestMetrics = {
             connectionSpeed: 0,
             ping: 0,
             jitter: 0,
@@ -12820,20 +12865,38 @@ class NerdStats extends UICorePlugin {
      */
     bindEvents() {
         this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events.CORE_RESIZE, this.onPlayerResize);
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
     onCoreReady() {
         const bottomGear = this.core.getPlugin('bottom_gear');
         assert(bottomGear, 'bottom_gear plugin is required');
-        this.listenTo(bottomGear, GearEvents.RENDERED, this.addToBottomGear);
+        this.listenTo(bottomGear, GearEvents.RENDERED, this.attach);
+        Mousetrap.bind(this.shortcut, this.toggle);
+        this.updateResolution();
+    }
+    onActiveContainerChanged() {
         this.container = this.core.activeContainer;
         const clapprStats = this.container?.getPlugin('clappr_stats');
         assert(clapprStats, 'clappr-stats not available. Please, include it as a plugin of your Clappr instance.\n' +
             'For more info, visit: https://github.com/clappr/clappr-stats.');
-        Mousetrap.bind(this.shortcut, this.toggle);
-        this.listenTo(this.core, Events.CORE_RESIZE, this.onPlayerResize);
         this.listenTo(clapprStats, ClapprStatsEvents.REPORT, this.updateMetrics);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_VOLUME, () => {
+            this.metrics.general.volume = this.container?.volume ?? 0;
+            this.$el
+                .find('#nerd-stats-volume')
+                .text(Formatter.formatVolume(this.metrics.general.volume));
+        });
+        this.listenTo(this.core.activePlayback, Events.PLAYBACK_LOADEDMETADATA, () => {
+            this.$el
+                .find('#nerd-stats-playback-type')
+                .text(this.formatPlaybackName(this.core.activePlayback.getPlaybackType()));
+        });
         this.updateMetrics(clapprStats.exportMetrics());
-        this.render();
+        this.$el
+            .find('#nerd-stats-playback-name')
+            .text(PLAYBACK_NAMES[this.core.activePlayback.name] ?? '-');
+        this.core.activeContainer.$el.append(this.$el);
     }
     /**
      * @internal
@@ -12843,7 +12906,7 @@ class NerdStats extends UICorePlugin {
         return super.destroy();
     }
     toggle = () => {
-        if (this.showing) {
+        if (this.open) {
             this.hide();
         }
         else {
@@ -12851,10 +12914,11 @@ class NerdStats extends UICorePlugin {
         }
     };
     show() {
-        this.core.$el.find(this.statsBoxElem).show();
-        this.showing = true;
+        this.$el.show();
+        this.statsBoxElem.scrollTop(this.statsBoxElem.scrollTop());
+        this.open = true;
         this.refreshSpeedTest();
-        initSpeedTest(this.customMetrics)
+        initSpeedTest(this.speedtestMetrics)
             .then(() => {
             startSpeedtest();
         })
@@ -12863,21 +12927,27 @@ class NerdStats extends UICorePlugin {
         });
     }
     hide() {
-        this.core.$el.find(this.statsBoxElem).hide();
-        this.showing = false;
+        this.$el.hide();
+        this.open = false;
         stopSpeedtest();
     }
     onPlayerResize() {
         this.setStatsBoxSize();
+        this.updateResolution();
     }
-    addGeneralMetrics() {
-        this.metrics.general = {
-            displayResolution: this.playerWidth + 'x' + this.playerHeight,
-            volume: this.container?.volume,
+    updateResolution() {
+        this.metrics.general.resolution = {
+            width: this.playerWidth,
+            height: this.playerHeight,
         };
+        this.$el
+            .find('#nerd-stats-resolution-width')
+            .text(this.metrics.general.resolution.width);
+        this.$el
+            .find('#nerd-stats-resolution-height')
+            .text(this.metrics.general.resolution.height);
     }
-    addCustomMetrics() {
-        this.metrics.custom = this.customMetrics;
+    estimateQuality() {
         const videoQualityNames = [
             'SD (480p)',
             'HD (720p)',
@@ -12885,9 +12955,9 @@ class NerdStats extends UICorePlugin {
             '2K (1440p)',
             '4K (2160p)',
         ];
-        const { connectionSpeed, ping } = this.customMetrics;
+        const { connectionSpeed, ping } = this.speedtestMetrics;
         if (!connectionSpeed || !ping) {
-            const calculatingText = 'Calculating... Please wait.';
+            const calculatingText = this.core.i18n.t('stats.calculating');
             this.metrics.custom.vodQuality = calculatingText;
             this.metrics.custom.liveQuality = calculatingText;
             return;
@@ -12902,42 +12972,108 @@ class NerdStats extends UICorePlugin {
             prefix + videoQualityNames[liveQuality - 1];
     }
     updateMetrics(metrics) {
+        trace(`${T$c} updateMetrics`, { custom: this.speedtestMetrics });
         Object.assign(this.metrics, metrics);
-        this.addGeneralMetrics();
-        this.addCustomMetrics();
-        const scrollTop = this.core.$el.find(this.statsBoxElem).scrollTop();
-        this.$el.html(NerdStats.template({
-            metrics: Formatter.format(this.metrics),
-            iconPosition: this.iconPosition,
-        }));
+        this.updateEstimatedQuality();
+        this.$el
+            .find('#nerd-stats-current-time')
+            .text(Formatter.formatTime(this.metrics.extra.currentTime));
+        this.$el
+            .find('#nerd-stats-video-duration')
+            .text(Formatter.formatTime(this.metrics.extra.duration));
+        this.$el
+            .find('#nerd-stats-buffer-size')
+            .text(Formatter.formatTime(this.metrics.extra.buffersize));
+        this.$el
+            .find('#nerd-stats-bitrate-weighted-mean')
+            .text(Formatter.formatBitrate(this.metrics.extra.bitrateWeightedMean));
+        this.$el
+            .find('#nerd-stats-bitrate-most-used')
+            .text(Formatter.formatBitrate(this.metrics.extra.bitrateMostUsed));
+        this.$el
+            .find('#nerd-stats-watched-percentage')
+            .text(Formatter.formatPercentage(this.metrics.extra.watchedPercentage));
+        this.$el
+            .find('#nerd-stats-buffering-percentage')
+            .text(Formatter.formatPercentage(this.metrics.extra.bufferingPercentage));
+        this.$el
+            .find('#nerd-stats-startup-time')
+            .text(Formatter.formatTime(this.metrics.chrono.startup));
+        this.$el
+            .find('#nerd-stats-watch-time')
+            .text(Formatter.formatTime(this.metrics.chrono.watch));
+        this.$el
+            .find('#nerd-stats-pause-time')
+            .text(Formatter.formatTime(this.metrics.chrono.pause));
+        this.$el
+            .find('#nerd-stats-buffering-time')
+            .text(Formatter.formatTime(this.metrics.chrono.buffering));
+        this.$el
+            .find('#nerd-stats-session-time')
+            .text(Formatter.formatTime(this.metrics.chrono.session));
+        this.$el.find('#nerd-stats-plays').text(this.metrics.counters.play);
+        this.$el.find('#nerd-stats-pauses').text(this.metrics.counters.pause);
+        this.$el.find('#nerd-stats-errors').text(this.metrics.counters.error);
+        this.$el
+            .find('#nerd-stats-bufferings')
+            .text(this.metrics.counters.buffering);
+        this.$el
+            .find('#nerd-stats-decoded-frames')
+            .text(this.metrics.counters.decodedFrames);
+        this.$el
+            .find('#nerd-stats-dropped-frames')
+            .text(this.metrics.counters.droppedFrames);
+        this.$el
+            .find('#nerd-stats-bitrate-changes')
+            .text(this.metrics.counters.changeLevel);
+        this.$el.find('#nerd-stats-seeks').text(this.metrics.counters.seek);
+        this.$el
+            .find('#nerd-stats-fullscreen')
+            .text(this.metrics.counters.fullscreen);
+        this.$el.find('#nerd-stats-dvr-usage').text(this.metrics.counters.dvrUsage);
+        this.$el
+            .find('#nerd-stats-fps')
+            .text(Formatter.formatFps(this.metrics.counters.fps));
         this.setStatsBoxSize();
         drawSpeedTestResults();
-        drawSummary(this.metrics?.custom, this.$el.find('.speedtest-quality-content[data-streaming-type="vod"]'), this.$el.find('.speedtest-quality-content[data-streaming-type="live"]'));
-        this.core.$el.find(this.statsBoxElem).scrollTop(scrollTop);
-        if (!this.showing) {
+        drawSummary(this.speedtestMetrics, this.$el.find('#nerd-stats-quality-vod'), this.$el.find('#nerd-stats-quality-live'));
+        if (!this.open) {
             this.hide();
         }
     }
+    updateEstimatedQuality() {
+        this.estimateQuality();
+        this.$el
+            .find('#nerd-stats-quality-vod-text')
+            .html(this.metrics.custom.vodQuality);
+        this.$el
+            .find('#nerd-stats-quality-live-text')
+            .html(this.metrics.custom.liveQuality);
+    }
     setStatsBoxSize() {
         if (this.playerWidth >= this.statsBoxWidthThreshold) {
-            this.$el.find(this.statsBoxElem).addClass('wide');
-            this.$el.find(this.statsBoxElem).removeClass('narrow');
+            this.statsBoxElem.addClass('wide');
+            this.statsBoxElem.removeClass('narrow');
         }
         else {
-            this.$el.find(this.statsBoxElem).removeClass('wide');
-            this.$el.find(this.statsBoxElem).addClass('narrow');
+            this.statsBoxElem.removeClass('wide');
+            this.statsBoxElem.addClass('narrow');
         }
     }
     /**
      * @internal
      */
     render() {
-        // TODO append to the container
-        this.core.$el.append(this.$el[0]);
-        this.hide();
+        this.$el
+            .html(NerdStats.template({
+            metrics: Formatter.format(this.metrics ?? newMetrics()),
+            iconPosition: this.iconPosition,
+            i18n: this.core.i18n,
+        }))
+            .hide();
         return this;
     }
-    addToBottomGear() {
+    attach() {
         const gear = this.core.getPlugin('bottom_gear');
         gear
             .addItem('nerd_stats')
@@ -12950,11 +13086,11 @@ class NerdStats extends UICorePlugin {
             this.toggle();
         });
     }
-    clearCustomMetrics() {
+    clearSpeedtestMetrics() {
         const clapprStats = this.container?.getPlugin('clappr_stats');
-        this.customMetrics.connectionSpeed = 0;
-        this.customMetrics.ping = 0;
-        this.customMetrics.jitter = 0;
+        this.speedtestMetrics.connectionSpeed = 0;
+        this.speedtestMetrics.ping = 0;
+        this.speedtestMetrics.jitter = 0;
         if (clapprStats) {
             this.updateMetrics(clapprStats.exportMetrics());
         }
@@ -12962,7 +13098,7 @@ class NerdStats extends UICorePlugin {
     refreshSpeedTest() {
         stopSpeedtest();
         setTimeout(() => {
-            this.clearCustomMetrics();
+            this.clearSpeedtestMetrics();
             clearSpeedTestResults();
             drawSpeedTestResults();
         }, 200);
@@ -12970,11 +13106,28 @@ class NerdStats extends UICorePlugin {
             startSpeedtest();
         }, 800);
     }
+    formatPlaybackName(playbackType) {
+        switch (playbackType) {
+            case Playback.VOD:
+                return this.core.i18n.t('vod');
+            case Playback.LIVE:
+                return this.core.i18n.t('live');
+            default:
+                return '-';
+        }
+    }
 }
 function newMetrics() {
     return {
         ...newMetrics$1(),
-        general: {},
+        general: {
+            displayResolution: '',
+            resolution: {
+                width: 0,
+                height: 0,
+            },
+            volume: 0,
+        },
         custom: {
             connectionSpeed: 0,
             ping: 0,
@@ -12998,7 +13151,7 @@ class ClickToPause extends ContainerPlugin {
      * @internal
      */
     get name() {
-        return 'click_to_pause_custom';
+        return 'click_to_pause';
     }
     /**
      * @internal
@@ -13389,7 +13542,7 @@ class ContextMenu extends UIContainerPlugin {
 
 const dvrHTML = "<div class=\"live-info\" id=\"media-control-live\"><%= i18n.t('live') %></div>\n<button type=\"button\" class=\"live-button\" aria-label=\"<%= i18n.t('back_to_live') %>\" id=\"media-control-back-to-live\"><%= i18n.t('back_to_live') %></button>\n";
 
-const T$c = 'plugins.dvr_controls';
+// const T = 'plugins.dvr_controls'
 /**
  * `PLUGIN` that adds the DVR controls to the media control UI
  *
@@ -13438,18 +13591,17 @@ class DvrControls extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
-        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.bindContainerEvents);
+        this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-        // MediaControl has been rendered
-        this.render();
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.mount);
     }
-    bindContainerEvents() {
-        this.listenToOnce(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.render);
+    onActiveContainerChanged() {
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_LOADEDMETADATA, this.onMetadataLoaded);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrStateChanged);
     }
     click() {
         const container = this.core.activeContainer;
@@ -13458,32 +13610,47 @@ class DvrControls extends UICorePlugin {
         }
         container.seek(container.getDuration());
     }
-    shouldRender() {
-        return this.core.getPlaybackType() === Playback.LIVE;
-    }
     /**
      * @internal
      */
     render() {
-        trace(`${T$c} render`, {
-            dvrEnabled: this.core.activePlayback?.dvrEnabled,
-            playbackType: this.core.getPlaybackType(),
-        });
-        const mediaControl = this.core.getPlugin('media_control');
-        if (!mediaControl) {
-            return this;
-        }
-        if (!this.shouldRender()) {
-            return this;
-        }
-        mediaControl.toggleElement('duration', false);
-        mediaControl.toggleElement('position', false);
         this.$el.html(DvrControls.template({
             i18n: this.core.i18n,
         }));
-        mediaControl.putElement('dvr', this.$el);
         return this;
     }
+    onMediacontrolRendered() {
+        this.render();
+    }
+    onMetadataLoaded() {
+        this.mount();
+        this.toggleState(this.core.activeContainer.isDvrInUse());
+    }
+    mount() {
+        // TODO move mount point management logic to MediaControl
+        if (this.core.getPlaybackType() !== Playback.LIVE) {
+            return;
+        }
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
+        // TODO -> to MediaControl
+        mediaControl.toggleElement('duration', false);
+        mediaControl.toggleElement('position', false);
+        mediaControl.mount('dvr', this.$el);
+    }
+    onDvrStateChanged(dvrInUse) {
+        this.toggleState(dvrInUse);
+    }
+    toggleState(dvrInUse) {
+        if (dvrInUse) {
+            this.$el.find('#media-control-back-to-live').show();
+            this.$el.find('#media-control-live').hide();
+        }
+        else {
+            this.$el.find('#media-control-back-to-live').hide();
+            this.$el.find('#media-control-live').show();
+        }
+    }
 }
 
 const reloadIcon = "<svg fill=\"#FFFFFF\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"/>\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n</svg>";
@@ -14288,8 +14455,6 @@ const DEFAULT_SETTINGS = {
     right: [
         'audiotracks',
         'cc',
-        // 'dvr',
-        // 'duration',
         'fullscreen',
         'gear',
         'multicamera',
@@ -14306,10 +14471,10 @@ const T$a = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
     'playstop',
-    'dvr',
     'volume',
     'position',
     'duration',
+    'dvr',
 ];
 const { Config, Fullscreen, formatTime: formatTime$1, extend, removeArrayItem } = Utils;
 function orderByOrderPattern(arr, order) {
@@ -14953,8 +15118,7 @@ class MediaControl extends UICorePlugin {
             }
             this.$el.show();
             this.trigger(Events.MEDIACONTROL_SHOW, this.name);
-            this.container &&
-                this.container.trigger(Events.CONTAINER_MEDIACONTROL_SHOW, this.name);
+            this.core.activeContainer?.trigger(Events.CONTAINER_MEDIACONTROL_SHOW, this.name);
             this.$el.removeClass('media-control-hide');
             this.hideId = setTimeout(() => this.hide(), timeout);
             if (event) {
@@ -15007,7 +15171,7 @@ class MediaControl extends UICorePlugin {
             default: [],
             right: [],
         }, this.core.activeContainer.settings);
-        newSettings.left.push('clips'); // TODO
+        newSettings.left.push('clips'); // TODO settings
         // TODO make order controlled via CSS
         newSettings.left = orderByOrderPattern([...newSettings.left, 'volume', 'clips'], LEFT_ORDER);
         if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
@@ -15069,7 +15233,6 @@ class MediaControl extends UICorePlugin {
      * Get a media control element DOM node
      * @param name - The name of the media control element
      * @returns The DOM node to render to or extend
-     * @deprecated  Use {@link MediaControl.putElement} instead
      * @remarks
      * Use this method to render custom media control UI in a plugin
      * @example
@@ -15101,13 +15264,18 @@ class MediaControl extends UICorePlugin {
             return;
         }
     }
+    /**
+     * @deprecated  Use {@link MediaControl.mount} instead
+     * @param name
+     * @param element
+     */
     putElement(name, element) {
         this.mount(name, element);
     }
     /**
      * Toggle the visibility of a media control element
      * @param name - The name of the media control element
-     * @param show - Whether to show or hide the element
+     * @param show - Visibility state
      */
     toggleElement(area, show) {
         this.$el.find(`[data-${area}]`).toggle(show);
@@ -15323,6 +15491,7 @@ class MediaControl extends UICorePlugin {
                 width: this.options.width,
                 height: this.options.height,
             });
+            // TODO check out
             this.hideVolumeBar(0);
         }, 0);
         this.parseColors();
@@ -15866,7 +16035,7 @@ class PictureInPicture extends UICorePlugin {
         this.$el.html(PictureInPicture.buttonTemplate({ pipIcon }));
         const mediaControl = this.core.getPlugin('media_control');
         if (mediaControl) {
-            mediaControl.putElement('pip', this.$el);
+            mediaControl.mount('pip', this.$el);
         }
         return this;
     }
@@ -16792,7 +16961,7 @@ class SeekTime extends UICorePlugin {
         this.listenTo(this.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.onContainerChanged);
         if (this.mediaControlContainer) {
             this.listenTo(this.mediaControlContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.update);
-            this.listenTo(this.mediaControlContainer, Events.CONTAINER_TIMEUPDATE, this.updateDuration);
+            this.listenTo(this.mediaControlContainer, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
         }
     }
     onContainerChanged() {
@@ -16800,9 +16969,8 @@ class SeekTime extends UICorePlugin {
         this.stopListening();
         this.bindEvents();
     }
-    updateDuration(timeProgress) {
-        this.duration = timeProgress.total;
-        // this.firstFragDateTime = timeProgress.firstFragDateTime;
+    onTimeUpdate({ total }) {
+        this.duration = total;
         this.update();
     }
     showTime(event) {
@@ -17764,7 +17932,7 @@ class ClosedCaptions extends UICorePlugin {
         this.$line = $(ClosedCaptions.templateString());
         this.resizeFont();
         this.core.activeContainer.$el.append(this.$line);
-        mediaControl.putElement('cc', this.$el);
+        mediaControl.mount('cc', this.$el);
         this.updateSelection();
         this.renderIcon();
         return this;
@@ -18695,4 +18863,4 @@ class VolumeFade extends UICorePlugin {
     }
 }
 
-export { AudioTracks as AudioSelector, AudioTracks, BigMuteButton, BottomGear, NerdStats as ClapprNerdStats, ClapprStats, ClickToPause, Clips, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, QualityLevels as LevelSelector, Logo, MediaControl, MultiCamera, NerdStats, PictureInPicture, PlaybackRate, Poster, QualityLevels, SeekTime, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };
+export { AudioTracks as AudioSelector, AudioTracks, BigMuteButton, BottomGear, NerdStats as ClapprNerdStats, ClapprStats, ClapprStatsChronograph, ClapprStatsCounter, ClapprStatsEvents, ClickToPause, Clips, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, QualityLevels as LevelSelector, Logo, MediaControl, MultiCamera, NerdStats, PictureInPicture, PlaybackRate, Poster, QualityLevels, SeekTime, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };