From 3eb52c647bbfab2bf9246f20e11beb31f09d157d Mon Sep 17 00:00:00 2001 From: Anthony Date: Mon, 13 Sep 2021 23:03:19 +0200 Subject: [PATCH] adding functionality to detect user download speed --- ui/analytics.js | 11 ++++++++- ui/redux/actions/app.js | 1 + ui/util/detect-user-bandwidth.js | 38 ++++++++++++++++++++++++++++++++ 3 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 ui/util/detect-user-bandwidth.js diff --git a/ui/analytics.js b/ui/analytics.js index 495535dcc..505fb1180 100644 --- a/ui/analytics.js +++ b/ui/analytics.js @@ -10,6 +10,13 @@ import ElectronCookies from '@exponent/electron-cookies'; import { generateInitialUrl } from 'util/url'; // @endif import { MATOMO_ID, MATOMO_URL } from 'config'; +import getConnectionSpeed from 'util/detect-user-bandwidth'; + +let downloadSpeed; +getConnectionSpeed(function(speedInMbps){ + downloadSpeed = speedInMbps; + console.log(downloadSpeed); +}); const isProduction = process.env.NODE_ENV === 'production'; const devInternalApis = process.env.LBRY_API_URL && process.env.LBRY_API_URL.includes('dev'); @@ -202,8 +209,10 @@ async function sendWatchmanData(body) { } const analytics: Analytics = { - // receive buffer events from tracking plugin and jklj + // receive buffer events from tracking plugin and save buffer amounts and times for backend call videoBufferEvent: async (claim, data) => { + console.log('running here!'); + console.log(data); amountOfBufferEvents = amountOfBufferEvents + 1; amountOfBufferTimeInMS = amountOfBufferTimeInMS + data.bufferDuration; }, diff --git a/ui/redux/actions/app.js b/ui/redux/actions/app.js index 67a00c4a0..cb0b81332 100644 --- a/ui/redux/actions/app.js +++ b/ui/redux/actions/app.js @@ -505,6 +505,7 @@ export function doAnalyticsBuffer(uri, bufferData) { const fileSizeInBits = fileSize * 8; const bitRate = parseInt(fileSizeInBits / fileDurationInSeconds); const userId = user && user.id.toString(); + // if there's a logged in user, send buffer event data to watchman if (userId) { analytics.videoBufferEvent(claim, { timeAtBuffer, diff --git a/ui/util/detect-user-bandwidth.js b/ui/util/detect-user-bandwidth.js new file mode 100644 index 000000000..f14c82523 --- /dev/null +++ b/ui/util/detect-user-bandwidth.js @@ -0,0 +1,38 @@ +var startTime; +var endTime; + +var testConnectionSpeed = { + imageAddr: 'https://upload.wikimedia.org/wikipedia/commons/a/a6/Brandenburger_Tor_abends.jpg', // this is just an example, you rather want an image hosted on your server + downloadSize: 2707459, // this must match with the image above + + getConnectionSpeed: function(callback) { + testConnectionSpeed.InitiateSpeedDetection(); + testConnectionSpeed.callback = callback; + }, + InitiateSpeedDetection: function() { + window.setTimeout(testConnectionSpeed.MeasureConnectionSpeed, 1); + }, + result: function() { + var duration = (endTime - startTime) / 1000; + var bitsLoaded = testConnectionSpeed.downloadSize * 8; + var speedBps = (bitsLoaded / duration).toFixed(2); + var speedKbps = (speedBps / 1024).toFixed(2); + var speedMbps = (speedKbps / 1024).toFixed(2); + testConnectionSpeed.callback(speedMbps); + }, + MeasureConnectionSpeed: function() { + var download = new Image(); + download.onload = function() { + endTime = (new Date()).getTime(); + testConnectionSpeed.result(); + }; + startTime = (new Date()).getTime(); + var cacheBuster = '?nnn=' + startTime; + download.src = testConnectionSpeed.imageAddr + cacheBuster; + }, +}; + +// start test immediatly, you could also call this on any event or whenever you want +// testConnectionSpeed.getConnectionSpeed(function(time) { console.log(time) }); + +module.exports = testConnectionSpeed.getConnectionSpeed;