[debug]

src/excalidraw-app/app_constants.ts

@@ -7,7 +7,7 @@ export const SYNC_FULL_SCENE_INTERVAL_MS = 20000;
 export const SYNC_BROWSER_TABS_TIMEOUT = 50;
 export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps
 export const DELETED_ELEMENT_TIMEOUT = 24 * 60 * 60 * 1000; // 1 day
-export const PAUSE_COLLABORATION_TIMEOUT = 30000;
+export const PAUSE_COLLABORATION_TIMEOUT = 2000;
 export const RESUME_FALLBACK_TIMEOUT = 5000;
 
 export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB

src/excalidraw-app/collab/Collab.tsx

@@ -207,10 +207,13 @@ class Collab extends PureComponent<Props, CollabState> {
     window.removeEventListener(EVENT.BEFORE_UNLOAD, this.beforeUnload);
     window.removeEventListener(EVENT.UNLOAD, this.onUnload);
     window.removeEventListener(EVENT.POINTER_MOVE, this.onPointerMove);
-    window.removeEventListener(
-      EVENT.VISIBILITY_CHANGE,
-      this.onVisibilityChange,
-    );
+    // window.removeEventListener(
+    //   EVENT.VISIBILITY_CHANGE,
+    //   this.onVisibilityChange,
+    // );
+    window.removeEventListener(EVENT.BLUR, this.onVisibilityChange);
+    window.removeEventListener(EVENT.FOCUS, this.onVisibilityChange);
+
     if (this.activeIntervalId) {
       window.clearInterval(this.activeIntervalId);
       this.activeIntervalId = null;
@@ -364,6 +367,7 @@ class Collab extends PureComponent<Props, CollabState> {
           this.portal.socket.connect();
           this.portal.socket.emit(WS_SCENE_EVENT_TYPES.INIT);
 
+          console.log("setting toast");
           this.excalidrawAPI.setToast({
             message: t("toast.reconnectRoomServer"),
             duration: Infinity,
@@ -433,6 +437,7 @@ class Collab extends PureComponent<Props, CollabState> {
           this.excalidrawAPI.updateScene({
             appState: { viewModeEnabled: false },
           });
+          console.log("resetting toast");
           this.excalidrawAPI.setToast(null);
           this.excalidrawAPI.scrollToContent();
         }
@@ -700,6 +705,7 @@ class Collab extends PureComponent<Props, CollabState> {
     );
 
     this.portal.socket.on("first-in-room", async () => {
+      console.log("first in room");
       if (this.portal.socket) {
         this.portal.socket.off("first-in-room");
       }
@@ -841,7 +847,9 @@ class Collab extends PureComponent<Props, CollabState> {
   };
 
   private onVisibilityChange = () => {
-    if (document.hidden) {
+    // if (document.hidden) {
+    console.log("VIS CHANGE");
+    if (!document.hasFocus()) {
       if (this.idleTimeoutId) {
         window.clearTimeout(this.idleTimeoutId);
         this.idleTimeoutId = null;
@@ -883,8 +891,10 @@ class Collab extends PureComponent<Props, CollabState> {
   };
 
   private initializeIdleDetector = () => {
-    document.addEventListener(EVENT.POINTER_MOVE, this.onPointerMove);
-    document.addEventListener(EVENT.VISIBILITY_CHANGE, this.onVisibilityChange);
+    // document.addEventListener(EVENT.POINTER_MOVE, this.onPointerMove);
+    // document.addEventListener(EVENT.VISIBILITY_CHANGE, this.onVisibilityChange);
+    window.addEventListener(EVENT.BLUR, this.onVisibilityChange);
+    window.addEventListener(EVENT.FOCUS, this.onVisibilityChange);
   };
 
   setCollaborators(sockets: string[]) {

src/excalidraw-app/collab/Portal.tsx

@@ -34,6 +34,8 @@ class Portal {
 
   open(socket: SocketIOClient.Socket, id: string, key: string) {
     this.socket = socket;
+    // @ts-ignore
+    window.socket = socket;
     this.roomId = id;
     this.roomKey = key;
 
@@ -62,6 +64,7 @@ class Portal {
 
     // Initialize socket listeners
     this.socket.on("init-room", () => {
+      console.log("join room");
       if (this.socket) {
         this.socket.emit("join-room", this.roomId);
         trackEvent("share", "room joined");