Merged in feature/zoomIn (pull request #1)

Feature/zoomIn

src/App.tsx

@@ -17,7 +17,7 @@ function App() {
           <Routes>
             <Route path="/" element={<Container />}>
               <Route index element={<Dashboard />} />
-              <Route path="front-camera-settings" element={<FrontCamera />} />
+              <Route path="camera-settings" element={<FrontCamera />} />
               <Route path="rear-camera-settings" element={<RearCamera />} />
               <Route path="system-settings" element={<SystemSettings />} />
               <Route path="session-settings" element={<Session />} />

src/components/CameraOverview/SnapshotContainer.tsx

@@ -1,25 +1,58 @@
 import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
+import type { ZoomLevel } from "../../types/types";
 import NavigationArrow from "../UI/NavigationArrow";
 
 type SnapshotContainerProps = {
   side: string;
   settingsPage?: boolean;
+  zoomLevel?: ZoomLevel;
+  onZoomLevelChange?: (level: ZoomLevel) => void;
 };
 
 export const SnapshotContainer = ({
   side,
   settingsPage,
+  zoomLevel,
+  onZoomLevelChange,
 }: SnapshotContainerProps) => {
-  const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
+  const { canvasRef, isError, isPending } = useGetOverviewSnapshot();
+  if (isError) return <p className="h-100">An error occurred</p>;
+  if (isPending) return <p className="h-100">Loading...</p>;
 
-  if (isError) return <>An error occurred</>;
+  const handleZoomClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
-  if (isPending) return <>Loading...</>;
+    const bounds = canvasRef.current?.getBoundingClientRect();
+    if (!bounds) return;
+    const left = bounds.left;
+    const top = bounds.top;
+    const x = event.pageX;
+    const y = event.pageY;
+    const cw = canvasRef.current?.clientWidth;
+    const ch = canvasRef.current?.clientHeight;
+    if (!cw || !ch) return;
+    const px = x / cw;
+    const py = y / ch;
+
+    const baseLevel = zoomLevel?.level ?? 1;
+    const newLevel = baseLevel >= 8 ? 1 : baseLevel * 2;
+
+    if (onZoomLevelChange)
+      onZoomLevelChange({
+        left,
+        top,
+        x,
+        y,
+        px,
+        py,
+        level: newLevel,
+      });
+  };
 
   return (
     <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} settingsPage={settingsPage} />
       <div className="w-full">
         <canvas
+          onClick={handleZoomClick}
           ref={canvasRef}
           className="absolute inset-0 object-contain min-h-[100%] z-20"
         />

src/components/CameraSettings/CameraSettingFields.tsx

@@ -3,19 +3,25 @@ import type {
   CameraConfig,
   CameraSettingErrorValues,
   CameraSettingValues,
+  ZoomLevel,
 } from "../../types/types";
 import { useMemo, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
+import CardHeader from "../UI/CardHeader";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
   updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
+  zoomLevel?: ZoomLevel;
+  onZoomLevelChange?: (level: ZoomLevel) => void;
 };
 
 const CameraSettingFields = ({
   initialData,
   updateCameraConfig,
+  zoomLevel,
+  onZoomLevelChange,
 }: CameraSettingsProps) => {
   const [showPwd, setShowPwd] = useState(false);
 
@@ -26,8 +32,9 @@ const CameraSettingFields = ({
       userName: "",
       password: "",
       id: initialData?.id,
+      zoom: zoomLevel?.level ? zoomLevel.level : 1,
     }),
-    [initialData?.id, initialData?.propURI?.value]
+    [initialData?.id, initialData?.propURI?.value, zoomLevel?.level]
   );
 
   const validateValues = (values: CameraSettingValues) => {
@@ -41,16 +48,24 @@ const CameraSettingFields = ({
   };
 
   const handleSubmit = (values: CameraSettingValues) => {
+    console.log(values);
     updateCameraConfig(values);
   };
 
+  const handleRadioButtonChange = (levelNumber: number) => {
+    if (!onZoomLevelChange || !zoomLevel) return;
+    onZoomLevelChange({
+      ...zoomLevel,
+      level: zoomLevel?.level !== levelNumber ? levelNumber : zoomLevel?.level,
+    });
+  };
+
   return (
     <Formik
       initialValues={initialValues}
       onSubmit={handleSubmit}
       validate={validateValues}
       validateOnChange={false}
-      enableReinitialize
     >
       {({ errors, touched }) => (
         <Form className="flex flex-col space-y-6 p-2">
@@ -111,7 +126,7 @@ const CameraSettingFields = ({
                 {errors.password}
               </small>
             )}
-            <div className="flex gap-2 items-center relative">
+            <div className="flex gap-2 items-center relative mb-4">
               <Field
                 id="password"
                 name="password"
@@ -127,7 +142,82 @@ const CameraSettingFields = ({
                 icon={showPwd ? faEyeSlash : faEye}
               />
             </div>
+            <div className="my-3">
+              <CardHeader title="Zoom settings" />
+              <div className="mx-auto flex gap-10 items-center ">
+                <div>
+                  <Field
+                    type="radio"
+                    name="zoom"
+                    value={zoomLevel?.level ? zoomLevel.level.toString() : "1"}
+                    checked={zoomLevel?.level === 1}
+                    className="hidden peer"
+                    id="zoom1"
+                    onChange={() => handleRadioButtonChange(1)}
+                  />
+                  <label
+                    htmlFor="zoom1"
+                    className="px-6 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"
+                  >
+                    x1
+                  </label>
+                </div>
 
+                <div>
+                  <Field
+                    type="radio"
+                    name="zoom"
+                    value={zoomLevel?.level ? zoomLevel.level.toString() : "2"}
+                    checked={zoomLevel?.level === 2}
+                    className="hidden peer"
+                    id="zoom2"
+                    onChange={() => handleRadioButtonChange(2)}
+                  />
+                  <label
+                    htmlFor="zoom2"
+                    className="px-6 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"
+                  >
+                    x2
+                  </label>
+                </div>
+
+                <div>
+                  <Field
+                    type="radio"
+                    name="zoom"
+                    value={zoomLevel?.level ? zoomLevel.level.toString() : "4"}
+                    checked={zoomLevel?.level === 4}
+                    className="hidden peer"
+                    id="zoom4"
+                    onChange={() => handleRadioButtonChange(4)}
+                  />
+                  <label
+                    htmlFor="zoom4"
+                    className="px-6 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"
+                  >
+                    x4
+                  </label>
+                </div>
+
+                <div>
+                  <Field
+                    type="radio"
+                    name="zoom"
+                    value={zoomLevel?.level ? zoomLevel.level.toString() : "8"}
+                    checked={zoomLevel?.level === 8}
+                    className="hidden peer"
+                    id="zoom8"
+                    onChange={() => handleRadioButtonChange(8)}
+                  />
+                  <label
+                    htmlFor="zoom8"
+                    className="px-6 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"
+                  >
+                    x8
+                  </label>
+                </div>
+              </div>
+            </div>
             <button
               type="submit"
               className="bg-[#26B170] text-white rounded-lg p-2 mx-auto h-[100%] w-full"

src/components/CameraSettings/CameraSettings.tsx

@@ -1,18 +1,23 @@
 import { useFetchCameraConfig } from "../../hooks/useCameraConfig";
+import type { ZoomLevel } from "../../types/types";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import CameraSettingFields from "./CameraSettingFields";
 import { faWrench } from "@fortawesome/free-solid-svg-icons";
 
-const CameraSettings = ({ title, side }: { title: string; side: string }) => {
+const CameraSettings = ({
-  const {
+  title,
-    data,
+  side,
-    isError,
+  zoomLevel,
-    isPending,
+  onZoomLevelChange,
-    updateCameraConfig,
+}: {
-    updateCameraConfigError,
+  title: string;
-  } = useFetchCameraConfig(side);
+  side: string;
-  console.log(updateCameraConfigError);
+  zoomLevel?: ZoomLevel;
+  onZoomLevelChange?: (level: ZoomLevel) => void;
+}) => {
+  const { data, isError, isPending, updateCameraConfig } =
+    useFetchCameraConfig(side);
 
   return (
     <Card className="overflow-hidden min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4">
@@ -23,6 +28,8 @@ const CameraSettings = ({ title, side }: { title: string; side: string }) => {
         <CameraSettingFields
           initialData={data}
           updateCameraConfig={updateCameraConfig}
+          zoomLevel={zoomLevel}
+          onZoomLevelChange={onZoomLevelChange}
         />
       </div>
     </Card>

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -9,7 +9,7 @@ const FrontCameraOverviewCard = () => {
   useOverviewVideo();
   const navigate = useNavigate();
   const handlers = useSwipeable({
-    onSwipedRight: () => navigate("/front-camera-settings"),
+    onSwipedRight: () => navigate("/camera-settings"),
     trackMouse: true,
   });
 

src/components/FrontCameraSettings/OverviewVideoContainer.tsx

@@ -3,14 +3,19 @@ import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
 import Card from "../UI/Card";
 import { useNavigate } from "react-router";
 import { useSwipeable } from "react-swipeable";
+import type { ZoomLevel } from "../../types/types";
 
 const OverviewVideoContainer = ({
   side,
   settingsPage,
+  zoomLevel,
+  onZoomLevelChange,
 }: {
   title: string;
   side: string;
   settingsPage?: boolean;
+  zoomLevel?: ZoomLevel;
+  onZoomLevelChange?: (level: ZoomLevel) => void;
 }) => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
@@ -24,7 +29,12 @@ const OverviewVideoContainer = ({
       )}
     >
       <div className="w-full" {...handlers}>
-        <SnapshotContainer side={side} settingsPage={settingsPage} />
+        <SnapshotContainer
+          side={side}
+          settingsPage={settingsPage}
+          zoomLevel={zoomLevel}
+          onZoomLevelChange={onZoomLevelChange}
+        />
       </div>
     </Card>
   );

src/components/SightingOverview/SightingOverview.tsx

@@ -22,9 +22,10 @@ const SightingOverview = () => {
 
   const { sync } = useHiDPICanvas(imgRef, canvasRef);
 
-  if (isLoading) return <p>Loading</p>;
+  if (isLoading) return <p className="h-100">Loading</p>;
 
-  if (isError) return <p>An error occurred, Cannot display footage</p>;
+  if (isError)
+    return <p className="h-100">An error occurred, Cannot display footage</p>;
 
   return (
     <div className="flex flex-col md:flex-row">

src/hooks/useCameraConfig.ts

@@ -1,8 +1,8 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { toast } from "sonner";
-import { OUTSIDE_CAM_BASE } from "../utils/config";
+import { CAM_BASE } from "../utils/config";
 
-const base_url = `${OUTSIDE_CAM_BASE}/api`;
+const base_url = `${CAM_BASE}/api`;
 console.log(base_url);
 
 const fetchCameraSideConfig = async ({ queryKey }: { queryKey: string[] }) => {

src/hooks/useGetOverviewSnapshot.ts

@@ -1,11 +1,11 @@
 import { useRef, useCallback, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { OUTSIDE_CAM_BASE } from "../utils/config";
+import { CAM_BASE } from "../utils/config";
 
-const apiUrl = OUTSIDE_CAM_BASE;
+const apiUrl = CAM_BASE;
 
-async function fetchSnapshot(cameraSide: string) {
+async function fetchSnapshot() {
-  const response = await fetch(`${apiUrl}/${cameraSide}-preview`);
+  const response = await fetch(`${apiUrl}/CameraRear-preview`);
   if (!response.ok) {
     throw new Error("Cannot reach endpoint");
   }
@@ -13,7 +13,7 @@ async function fetchSnapshot(cameraSide: string) {
   return await response.blob();
 }
 
-export function useGetOverviewSnapshot(cameraSide: string) {
+export function useGetOverviewSnapshot() {
   const latestUrlRef = useRef<string | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const imageRef = useRef<HTMLImageElement | null>(null);
@@ -37,8 +37,8 @@ export function useGetOverviewSnapshot(cameraSide: string) {
     error,
     isPending,
   } = useQuery({
-    queryKey: ["overviewSnapshot", cameraSide],
+    queryKey: ["overviewSnapshot"],
-    queryFn: () => fetchSnapshot(cameraSide),
+    queryFn: () => fetchSnapshot(),
     refetchOnWindowFocus: false,
     refetchInterval: 250,
   });

src/pages/Dashboard.tsx

@@ -1,13 +1,12 @@
 import FrontCameraOverviewCard from "../components/FrontCameraOverview/FrontCameraOverviewCard";
 import SightingHistoryWidget from "../components/SightingsWidget/SightingWidget";
 import { SightingFeedProvider } from "../context/providers/SightingFeedProvider";
-// import { OUTSIDE_CAM_BASE } from "../utils/config";
+import { CAM_BASE } from "../utils/config";
 
 const Dashboard = () => {
-  // const dev_OUTSIDE_URL = `${OUTSIDE_CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
+  const base_url = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
-  const folkestone_OUTSIDE_URL = `http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef=`;
   return (
-    <SightingFeedProvider url={folkestone_OUTSIDE_URL} side="Front">
+    <SightingFeedProvider url={base_url} side="Front">
       <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
         <FrontCameraOverviewCard />
         <SightingHistoryWidget title="Sightings" />

src/pages/FrontCamera.tsx

@@ -1,16 +1,34 @@
+import { useState } from "react";
 import CameraSettings from "../components/CameraSettings/CameraSettings";
 import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
 import { Toaster } from "sonner";
+import type { ZoomLevel } from "../types/types";
 
 const FrontCamera = () => {
+  const [zoomLevel, setZoomLevel] = useState<ZoomLevel>({
+    left: 0,
+    top: 0,
+    x: 0,
+    y: 0,
+    px: 0,
+    py: 0,
+    level: 1,
+  });
   return (
     <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
       <OverviewVideoContainer
         title={"Front Camera"}
         side="CameraRear"
         settingsPage={true}
+        zoomLevel={zoomLevel}
+        onZoomLevelChange={setZoomLevel}
+      />
+      <CameraSettings
+        title="Front Camera Settings"
+        side="CameraFront"
+        zoomLevel={zoomLevel}
+        onZoomLevelChange={setZoomLevel}
       />
-      <CameraSettings title="Front Camera Settings" side="CameraFront" />
       <Toaster />
     </div>
   );

src/types/types.ts

@@ -251,3 +251,13 @@ export type CameraBlackBoardOptions = {
 export type CameraBlackboardResponse = {
   data: object;
 };
+
+export type ZoomLevel = {
+  left: number;
+  top: number;
+  x: number;
+  y: number;
+  px: number;
+  py: number;
+  level?: number;
+};

src/utils/config.ts

@@ -1,4 +1,4 @@
-const rawCamBase = import.meta.env.VITE_CAM_BASE;
+const rawCamBase = import.meta.env.VITE_OUTSIDE_BASEURL;
 export const CAM_BASE =
   rawCamBase && rawCamBase.trim().length > 0
     ? rawCamBase