From e047c77cd187148a3443468ddd9e19574b14e6de Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Fri, 3 Oct 2025 13:08:21 +0100
Subject: [PATCH] Add RTSP URL parsing utility and enhance camera settings
 handling

- Implement parseRTSPUrl function to extract username, password, IP, port, and path from RTSP URLs.
- Update CameraSettingFields to utilize parsed RTSP URL data for camera configuration.
- Modify WiFiSettingsForm to allow password visibility toggle.
- Improve SightingOverview loading and error handling UI.
- Adjust NavigationArrow component to reflect updated camera side logic.
---
 .../CameraSettings/CameraSettingFields.tsx    |  9 +++++---
 .../WiFi&Modem/WiFiSettingsForm.tsx           | 14 +++++++++++--
 .../SightingOverview/SightingOverview.tsx     | 21 ++++++++++++++++---
 src/components/UI/NavigationArrow.tsx         |  2 +-
 src/hooks/useCameraZoom.ts                    |  6 ++----
 src/utils/utils.ts                            | 17 +++++++++++++++
 6 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/src/components/CameraSettings/CameraSettingFields.tsx b/src/components/CameraSettings/CameraSettingFields.tsx
index d530db3..46211c9 100644
--- a/src/components/CameraSettings/CameraSettingFields.tsx
+++ b/src/components/CameraSettings/CameraSettingFields.tsx
@@ -10,6 +10,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import CardHeader from "../UI/CardHeader";
 import { useCameraZoom } from "../../hooks/useCameraZoom";
+import { parseRTSPUrl } from "../../utils/utils";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
@@ -30,6 +31,8 @@ const CameraSettingFields = ({
   const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
   const zoomOptions = [1, 2, 4, 8];
 
+  const parsed = parseRTSPUrl(initialData?.propURI?.value);
+
   useEffect(() => {
     if (!query.data) return;
     const apiZoom = getZoomLevel(query.data);
@@ -61,8 +64,8 @@ const CameraSettingFields = ({
     () => ({
       friendlyName: initialData?.id ?? "",
       cameraAddress: initialData?.propURI?.value ?? "",
-      userName: "",
-      password: "",
+      userName: parsed?.username ?? "",
+      password: parsed?.password ?? "",
       id: initialData?.id,
 
       zoom: zoomLevel,
@@ -179,7 +182,7 @@ const CameraSettingFields = ({
             </div>
             <div className="my-3">
               <CardHeader title="Zoom settings" />
-              <div className="mx-auto flex gap-10 items-center">
+              <div className="mx-auto grid grid-cols-4 items-center">
                 {zoomOptions.map((zoom) => (
                   <div key={zoom}>
                     <Field
diff --git a/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx b/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
index 6d1588b..fc646c3 100644
--- a/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
+++ b/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
@@ -3,8 +3,12 @@ import FormGroup from "../components/FormGroup";
 import type { WifiSettingValues } from "../../../types/types";
 import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem";
 import { toast } from "sonner";
+import { useState } from "react";
+import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const WiFiSettingsForm = () => {
+  const [showPwd, setShowPwd] = useState(false);
   const { wifiQuery, wifiMutation } = useWifiAndModem();
 
   const wifiSSID = wifiQuery?.data?.propSSID?.value;
@@ -32,7 +36,7 @@ const WiFiSettingsForm = () => {
     };
 
     wifiMutation.mutate(wifiConfig);
-    //todo: check what response is
+
     if (wifiMutation.error) {
       toast.error("Failed to update WiFi settings");
       return;
@@ -72,10 +76,16 @@ const WiFiSettingsForm = () => {
             <Field
               id="password"
               name="password"
-              type="password"
+              type={showPwd ? "text" : "password"}
               className="p-1.5 border border-gray-400 rounded-lg"
               placeholder="Enter Password"
             />
+            <FontAwesomeIcon
+              type="button"
+              className="absolute right-5 end-0"
+              onClick={() => setShowPwd((s) => !s)}
+              icon={showPwd ? faEyeSlash : faEye}
+            />
           </FormGroup>
           <FormGroup>
             <label
diff --git a/src/components/SightingOverview/SightingOverview.tsx b/src/components/SightingOverview/SightingOverview.tsx
index 07b62c0..939a81d 100644
--- a/src/components/SightingOverview/SightingOverview.tsx
+++ b/src/components/SightingOverview/SightingOverview.tsx
@@ -22,10 +22,25 @@ const SightingOverview = () => {
 
   const { sync } = useHiDPICanvas(imgRef, canvasRef);
 
-  if (isLoading) return <p className="h-100">Loading</p>;
+  if (!mostRecent)
+    return (
+      <div className="h-150 flex items-center justify-center text-3xl animate-pulse">
+        <NavigationArrow side={side} />
+        <p>No Recent Sightings</p>
+      </div>
+    );
+  if (isLoading)
+    return (
+      <div className="h-150 flex items-center justify-center text-3xl animate-pulse">
+        <NavigationArrow side={side} />
+        <p>Loading</p>
+      </div>
+    );
 
-  if (isError)
-    return <p className="h-100">An error occurred, Cannot display footage</p>;
+  if (isError) return;
+  <div className="h-100 flex items-center justify-center text-red-500 text-lg">
+    An error occurred. Cannot display footage.
+  </div>;
 
   return (
     <div className="flex flex-col md:flex-row">
diff --git a/src/components/UI/NavigationArrow.tsx b/src/components/UI/NavigationArrow.tsx
index a879255..fd59956 100644
--- a/src/components/UI/NavigationArrow.tsx
+++ b/src/components/UI/NavigationArrow.tsx
@@ -25,7 +25,7 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
   if (settingsPage) {
     return (
       <>
-        {side === "CameraFront" ? (
+        {side === "CameraA" ? (
           <FontAwesomeIcon
             icon={faArrowRight}
             className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30"
diff --git a/src/hooks/useCameraZoom.ts b/src/hooks/useCameraZoom.ts
index 772ab62..7d310d8 100644
--- a/src/hooks/useCameraZoom.ts
+++ b/src/hooks/useCameraZoom.ts
@@ -13,16 +13,14 @@ async function zoomIn(options: ZoomInOptions) {
   if (!response.ok) {
     throw new Error("Cannot reach camera zoom endpoint");
   }
-  const data = await response.json();
-  console.log(data);
-  return;
+
+  return response.json();
 }
 
 async function fetchZoomInConfig({
   queryKey,
 }: QueryFunctionContext<[string, zoomConfig]>) {
   const [, { camera }] = queryKey;
-  console.log(camera);
   const response = await fetch(`${CAM_BASE}/Ip${camera}-inspect`);
   if (!response.ok) {
     throw new Error("Cannot get camera zoom settings");
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 4792b8c..c3e7155 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -6,6 +6,23 @@ const randomChars = () => {
   return letter;
 };
 
+export function parseRTSPUrl(url: string) {
+  const regex = /rtsp:\/\/([^:]+):([^@]+)@([^:/]+):?(\d+)?(\/.*)?/;
+  const match = url.match(regex);
+
+  if (!match) {
+    return null;
+  }
+
+  return {
+    username: match[1],
+    password: match[2],
+    ip: match[3],
+    port: match[4] || "554", // default RTSP port
+    path: match[5] || "/",
+  };
+}
+
 const generateNumberPlate = () => {
   const numberPlateLetters = new Array(4);
   const characters: string[] = [];