Lf94/pause improvements (#3032)

* Add stream idle mode as a setting (default is off)

* Add pause icon

src/components/Stream.tsx

@@ -1,4 +1,3 @@
-import { DEV } from 'env'
 import { MouseEventHandler, useEffect, useRef, useState } from 'react'
 import { getNormalisedCoordinates } from '../lib/utils'
 import Loading from './Loading'
@@ -11,6 +10,10 @@ import { btnName } from 'lib/cameraControls'
 import { sendSelectEventToEngine } from 'lib/selections'
 import { kclManager, engineCommandManager, sceneInfra } from 'lib/singletons'
 import { useAppStream } from 'AppState'
+import {
+  EngineConnectionStateType,
+  DisconnectingType,
+} from 'lang/std/engineConnection'
 
 export const Stream = () => {
   const [isLoading, setIsLoading] = useState(true)
@@ -20,15 +23,28 @@ export const Stream = () => {
   const { settings } = useSettingsAuthContext()
   const { state, send, context } = useModelingContext()
   const { mediaStream } = useAppStream()
-  const { overallState } = useNetworkContext()
+  const { overallState, immediateState } = useNetworkContext()
   const [isFreezeFrame, setIsFreezeFrame] = useState(false)
+  const [isPaused, setIsPaused] = useState(false)
 
-  const IDLE = true
+  const IDLE = settings.context.app.streamIdleMode.current
 
   const isNetworkOkay =
     overallState === NetworkHealthState.Ok ||
     overallState === NetworkHealthState.Weak
 
+  useEffect(() => {
+    if (
+      immediateState.type === EngineConnectionStateType.Disconnecting &&
+      immediateState.value.type === DisconnectingType.Pause
+    ) {
+      setIsPaused(true)
+    }
+    if (immediateState.type === EngineConnectionStateType.Connecting) {
+      setIsPaused(false)
+    }
+  }, [immediateState])
+
   // Linux has a default behavior to paste text on middle mouse up
   // This adds a listener to block that pasting if the click target
   // is not a text input, so users can move in the 3D scene with
@@ -65,25 +81,28 @@ export const Stream = () => {
       sceneInfra.modelingSend({ type: 'Cancel' })
       // Give video time to pause
       window.requestAnimationFrame(() => {
-        engineCommandManager.tearDown()
+        engineCommandManager.tearDown({ idleMode: true })
       })
     }
 
-    // Teardown everything if we go hidden or reconnect
-    if (IDLE && DEV) {
-      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)
-          }
-        }
+    const 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)
       }
     }
 
+    // Teardown everything if we go hidden or reconnect
+    if (IDLE) {
+      globalThis?.window?.document?.addEventListener(
+        'visibilitychange',
+        onVisibilityChange
+      )
+    }
+
     let timeoutIdIdleB: ReturnType<typeof setTimeout> | undefined = undefined
 
     const onAnyInput = () => {
@@ -93,7 +112,7 @@ export const Stream = () => {
       timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
     }
 
-    if (IDLE && DEV) {
+    if (IDLE) {
       globalThis?.window?.document?.addEventListener('keydown', onAnyInput)
       globalThis?.window?.document?.addEventListener('mousemove', onAnyInput)
       globalThis?.window?.document?.addEventListener('mousedown', onAnyInput)
@@ -101,7 +120,7 @@ export const Stream = () => {
       globalThis?.window?.document?.addEventListener('touchstart', onAnyInput)
     }
 
-    if (IDLE && DEV) {
+    if (IDLE) {
       timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
     }
 
@@ -109,7 +128,14 @@ export const Stream = () => {
       globalThis?.window?.document?.removeEventListener('paste', handlePaste, {
         capture: true,
       })
-      if (IDLE && DEV) {
+      if (IDLE) {
+        clearTimeout(timeoutIdIdleA)
+        clearTimeout(timeoutIdIdleB)
+
+        globalThis?.window?.document?.removeEventListener(
+          'visibilitychange',
+          onVisibilityChange
+        )
         globalThis?.window?.document?.removeEventListener('keydown', onAnyInput)
         globalThis?.window?.document?.removeEventListener(
           'mousemove',
@@ -126,7 +152,7 @@ export const Stream = () => {
         )
       }
     }
-  }, [])
+  }, [IDLE])
 
   useEffect(() => {
     setIsFirstRender(kclManager.isFirstRender)
@@ -249,6 +275,32 @@ export const Stream = () => {
       <ClientSideScene
         cameraControls={settings.context.modeling.mouseControls.current}
       />
+      {isPaused && (
+        <div className="text-center absolute inset-0">
+          <div
+            className="flex flex-col items-center justify-center h-screen"
+            data-testid="paused"
+          >
+            <div className="border-primary border p-2 rounded-sm">
+              <svg
+                width="8"
+                height="12"
+                viewBox="0 0 8 12"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M2 12V0H0V12H2ZM8 12V0H6V12H8Z"
+                  fill="var(--primary)"
+                />
+              </svg>
+            </div>
+            <p className="text-base mt-2 text-primary bold">Paused</p>
+          </div>
+        </div>
+      )}
       {(!isNetworkOkay || isLoading || isFirstRender) && !isFreezeFrame && (
         <div className="text-center absolute inset-0">
           <Loading>