merged and resolved conflicts

src/hooks/useCameraBlackboard.ts

@@ -2,7 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import type { CameraBlackBoardOptions } from "../types/types";
 
-const getBlackboardData = async () => {
+const getAllBlackboardData = async () => {
   const response = await fetch(`${CAM_BASE}/api/blackboard`);
   if (!response.ok) {
     throw new Error("Failed to fetch blackboard data");
@@ -25,7 +25,7 @@ const viewBlackboardData = async (options: CameraBlackBoardOptions) => {
 export const useCameraBlackboard = () => {
   const query = useQuery({
     queryKey: ["cameraBlackboard"],
-    queryFn: getBlackboardData,
+    queryFn: getAllBlackboardData,
   });
 
   const mutation = useMutation({

src/hooks/useCameraConfig.ts

@@ -19,10 +19,10 @@ const updateCamerasideConfig = async (data: {
   const updateUrl = `${base_url}/update-config?id=${data.id}`;
 
   const updateConfigPayload = {
-    id: data.id,
+    id: data.friendlyName,
     fields: [
       {
-        property: "propLEDDriverControlURI",
+        property: "id",
         value: data.friendlyName,
       },
     ],

src/hooks/useCameraZoom.ts

@@ -0,0 +1,44 @@
+import {
+  useMutation,
+  useQuery,
+  type QueryFunctionContext,
+} from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import type { zoomConfig, ZoomInOptions } from "../types/types";
+
+async function zoomIn(options: ZoomInOptions) {
+  const response = await fetch(
+    `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplier}x`
+  );
+  if (!response.ok) {
+    throw new Error("Cannot reach camera zoom endpoint");
+  }
+  const data = await response.json();
+  console.log(data);
+  return;
+}
+
+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");
+  }
+  return response.text();
+}
+//change to string
+export const useCameraZoom = (options: zoomConfig) => {
+  const mutation = useMutation({
+    mutationKey: ["zoomIn"],
+    mutationFn: (options: ZoomInOptions) => zoomIn(options),
+  });
+
+  const query = useQuery({
+    queryKey: ["fetchZoomInConfig", options],
+    queryFn: fetchZoomInConfig,
+  });
+  return { mutation, query };
+};

src/hooks/useGetOverviewSnapshot.ts

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

src/hooks/useOverviewVideo.ts

@@ -1,36 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { useRef } from "react";
-import { CAM_BASE } from "../utils/config";
-
-async function fetchOverviewImage(cameraSide: string) {
-  const response = await fetch(`${CAM_BASE}/${cameraSide}-preview`);
-  if (!response.ok) throw new Error("could not fetch overview image");
-  return response.blob();
-}
-
-export function useOverviewVideo() {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const { isPending, isError, data } = useQuery({
-    queryKey: ["overviewVideo"],
-    queryFn: () => fetchOverviewImage("CameraFront"),
-    // refetchInterval: () =>
-    //   typeof document !== "undefined" && document.visibilityState === "hidden"
-    //     ? SLOW_MS
-    //     : FAST_MS,
-    // refetchIntervalInBackground: false,
-  });
-
-  if (isPending) return;
-
-  if (isError) return;
-
-  const img = new Image();
-  const imgUrl = URL.createObjectURL(data);
-  img.src = imgUrl;
-
-  const canvas = canvasRef.current;
-  if (!canvas) return;
-  const ctx = canvas.getContext("2d");
-
-  ctx?.drawImage(img, 0, 0);
-}