Implement video feed feature with components, hooks, and utility functions

src/features/dashboard/components/videoFeed/VideoFeed.tsx

@@ -1,16 +1,86 @@
-import { useSightingList } from "../../hooks/useSightingList";
+import { Stage, Layer, Image, Rect } from "react-konva";
+import type { SightingType } from "../../../../utils/types";
+import { useCreateVideoSnapshot } from "../../hooks/useCreateVideoSnapshot";
+import { useEffect, useState } from "react";
+
+type VideoFeedProps = {
+  mostRecentSighting: SightingType;
+  isLoading: boolean;
+};
+
+const VideoFeed = ({ mostRecentSighting, isLoading }: VideoFeedProps) => {
+  const [size, setSize] = useState<{ width: number; height: number }>({ width: 1280, height: 960 });
+  const [mode, setMode] = useState<number>(0);
+  const { image, plateRect, plateTrack } = useCreateVideoSnapshot(mostRecentSighting);
+
+  const handleModeChange = (newMode: number) => {
+    if (newMode > 2) setMode(0);
+    else setMode(newMode);
+  };
+
+  useEffect(() => {
+    const updateSize = () => {
+      const width = window.innerWidth * 0.5;
+      const height = (width * 3) / 4;
+      setSize({ width, height });
+    };
+    updateSize();
+    window.addEventListener("resize", updateSize);
+    return () => window.removeEventListener("resize", updateSize);
+  }, []);
+
+  if (isLoading) return <>Loading...</>;
 
-const VideoFeed = () => {
-  const { sightingList } = useSightingList();
-  console.log(sightingList);
   return (
-    <div>
-      {sightingList.map((sighting) => (
-        <div key={sighting.ref} className="border p-2 mb-2">
-          <div>Ref: {sighting.ref}</div>
-          <div>vrm: {sighting.vrm}</div>
-        </div>
-      ))}
+    <div className="w-[70%] mt-[2%]">
+      <Stage width={size.width} height={size.height} onClick={() => handleModeChange(mode + 1)}>
+        <Layer>
+          <Image
+            image={image}
+            height={size.height}
+            width={size.width}
+            onMouseEnter={(e) => {
+              const container = e.target.getStage()?.container();
+              if (container) container.style.cursor = "pointer";
+            }}
+            onMouseLeave={(e) => {
+              const container = e.target.getStage()?.container();
+              if (container) container.style.cursor = "default";
+            }}
+            cornerRadius={10}
+          />
+        </Layer>
+        {plateRect && mode === 1 && (
+          <Layer>
+            <Rect
+              x={plateRect?.[0] * size.width}
+              y={plateRect?.[1] * size.height}
+              width={plateRect?.[2] * size.width}
+              height={plateRect?.[3] * size.height}
+              stroke="blue"
+              strokeWidth={4}
+              zIndex={1}
+            />
+          </Layer>
+        )}
+
+        {plateTrack && mode === 2 && (
+          <Layer>
+            {plateTrack.map((rect, index) => (
+              <Rect
+                key={index}
+                x={rect[0] * size.width}
+                y={rect[1] * size.height}
+                width={rect[2] * size.width}
+                height={rect[3] * size.height}
+                stroke="red"
+                strokeWidth={2}
+                zIndex={1}
+              />
+            ))}
+          </Layer>
+        )}
+      </Stage>
     </div>
   );
 };