feat: Change title to Excalidraw after a timeout (#2656)

* feat: Change title to Excalidraw after a timeout

* clear timeout

src/components/App.tsx

@@ -124,6 +124,7 @@ import {
   MIME_TYPES,
   TAP_TWICE_TIMEOUT,
   TOUCH_CTX_MENU_TIMEOUT,
+  APP_NAME,
 } from "../constants";
 
 import LayerUI from "./LayerUI";
@@ -502,7 +503,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
   };
 
   private importLibraryFromUrl = async (url: string) => {
-    window.history.replaceState({}, "Excalidraw", window.location.origin);
+    window.history.replaceState({}, APP_NAME, window.location.origin);
     try {
       const request = await fetch(url);
       const blob = await request.blob();

src/constants.ts

@@ -1,5 +1,7 @@
 import { FontFamily } from "./element/types";
 
+export const APP_NAME = "Excalidraw";
+
 export const DRAGGING_THRESHOLD = 10; // 10px
 export const LINE_CONFIRM_THRESHOLD = 10; // 10px
 export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
@@ -85,3 +87,4 @@ export const STORAGE_KEYS = {
 // time in milliseconds
 export const TAP_TWICE_TIMEOUT = 300;
 export const TOUCH_CTX_MENU_TIMEOUT = 500;
+export const TITLE_TIMEOUT = 10000;

src/excalidraw-app/collab/CollabWrapper.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from "react";
 import throttle from "lodash.throttle";
 
-import { ENV, EVENT } from "../../constants";
+import { APP_NAME, ENV, EVENT } from "../../constants";
 
 import {
   decryptAESGEM,
@@ -157,11 +157,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   };
 
   openPortal = async () => {
-    window.history.pushState(
-      {},
-      "Excalidraw",
-      await generateCollaborationLink(),
-    );
+    window.history.pushState({}, APP_NAME, await generateCollaborationLink());
     const elements = this.excalidrawRef.current!.getSceneElements();
     // remove deleted elements from elements array & history to ensure we don't
     // expose potentially sensitive user data in case user manually deletes
@@ -178,7 +174,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
 
   closePortal = () => {
     this.saveCollabRoomToFirebase();
-    window.history.pushState({}, "Excalidraw", window.location.origin);
+    window.history.pushState({}, APP_NAME, window.location.origin);
     this.destroySocketClient();
     trackEvent(EVENT_SHARE, "session end");
   };

src/excalidraw-app/index.tsx

@@ -28,6 +28,7 @@ import { SAVE_TO_LOCAL_STORAGE_TIMEOUT } from "./app_constants";
 import { EVENT_LOAD, EVENT_SHARE, trackEvent } from "../analytics";
 import { ErrorDialog } from "../components/ErrorDialog";
 import { getDefaultAppState } from "../appState";
+import { APP_NAME, TITLE_TIMEOUT } from "../constants";
 
 const excalidrawRef: React.MutableRefObject<
   MarkRequired<ExcalidrawAPIRefValue, "ready" | "readyPromise">
@@ -118,7 +119,7 @@ const initializeScene = async (opts: {
         scene = await loadScene(jsonMatch[1], jsonMatch[2], initialData);
       }
       if (!isCollabScene) {
-        window.history.replaceState({}, "Excalidraw", window.location.origin);
+        window.history.replaceState({}, APP_NAME, window.location.origin);
       }
     } else {
       // https://github.com/excalidraw/excalidraw/issues/1919
@@ -137,7 +138,7 @@ const initializeScene = async (opts: {
       }
 
       isCollabScene = false;
-      window.history.replaceState({}, "Excalidraw", window.location.origin);
+      window.history.replaceState({}, APP_NAME, window.location.origin);
     }
   }
   if (isCollabScene) {
@@ -246,6 +247,10 @@ function ExcalidrawWrapper(props: { collab: CollabAPI }) {
       }
     };
 
+    const titleTimeout = setTimeout(
+      () => (document.title = APP_NAME),
+      TITLE_TIMEOUT,
+    );
     window.addEventListener(EVENT.HASHCHANGE, onHashChange, false);
     window.addEventListener(EVENT.UNLOAD, onBlur, false);
     window.addEventListener(EVENT.BLUR, onBlur, false);
@@ -253,6 +258,7 @@ function ExcalidrawWrapper(props: { collab: CollabAPI }) {
       window.removeEventListener(EVENT.HASHCHANGE, onHashChange, false);
       window.removeEventListener(EVENT.UNLOAD, onBlur, false);
       window.removeEventListener(EVENT.BLUR, onBlur, false);
+      clearTimeout(titleTimeout);
     };
   }, [collab.initializeSocketClient]);