@gcorevideo/player 2.22.16 → 2.22.18

package/src/plugins/clappr-stats/ClapprStats.ts

@@ -1,469 +1,405 @@
-import { Container, ContainerPlugin, Events as CoreEvents, Log } from '@clappr/core';
-import type { QualityLevel, TimePosition, TimeProgress } from '../../playback.types.js';
-import assert from 'assert';
-
-import { CLAPPR_VERSION } from '../../build.js';
-import { TimerId } from '../../utils/types.js';
-import type { Metrics, MetricsUpdateFn } from './types.js';
-import { ClapprStatsEvents } from './types.js';
-import { newMetrics } from './utils.js';
-
-type StatsTimer = keyof Metrics['timers'];
-
-type UriToMeasureBandwidth = {
-  url: string;
-  start: number;
-  end: number;
-  expired: boolean;
-  timeout: number;
-  timer: TimerId | null;
-}
+import { Container, ContainerPlugin, Events as CoreEvents } from '@clappr/core'
+
+import type {
+  QualityLevel,
+  TimePosition,
+  TimeProgress,
+} from '../../playback.types.js'
 
-// TODO: fix
-const updateMetrics = () => {};
+import { CLAPPR_VERSION } from '../../build.js'
+import { TimerId } from '../../utils/types.js'
+import type { Metrics } from './types.js'
+import { ClapprStatsEvents, Chronograph, Counter } from './types.js'
+import { newMetrics } from './utils.js'
+
+export type ClapprStatsSettings = {
+  /**
+   * The interval in milliseconds of periodic measurements.
+   * The plugin will emit a {@link ClapprStatsEvents.REPORT} event with the collected metrics at the specified interval.
+   */
+  runEach?: number
+}
 
 /**
- * `PLUGIN` that collects useful statistics about playback performance.
+ * `PLUGIN` that measures data about playback, which can be useful for analyzing performance and UX.
  * @beta
  * @remarks
  * This plugin does not render anything and is supposed to be extended or used together with other plugins that actually render something.
+ *
+ * Configuration options - {@link ClapprStatsSettings}
+ *
+ * Events - {@link ClapprStatsEvents}
  */
 export class ClapprStats extends ContainerPlugin {
-  private bwMeasureCount = 0;
-
-  private intervalId: TimerId | null = null;
-  
-  private lastDecodedFramesCount = 0;
-
-  private metrics: Metrics = newMetrics();
-
-  private completion: {
-    watch: number[];
-    calls: number[];
-  };
+  private timerId: TimerId | null = null
 
-  private _onReport: (metrics: Metrics) => void;
+  private lastDecodedFramesCount = 0
 
-  private runBandwidthTestEvery: number;
+  private metrics: Metrics = newMetrics()
 
-  private runEach: number;
-
-  private timers: Record<StatsTimer, number> = {
-    startup: 0,
-    watch: 0,
-    pause: 0,
-    buffering: 0,
-    session: 0,
-    latency: 0,
-  };
-
-  private updateFn: MetricsUpdateFn = updateMetrics;
-
-  private urisToMeasureBandwidth: UriToMeasureBandwidth[];
+  private timers: Record<Chronograph, number> = {
+    [Chronograph.Startup]: 0,
+    [Chronograph.Watch]: 0,
+    [Chronograph.Pause]: 0,
+    [Chronograph.Buffering]: 0,
+    [Chronograph.Session]: 0,
+  }
 
-  private uriToMeasureLatency: string | undefined;
+  private runEach: number
 
   /**
    * @internal
    */
   get name() {
-    return 'clappr_stats';
+    return 'clappr_stats'
   }
 
   /**
    * @internal
    */
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
-  private get _playbackName() {
-    return String(this.container.playback.name || '');
+  private get playbackName() {
+    return String(this.container.playback.name || '')
   }
 
-  private get _playbackType() {
-    return this.container.getPlaybackType();
+  private get playbackType() {
+    return this.container.getPlaybackType()
   }
 
-  private _now() {
-    const hasPerformanceSupport = window.performance && typeof (window.performance.now) === 'function';
+  private now() {
+    const hasPerformanceSupport =
+      window.performance && typeof window.performance.now === 'function'
 
-    return (hasPerformanceSupport) ? window.performance.now() : new Date().getTime();
+    return hasPerformanceSupport
+      ? window.performance.now()
+      : new Date().getTime()
   }
 
-  private _inc(counter: keyof Metrics['counters']) {
-    this.metrics.counters[counter] += 1;
+  private inc(counter: Counter) {
+    this.metrics.counters[counter] += 1
   }
 
   // _timerHasStarted(timer) {
   //   return this[`_start${timer}`] !== undefined;
   // }
 
-  private start(timer: StatsTimer) {
+  private start(timer: Chronograph) {
     // this[`_start${timer}`] = this._now();
-    this.timers[timer] = this._now();
+    this.timers[timer] = this.now()
   }
 
-  private _stop(timer: StatsTimer) {
+  private stop(timer: Chronograph) {
     // this._metrics.timers[timer] += this._now() - this[`_start${timer}`];
-    this.metrics.timers[timer] += this._now() - this.timers[timer];
-  }
-
-  /**
-   * Registers a callback to receive the metrics.
-   * @param updateMetricsFn - The callback to receive the metrics
-   */
-  setUpdateMetrics(updateMetricsFn: MetricsUpdateFn) {
-    // TODO use events instead
-    this.updateFn = updateMetricsFn;
-  }
-
-  private _defaultReport(metrics: Metrics) {
-    this.updateFn(metrics);
+    this.metrics.chrono[timer] += this.now() - this.timers[timer]
   }
 
   constructor(container: Container) {
-    super(container);
-    this.runEach = container.options.clapprStats?.runEach ?? 5000;
-    this._onReport = container.options.clapprStats?.onReport ?? this._defaultReport;
-    this.uriToMeasureLatency = container.options.clapprStats?.uriToMeasureLatency;
-    this.urisToMeasureBandwidth = container.options.clapprStats?.urisToMeasureBandwidth;
-    this.runBandwidthTestEvery = container.options.clapprStats?.runBandwidthTestEvery ?? 10;
-
-    this.completion = {
-      watch: container.options.clapprStats?.onCompletion ?? [],
-      calls: []
-    };
+    super(container)
+    this.runEach = container.options.clapprStats?.runEach ?? 5000
   }
 
   /**
    * @internal
    */
   override bindEvents() {
-    this.listenTo(this.container, CoreEvents.CONTAINER_BITRATE, this.onBitrate);
-    this.listenTo(this.container, CoreEvents.CONTAINER_STOP, this.stopReporting);
-    this.listenTo(this.container, CoreEvents.CONTAINER_ENDED, this.stopReporting);
-    this.listenToOnce(this.container.playback, CoreEvents.PLAYBACK_PLAY_INTENT, this.startTimers);
-    this.listenToOnce(this.container, CoreEvents.CONTAINER_PLAY, this.onFirstPlaying);
-    this.listenTo(this.container, CoreEvents.CONTAINER_PLAY, this.onPlay);
-    this.listenTo(this.container, CoreEvents.CONTAINER_PAUSE, this.onPause);
-    this.listenToOnce(this.container, CoreEvents.CONTAINER_STATE_BUFFERING, this.onBuffering);
-    this.listenTo(this.container, CoreEvents.CONTAINER_SEEK, this.onSeek);
-    this.listenTo(this.container, CoreEvents.CONTAINER_ERROR, () => this._inc('error'));
-    this.listenTo(this.container, CoreEvents.CONTAINER_FULLSCREEN, () => this._inc('fullscreen'));
-    this.listenTo(this.container, CoreEvents.CONTAINER_PLAYBACKDVRSTATECHANGED, (dvrInUse: boolean) => {
-      dvrInUse && this._inc('dvrUsage');
-    });
-    this.listenTo(this.container.playback, CoreEvents.PLAYBACK_PROGRESS, this.onProgress);
-    this.listenTo(this.container.playback, CoreEvents.PLAYBACK_TIMEUPDATE, this.onTimeUpdate);
+    this.listenTo(this.container, CoreEvents.CONTAINER_BITRATE, this.onBitrate)
+    this.listenTo(this.container, CoreEvents.CONTAINER_STOP, this.stopReporting)
+    this.listenTo(
+      this.container,
+      CoreEvents.CONTAINER_ENDED,
+      this.stopReporting,
+    )
+    this.listenToOnce(
+      this.container.playback,
+      CoreEvents.PLAYBACK_PLAY_INTENT,
+      this.startTimers,
+    )
+    this.listenToOnce(
+      this.container,
+      CoreEvents.CONTAINER_PLAY,
+      this.onFirstPlaying,
+    )
+    this.listenTo(this.container, CoreEvents.CONTAINER_PLAY, this.onPlay)
+    this.listenTo(this.container, CoreEvents.CONTAINER_PAUSE, this.onPause)
+    this.listenToOnce(
+      this.container,
+      CoreEvents.CONTAINER_STATE_BUFFERING,
+      this.onBuffering,
+    )
+    this.listenTo(this.container, CoreEvents.CONTAINER_SEEK, this.onSeek)
+    this.listenTo(this.container, CoreEvents.CONTAINER_ERROR, () =>
+      this.inc(Counter.Error),
+    )
+    this.listenTo(this.container, CoreEvents.CONTAINER_FULLSCREEN, () =>
+      this.inc(Counter.Fullscreen),
+    )
+    this.listenTo(
+      this.container,
+      CoreEvents.CONTAINER_PLAYBACKDVRSTATECHANGED,
+      (dvrInUse: boolean) => {
+        dvrInUse && this.inc(Counter.DvrUsage)
+      },
+    )
+    this.listenTo(
+      this.container.playback,
+      CoreEvents.PLAYBACK_PROGRESS,
+      this.onProgress,
+    )
+    this.listenTo(
+      this.container.playback,
+      CoreEvents.PLAYBACK_TIMEUPDATE,
+      this.onTimeUpdate,
+    )
   }
 
   /**
    * @internal
    */
   override destroy() {
-    this.stopReporting();
-    super.destroy();
+    this.stopReporting()
+    super.destroy()
   }
 
   /**
    * Returns the collected metrics.
-   * @returns Currently collected metrics
+   * @returns Measurements collected so far
    */
   exportMetrics() {
-    return structuredClone(this.metrics);
+    return structuredClone(this.metrics)
   }
 
   private onBitrate(newBitrate: QualityLevel) {
-    const bitrate = newBitrate.bitrate;
-    const now = this._now();
+    const bitrate = newBitrate.bitrate
+    const now = this.now()
 
     if (this.metrics.extra.bitratesHistory.length > 0) {
-      const beforeLast = this.metrics.extra.bitratesHistory[this.metrics.extra.bitratesHistory.length - 1];
-
-      beforeLast.end = now;
-      beforeLast.time = now - beforeLast.start;
+      const last =
+        this.metrics.extra.bitratesHistory[
+          this.metrics.extra.bitratesHistory.length - 1
+        ]
+      last.end = now
+      last.time = now - last.start
     }
 
-    this.metrics.extra.bitratesHistory.push({ start: this._now(), bitrate: bitrate });
+    this.metrics.extra.bitratesHistory.push({ start: this.now(), bitrate })
 
-    this._inc('changeLevel');
+    this.inc(Counter.ChangeLevel)
   }
 
   private stopReporting() {
-    this._buildReport();
+    this.buildReport()
 
-    if (this.intervalId !== null) {
-      clearInterval(this.intervalId);
-      this.intervalId = null;
+    if (this.timerId !== null) {
+      clearInterval(this.timerId)
+      this.timerId = null
     }
-    this._newMetrics();
-
-    // TODO
-    // @ts-ignore
-    this.stopListening();
-    this.bindEvents();
   }
 
   private startTimers() {
-    this.intervalId = setInterval(this._buildReport.bind(this), this.runEach);
-    this.start('session');
-    this.start('startup');
+    this.timerId = setInterval(this.buildReport.bind(this), this.runEach)
+    this.start(Chronograph.Session)
+    this.start(Chronograph.Startup)
   }
 
   private onFirstPlaying() {
-    this.listenTo(this.container, CoreEvents.CONTAINER_TIMEUPDATE, this.onContainerUpdateWhilePlaying);
+    this.listenTo(
+      this.container,
+      CoreEvents.CONTAINER_TIMEUPDATE,
+      this.onContainerUpdateWhilePlaying,
+    )
 
-    this.start('watch');
-    this._stop('startup');
+    this.start(Chronograph.Watch)
+    this.stop(Chronograph.Startup)
   }
 
   private playAfterPause() {
-    this.listenTo(this.container, CoreEvents.CONTAINER_TIMEUPDATE, this.onContainerUpdateWhilePlaying);
-    this._stop('pause');
-    this.start('watch');
+    this.listenTo(
+      this.container,
+      CoreEvents.CONTAINER_TIMEUPDATE,
+      this.onContainerUpdateWhilePlaying,
+    )
+    this.stop(Chronograph.Pause)
+    this.start(Chronograph.Watch)
   }
 
   private onPlay() {
-    this._inc('play');
+    this.inc(Counter.Play)
   }
 
   private onPause() {
-    this._stop('watch');
-    this.start('pause');
-    this._inc('pause');
-    this.listenToOnce(this.container, CoreEvents.CONTAINER_PLAY, this.playAfterPause);
-    this.stopListening(this.container, CoreEvents.CONTAINER_TIMEUPDATE, this.onContainerUpdateWhilePlaying);
+    this.stop(Chronograph.Watch)
+    this.start(Chronograph.Pause)
+    this.inc(Counter.Pause)
+    this.listenToOnce(
+      this.container,
+      CoreEvents.CONTAINER_PLAY,
+      this.playAfterPause,
+    )
+    this.stopListening(
+      this.container,
+      CoreEvents.CONTAINER_TIMEUPDATE,
+      this.onContainerUpdateWhilePlaying,
+    )
   }
 
   private onSeek(e: number) {
-    this._inc('seek');
-    this.metrics.extra.watchHistory.push([e * 1000, e * 1000]);
+    this.inc(Counter.Seek)
+    this.metrics.extra.watchHistory.push([e * 1000, e * 1000])
   }
 
   private onTimeUpdate(e: TimePosition) {
     const current = e.current * 1000,
       total = e.total * 1000,
-      l = this.metrics.extra.watchHistory.length;
+      l = this.metrics.extra.watchHistory.length
 
-    this.metrics.extra.duration = total;
-    this.metrics.extra.currentTime = current;
-    this.metrics.extra.watchedPercentage = (current / total) * 100;
+    this.metrics.extra.duration = total
+    this.metrics.extra.currentTime = current
+    // TODO what if it's a live stream?
+    this.metrics.extra.watchedPercentage = (current / total) * 100
 
     if (l === 0) {
-      this.metrics.extra.watchHistory.push([current, current]);
+      this.metrics.extra.watchHistory.push([current, current])
     } else {
-      this.metrics.extra.watchHistory[l - 1][1] = current;
+      this.metrics.extra.watchHistory[l - 1][1] = current
     }
 
     if (this.metrics.extra.bitratesHistory.length > 0) {
-      const lastBitrate = this.metrics.extra.bitratesHistory[this.metrics.extra.bitratesHistory.length - 1];
+      const lastBitrate =
+        this.metrics.extra.bitratesHistory[
+          this.metrics.extra.bitratesHistory.length - 1
+        ]
 
       if (!lastBitrate.end) {
-        lastBitrate.time = this._now() - lastBitrate.start;
+        lastBitrate.time = this.now() - lastBitrate.start
       }
     }
 
-    this._onCompletion();
+    this.onCompletion()
   }
 
   private onContainerUpdateWhilePlaying() {
     if (this.container.playback.isPlaying()) {
-      this._stop('watch');
-      this.start('watch');
+      this.stop(Chronograph.Watch)
+      this.start(Chronograph.Watch)
     }
   }
 
   private onBuffering() {
-    this._inc('buffering');
-    this.start('buffering');
-    this.listenToOnce(this.container, CoreEvents.CONTAINER_STATE_BUFFERFULL, this.onBufferfull);
+    this.inc(Counter.Buffering)
+    this.start(Chronograph.Buffering)
+    this.listenToOnce(
+      this.container,
+      CoreEvents.CONTAINER_STATE_BUFFERFULL,
+      this.onBufferfull,
+    )
   }
 
   private onBufferfull() {
-    this._stop('buffering');
-    this.listenToOnce(this.container, CoreEvents.CONTAINER_STATE_BUFFERING, this.onBuffering);
+    this.stop(Chronograph.Buffering)
+    this.listenToOnce(
+      this.container,
+      CoreEvents.CONTAINER_STATE_BUFFERING,
+      this.onBuffering,
+    )
   }
 
   private onProgress(progress: TimeProgress) {
-    this.metrics.extra.buffersize = progress.current * 1000;
-  }
-
-  private _newMetrics() {
-    this.metrics = newMetrics();
+    this.metrics.extra.buffersize = progress.current * 1000
   }
 
-  private _onCompletion() {
-    const currentPercentage = this.metrics.extra.watchedPercentage;
-    const allPercentages = this.completion.watch;
-    const isCalled = this.completion.calls.indexOf(currentPercentage) !== -1;
-
-    if (allPercentages.indexOf(currentPercentage) !== -1 && !isCalled) {
-      Log.info(this.name + ' PERCENTAGE_EVENT: ' + currentPercentage);
-      this.completion.calls.push(currentPercentage);
-      this.trigger(ClapprStatsEvents.PERCENTAGE_EVENT, currentPercentage);
-    }
+  private onCompletion() {
+    // Decide if this is needed
+    // const currentPercentage = this.metrics.extra.watchedPercentage;
+    // this.trigger(ClapprStatsEvents.PERCENTAGE, currentPercentage);
   }
 
-  private _buildReport() {
-    this._stop('session');
-    this.start('session');
-
-    this.metrics.extra.playbackName = this._playbackName;
-    this.metrics.extra.playbackType = this._playbackType;
+  private buildReport() {
+    this.stop(Chronograph.Session)
+    this.start(Chronograph.Session)
 
-    this._calculateBitrates();
-    this._calculatePercentages();
-    this._fetchFPS();
-    this._measureLatency();
-    this._measureBandwidth();
+    this.metrics.extra.playbackName = this.playbackName
+    this.metrics.extra.playbackType = this.playbackType
 
-    this._onReport(this.metrics);
-    this.trigger(ClapprStatsEvents.REPORT_EVENT, structuredClone(this.metrics));
+    this.calcBitrates()
+    this.calcBufferingPercentage()
+    // TODO calc FPS properly, e.g., on TIMEUPDATE event
+    this.fetchFPS()
+    this.trigger(ClapprStatsEvents.REPORT, structuredClone(this.metrics))
   }
 
-  private _fetchFPS() {
+  private fetchFPS() {
+    // TODO check if the playback and media sources support video, then use the common method
     // flashls ??? - hls.droppedFramesl hls.stream.bufferLength (seconds)
     // hls ??? (use the same?)
     const fetchFPS = {
-      'html5_video': this._html5FetchFPS,
-      'hls': this._html5FetchFPS,
-      'dash_shaka_playback': this._html5FetchFPS
-    };
+      html5_video: this.html5FetchFPS,
+      hls: this.html5FetchFPS,
+      dash: this.html5FetchFPS,
+    }
 
-    if (this._playbackName in fetchFPS) {
-      fetchFPS[this._playbackName as keyof typeof fetchFPS].call(this);
+    if (this.playbackName in fetchFPS) {
+      fetchFPS[this.playbackName as keyof typeof fetchFPS].call(this)
     }
   }
 
-  private _calculateBitrates() {
-    const { bitratesHistory } = this.metrics.extra;
+  // TODO sort out
+  private calcBitrates() {
+    const { bitratesHistory } = this.metrics.extra
 
     if (bitratesHistory.length === 0) {
-      return;
+      return
     }
 
-    let totalTime = 0;
-    let weightedTotal = 0;
+    let totalTime = 0
+    let weightedTotal = 0
 
     for (const { bitrate, time = 0 } of bitratesHistory) {
-      totalTime += time;
-      weightedTotal += bitrate * time;
+      totalTime += time
+      weightedTotal += bitrate * time
     }
-    this.metrics.extra.bitrateWeightedMean = weightedTotal / totalTime;
+    this.metrics.extra.bitrateWeightedMean = weightedTotal / totalTime
 
-    this.metrics.extra.bitrateMostUsed = bitratesHistory.reduce((mostUsed, current) =>
-      (current.time || 0) > (mostUsed.time || 0) ? current : mostUsed,
+    this.metrics.extra.bitrateMostUsed = bitratesHistory.reduce(
+      (mostUsed, current) =>
+        (current.time || 0) > (mostUsed.time || 0) ? current : mostUsed,
       { time: 0, bitrate: 0, start: 0, end: 0 },
-    ).bitrate;
+    ).bitrate
   }
 
-  private _calculatePercentages() {
+  private calcBufferingPercentage() {
     if (this.metrics.extra.duration > 0) {
-      this.metrics.extra.bufferingPercentage = (this.metrics.timers.buffering / this.metrics.extra.duration) * 100;
+      this.metrics.extra.bufferingPercentage =
+        (this.metrics.chrono.buffering / this.metrics.extra.duration) * 100
     }
   }
 
-  private _html5FetchFPS() {
-    const videoTag = this.container.playback.el;
+  private html5FetchFPS() {
+    const videoTag = this.container.playback.el
 
-    const getFirstValidValue = (...args: any[]) => args.find(val => val !== undefined);
+    const getFirstValidValue = (...args: any[]) =>
+      args.find((val) => val !== undefined)
 
-    const decodedFrames = getFirstValidValue(videoTag.webkitDecodedFrameCount, videoTag.mozDecodedFrames, 0);
+    const decodedFrames = getFirstValidValue(
+      videoTag.webkitDecodedFrameCount,
+      videoTag.mozDecodedFrames,
+      0,
+    )
     const droppedFrames = getFirstValidValue(
       videoTag.webkitDroppedFrameCount,
-      videoTag.mozParsedFrames && videoTag.mozDecodedFrames ? videoTag.mozParsedFrames - videoTag.mozDecodedFrames : 0,
-      0
-    );
-    const decodedFramesLastTime = decodedFrames - (this.lastDecodedFramesCount || 0);
-
-    this.metrics.counters.decodedFrames = decodedFrames;
-    this.metrics.counters.droppedFrames = droppedFrames;
-    this.metrics.counters.fps = decodedFramesLastTime / (this.runEach / 1000);
-
-    this.lastDecodedFramesCount = decodedFrames;
-  }
-
-  // originally from https://www.smashingmagazine.com/2011/11/analyzing-network-characteristics-using-javascript-and-the-dom-part-1/
-  private _measureLatency() {
-    if (this.uriToMeasureLatency) {
-      const t: number[] = [];
-      const n = 2;
-      let rtt;
-      const ld = () => {
-        t.push(this._now());
-        if (t.length > n) {
-          done();
-        } else {
-          const img = new Image;
-
-          img.onload = ld;
-          img.src = this.uriToMeasureLatency + '?' + Math.random()
-            + '=' + this._now();
-        }
-      };
-      const done = () => {
-        rtt = t[2] - t[1];
-        this.metrics.timers.latency = rtt;
-      };
-
-      ld();
-    }
-  }
+      videoTag.mozParsedFrames && videoTag.mozDecodedFrames
+        ? videoTag.mozParsedFrames - videoTag.mozDecodedFrames
+        : 0,
+      0,
+    )
+    const delta = decodedFrames - (this.lastDecodedFramesCount || 0)
 
-  // originally from https://www.smashingmagazine.com/2011/11/analyzing-network-characteristics-using-javascript-and-the-dom-part-1/
-  private _measureBandwidth() {
-    if (this.urisToMeasureBandwidth && (this.bwMeasureCount % this.runBandwidthTestEvery === 0)) {
-      let i = 0;
-
-      const ld = (e?: ProgressEvent) => {
-        if (i > 0) {
-          const prev = this.urisToMeasureBandwidth[i - 1];
-          prev.end = this._now();
-          if (prev.timer !== null) {
-            clearTimeout(prev.timer);
-          }
-        }
-        if (i >= this.urisToMeasureBandwidth.length || (i > 0 && this.urisToMeasureBandwidth[i - 1].expired)) {
-          assert(e, 'incorrect invocation in _measureBandwidth');
-          done(e);
-        } else {
-          const xhr = new XMLHttpRequest();
-
-          xhr.open('GET', this.urisToMeasureBandwidth[i].url, true);
-          xhr.responseType = 'arraybuffer';
-          xhr.onload = xhr.onabort = ld;
-          this.urisToMeasureBandwidth[i].start = this._now();
-          this.urisToMeasureBandwidth[i].timer = setTimeout((j) => {
-            this.urisToMeasureBandwidth[j].expired = true;
-            xhr.abort();
-          }, this.urisToMeasureBandwidth[i].timeout, i);
-          xhr.send();
-        }
-        i++;
-      };
-
-      const done = (e: ProgressEvent) => {
-        const timeSpent = (this.urisToMeasureBandwidth[i - 1].end - this.urisToMeasureBandwidth[i - 1].start) / 1000;
-        const bandwidthBps = (e.loaded * 8) / timeSpent;
-
-        this.metrics.extra.bandwidth = bandwidthBps;
-        this.urisToMeasureBandwidth.forEach((x) => {
-          x.start = 0;
-          x.end = 0;
-          x.expired = false;
-          if (x.timer !== null) {
-            clearTimeout(x.timer);
-            x.timer = null;
-          }
-        });
-      };
-
-      ld();
-    }
-    this.bwMeasureCount++;
+    this.metrics.counters.decodedFrames = decodedFrames
+    this.metrics.counters.droppedFrames = droppedFrames
+    this.metrics.counters.fps = delta / (this.runEach / 1000) // TODO use time delta instead of runEach
+
+    this.lastDecodedFramesCount = decodedFrames
   }
 }
-
-// ClapprStats.REPORT_EVENT = 'clappr:stats:report';
-// ClapprStats.PERCENTAGE_EVENT = 'clappr:stats:percentage';