ui/src/hooks/stores.ts

@@ -929,12 +929,13 @@ export const useMacrosStore = create<MacrosState>((set, get) => ({
 
 export interface FailsafeModeState {
   isFailsafeMode: boolean;
-  reason: string; // "video", "network", etc.
+  reason: string | null; // "video", "network", etc.
-  setFailsafeMode: (active: boolean, reason: string) => void;
+  setFailsafeMode: (active: boolean, reason: string | null) => void;
 }
 
 export const useFailsafeModeStore = create<FailsafeModeState>(set => ({
   isFailsafeMode: false,
-  reason: "",
+  reason: null,
-  setFailsafeMode: (active, reason) => set({ isFailsafeMode: active, reason }),
+  setFailsafeMode: (active: boolean, reason: string | null) =>
+    set({ isFailsafeMode: active, reason }),
 }));

ui/src/routes/devices.$id.settings.general.reboot.tsx

@@ -3,7 +3,6 @@ import { useCallback, useState } from "react";
 
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { Button } from "@components/Button";
-import { useFailsafeModeStore } from "@/hooks/stores";
 
 import LoadingSpinner from "../components/LoadingSpinner";
 import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
@@ -16,7 +15,6 @@ export default function SettingsGeneralRebootRoute() {
   const { send } = useJsonRpc();
   const [isRebooting, setIsRebooting] = useState(false);
   const { navigateTo } = useDeviceUiNavigation();
-  const { setFailsafeMode } = useFailsafeModeStore();
 
   const onConfirmUpdate = useCallback(async () => {
     setIsRebooting(true);
@@ -24,9 +22,8 @@ export default function SettingsGeneralRebootRoute() {
     send("reboot", { force: true });
 
     await new Promise(resolve => setTimeout(resolve, REBOOT_REDIRECT_DELAY_MS));
-    setFailsafeMode(false, "");
     navigateTo("/");
-  }, [navigateTo, send, setFailsafeMode]);
+  }, [navigateTo, send]);
 
   {
     /* TODO: Migrate to using URLs instead of the global state. To simplify the refactoring, we'll keep the global state for now. */

ui/src/routes/devices.$id.tsx

@@ -853,7 +853,7 @@ export default function KvmIdRoute() {
           />
 
           <div className="relative flex h-full w-full overflow-hidden">
-            {(isFailsafeMode && failsafeReason === "video") ? null : <WebRTCVideo />}
+            {!isFailsafeMode && failsafeReason === "video" && <WebRTCVideo />}
             <div
               style={{ animationDuration: "500ms" }}
               className="animate-slideUpFade pointer-events-none absolute inset-0 flex items-center justify-center p-4"