From 647250c32b3663ee9aedf681729ac7f10347de17 Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Thu, 10 Apr 2025 11:55:28 +0200
Subject: [PATCH] fix(ui): update WebRTCVideo component to properly animate on
 peer connection state (#343)

---
 ui/src/components/WebRTCVideo.tsx |  6 +++++-
 ui/src/routes/devices.$id.tsx     | 12 +++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx
index 99c0191..970867a 100644
--- a/ui/src/components/WebRTCVideo.tsx
+++ b/ui/src/components/WebRTCVideo.tsx
@@ -28,6 +28,7 @@ export default function WebRTCVideo() {
   const videoElm = useRef<HTMLVideoElement>(null);
   const mediaStream = useRTCStore(state => state.mediaStream);
   const [isPlaying, setIsPlaying] = useState(false);
+  const peerConnectionState = useRTCStore(state => state.peerConnectionState);
 
   // Store hooks
   const settings = useSettingsStore();
@@ -601,7 +602,10 @@ export default function WebRTCVideo() {
                             "cursor-none":
                               settings.mouseMode === "absolute" &&
                               settings.isCursorHidden,
-                            "opacity-0": isVideoLoading || hdmiError,
+                            "opacity-0":
+                              isVideoLoading ||
+                              hdmiError ||
+                              peerConnectionState !== "connected",
                             "animate-slideUpFade border border-slate-800/30 opacity-0 shadow dark:border-slate-300/20":
                               isPlaying,
                           },
diff --git a/ui/src/routes/devices.$id.tsx b/ui/src/routes/devices.$id.tsx
index 1b66bf5..70132f4 100644
--- a/ui/src/routes/devices.$id.tsx
+++ b/ui/src/routes/devices.$id.tsx
@@ -795,14 +795,16 @@ export default function KvmIdRoute() {
             kvmName={deviceName || "JetKVM Device"}
           />
 
-          <div className="flex h-full w-full overflow-hidden">
-            <div className="pointer-events-none fixed inset-0 isolate z-20 flex h-full w-full items-center justify-center">
-              <div className="my-2 h-full max-h-[720px] w-full max-w-[1280px] rounded-md">
+          <div className="relative z-50 flex h-full w-full overflow-hidden">
+            <WebRTCVideo />
+            <div
+              style={{ animationDuration: "500ms" }}
+              className="pointer-events-none absolute inset-0 flex animate-slideUpFade items-center justify-center p-4 opacity-0"
+            >
+              <div className="relative h-full max-h-[720px] w-full max-w-[1280px] rounded-md">
                 {!!ConnectionStatusElement && ConnectionStatusElement}
               </div>
             </div>
-
-            {peerConnectionState === "connected" && <WebRTCVideo />}
             <SidebarContainer sidebarView={sidebarView} />
           </div>
         </div>