update image size to be ~3kb and check speed every 15seconds
This commit is contained in:
parent
336b7222de
commit
7cadc3de52
@ -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
|
||||
|
||||
|
@ -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",
|
||||
|
@ -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 = () => {
|
||||
|
Loading…
x
Reference in New Issue
Block a user