From 9affd248f3dedc58727d30d7c332aed8e25fbc6d Mon Sep 17 00:00:00 2001
From: Tom Wopat <tomwopat@hazzardcounty.org>
Date: Tue, 23 Sep 2025 23:50:05 -0400
Subject: [PATCH 1/3] feat: allow pointer lock when no video

---
 ui/src/components/WebRTCVideo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx
index 64452bf8..489abddf 100644
--- a/ui/src/components/WebRTCVideo.tsx
+++ b/ui/src/components/WebRTCVideo.tsx
@@ -542,7 +542,7 @@ 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} />
                             <NoAutoplayPermissionsOverlay

From dc7791c2459c47ad49f4dbfaba88fb05ad1aa74a Mon Sep 17 00:00:00 2001
From: Tom Wopat <tomwopat@hazzardcounty.org>
Date: Tue, 23 Sep 2025 23:50:06 -0400
Subject: [PATCH 2/3] feat: add fullscreen button

---
 ui/src/components/VideoOverlay.tsx | 32 ++++++++++++++++++++----------
 ui/src/components/WebRTCVideo.tsx  |  2 +-
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/VideoOverlay.tsx b/ui/src/components/VideoOverlay.tsx
index 1c59e788..0b66da65 100644
--- a/ui/src/components/VideoOverlay.tsx
+++ b/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,14 +248,25 @@ export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) {
                         </li>
                       </ul>
                     </div>
-                    <div>
-                      <LinkButton
-                        to={"https://jetkvm.com/docs/getting-started/troubleshooting"}
-                        theme="light"
-                        text="Learn more"
-                        TrailingIcon={ArrowRightIcon}
-                        size="SM"
-                      />
+                    <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"
+                          text="Learn more"
+                          TrailingIcon={ArrowRightIcon}
+                          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>
diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx
index 489abddf..ee9144fe 100644
--- a/ui/src/components/WebRTCVideo.tsx
+++ b/ui/src/components/WebRTCVideo.tsx
@@ -544,7 +544,7 @@ export default function WebRTCVideo() {
                         >
                           <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={() => {

From 1f7083a023434a610b26aefb8077617fcd78a3dd Mon Sep 17 00:00:00 2001
From: Tom Wopat <tomwopat@hazzardcounty.org>
Date: Thu, 25 Sep 2025 09:09:17 -0400
Subject: [PATCH 3/3] Revert "feat: add fullscreen button"

This reverts commit dc7791c2459c47ad49f4dbfaba88fb05ad1aa74a.
---
 ui/src/components/VideoOverlay.tsx | 32 ++++++++++--------------------
 ui/src/components/WebRTCVideo.tsx  |  2 +-
 2 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/ui/src/components/VideoOverlay.tsx b/ui/src/components/VideoOverlay.tsx
index 0b66da65..1c59e788 100644
--- a/ui/src/components/VideoOverlay.tsx
+++ b/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 { LuMaximize, LuPlay } from "react-icons/lu";
+import { LuPlay } from "react-icons/lu";
 import { BsMouseFill } from "react-icons/bs";
 
 import { Button, LinkButton } from "@components/Button";
@@ -209,10 +209,9 @@ export function PeerConnectionDisconnectedOverlay({
 interface HDMIErrorOverlayProps {
   readonly show: boolean;
   readonly hdmiState: string;
-  readonly requestFullscreen: () => void;
 }
 
-export function HDMIErrorOverlay({ show, hdmiState, requestFullscreen }: HDMIErrorOverlayProps) {
+export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) {
   const isNoSignal = hdmiState === "no_signal";
   const isOtherError = hdmiState === "no_lock" || hdmiState === "out_of_range";
 
@@ -248,25 +247,14 @@ export function HDMIErrorOverlay({ show, hdmiState, requestFullscreen }: HDMIErr
                         </li>
                       </ul>
                     </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"
-                          text="Learn more"
-                          TrailingIcon={ArrowRightIcon}
-                          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>
+                      <LinkButton
+                        to={"https://jetkvm.com/docs/getting-started/troubleshooting"}
+                        theme="light"
+                        text="Learn more"
+                        TrailingIcon={ArrowRightIcon}
+                        size="SM"
+                      />
                     </div>
                   </div>
                 </div>
diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx
index ee9144fe..489abddf 100644
--- a/ui/src/components/WebRTCVideo.tsx
+++ b/ui/src/components/WebRTCVideo.tsx
@@ -544,7 +544,7 @@ export default function WebRTCVideo() {
                         >
                           <div className="relative h-full w-full rounded-md" onClick={requestPointerLock}>
                             <LoadingVideoOverlay show={isVideoLoading} />
-                            <HDMIErrorOverlay show={hdmiError} hdmiState={hdmiState} requestFullscreen={requestFullscreen}/>
+                            <HDMIErrorOverlay show={hdmiError} hdmiState={hdmiState} />
                             <NoAutoplayPermissionsOverlay
                               show={hasNoAutoPlayPermissions}
                               onPlayClick={() => {