From 7cadc3de529fb2ce33e7cc152beba2075c9199bd Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Sun, 7 Feb 2021 02:55:03 +0530
Subject: [PATCH] update image size to be ~3kb and check speed every 15seconds

---
 src/components/App.tsx | 12 ++++++++++++
 src/constants.ts       |  2 ++
 src/networkStats.ts    |  6 +++---
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index e2136968e..40245a6cb 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -51,6 +51,7 @@ import {
   GRID_SIZE,
   LINE_CONFIRM_THRESHOLD,
   MIME_TYPES,
+  NETWORK_SPEED_THRESHOLD,
   POINTER_BUTTON,
   TAP_TWICE_TIMEOUT,
   TEXT_TO_CENTER_SNAP_THRESHOLD,
@@ -290,6 +291,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     height: window.innerHeight,
   };
   private scene: Scene;
+  private netStatsIntervalId?: any;
   constructor(props: ExcalidrawProps) {
     super(props);
     const defaultAppState = getDefaultAppState();
@@ -750,6 +752,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     this.removeEventListeners();
     this.scene.destroy();
     clearTimeout(touchTimeout);
+    clearTimeout(this.netStatsIntervalId);
     touchTimeout = 0;
   }
 
@@ -894,6 +897,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           "change",
           this.calculateNetStats,
         );
+        clearTimeout(this.netStatsIntervalId);
       }
     }
 
@@ -1023,9 +1027,17 @@ class App extends React.Component<ExcalidrawProps, AppState> {
   }
 
   private calculateNetStats = async () => {
+    if (!this.state.showStats || !this.props.isCollaborating) {
+      clearTimeout(this.netStatsIntervalId);
+      return;
+    }
     const speed = await getNetworkSpeed();
     const networkSpeed = speed === "-1" ? "Error!" : speed;
     this.setState({ networkSpeed });
+    this.netStatsIntervalId = setTimeout(
+      this.calculateNetStats,
+      NETWORK_SPEED_THRESHOLD,
+    );
   };
   // Copy/paste
 
diff --git a/src/constants.ts b/src/constants.ts
index 09c9e0272..2317a73b5 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -8,6 +8,8 @@ export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
 export const ELEMENT_TRANSLATE_AMOUNT = 1;
 export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
 export const SHIFT_LOCKING_ANGLE = Math.PI / 12;
+export const NETWORK_SPEED_THRESHOLD = 15000;
+
 export const CURSOR_TYPE = {
   TEXT: "text",
   CROSSHAIR: "crosshair",
diff --git a/src/networkStats.ts b/src/networkStats.ts
index 6c787b45c..4dd79b8d2 100644
--- a/src/networkStats.ts
+++ b/src/networkStats.ts
@@ -1,6 +1,6 @@
 const IMAGE_URL =
-  "https://user-images.githubusercontent.com/11256141/107117897-76fa3880-68a3-11eb-9ec6-c214c7af373b.png";
-const IMAGE_SIZE = 4525154; // in bytes
+  "https://user-images.githubusercontent.com/11256141/107128597-feb46700-68e4-11eb-80f7-1d259cc0151f.png";
+const IMAGE_SIZE = 2666; // in bytes
 const calculateSpeed = (startTime: number, endTime: number) => {
   const duration = (endTime - startTime) / 1000;
   const imageSizeInBits = IMAGE_SIZE * 8;
@@ -15,7 +15,7 @@ const calculateSpeed = (startTime: number, endTime: number) => {
 };
 
 const processImage = (): Promise<string> => {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     const image = new Image();
     let endTime: number;
     image.onload = () => {