Add a timeout instead of insta teardown on window hide (#2970)

* Add a timeout instead of insta teardown on window hide

* Close sketch mode on teardown

src/components/Stream.tsx

@@ -8,7 +8,7 @@ import { NetworkHealthState } from 'hooks/useNetworkStatus'
 import { ClientSideScene } from 'clientSideScene/ClientSideSceneComp'
 import { butName } from 'lib/cameraControls'
 import { sendSelectEventToEngine } from 'lib/selections'
-import { kclManager, engineCommandManager } from 'lib/singletons'
+import { kclManager, engineCommandManager, sceneInfra } from 'lib/singletons'
 
 export const Stream = () => {
   const [isLoading, setIsLoading] = useState(true)
@@ -51,40 +51,42 @@ export const Stream = () => {
       capture: true,
     })
 
-    // Teardown everything if we go hidden or reconnect
-    if (globalThis?.window?.document) {
-      globalThis.window.document.onvisibilitychange = () => {
-        if (globalThis.window.document.visibilityState === 'hidden') {
-          videoRef.current?.pause()
-          setIsFreezeFrame(true)
-          window.requestAnimationFrame(() => {
-            engineCommandManager.engineConnection?.tearDown({ freeze: true })
-          })
-        } else {
-          engineCommandManager.engineConnection?.connect(true)
-        }
-      }
-    }
-
     const IDLE_TIME_MS = 1000 * 20
-    let timeoutIdIdle: ReturnType<typeof setTimeout> | undefined = undefined
+    let timeoutIdIdleA: ReturnType<typeof setTimeout> | undefined = undefined
 
-    const onIdle = () => {
+    const teardown = () => {
       videoRef.current?.pause()
       setIsFreezeFrame(true)
-      kclManager.isFirstRender = true
+      sceneInfra.modelingSend({ type: 'Cancel' })
-      setIsFirstRender(true)
       // Give video time to pause
       window.requestAnimationFrame(() => {
         engineCommandManager.engineConnection?.tearDown({ freeze: true })
       })
     }
+
+    // Teardown everything if we go hidden or reconnect
+    if (globalThis?.window?.document) {
+      globalThis.window.document.onvisibilitychange = () => {
+        if (globalThis.window.document.visibilityState === 'hidden') {
+          clearTimeout(timeoutIdIdleA)
+          timeoutIdIdleA = setTimeout(teardown, IDLE_TIME_MS)
+        } else if (!engineCommandManager.engineConnection?.isReady()) {
+          clearTimeout(timeoutIdIdleA)
+          engineCommandManager.engineConnection?.connect(true)
+        }
+      }
+    }
+
+    let timeoutIdIdleB: ReturnType<typeof setTimeout> | undefined = undefined
+
     const onAnyInput = () => {
       if (!engineCommandManager.engineConnection?.isReady()) {
         engineCommandManager.engineConnection?.connect(true)
       }
-      clearTimeout(timeoutIdIdle)
+      // Clear both timers
-      timeoutIdIdle = setTimeout(onIdle, IDLE_TIME_MS)
+      clearTimeout(timeoutIdIdleA)
+      clearTimeout(timeoutIdIdleB)
+      timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
     }
 
     globalThis?.window?.document?.addEventListener('keydown', onAnyInput)
@@ -93,7 +95,7 @@ export const Stream = () => {
     globalThis?.window?.document?.addEventListener('scroll', onAnyInput)
     globalThis?.window?.document?.addEventListener('touchstart', onAnyInput)
 
-    timeoutIdIdle = setTimeout(onIdle, IDLE_TIME_MS)
+    timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
 
     return () => {
       globalThis?.window?.document?.removeEventListener('paste', handlePaste, {