Merge 57fbee1490 into 5e91cfc7fa

Makefile

@@ -1,5 +1,5 @@
-VERSION_DEV := 0.3.8-dev$(shell date +%Y%m%d%H%M)
-VERSION := 0.3.7
+VERSION_DEV := 0.3.5-dev$(shell date +%Y%m%d%H%M)
+VERSION := 0.3.4
 
 hash_resource:
 	@shasum -a 256 resource/jetkvm_native | cut -d ' ' -f 1 > resource/jetkvm_native.sha256

config.go

@@ -55,9 +55,6 @@ func LoadConfig() {
 		return
 	}
 
-	// load the default config
-	config = defaultConfig
-
 	file, err := os.Open(configPath)
 	if err != nil {
 		logger.Debug("default config file doesn't exist, using default")

ui/src/components/WebRTCVideo.tsx

@@ -285,6 +285,11 @@ export default function WebRTCVideo() {
       e.preventDefault();
       const prev = useHidStore.getState();
 
+      // if (document.activeElement?.id !== "videoFocusTrap") {
+      //   console.log("KEYUP: Not focusing on the video", document.activeElement);
+      //   return;
+      // }
+
       setIsNumLockActive(e.getModifierState("NumLock"));
       setIsCapsLockActive(e.getModifierState("CapsLock"));
       setIsScrollLockActive(e.getModifierState("ScrollLock"));
@@ -331,18 +336,6 @@ export default function WebRTCVideo() {
     [keyDownHandler, keyUpHandler, resetKeyboardState, sendKeyboardEvent],
   );
 
-  const videoKeyUpHandler = useCallback((e: KeyboardEvent) => {
-    // In fullscreen mode in chrome & safari, the space key is used to pause/play the video
-    // there is no way to prevent this, so we need to simply force play the video when it's paused.
-    // Fix only works in chrome based browsers.
-    if (e.code === "Space") {
-      if (videoElm.current?.paused == true) {
-        console.log("Force playing video");
-        videoElm.current?.play();
-      }
-    }
-  }, []);
-
   useEffect(
     function setupVideoEventListeners() {
       let videoElmRefValue = null;
@@ -354,7 +347,7 @@ export default function WebRTCVideo() {
       videoElmRefValue.addEventListener("mousemove", mouseMoveHandler, { signal });
       videoElmRefValue.addEventListener("pointerdown", mouseMoveHandler, { signal });
       videoElmRefValue.addEventListener("pointerup", mouseMoveHandler, { signal });
-      videoElmRefValue.addEventListener("keyup", videoKeyUpHandler, { signal });
+
       videoElmRefValue.addEventListener("wheel", mouseWheelHandler, { signal });
       videoElmRefValue.addEventListener(
         "contextmenu",
@@ -371,13 +364,7 @@ export default function WebRTCVideo() {
         if (videoElmRefValue) abortController.abort();
       };
     },
-    [
-      mouseMoveHandler,
-      resetMousePosition,
-      onVideoPlaying,
-      mouseWheelHandler,
-      videoKeyUpHandler,
-    ],
+    [mouseMoveHandler, resetMousePosition, onVideoPlaying, mouseWheelHandler],
   );
 
   useEffect(
@@ -423,7 +410,7 @@ export default function WebRTCVideo() {
   }, [sendKeyboardEvent, setDisableVideoFocusTrap, sidebarView]);
 
   return (
-    <div className="grid h-full w-full grid-rows-layout">
+    <div className="grid w-full h-full grid-rows-layout">
       <div className="min-h-[39.5px]">
         <fieldset disabled={peerConnectionState !== "connected"}>
           <Actionbar
@@ -440,18 +427,18 @@ export default function WebRTCVideo() {
         <div className="relative h-full">
           <div
             className={cx(
-              "absolute inset-0 bg-blue-50/40 opacity-80 dark:bg-slate-800/40",
+              "absolute inset-0 bg-blue-50/40 dark:bg-slate-800/40 opacity-80",
               "[background-image:radial-gradient(theme(colors.blue.300)_0.5px,transparent_0.5px),radial-gradient(theme(colors.blue.300)_0.5px,transparent_0.5px)] dark:[background-image:radial-gradient(theme(colors.slate.700)_0.5px,transparent_0.5px),radial-gradient(theme(colors.slate.700)_0.5px,transparent_0.5px)]",
               "[background-position:0_0,10px_10px]",
               "[background-size:20px_20px]",
             )}
           />
-          <div className="flex h-full flex-col">
+          <div className="flex flex-col h-full">
             <div className="relative flex-grow overflow-hidden">
-              <div className="flex h-full flex-col">
-                <div className="grid flex-grow grid-rows-bodyFooter overflow-hidden">
-                  <div className="relative mx-4 my-2 flex items-center justify-center overflow-hidden">
-                    <div className="relative flex h-full w-full items-center justify-center">
+              <div className="flex flex-col h-full">
+                <div className="grid flex-grow overflow-hidden grid-rows-bodyFooter">
+                  <div className="relative flex items-center justify-center mx-4 my-2 overflow-hidden">
+                    <div className="relative flex items-center justify-center w-full h-full">
                       <video
                         ref={videoElm}
                         autoPlay={true}
@@ -467,14 +454,14 @@ export default function WebRTCVideo() {
                           {
                             "cursor-none": settings.isCursorHidden,
                             "opacity-0": isLoading || isConnectionError || hdmiError,
-                            "animate-slideUpFade border border-slate-800/30 opacity-0 shadow dark:border-slate-300/20":
+                            "animate-slideUpFade border border-slate-800/30 dark:border-slate-300/20 opacity-0 shadow":
                               isPlaying,
                           },
                         )}
                       />
                       <div
                         style={{ animationDuration: "500ms" }}
-                        className="pointer-events-none absolute inset-0 flex animate-slideUpFade items-center justify-center opacity-0"
+                        className="absolute inset-0 flex items-center justify-center opacity-0 pointer-events-none animate-slideUpFade"
                       >
                         <div className="relative h-full max-h-[720px] w-full max-w-[1280px] rounded-md">
                           <LoadingOverlay show={isLoading} />

ui/src/components/sidebar/settings.tsx

@@ -239,7 +239,6 @@ export default function SettingsSidebar() {
     }
 
     setBacklightSettings(settings);
-    handleBacklightSettingsSave();
   }
 
   const handleBacklightSettingsSave = () => {
@@ -363,7 +362,7 @@ export default function SettingsSidebar() {
       if ("error" in resp) return;
       setUsbEmulationEnabled(resp.result as boolean);
     });
-  }, [getCloudState, send, setBacklightSettings, setDeveloperMode, setHideCursor, setJiggler]);
+  }, [getCloudState, send, setDeveloperMode, setHideCursor, setJiggler]);
 
   const getDevice = useCallback(async () => {
     try {
@@ -901,6 +900,12 @@ export default function SettingsSidebar() {
         <p className="text-xs text-slate-600 dark:text-slate-400">
           The display will wake up when the connection state changes, or when touched.
         </p>
+        <Button
+          size="SM"
+          theme="primary"
+          text="Save Display Settings"
+          onClick={handleBacklightSettingsSave}
+        />
         <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
         <div className="pb-2 space-y-4">
           <SectionHeader