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

src/components/CardHeader.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+
+type CardHeaderProps = {
+  title: string;
+};
+
+const CardHeader = ({ title }: CardHeaderProps) => {
+  return (
+    <div
+      className={clsx(
+        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 mb-6 relative justify-between",
+      )}
+    >
+      <div className="flex flex-row items-center w-full justify-between">
+        <h2 className="flex flex-row text-xl items-center">{title}</h2>
+      </div>
+    </div>
+  );
+};
+
+export default CardHeader;

src/components/ui/Card.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import clsx from "clsx";
+
+type CardProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Card = ({ children, className }: CardProps) => {
+  return (
+    <div
+      className={clsx(
+        "bg-[#253445] rounded-lg mt-4 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Card;

src/features/dashboard/Dashboard.tsx

@@ -1,10 +1,15 @@
+import SightingStack from "./components/sightingStack/SightingStack";
 import VideoFeed from "./components/videoFeed/VideoFeed";
+import { useSightingList } from "./hooks/useSightingList";
 
 const Dashboard = () => {
+  const { sightingList, isLoading } = useSightingList();
+  const mostRecent = sightingList[0];
+
   return (
-    <div>
-      Dashboard
-      <VideoFeed />
+    <div className="grid gird-cols-1 md:grid-cols-2 gap-20">
+      <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} />
+      <SightingStack sightings={sightingList} />
     </div>
   );
 };

src/features/dashboard/components/platePatch/NumberPlate.tsx

@@ -0,0 +1,57 @@
+import { GB } from "country-flag-icons/react/3x2";
+import { formatNumberPlate } from "../../../../utils/utils";
+
+type NumberPlateProps = {
+  vrm?: string | undefined;
+  motion?: boolean;
+  size?: "xs" | "sm" | "md" | "lg";
+};
+
+const NumberPlate = ({ vrm, motion, size }: NumberPlateProps) => {
+  let options = {
+    plateWidth: "w-[14rem]",
+    textSize: "text-2xl",
+    borderWidth: "border-6",
+  };
+
+  switch (size) {
+    case "xs":
+      options = {
+        plateWidth: "w-[8rem]",
+        textSize: "text-md",
+        borderWidth: "border-4",
+      };
+      break;
+    case "sm":
+      options = {
+        plateWidth: "w-[10rem]",
+        textSize: "text-lg",
+        borderWidth: "border-4",
+      };
+      break;
+    case "lg":
+      options = {
+        plateWidth: "w-[16rem]",
+        textSize: "text-3xl",
+        borderWidth: "border-6",
+      };
+      break;
+  }
+
+  return (
+    <div
+      className={`relative ${options.plateWidth} ${options.borderWidth} border-black rounded-xl text-nowrap
+        text-black px-6 py-2 text-monospace font-mono flex items-center justify-center
+        ${motion ? "bg-yellow-400" : "bg-white"}`}
+    >
+      <div>
+        <div className="absolute inset-y-0 left-0 bg-blue-600 w-8 flex flex-col">
+          <GB />
+        </div>
+        <p className={`pl-4 font-extrabold ${options.textSize} text-right`}>{vrm && formatNumberPlate(vrm)}</p>
+      </div>
+    </div>
+  );
+};
+
+export default NumberPlate;

src/features/dashboard/components/sightingStack/SightingItem.tsx

@@ -0,0 +1,23 @@
+import type { SightingType } from "../../../../utils/types";
+import NumberPlate from "../platePatch/NumberPlate";
+
+type SightingItemProps = {
+  sighting: SightingType;
+};
+
+const SightingItem = ({ sighting }: SightingItemProps) => {
+  console.log(sighting);
+  const motion = sighting.motion.toLowerCase() === "away" ? true : false;
+  return (
+    <div className="flex flex-row items-center border p-2 mb-2 rounded-lg border-gray-500 justify-between hover:bg-[#233241] hover:cursor-pointer">
+      <div>
+        <div>Ref: {sighting.ref}</div>
+        <div>vrm: {sighting.vrm}</div>
+      </div>
+
+      <NumberPlate vrm={sighting.vrm} motion={motion} size="md" />
+    </div>
+  );
+};
+
+export default SightingItem;

src/features/dashboard/components/sightingStack/SightingStack.tsx

@@ -0,0 +1,20 @@
+import CardHeader from "../../../../components/CardHeader";
+import Card from "../../../../components/ui/Card";
+import type { SightingType } from "../../../../utils/types";
+import SightingItem from "./SightingItem";
+
+type SightingStackProps = {
+  sightings: SightingType[];
+};
+const SightingStack = ({ sightings }: SightingStackProps) => {
+  return (
+    <Card className="p-4 w-full">
+      <CardHeader title="Sightings" />
+      {sightings.map((sighting) => (
+        <SightingItem key={sighting.ref} sighting={sighting} />
+      ))}
+    </Card>
+  );
+};
+
+export default SightingStack;

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>
   );
 };

src/features/dashboard/hooks/useCreateVideoSnapshot.ts

@@ -0,0 +1,19 @@
+import { useRef } from "react";
+import type { SightingType } from "../../../utils/types";
+
+export const useCreateVideoSnapshot = (mostRecentSighting: SightingType) => {
+  const latestBitMapRef = useRef<ImageBitmap | null>(null);
+  const snapshotUrl = mostRecentSighting?.overviewUrl;
+
+  const image = new Image();
+
+  image.src = snapshotUrl;
+
+  console.log(mostRecentSighting);
+
+  const plateRect = mostRecentSighting?.overviewPlateRect;
+
+  const plateTrack = mostRecentSighting?.plateTrack;
+
+  return { snapshotUrl, latestBitMapRef, image, plateRect, plateTrack };
+};

src/features/dashboard/hooks/useSightingList.ts

@@ -7,6 +7,7 @@ export const useSightingList = () => {
   const { videoFeedQuery } = useVideoFeed();
   const latestSighting = videoFeedQuery?.data;
   const lastProcessedRef = useRef<number>(-1);
+  const isLoading = videoFeedQuery?.isPending;
 
   useEffect(() => {
     if (!latestSighting || latestSighting.ref === undefined || latestSighting.ref === -1) return;
@@ -22,5 +23,5 @@ export const useSightingList = () => {
       });
     }
   }, [latestSighting, latestSighting?.ref]);
-  return { sightingList };
+  return { sightingList, isLoading };
 };

src/utils/utils.ts

@@ -0,0 +1,6 @@
+export const formatNumberPlate = (plate: string) => {
+  const splittedPlate = plate?.split("");
+  splittedPlate?.splice(4, 0, " ");
+  const formattedPlate = splittedPlate?.join("");
+  return formattedPlate;
+};