- addressed bugs flagged by BR

src/components/CameraOverview/SnapshotContainer.tsx

@@ -10,18 +10,9 @@ type SnapshotContainerProps = {
   onZoomLevelChange?: (level: number) => void;
 };
 
-export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelChange }: SnapshotContainerProps) => {
+export const SnapshotContainer = ({ side, settingsPage }: SnapshotContainerProps) => {
   const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
 
-  const handleZoomClick = () => {
-    const baseLevel = zoomLevel ?? 1;
-    const newLevel = baseLevel >= 4 ? 1 : baseLevel * 2;
-
-    if (onZoomLevelChange) onZoomLevelChange(newLevel);
-
-    if (!zoomLevel) return;
-  };
-
   return (
     <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} settingsPage={settingsPage} />
@@ -32,7 +23,7 @@ export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelCh
             <Loading message="Camera Preview" />
           </div>
         )}
-        <canvas onClick={handleZoomClick} ref={canvasRef} className="block w-full h-full z-20" />
+        <canvas ref={canvasRef} className="absolute w-full h-full z-20" />
       </div>
     </div>
   );

src/components/CameraSettings/CameraSettingFields.tsx

@@ -32,30 +32,10 @@ const CameraSettingFields = ({
   const parsed = parseRTSPUrl(initialData?.propURI?.value);
   const cameraMode = cameraModeQuery?.data?.propDayNightMode?.value;
 
-  const handleModeClick = async (mode: string) => {
-    await cameraModeMutation.mutate({ camera: cameraControllerSide, mode });
-  };
   useEffect(() => {
     if (!query?.data) return;
     onZoomLevelChange?.(apiZoom);
-  }, [query?.data, onZoomLevelChange]);
-
-  // const getZoomLevel = (levelstring: string | undefined) => {
-  //   console.log(levelstring);
-  //   switch (levelstring) {
-  //     case "1x":
-  //       return 1;
-
-  //     case "2x":
-  //       return 2;
-
-  //     case "4x":
-  //       return 4;
-
-  //     default:
-  //       return 1;
-  //   }
-  // };
+  }, [query?.data, onZoomLevelChange, apiZoom]);
 
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
@@ -64,11 +44,11 @@ const CameraSettingFields = ({
       userName: parsed?.username ?? "",
       password: parsed?.password ?? "",
       id: initialData?.id,
-
+      mode: cameraMode ?? "day",
       zoom: apiZoom,
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [initialData?.id, initialData?.propURI?.value, zoomLevel]
+
+    [initialData?.id, initialData?.propURI?.value, parsed?.username, parsed?.password, cameraMode, apiZoom]
   );
 
   const validateValues = (values: CameraSettingValues) => {
@@ -95,6 +75,7 @@ const CameraSettingFields = ({
 
     mutation.mutate(zoomInOptions);
   };
+
   const selectedZoom = zoomLevel ?? 1;
   return (
     <Formik
@@ -104,8 +85,8 @@ const CameraSettingFields = ({
       validateOnChange={false}
       enableReinitialize
     >
-      {({ errors, touched }) => (
-        <Form className="flex flex-col space-y-6 p-2">
+      {({ errors, touched, values, setFieldValue, isSubmitting }) => (
+        <Form className="flex flex-col space-y-6 p-2 overflow-x-hidden">
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="friendlyName">Name</label>
             {touched.friendlyName && errors.friendlyName && (
@@ -117,7 +98,6 @@ const CameraSettingFields = ({
               type="text"
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="Enter camera name"
-              disabled
             />
           </div>
 
@@ -132,7 +112,6 @@ const CameraSettingFields = ({
               type="text"
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="RTSP://..."
-              disabled
             />
           </div>
 
@@ -148,7 +127,6 @@ const CameraSettingFields = ({
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="Enter user name"
               autoComplete="username"
-              disabled
             />
           </div>
 
@@ -164,7 +142,6 @@ const CameraSettingFields = ({
                 type={showPwd ? "text" : "password"}
                 className="p-2 border border-gray-400 rounded-lg w-full "
                 placeholder="Enter password"
-                disabled
               />
               <FontAwesomeIcon
                 type="button"
@@ -201,42 +178,46 @@ const CameraSettingFields = ({
             </div>
             <div>
               <CardHeader title="Mode" />
-              <div className="mx-auto grid grid-cols-2 place-items-center">
-                <button
-                  type="button"
-                  onClick={() => handleModeClick("day")}
-                  className={`px-8 py-2 rounded-md border border-gray-300 ${
-                    cameraMode === "day" ? "bg-gray-100 text-blue-600" : ""
-                  }`}
-                >
-                  Day
-                </button>
-                <button
-                  type="button"
-                  onClick={() => handleModeClick("night")}
-                  className={`px-8 py-2 rounded-md border border-gray-300 ${
-                    cameraMode === "night" ? "bg-gray-100 text-blue-600" : ""
-                  }`}
-                >
-                  Night
-                </button>
+              <div
+                role="radiogroup"
+                aria-label="Camera mode"
+                className="mx-auto grid grid-cols-2 place-items-center gap-3"
+              >
+                {["day", "night"].map((el) => (
+                  <div key={el} className="my-3">
+                    <Field
+                      type="radio"
+                      name="mode"
+                      value={el}
+                      checked={values.mode === el}
+                      id={`mode-${el}`}
+                      className="peer hidden"
+                      disabled={cameraModeMutation.isPending}
+                      onChange={async () => {
+                        setFieldValue("mode", el);
+                        await cameraModeMutation.mutateAsync({ camera: cameraControllerSide, mode: el });
+                      }}
+                    />
+                    <label
+                      htmlFor={`mode-${el}`}
+                      className={`px-8 py-2 rounded-md border border-gray-300
+                peer-checked:border-2 peer-checked:border-blue-900
+                peer-checked:text-blue-600 peer-checked:bg-gray-100
+                ${cameraModeMutation.isPending ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
+                    >
+                      {el === "day" ? "Day" : "Night"}
+                    </label>
+                  </div>
+                ))}
               </div>
             </div>
-            {/* <div className="mt-3">
-              {updateCameraConfigError ? (
-                <button className="bg-red-500 text-white rounded-lg p-2 mx-auto h-[100%] w-full" disabled>
-                  Retry
-                </button>
-              ) : (
-                <button
-                  type="submit"
-                  className="bg-blue-700 text-white rounded-lg p-2 mx-auto h-[100%] w-full"
-                  disabled
-                >
+            <div className="mt-3">
+              {
+                <button type="submit" className="bg-green-700 text-white rounded-lg p-2 mx-auto w-full">
                   {isSubmitting ? "Saving" : "Save settings"}
                 </button>
-              )}
-            </div> */}
+              }
+            </div>
           </div>
         </Form>
       )}

src/components/CameraSettings/CameraSettings.tsx

@@ -18,10 +18,9 @@ const CameraSettings = ({
   const { data, updateCameraConfig, updateCameraConfigError } = useFetchCameraConfig(side);
 
   return (
-    <Card className="overflow-x-auto min-h-[40vh] md:min-h-[60vh] max-h-[83vh] lg:w-[40%] p-4">
+    <Card className="overflow-x-visible min-h-[40vh] md:min-h-[60vh] lg:w-[40%] p-4">
       <div className="relative flex flex-col space-y-3">
         <CardHeader title={title} icon={faWrench} />
-
         {
           <CameraSettingFields
             initialData={data}

src/components/UI/NavigationArrow.tsx

@@ -30,14 +30,14 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
           <FontAwesomeIcon
             size="2xl"
             icon={faArrowRight}
-            className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30"
+            className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
             onClick={() => navigationDest("a")}
           />
         ) : (
           <FontAwesomeIcon
             icon={faArrowLeft}
             size="2xl"
-            className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
+            className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
             onClick={() => navigationDest("b")}
           />
         )}
@@ -49,14 +49,14 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
       <FontAwesomeIcon
         icon={faArrowLeft}
         size="2xl"
-        className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 "
+        className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
         onClick={() => navigationDest("Front")}
       />
 
       <FontAwesomeIcon
         icon={faArrowRight}
         size="2xl"
-        className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100"
+        className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
         onClick={() => navigationDest("Rear")}
       />
     </>