Merge a819739790 into 69168ff062

This commit makes the Action Bar Ctrl + Alt + Del button a setting,
which is off by default.

ui/package.json

@@ -10,6 +10,7 @@
     "dev": "vite dev --mode=development",
     "build": "npm run build:prod",
     "build:device": "tsc && vite build --mode=device --emptyOutDir",
+    "dev:device": "vite dev --mode=device",
     "build:prod": "tsc && vite build --mode=production",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },

ui/src/components/ActionBar.tsx

@@ -4,18 +4,21 @@ import {
   useMountMediaStore,
   useUiStore,
   useSettingsStore,
+  useVideoStore,
 } from "@/hooks/stores";
 import { MdOutlineContentPasteGo } from "react-icons/md";
 import Container from "@components/Container";
 import { LuHardDrive, LuMaximize, LuSettings, LuSignal } from "react-icons/lu";
 import { cx } from "@/cva.config";
 import PasteModal from "@/components/popovers/PasteModal";
-import { FaKeyboard } from "react-icons/fa6";
+import { FaKeyboard, FaLock } from "react-icons/fa6";
 import WakeOnLanModal from "@/components/popovers/WakeOnLan/Index";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import MountPopopover from "./popovers/MountPopover";
 import { Fragment, useCallback, useRef } from "react";
 import { CommandLineIcon } from "@heroicons/react/20/solid";
