Merge 05cc4a1fab into 0d7f47c109

Fixed the Tailwind CSS syntax for `in` (nested) selector
Added missing React dependency for `useEffect`

config.go

@@ -111,7 +111,7 @@ var defaultConfig = &Config{
 	ActiveExtension:      "",
 	KeyboardMacros:       []KeyboardMacro{},
 	DisplayRotation:      "270",
-	KeyboardLayout:       "en-US",
+	KeyboardLayout:       "en_US",
 	DisplayMaxBrightness: 64,
 	DisplayDimAfterSec:   120,  // 2 minutes
 	DisplayOffAfterSec:   1800, // 30 minutes

native.go

@@ -8,6 +8,7 @@ import (
 	"io"
 	"net"
 	"os"
+	"os/exec"
 	"sync"
 	"time"
 
@@ -41,6 +42,11 @@ var ongoingRequests = make(map[int32]chan *CtrlResponse)
 
 var lock = &sync.Mutex{}
 
+var (
+	nativeCmd     *exec.Cmd
+	nativeCmdLock = &sync.Mutex{}
+)
+
 func CallCtrlAction(action string, params map[string]interface{}) (*CtrlResponse, error) {
 	lock.Lock()
 	defer lock.Unlock()
@@ -129,16 +135,26 @@ func StartNativeSocketServer(socketPath string, handleClient func(net.Conn), isC
 	scopedLogger.Info().Msg("server listening")
 
 	go func() {
-		conn, err := listener.Accept()
-		listener.Close()
-		if err != nil {
-			scopedLogger.Warn().Err(err).Msg("failed to accept socket")
+		for {
+			conn, err := listener.Accept()
+
+			if err != nil {
+				scopedLogger.Warn().Err(err).Msg("failed to accept socket")
+				continue
+			}
+			if isCtrl {
+				// check if the channel is closed
+				select {
+				case <-ctrlClientConnected:
+					scopedLogger.Debug().Msg("ctrl client reconnected")
+				default:
+					close(ctrlClientConnected)
+					scopedLogger.Debug().Msg("first native ctrl socket client connected")
+				}
+			}
+
+			go handleClient(conn)
 		}
-		if isCtrl {
-			close(ctrlClientConnected)
-			scopedLogger.Debug().Msg("first native ctrl socket client connected")
-		}
-		handleClient(conn)
 	}()
 
 	return listener
@@ -235,6 +251,51 @@ func handleVideoClient(conn net.Conn) {
 	}
 }
 
+func startNativeBinaryWithLock(binaryPath string) (*exec.Cmd, error) {
+	nativeCmdLock.Lock()
+	defer nativeCmdLock.Unlock()
+
+	cmd, err := startNativeBinary(binaryPath)
+	if err != nil {
+		return nil, err
+	}
+	nativeCmd = cmd
+	return cmd, nil
+}
+
+func restartNativeBinary(binaryPath string) error {
+	time.Sleep(10 * time.Second)
+	// restart the binary
+	nativeLogger.Info().Msg("restarting jetkvm_native binary")
+	cmd, err := startNativeBinary(binaryPath)
+	if err != nil {
+		nativeLogger.Warn().Err(err).Msg("failed to restart binary")
+	}
+	nativeCmd = cmd
+	return err
+}
+
+func superviseNativeBinary(binaryPath string) error {
+	nativeCmdLock.Lock()
+	defer nativeCmdLock.Unlock()
+
+	if nativeCmd == nil || nativeCmd.Process == nil {
+		return restartNativeBinary(binaryPath)
+	}
+
+	err := nativeCmd.Wait()
+
+	if err == nil {
+		nativeLogger.Info().Err(err).Msg("jetkvm_native binary exited with no error")
+	} else if exiterr, ok := err.(*exec.ExitError); ok {
+		nativeLogger.Warn().Int("exit_code", exiterr.ExitCode()).Msg("jetkvm_native binary exited with error")
+	} else {
+		nativeLogger.Warn().Err(err).Msg("jetkvm_native binary exited with unknown error")
+	}
+
+	return restartNativeBinary(binaryPath)
+}
+
 func ExtractAndRunNativeBin() error {
 	binaryPath := "/userdata/jetkvm/bin/jetkvm_native"
 	if err := ensureBinaryUpdated(binaryPath); err != nil {
@@ -246,12 +307,28 @@ func ExtractAndRunNativeBin() error {
 		return fmt.Errorf("failed to make binary executable: %w", err)
 	}
 	// Run the binary in the background
-	cmd, err := startNativeBinary(binaryPath)
+	cmd, err := startNativeBinaryWithLock(binaryPath)
 	if err != nil {
 		return fmt.Errorf("failed to start binary: %w", err)
 	}
 
-	//TODO: add auto restart
+	// check if the binary is still running every 10 seconds
+	go func() {
+		for {
+			select {
+			case <-appCtx.Done():
+				nativeLogger.Info().Msg("stopping native binary supervisor")
+				return
+			default:
+				err := superviseNativeBinary(binaryPath)
+				if err != nil {
+					nativeLogger.Warn().Err(err).Msg("failed to supervise native binary")
+					time.Sleep(1 * time.Second) // Add a short delay to prevent rapid successive calls
+				}
+			}
+		}
+	}()
+
 	go func() {
 		<-appCtx.Done()
 		nativeLogger.Info().Int("pid", cmd.Process.Pid).Msg("killing process")

ui/src/components/WebRTCVideo.tsx

@@ -115,9 +115,18 @@ export default function WebRTCVideo() {
   const isFullscreenEnabled = document.fullscreenEnabled;
  
   const checkNavigatorPermissions = useCallback(async (permissionName: string) => {
-    const name = permissionName as PermissionName;
-    const { state } = await navigator.permissions.query({ name });
-    return state === "granted";
+    if (!navigator.permissions || !navigator.permissions.query) {
+      return false; // if can't query permissions, assume NOT granted
+    }
+
+    try {
+      const name = permissionName as PermissionName;
+      const { state } = await navigator.permissions.query({ name });
+      return state === "granted";
+    } catch {
+      // ignore errors
+    }
+    return false; // if query fails, assume NOT granted
   }, []);
 
   const requestPointerLock = useCallback(async () => {
@@ -128,7 +137,11 @@ export default function WebRTCVideo() {
     const isPointerLockGranted = await checkNavigatorPermissions("pointer-lock");
 
     if (isPointerLockGranted && settings.mouseMode === "relative") {
-      await videoElm.current.requestPointerLock();
+      try {
+        await videoElm.current.requestPointerLock();
+      } catch {
+        // ignore errors
+      }
     }
   }, [checkNavigatorPermissions, isPointerLockPossible, settings.mouseMode]);
 
@@ -136,10 +149,13 @@ export default function WebRTCVideo() {
     if (videoElm.current === null) return;
 
     const isKeyboardLockGranted = await checkNavigatorPermissions("keyboard-lock");
-    if (isKeyboardLockGranted) {
-      if ("keyboard" in navigator) {
+  
+    if (isKeyboardLockGranted && "keyboard" in navigator) {
+      try {
         // @ts-expect-error - keyboard lock is not supported in all browsers
-        await navigator.keyboard.lock();
+         await navigator.keyboard.lock();
+      } catch {
+        // ignore errors
       }
     }
   }, [checkNavigatorPermissions]);
@@ -148,8 +164,12 @@ export default function WebRTCVideo() {
     if (videoElm.current === null || document.fullscreenElement !== videoElm.current) return;
 
     if ("keyboard" in navigator) {
-        // @ts-expect-error - keyboard unlock is not supported in all browsers
-        await navigator.keyboard.unlock();
+        try {
+          // @ts-expect-error - keyboard unlock is not supported in all browsers
+          await navigator.keyboard.unlock();
+        } catch {
+          // ignore errors
+       }
     }
   }, []);
 

ui/src/components/popovers/PasteModal.tsx

@@ -39,11 +39,11 @@ export default function PasteModal() {
     state => state.setKeyboardLayout,
   );
 
-  // this ensures we always get the original en-US if it hasn't been set yet
+  // this ensures we always get the original en_US if it hasn't been set yet
   const safeKeyboardLayout = useMemo(() => {
     if (keyboardLayout && keyboardLayout.length > 0)
       return keyboardLayout;
-    return "en-US";
+    return "en_US";
   }, [keyboardLayout]);
 
   useEffect(() => {

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

@@ -25,11 +25,11 @@ export default function SettingsKeyboardRoute() {
     state => state.setShowPressedKeys,
   );
 
-  // this ensures we always get the original en-US if it hasn't been set yet
+  // this ensures we always get the original en_US if it hasn't been set yet
   const safeKeyboardLayout = useMemo(() => {
       if (keyboardLayout && keyboardLayout.length > 0)
         return keyboardLayout;
-      return "en-US";
+      return "en_US";
   }, [keyboardLayout]);
 
   const layoutOptions = Object.entries(layouts).map(([code, language]) => { return { value: code, label: language } })
@@ -46,7 +46,7 @@ export default function SettingsKeyboardRoute() {
       if ("error" in resp) return;
       setKeyboardLayout(resp.result as string);
     });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [send, setKeyboardLayout]);
 
   const onKeyboardLayoutChange = useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {

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

@@ -151,7 +151,6 @@ export default function SettingsRoute() {
                     className={({ isActive }) => (isActive ? "active" : "")}
                   >
                     <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
-
                       <LuMouse className="h-4 w-4 shrink-0" />
                       <h1>Mouse</h1>
                     </div>
@@ -163,7 +162,7 @@ export default function SettingsRoute() {
                       to="keyboard"
                       className={({ isActive }) => (isActive ? "active" : "")}
                     >
-                      <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
+                      <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                         <LuKeyboard className="h-4 w-4 shrink-0" />
                         <h1>Keyboard</h1>
                       </div>