Fix streamIdleMode checkbox being wonky

src/clientSideScene/CameraControls.ts

@@ -275,11 +275,6 @@ export class CameraControls {
     >[0]
 
     const cb = ({ data, type }: CallBackParam) => {
-      // We're reconnecting, so ignore this init proces.
-      if (this.oldCameraState) {
-        return
-      }
-
       const camSettings = data.settings
       this.camera.position.set(
         camSettings.pos.x,
@@ -965,16 +960,16 @@ export class CameraControls {
   }
 
   async restoreRemoteCameraStateAndTriggerSync() {
-    if (!this.oldCameraState) return
+    if (this.oldCameraState) {
-
+      await this.engineCommandManager.sendSceneCommand({
-    await this.engineCommandManager.sendSceneCommand({
+        type: 'modeling_cmd_req',
-      type: 'modeling_cmd_req',
+        cmd_id: uuidv4(),
-      cmd_id: uuidv4(),
+        cmd: {
-      cmd: {
+          type: 'default_camera_set_view',
-        type: 'default_camera_set_view',
+          view: this.oldCameraState,
-        view: this.oldCameraState,
+        },
-      },
+      })
-    })
+    }
 
     await this.engineCommandManager.sendSceneCommand({
       type: 'modeling_cmd_req',

src/lang/std/engineConnection.ts

@@ -1494,6 +1494,7 @@ export class EngineCommandManager extends EventTarget {
       })
 
       this._camControlsCameraChange()
+
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this.sendSceneCommand({
         // CameraControls subscribes to default_camera_get_settings response events
@@ -1504,6 +1505,7 @@ export class EngineCommandManager extends EventTarget {
           type: 'default_camera_get_settings',
         },
       })
+
       setIsStreamReady(true)
 
       // Other parts of the application should use this to react on scene ready.
@@ -1717,7 +1719,7 @@ export class EngineCommandManager extends EventTarget {
       cmd: {
         type: 'reconfigure_stream',
         ...this.streamDimensions,
-        fps: 30,
+        fps: 60, // This is required but it does next to nothing
       },
     }
     this.engineConnection?.send(resizeCmd)

src/lib/settings/initialSettings.tsx

@@ -219,16 +219,32 @@ export function createSettings() {
           (typeof v === 'number' &&
             v >= 1 * MS_IN_MINUTE &&
             v <= 60 * MS_IN_MINUTE),
-        Component: ({ value, updateValue }) => (
+        Component: ({ value: settingValueInStorage, updateValue: writeSettingValueToStorage }) => {
+          const [timeoutId, setTimeoutId] = useState(undefined)
+          const [preview, setPreview] = useState(settingValueInStorage === undefined ? settingValueInStorage : (settingValueInStorage / MS_IN_MINUTE))
+          const onChangeRange = (e: React.SyntheticEvent) => setPreview(e.currentTarget.value)
+          const onSaveRange = (e: React.SyntheticEvent) => {
+            if (preview === undefined) return
+            writeSettingValueToStorage(Number(e.currentTarget.value) * MS_IN_MINUTE)
+          }
+
+          return (
           <div className="flex item-center gap-4 px-2 m-0 py-0">
             <div className="flex flex-col">
               <input
                 type="checkbox"
-                checked={value !== undefined}
+                checked={settingValueInStorage !== undefined}
-                onChange={(e) =>
+                onChange={(event) => {
-                  updateValue(
+                    if (timeoutId) { return }
-                    !e.currentTarget.checked ? undefined : 5 * MS_IN_MINUTE
+                    const isChecked = event.currentTarget.checked
-                  )
+                    clearTimeout(timeoutId)
+                    setTimeoutId(setTimeout(() => {
+                      const requested = !isChecked ? undefined : 5
+                      setPreview(requested)
+                      writeSettingValueToStorage(requested === undefined ? undefined : Number(requested) * MS_IN_MINUTE)
+                      setTimeoutId(undefined)
+                    }, 100))
+                  }
                 }
                 className="block w-4 h-4"
               />
@@ -237,13 +253,14 @@ export function createSettings() {
             <div className="flex flex-col grow">
               <input
                 type="range"
-                onChange={(e) =>
+                onChange={onChangeRange}
-                  updateValue(Number(e.currentTarget.value) * MS_IN_MINUTE)
+                onMouseUp={onSaveRange}
-                }
+                onKeyUp={onSaveRange}
-                disabled={value === undefined}
+                onPointerUp={onSaveRange}
+                disabled={preview === undefined}
                 value={
-                  value !== null && value !== undefined
+                  preview !== null && preview !== undefined
-                    ? value / MS_IN_MINUTE
+                    ? preview
                     : 5
                 }
                 min={1}
@@ -251,18 +268,18 @@ export function createSettings() {
                 step={1}
                 className="block flex-1"
               />
-              {value !== undefined && value !== null && (
+              {preview !== undefined && preview !== null && (
                 <div>
-                  {value / MS_IN_MINUTE === 60
+                  {preview / MS_IN_MINUTE === 60
                     ? '1 hour'
-                    : value / MS_IN_MINUTE === 1
+                    : preview / MS_IN_MINUTE === 1
                     ? '1 minute'
-                    : value / MS_IN_MINUTE + ' minutes'}
+                    : preview + ' minutes'}
                 </div>
               )}
             </div>
           </div>
-        ),
+        )},
       }),
       allowOrbitInSketchMode: new Setting<boolean>({
         defaultValue: false,