fix(ui): keep fps only and ensure overlays fully cover video

Signed-off-by: luckfox-eng29 <eng29@luckfox.com>

ui/src/components/VideoOverlay.tsx

@@ -84,7 +84,7 @@ export function LoadingConnectionOverlay({ show, text }: LoadingConnectionOverla
     <AnimatePresence>
       {show && (
         <motion.div
-          className="aspect-video h-full w-full"
+          className="absolute inset-0 h-full w-full"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0, transition: { duration: 0 } }}
@@ -124,7 +124,7 @@ export function ConnectionFailedOverlay({
     <AnimatePresence>
       {show && (
         <motion.div
-          className="aspect-video h-full w-full"
+          className="absolute inset-0 h-full w-full"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0, transition: { duration: 0 } }}
@@ -215,7 +215,7 @@ export function PeerConnectionDisconnectedOverlay({
     <AnimatePresence>
       {show && (
         <motion.div
-          className="aspect-video h-full w-full"
+          className="absolute inset-0 h-full w-full"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0, transition: { duration: 0 } }}
@@ -302,7 +302,7 @@ export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) {
       <AnimatePresence>
         {show && isNoSignal && (
           <motion.div
-            className="absolute inset-0 aspect-video h-full w-full "
+            className="absolute inset-0 h-full w-full "
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
@@ -386,7 +386,7 @@ export function HDMIErrorOverlay({ show, hdmiState }: HDMIErrorOverlayProps) {
       <AnimatePresence>
         {show && isOtherError && (
           <motion.div
-            className="absolute inset-0 aspect-video h-full w-full"
+            className="absolute inset-0 h-full w-full"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
@@ -446,7 +446,7 @@ export function NoAutoplayPermissionsOverlay({
     <AnimatePresence>
       {show && (
         <motion.div
-          className="absolute inset-0 z-10 aspect-video h-full w-full"
+          className="absolute inset-0 z-10 h-full w-full"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}

ui/src/layout/core/bar_bottom/BottomBarMobile.tsx

@@ -22,7 +22,6 @@ import {
   useRTCStore,
   useSettingsStore,
   useUiStore,
-  useVideoStore,
   useVpnStore,
 } from "@/hooks/stores";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
@@ -48,9 +47,6 @@ const views = [
 export default function BottomBarMobile() {
   const { $at } = useReactAt();
   const keyboardLedState = useHidStore(state => state.keyboardLedState);
-  const videoSize = useVideoStore(
-    state => `${Math.round(state.clientWidth)}x${Math.round(state.clientHeight)}`,
-  );
   const { isDark } = useTheme();
   const setDisableFocusTrap = useUiStore(state => state.setDisableVideoFocusTrap);
   const toggleSidebarView = useUiStore(state => state.toggleSidebarView);
@@ -79,10 +75,7 @@ export default function BottomBarMobile() {
 
       stats?.forEach(report => {
         if (report.type === "inbound-rtp") {
-          if(report.framesPerSecond){
-            setFps(report.framesPerSecond)
-          }
-
+          setFps(report.framesPerSecond ?? 0);
         }
       });
     })();
@@ -117,7 +110,7 @@ export default function BottomBarMobile() {
     { icon: isDark ? Video2SVG : VideoSVG, label: $at("video") },
     { icon: StateSvg, label: $at("status") },
   ];
-  const videoButtonLabel = forceHttp ? `${videoSize}` : `${videoSize} ${fps}fps `;
+  const videoButtonLabel = forceHttp ? "N/A fps" : `${Math.round(fps)}fps`;
   if(isVirtualKeyboardEnabled){
     return <></>
   }

ui/src/layout/core/bar_bottom/BottomBarPC.tsx

@@ -44,12 +44,6 @@ export default function BottomBarPC() {
   const activeModifiers = useHidStore(state => state.activeModifiers);
   const audioMode = useAudioModeStore(state => state.audioMode);
   const usbEpMode = useUsbEpModeStore(state => state.usbEpMode);
-  // const videoSize = useVideoStore(
-  //   state => `${Math.round(state.width)}x${Math.round(state.height)}`,
-  // );
-  const videoSize = useVideoStore(
-    state => `${Math.round(state.clientWidth)}x${Math.round(state.clientHeight)}`,
-  );
   const setDisableFocusTrap = useUiStore(state => state.setDisableVideoFocusTrap);
   const toggleSidebarView = useUiStore(state => state.toggleSidebarView);
   const showPressedKeys = useSettingsStore(state => state.showPressedKeys);
@@ -89,10 +83,10 @@ export default function BottomBarPC() {
 
   const videoButtonLabel = useMemo(() => {
     if (forceHttp) {
-      return `${videoSize}`;
+      return "N/A fps";
     }
-    return `${videoSize} ${fps}fps `;
-  }, [forceHttp, videoSize, fps]);
+    return `${Math.round(fps)}fps`;
+  }, [forceHttp, fps]);
   useEffect(() => {
     send("getNetworkSettings", {}, resp => {
       if ("error" in resp) return;

ui/src/layout/index.pc.tsx

@@ -848,9 +848,9 @@ export default function PCHome() {
             <Desktop isFullscreen={isFullscreen} />
             <div
               style={{ animationDuration: "500ms" }}
-              className="animate-slideUpFade pointer-events-none absolute inset-0 flex items-center justify-center p-4"
+              className="animate-slideUpFade pointer-events-none absolute inset-0 z-20 flex items-center justify-center"
             >
-              <div className={`relative h-full max-h-[720px] w-full  rounded-md`}>
+              <div className="relative h-full w-full">
                 {!!ConnectionStatusElement && ConnectionStatusElement}
                 {/*<ConnectionFailedOverlay show={true} setupPeerConnection={setupPeerConnection} />*/}
               </div>