diff --git a/src/appState.ts b/src/appState.ts index afeddc04f..b7d1bdf96 100644 --- a/src/appState.ts +++ b/src/appState.ts @@ -74,7 +74,7 @@ export const getDefaultAppState = (): Omit< zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } }, viewModeEnabled: false, networkSpeed: 0, - ping: "…", + networkPing: 0, }; }; @@ -156,7 +156,7 @@ const APP_STATE_STORAGE_CONF = (< zoom: { browser: true, export: false }, viewModeEnabled: { browser: false, export: false }, networkSpeed: { browser: false, export: false }, - ping: { browser: false, export: false }, + networkPing: { browser: false, export: false }, }); const _clearAppStateForStorage = ( diff --git a/src/components/App.tsx b/src/components/App.tsx index 1868aba6d..a2c4d51c2 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -292,7 +292,7 @@ class App extends React.Component { }; private scene: Scene; private networkSpeedIntervalId?: any; - private pingIntervalId?: any; + private networkPingIntervalId?: any; constructor(props: ExcalidrawProps) { super(props); const defaultAppState = getDefaultAppState(); @@ -1028,21 +1028,24 @@ class App extends React.Component { } private calculateNetStats = () => { - this.checkPing(); + this.checkNetworkPing(); this.checkNetworkSpeed(); }; - private checkPing = async () => { + private checkNetworkPing = async () => { if (!this.state.showStats || !this.props.isCollaborating) { - clearTimeout(this.pingIntervalId); + clearTimeout(this.networkPingIntervalId); return; } - const ping = await simulatePing(); - this.setState({ ping }); - if (this.pingIntervalId) { - clearTimeout(this.pingIntervalId); + const networkPing = await simulatePing(); + this.setState({ networkPing }); + if (this.networkPingIntervalId) { + clearTimeout(this.networkPingIntervalId); } - this.pingIntervalId = setTimeout(this.checkPing, NETWORK_SPEED_TIMEOUT_MS); + this.networkPingIntervalId = setTimeout( + this.checkNetworkPing, + NETWORK_SPEED_TIMEOUT_MS, + ); }; private checkNetworkSpeed = async () => { diff --git a/src/components/Stats.tsx b/src/components/Stats.tsx index 58c81545e..09f311345 100644 --- a/src/components/Stats.tsx +++ b/src/components/Stats.tsx @@ -11,7 +11,13 @@ import { t } from "../i18n"; import useIsMobile from "../is-mobile"; import { getTargetElements } from "../scene"; import { AppState } from "../types"; -import { debounce, formatSpeedBits, getVersion, nFormatter } from "../utils"; +import { + debounce, + formatSpeedBits, + formatTime, + getVersion, + nFormatter, +} from "../utils"; import { close } from "./icons"; import { Island } from "./Island"; import "./Stats.scss"; @@ -182,7 +188,13 @@ export const Stats = (props: { {t("stats.ping")} - {props.appState.ping} + + {props.appState.networkPing === 0 + ? "…" + : props.appState.networkPing > 0 + ? formatTime(props.appState.networkPing) + : t("stats.error")} + {t("stats.speed")} diff --git a/src/networkStats.ts b/src/networkStats.ts index bf2189f0e..764110583 100644 --- a/src/networkStats.ts +++ b/src/networkStats.ts @@ -59,9 +59,8 @@ export const simulatePing = async () => { method: "HEAD", }); const endTime = new Date().getTime(); - const delay = endTime - startTime; - return delay < 1000 ? `${delay} ms` : `${(delay / 1000).toFixed(1)} s`; + return endTime - startTime; } catch (e) { - return "Error!"; + return -1; } }; diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index cf6dea33f..f96c96fa0 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap @@ -40,6 +40,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -501,6 +502,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -968,6 +970,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -1744,6 +1747,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -1948,6 +1952,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -2406,6 +2411,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -2659,6 +2665,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -2823,6 +2830,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -3300,6 +3308,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -3608,6 +3617,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -3812,6 +3822,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -4056,6 +4067,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -4308,6 +4320,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -4691,6 +4704,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -4986,6 +5000,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -5293,6 +5308,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -5501,6 +5517,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -5665,6 +5682,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -6118,6 +6136,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -6436,6 +6455,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -8470,6 +8490,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -8832,6 +8853,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -9087,6 +9109,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -9340,6 +9363,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -9655,6 +9679,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -9819,6 +9844,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -9983,6 +10009,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -10147,6 +10174,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -10341,6 +10369,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -10535,6 +10564,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -10729,6 +10759,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -10923,6 +10954,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -11087,6 +11119,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -11251,6 +11284,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -11445,6 +11479,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -11609,6 +11644,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -11803,6 +11839,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -12519,6 +12556,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -12772,6 +12810,7 @@ Object { "lastPointerDownWith": "touch", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -12874,6 +12913,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -12974,6 +13014,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -13138,6 +13179,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -13446,6 +13488,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -13754,6 +13797,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -13918,6 +13962,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -14114,6 +14159,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -14363,6 +14409,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -14687,6 +14734,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -15526,6 +15574,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -15834,6 +15883,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -16142,6 +16192,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -16521,6 +16572,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -16688,6 +16740,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -17009,6 +17062,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -17248,6 +17302,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -17503,6 +17558,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -17830,6 +17886,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -17930,6 +17987,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -18094,6 +18152,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -18915,6 +18974,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -19015,6 +19075,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -19769,6 +19830,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -20174,6 +20236,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -20447,6 +20510,7 @@ Object { "lastPointerDownWith": "touch", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -20549,6 +20613,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -21047,6 +21112,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, @@ -21147,6 +21213,7 @@ Object { "lastPointerDownWith": "mouse", "multiElement": null, "name": "Untitled-201933152653", + "networkPing": 0, "networkSpeed": 0, "offsetLeft": 0, "offsetTop": 0, diff --git a/src/types.ts b/src/types.ts index 7cfef7b6f..ead9ae607 100644 --- a/src/types.ts +++ b/src/types.ts @@ -89,7 +89,7 @@ export type AppState = { gridSize: number | null; viewModeEnabled: boolean; networkSpeed: number; - ping: string; + networkPing: number; /** top-most selected groups (i.e. does not include nested groups) */ selectedGroupIds: { [groupId: string]: boolean }; diff --git a/src/utils.ts b/src/utils.ts index 9ffeef50c..d81bb8a2c 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -381,6 +381,9 @@ export const getVersion = () => { ); }; +export const formatTime = (time: number): string => { + return time < 1000 ? `${time} ms` : `${(time / 1000).toFixed(1)} s`; +}; // Adapted from https://github.com/Modernizr/Modernizr/blob/master/feature-detects/emoji.js export const supportsEmoji = () => { const canvas = document.createElement("canvas");