foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix >5s blank scene for first one in the room when reconnecting

Browse Source
This commit is contained in:
Ryan Di 2022-08-30 22:36:24 +08:00
parent c71495b140
commit a1b1a2f9a3
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/excalidraw-app/app_constants.ts
View File

@ -8,7 +8,6 @@ export const SYNC_BROWSER_TABS_TIMEOUT = 50;
export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps
export const DELETED_ELEMENT_TIMEOUT = 24 * 60 * 60 * 1000; // 1 day export const DELETED_ELEMENT_TIMEOUT = 24 * 60 * 60 * 1000; // 1 day
export const HIDDEN_DISCONNECT_TIMEOUT = 30000; export const HIDDEN_DISCONNECT_TIMEOUT = 30000;
export const RECONNECT_TOAST_DURATION = 2000;
export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB
// 1 year (https://stackoverflow.com/a/25201898/927631) // 1 year (https://stackoverflow.com/a/25201898/927631)

28
src/excalidraw-app/index.tsx
View File

@ -44,7 +44,6 @@ import {
import { import {
FIREBASE_STORAGE_PREFIXES, FIREBASE_STORAGE_PREFIXES,
HIDDEN_DISCONNECT_TIMEOUT, HIDDEN_DISCONNECT_TIMEOUT,
RECONNECT_TOAST_DURATION,
STORAGE_KEYS, STORAGE_KEYS,
SYNC_BROWSER_TABS_TIMEOUT, SYNC_BROWSER_TABS_TIMEOUT,
} from "./app_constants"; } from "./app_constants";
@ -186,9 +185,8 @@ const initializeScene = async (opts: {
} }
if (roomLinkData) { if (roomLinkData) {
const { excalidrawAPI } = opts; const { excalidrawAPI, collabAPI } = opts;
const scene = await collabAPI.startCollaboration(roomLinkData);
const scene = await opts.collabAPI.startCollaboration(roomLinkData);
return { return {
// when collaborating, the state may have already been updated at this // when collaborating, the state may have already been updated at this
@ -459,7 +457,7 @@ const ExcalidrawWrapper = () => {
let disconnectTimeout: ReturnType<typeof setTimeout>; let disconnectTimeout: ReturnType<typeof setTimeout>;
const visibilityChange = (event: FocusEvent | Event) => { const visibilityChange = async (event: FocusEvent | Event) => {
if (event.type === EVENT.BLUR || document.hidden) { if (event.type === EVENT.BLUR || document.hidden) {
LocalData.flushSave(); LocalData.flushSave();
} }
@ -492,17 +490,26 @@ const ExcalidrawWrapper = () => {
if (!toast && disconnectRef.current) { if (!toast && disconnectRef.current) {
setToast({ setToast({
message: t("toast.reconnectRoomServer"), message: t("toast.reconnectRoomServer"),
duration: RECONNECT_TOAST_DURATION, duration: Infinity,
closable: true, closable: true,
}); });
} }
disconnectRef.current && disconnectRef.current &&
initializeScene({ collabAPI, excalidrawAPI }).then( (await initializeScene({ collabAPI, excalidrawAPI }).then(
async (data) => { async (data) => {
loadImages(data, /* isInitialLoad */ true); loadImages(data, /* isInitialLoad */ true);
initialStatePromiseRef.current.promise.resolve(data.scene); initialStatePromiseRef.current.promise.resolve(data.scene);
if (data.scene) {
excalidrawAPI.updateScene({
...data.scene,
...restore(data.scene, null, null),
commitToHistory: true,
});
excalidrawAPI.scrollToContent();
}
}, },
); ));
setToast(null);
disconnectRef.current = false; disconnectRef.current = false;
} }
} }
@ -526,7 +533,8 @@ const ExcalidrawWrapper = () => {
); );
clearTimeout(titleTimeout); clearTimeout(titleTimeout);
}; };
}, [collabAPI, excalidrawAPI, toast]); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [collabAPI, excalidrawAPI]);
useEffect(() => { useEffect(() => {
const unloadHandler = (event: BeforeUnloadEvent) => { const unloadHandler = (event: BeforeUnloadEvent) => {
@ -736,7 +744,7 @@ const ExcalidrawWrapper = () => {
return ( return (
<div <div
style={{ height: "100%" }} style={{ height: "100%" }}
className={clsx("excalidraw excalidraw-app", { className={clsx("excalidraw-app excalidraw", {
"is-collaborating": isCollaborating, "is-collaborating": isCollaborating,
})} })}
> >