BayIQ-UI/src/features/cameras/hooks/useGetvideoSnapshots.ts

import { useEffect, useRef } from "react";
import { useGetVideoFeed } from "./useGetVideoFeed";
import { useCameraFeedContext } from "../../../app/context/CameraFeedContext";

export const useCreateVideoSnapshot = () => {
  const { state } = useCameraFeedContext();
  const cameraFeedID = state?.cameraFeedID;
  const mode = state.modeByCamera[cameraFeedID];
  const latestBitmapRef = useRef<ImageBitmap | null>(null);
  const { targetDetectionQuery, videoFeedQuery } = useGetVideoFeed(cameraFeedID, mode);

  let snapShot = targetDetectionQuery?.data;
  const isloading = targetDetectionQuery.isPending;

  const videoSnapShot = videoFeedQuery?.data;
  const isVideoLoading = videoFeedQuery.isPending;

  if ((isVideoLoading === false && videoSnapShot && mode === "magnify") || mode === "zoom") {
    snapShot = videoSnapShot;
  }

  useEffect(() => {
    async function createBitmap() {
      if (!snapShot) return;

      try {
        const bitmap = await createImageBitmap(snapShot, {
          resizeWidth: 720,
          resizeHeight: 1080,
          resizeQuality: "high",
        });
        if (!bitmap) return;
        latestBitmapRef.current = bitmap;
      } catch (error) {
        console.log(error);
      }
    }
    createBitmap();
  }, [snapShot]);

  return { latestBitmapRef, isloading };
};