diff --git a/ui/analytics.js b/ui/analytics.js index aac0a8b7e..370b2fbb8 100644 --- a/ui/analytics.js +++ b/ui/analytics.js @@ -199,6 +199,12 @@ const analytics: Analytics = { Lbryio.call('feedback', 'search', { query, vote }); } }, + + videoFetchDuration: (source, duration) => { + sendPromMetric('time_to_fetch', duration); + sendMatomoEvent('Media', 'TimeToFetch', source, duration); + }, + videoStartEvent: (claimId, duration) => { sendPromMetric('time_to_start', duration); sendMatomoEvent('Media', 'TimeToStart', claimId, duration); diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index ebdcd7a73..94963cb9d 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs.jsx @@ -11,6 +11,7 @@ import './plugins/videojs-mobile-ui/plugin'; import hlsQualitySelector from './plugins/videojs-hls-quality-selector/plugin'; import qualityLevels from 'videojs-contrib-quality-levels'; import isUserTyping from 'util/detect-typing'; +import analytics from 'analytics'; const isDev = process.env.NODE_ENV !== 'production'; @@ -479,8 +480,15 @@ export default React.memo(function VideoJs(props: Props) { // Update video player and reload when source URL changes useEffect(() => { + const fetchStartedAt = performance.now(); // For some reason the video player is responsible for detecting content type this way fetch(source, { method: 'HEAD', cache: 'no-store' }).then((response) => { + const deltaFetch = performance.now() - fetchStartedAt; + console.log(`Prefetch took: ${deltaFetch.toFixed(3)}ms`); + + // Send fetch duration analytic event (in ms) + analytics.videoFetchDuration(source, deltaFetch); + const player = playerRef.current; if (!player) {