fix(ui): update WebRTCVideo component to properly animate on peer connection state (#343)

Author: adamshiervani

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,
                           },

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>