Refactor camera configuration and overview snapshot hooks; update environment variables and changed camera names to A and B

src/components/CameraOverview/SnapshotContainer.tsx

@@ -15,7 +15,7 @@ export const SnapshotContainer = ({
   zoomLevel,
   onZoomLevelChange,
 }: SnapshotContainerProps) => {
-  const { canvasRef, isError, isPending } = useGetOverviewSnapshot();
+  const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
   if (isError) return <p className="h-100">An error occurred</p>;
   if (isPending) return <p className="h-100">Loading...</p>;
 

src/components/CameraSettings/CameraSettingFields.tsx

@@ -24,7 +24,7 @@ const CameraSettingFields = ({
   onZoomLevelChange,
 }: CameraSettingsProps) => {
   const [showPwd, setShowPwd] = useState(false);
-
+  console.log(initialData);
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
       friendlyName: initialData?.id ?? "",
@@ -48,6 +48,7 @@ const CameraSettingFields = ({
   };
 
   const handleSubmit = (values: CameraSettingValues) => {
+    console.log(values);
     updateCameraConfig(values);
   };
 

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -2,11 +2,10 @@ import clsx from "clsx";
 import Card from "../UI/Card";
 import { useSwipeable } from "react-swipeable";
 import { useNavigate } from "react-router";
-import { useOverviewVideo } from "../../hooks/useOverviewVideo";
+
 import SightingOverview from "../SightingOverview/SightingOverview";
 
 const FrontCameraOverviewCard = () => {
-  useOverviewVideo();
   const navigate = useNavigate();
   const handlers = useSwipeable({
     onSwipedRight: () => navigate("/camera-settings"),