added sighting feed

src/hooks/useOverviewOverlay.ts

@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+import type { SightingWidgetType } from "../types/types";
+import { drawRects } from "../utils/utils";
+
+type Mode = 0 | 1 | 2;
+
+export function useOverviewOverlay(
+  selected: SightingWidgetType | null | undefined,
+  overlayMode: Mode,
+  imgRef: React.RefObject<HTMLImageElement | null>,
+  canvasRef: React.RefObject<HTMLCanvasElement | null>
+) {
+  useEffect(() => {
+    const img = imgRef?.current;
+    const cvs = canvasRef?.current;
+    if (!img || !cvs) return;
+
+    const ctx = cvs.getContext("2d");
+    if (!ctx) return;
+
+    // clear
+    ctx.clearRect(0, 0, cvs.width, cvs.height);
+
+    if (!selected || overlayMode === 0) return;
+
+    if (overlayMode === 1 && selected.overviewPlateRect) {
+      drawRects(cvs, img, [selected.overviewPlateRect], "chartreuse");
+    } else if (overlayMode === 2) {
+      const rects = selected.plateTrack ?? [];
+      if (rects.length) drawRects(cvs, img, rects, "yellow");
+      if (selected.overviewPlateRect) {
+        drawRects(cvs, img, [selected.overviewPlateRect], "chartreuse");
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected?.ref, overlayMode, imgRef?.current?.src]);
+}