diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.tsx b/web/components/video/OwncastPlayer/OwncastPlayer.tsx index cfbd64283..0852dbb4a 100644 --- a/web/components/video/OwncastPlayer/OwncastPlayer.tsx +++ b/web/components/video/OwncastPlayer/OwncastPlayer.tsx @@ -291,6 +291,7 @@ export const OwncastPlayer: FC = ({ source, online }) => { useEffect( () => () => { stopLatencyCompensator(); + playbackMetrics.stop(); }, [], ); diff --git a/web/components/video/metrics/playback.js b/web/components/video/metrics/playback.js index 4438e7a79..94aa3b943 100644 --- a/web/components/video/metrics/playback.js +++ b/web/components/video/metrics/playback.js @@ -49,6 +49,7 @@ class PlaybackMetrics { this.send = this.send.bind(this); this.collectPlaybackMetrics = this.collectPlaybackMetrics.bind(this); this.handleNoLongerBuffering = this.handleNoLongerBuffering.bind(this); + this.sendMetricsTimer = 0; this.player.on('canplaythrough', this.handleNoLongerBuffering); this.player.on('error', this.handleError); @@ -81,11 +82,16 @@ class PlaybackMetrics { this.videoJSReady(); - setInterval(() => { + this.sendMetricsTimer = setInterval(() => { this.send(); }, METRICS_SEND_INTERVAL); } + stop() { + clearInterval(this.sendMetricsTimer); + this.player.off(); + } + // Keep our client clock in sync with the server clock to determine // accurate latency calculations. setClockSkew(skewMs) { @@ -249,12 +255,12 @@ class PlaybackMetrics { bandwidth: roundedAverageBandwidth, latency: roundedAverageLatency, downloadDuration: roundedAverageDownloadDuration, - errors: errorCount + this.isBuffering ? 1 : 0, + errors: errorCount + (this.isBuffering ? 1 : 0), qualityVariantChanges: this.qualityVariantChanges, }; } else { data = { - errors: errorCount + this.isBuffering ? 1 : 0, + errors: errorCount + (this.isBuffering ? 1 : 0), }; }