Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update image size to be ~3kb and check speed every 15seconds

Browse Source
This commit is contained in:
Aakansha Doshi 2021-02-07 02:55:03 +05:30
parent 336b7222de
commit 7cadc3de52
3 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/App.tsx
View File

@ -51,6 +51,7 @@ import {
GRID_SIZE, GRID_SIZE,
LINE_CONFIRM_THRESHOLD, LINE_CONFIRM_THRESHOLD,
MIME_TYPES, MIME_TYPES,
NETWORK_SPEED_THRESHOLD,
POINTER_BUTTON, POINTER_BUTTON,
TAP_TWICE_TIMEOUT, TAP_TWICE_TIMEOUT,
TEXT_TO_CENTER_SNAP_THRESHOLD, TEXT_TO_CENTER_SNAP_THRESHOLD,
@ -290,6 +291,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
height: window.innerHeight, height: window.innerHeight,
}; };
private scene: Scene; private scene: Scene;
private netStatsIntervalId?: any;
constructor(props: ExcalidrawProps) { constructor(props: ExcalidrawProps) {
super(props); super(props);
const defaultAppState = getDefaultAppState(); const defaultAppState = getDefaultAppState();
@ -750,6 +752,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
this.removeEventListeners(); this.removeEventListeners();
this.scene.destroy(); this.scene.destroy();
clearTimeout(touchTimeout); clearTimeout(touchTimeout);
clearTimeout(this.netStatsIntervalId);
touchTimeout = 0; touchTimeout = 0;
} }
@ -894,6 +897,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
"change", "change",
this.calculateNetStats, this.calculateNetStats,
); );
clearTimeout(this.netStatsIntervalId);
} }
} }
@ -1023,9 +1027,17 @@ class App extends React.Component<ExcalidrawProps, AppState> {
} }
private calculateNetStats = async () => { private calculateNetStats = async () => {
if (!this.state.showStats || !this.props.isCollaborating) {
clearTimeout(this.netStatsIntervalId);
return;
}
const speed = await getNetworkSpeed(); const speed = await getNetworkSpeed();
const networkSpeed = speed === "-1" ? "Error!" : speed; const networkSpeed = speed === "-1" ? "Error!" : speed;
this.setState({ networkSpeed }); this.setState({ networkSpeed });
this.netStatsIntervalId = setTimeout(
this.calculateNetStats,
NETWORK_SPEED_THRESHOLD,
);
}; };
// Copy/paste // Copy/paste

2
src/constants.ts
View File

@ -8,6 +8,8 @@ export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
export const ELEMENT_TRANSLATE_AMOUNT = 1; export const ELEMENT_TRANSLATE_AMOUNT = 1;
export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30; export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
export const SHIFT_LOCKING_ANGLE = Math.PI / 12; export const SHIFT_LOCKING_ANGLE = Math.PI / 12;
export const NETWORK_SPEED_THRESHOLD = 15000;
export const CURSOR_TYPE = { export const CURSOR_TYPE = {
TEXT: "text", TEXT: "text",
CROSSHAIR: "crosshair", CROSSHAIR: "crosshair",

6
src/networkStats.ts
View File

@ -1,6 +1,6 @@
const IMAGE_URL = const IMAGE_URL =
"https://user-images.githubusercontent.com/11256141/107117897-76fa3880-68a3-11eb-9ec6-c214c7af373b.png"; "https://user-images.githubusercontent.com/11256141/107128597-feb46700-68e4-11eb-80f7-1d259cc0151f.png";
const IMAGE_SIZE = 4525154; // in bytes const IMAGE_SIZE = 2666; // in bytes
const calculateSpeed = (startTime: number, endTime: number) => { const calculateSpeed = (startTime: number, endTime: number) => {
const duration = (endTime - startTime) / 1000; const duration = (endTime - startTime) / 1000;
const imageSizeInBits = IMAGE_SIZE * 8; const imageSizeInBits = IMAGE_SIZE * 8;
@ -15,7 +15,7 @@ const calculateSpeed = (startTime: number, endTime: number) => {
}; };
const processImage = (): Promise<string> => { const processImage = (): Promise<string> => {
return new Promise((resolve, reject) => { return new Promise((resolve) => {
const image = new Image(); const image = new Image();
let endTime: number; let endTime: number;
image.onload = () => { image.onload = () => {