+import useKeyboard from "@/hooks/useKeyboard";
+import { keys, modifiers } from "@/keyboardMappings";
 
 export default function Actionbar({
   requestFullscreen,
@@ -33,6 +36,7 @@ export default function Actionbar({
     state => state.remoteVirtualMediaState,
   );
   const developerMode = useSettingsStore(state => state.developerMode);
+  const hdmiState = useVideoStore(state => state.hdmiState);
 
   // This is the only way to get a reliable state change for the popover
   // at time of writing this there is no mount, or unmount event for the popover
@@ -52,6 +56,8 @@ export default function Actionbar({
     [setDisableFocusTrap],
   );
 
+  const { sendKeyboardEvent, resetKeyboardState } = useKeyboard();
+
   return (
     <Container className="bg-white border-b border-b-slate-800/20 dark:bg-slate-900 dark:border-b-slate-300/20">
       <div
@@ -203,6 +209,23 @@ export default function Actionbar({
               onClick={() => setVirtualKeyboard(!virtualKeyboard)}
             />
           </div>
+            {useSettingsStore().actionBarCtrlAltDel && (
+            <div className="hidden lg:block">
+              <Button
+              size="XS"
+              theme="light"
+              text="Ctrl + Alt + Del"
+              LeadingIcon={FaLock}
+              onClick={() => {
+                sendKeyboardEvent(
+                [keys["Delete"]],
+                [modifiers["ControlLeft"], modifiers["AltLeft"]],
+                );
+                setTimeout(resetKeyboardState, 100);
+              }}
+              />
+            </div>
+            )}
         </div>
 
         <div className="flex flex-wrap items-center gap-x-2 gap-y-2">
@@ -247,6 +270,7 @@ export default function Actionbar({
               size="XS"
               theme="light"
               text="Fullscreen"
+              disabled={hdmiState !== 'ready'}
               LeadingIcon={LuMaximize}
               onClick={() => requestFullscreen()}
             />

ui/src/components/WebRTCVideo.tsx

@@ -30,6 +30,8 @@ export default function WebRTCVideo() {
   const {
     setClientSize: setVideoClientSize,
     setSize: setVideoSize,
+    width: videoWidth,
+    height: videoHeight,
     clientWidth: videoClientWidth,
     clientHeight: videoClientHeight,
   } = useVideoStore();
@@ -102,20 +104,43 @@ export default function WebRTCVideo() {
   const mouseMoveHandler = useCallback(
     (e: MouseEvent) => {
       if (!videoClientWidth || !videoClientHeight) return;
-      const { buttons } = e;
+      // Get the aspect ratios of the video element and the video stream
+      const videoElementAspectRatio = videoClientWidth / videoClientHeight;
+      const videoStreamAspectRatio = videoWidth / videoHeight;
 
-      // Clamp mouse position within the video boundaries
-      const currMouseX = Math.min(Math.max(1, e.offsetX), videoClientWidth);
-      const currMouseY = Math.min(Math.max(1, e.offsetY), videoClientHeight);
+      // Calculate the effective video display area
+      let effectiveWidth = videoClientWidth;
+      let effectiveHeight = videoClientHeight;
+      let offsetX = 0;
+      let offsetY = 0;
 
-      // Normalize mouse position to 0-32767 range (HID absolute coordinate system)
-      const x = Math.round((currMouseX / videoClientWidth) * 32767);
-      const y = Math.round((currMouseY / videoClientHeight) * 32767);
+      if (videoElementAspectRatio > videoStreamAspectRatio) {
+        // Pillarboxing: black bars on the left and right
+        effectiveWidth = videoClientHeight * videoStreamAspectRatio;
+        offsetX = (videoClientWidth - effectiveWidth) / 2;
+      } else if (videoElementAspectRatio < videoStreamAspectRatio) {
+        // Letterboxing: black bars on the top and bottom
+        effectiveHeight = videoClientWidth / videoStreamAspectRatio;
+        offsetY = (videoClientHeight - effectiveHeight) / 2;
+      }
+
+      // Clamp mouse position within the effective video boundaries
+      const clampedX = Math.min(Math.max(offsetX, e.offsetX), offsetX + effectiveWidth);
+      const clampedY = Math.min(Math.max(offsetY, e.offsetY), offsetY + effectiveHeight);
+
+      // Map clamped mouse position to the video stream's coordinate system
+      const relativeX = (clampedX - offsetX) / effectiveWidth;
+      const relativeY = (clampedY - offsetY) / effectiveHeight;
+
+      // Convert to HID absolute coordinate system (0-32767 range)
+      const x = Math.round(relativeX * 32767);
+      const y = Math.round(relativeY * 32767);
 
       // Send mouse movement
+      const { buttons } = e;
       sendMouseMovement(x, y, buttons);
     },
-    [sendMouseMovement, videoClientHeight, videoClientWidth],
+    [sendMouseMovement, videoClientHeight, videoClientWidth, videoWidth, videoHeight],
   );
 
   const mouseWheelHandler = useCallback(

ui/src/components/sidebar/settings.tsx

@@ -796,6 +796,15 @@ export default function SettingsSidebar() {
             }}
           />
         </SettingsItem>
+        <SettingsItem
+          title="Ctrl + Alt + Del Button"
+          description="Display Ctrl + Alt + Del button on the Action Bar"
+        >
+          <Checkbox
+            checked={settings.actionBarCtrlAltDel}
+            onChange={e => settings.setActionBarCtrlAltDel(e.target.checked)}
+          />
+        </SettingsItem>
         <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
         <div className="pb-2 space-y-4">
           <SectionHeader

ui/src/hooks/stores.ts

@@ -270,6 +270,9 @@ interface SettingsState {
   // Add new developer mode state
   developerMode: boolean;
   setDeveloperMode: (enabled: boolean) => void;
+
+  actionBarCtrlAltDel: boolean;
+  setActionBarCtrlAltDel: (enabled: boolean) => void;
 }
 
 export const useSettingsStore = create(
@@ -287,6 +290,9 @@ export const useSettingsStore = create(
       // Add developer mode with default value
       developerMode: false,
       setDeveloperMode: enabled => set({ developerMode: enabled }),
+
+      actionBarCtrlAltDel: false,
+      setActionBarCtrlAltDel: enabled => set({ actionBarCtrlAltDel: enabled }),
     }),
     {
       name: "settings",

ui/vite.config.ts

@@ -2,13 +2,31 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import tsconfigPaths from "vite-tsconfig-paths";
 
-export default defineConfig(({ mode }) => {
+declare const process: {
+  env: {
+    JETKVM_PROXY_URL: string;
+  };
+};
+
+export default defineConfig(({ mode, command }) => {
   const isCloud = mode === "production";
   const onDevice = mode === "device";
+  const { JETKVM_PROXY_URL } = process.env;
+
   return {
     plugins: [tsconfigPaths(), react()],
     build: { outDir: isCloud ? "dist" : "../static" },
-    server: { host: "0.0.0.0" },
-    base: onDevice ? "/static" : "/",
+    server: {
+      host: "0.0.0.0",
+      proxy: JETKVM_PROXY_URL ? {
+        '/me': JETKVM_PROXY_URL,
+        '/device': JETKVM_PROXY_URL,
+        '/webrtc': JETKVM_PROXY_URL,
+        '/auth': JETKVM_PROXY_URL,
+        '/storage': JETKVM_PROXY_URL,
+        '/cloud': JETKVM_PROXY_URL,
+      } : undefined
+    },
+    base: onDevice && command === 'build' ? "/static" : "/",
   };
 });