Merge dc7791c245 into 703625d59a

* fix: update delay handling in PasteModal component

- Changed default delay value to 20 and adjusted validation to allow values between 0 and 65534.
- Cleaned up code formatting for better readability.

* fix: formatting

ui/src/components/VideoOverlay.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 import { ArrowPathIcon, ArrowRightIcon } from "@heroicons/react/16/solid";
 import { motion, AnimatePresence } from "framer-motion";
-import { LuPlay } from "react-icons/lu";
+import { LuMaximize, LuPlay } from "react-icons/lu";
 import { BsMouseFill } from "react-icons/bs";
 
 import { Button, LinkButton } from "@components/Button";
@@ -209,9 +209,10 @@ export function PeerConnectionDisconnectedOverlay({
 interface HDMIErrorOverlayProps {
   readonly show: boolean;
   readonly hdmiState: string;
+  readonly requestFullscreen: () => void;
 }
 
-export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) {
+export function HDMIErrorOverlay({ show, hdmiState, requestFullscreen }: HDMIErrorOverlayProps) {
   const isNoSignal = hdmiState === "no_signal";
   const isOtherError = hdmiState === "no_lock" || hdmiState === "out_of_range";
 
@@ -247,7 +248,8 @@ export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) {
                         </li>
                       </ul>
                     </div>
-                    <div>
+                    <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 py-1.5">
+                      <div className="relative flex flex-wrap items-center gap-x-2 gap-y-2">
                         <LinkButton
                           to={"https://jetkvm.com/docs/getting-started/troubleshooting"}
                           theme="light"
@@ -256,6 +258,16 @@ export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) {
                           size="SM"
                         />
                       </div>
+                      <div className="flex flex-wrap items-right gap-x-2 gap-y-2">
+                        <Button
+                          size="XS"
+                          theme="light"
+                          text="Fullscreen"
+                          LeadingIcon={LuMaximize}
+                          onClick={() => requestFullscreen()}
+                        />
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>

ui/src/components/WebRTCVideo.tsx

@@ -542,9 +542,9 @@ export default function WebRTCVideo() {
                           style={{ animationDuration: "500ms" }}
                           className="animate-slideUpFade pointer-events-none absolute inset-0 flex items-center justify-center"
                         >
-                          <div className="relative h-full w-full rounded-md">
+                          <div className="relative h-full w-full rounded-md" onClick={requestPointerLock}>
                             <LoadingVideoOverlay show={isVideoLoading} />
-                            <HDMIErrorOverlay show={hdmiError} hdmiState={hdmiState} />
+                            <HDMIErrorOverlay show={hdmiError} hdmiState={hdmiState} requestFullscreen={requestFullscreen}/>
                             <NoAutoplayPermissionsOverlay
                               show={hasNoAutoPlayPermissions}
                               onPlayClick={() => {

ui/src/components/popovers/PasteModal.tsx

@@ -17,6 +17,7 @@ import { TextAreaWithLabel } from "@components/TextArea";
 
 // uint32 max value / 4
 const pasteMaxLength = 1073741824;
+const defaultDelay = 20;
 
 export default function PasteModal() {
   const TextAreaRef = useRef<HTMLTextAreaElement>(null);
@@ -27,10 +28,10 @@ export default function PasteModal() {
   const { executeMacro, cancelExecuteMacro } = useKeyboard();
 
   const [invalidChars, setInvalidChars] = useState<string[]>([]);
-  const [delayValue, setDelayValue] = useState(100);
+  const [delayValue, setDelayValue] = useState(defaultDelay);
   const delay = useMemo(() => {
-    if (delayValue < 50 || delayValue > 65534) {
-      return 100;
+    if (delayValue < 0 || delayValue > 65534) {
+      return defaultDelay;
     }
     return delayValue;
   }, [delayValue]);
@@ -136,7 +137,8 @@ export default function PasteModal() {
                   <div
                     className="w-full"
                     onKeyUp={e => e.stopPropagation()}
-                    onKeyDown={e => e.stopPropagation()}                    onKeyDownCapture={e => e.stopPropagation()}
+                    onKeyDown={e => e.stopPropagation()}
+                    onKeyDownCapture={e => e.stopPropagation()}
                     onKeyUpCapture={e => e.stopPropagation()}
                   >
                     <TextAreaWithLabel