tw.tsx

'use client';
/* eslint-disable indent */

import React from "react";
import useWindowSize from "@/hooks/use-spatial-navigation/useWindowSize";
import getScaledSize from "@/hooks/use-spatial-navigation/getScaledSize";
import { useGestureRecognizer } from "use-mediapipe";
import useCamera from "@/hooks/use-spatial-navigation/useCamera";
import { drawHandsWithKeyLandmarks } from "@/hooks/use-spatial-navigation/drawHands";
import { Button } from 'react-daisyui';

export default function HandsPage() {
  const videoRef = React.useRef<HTMLVideoElement | null>(null);
  const canvasRef = React.useRef<HTMLCanvasElement>(null);
  const { startCamera, videoSize } = useCamera(videoRef);
  const windowSize = useWindowSize();
  const scaledVideoSize = getScaledSize(windowSize, videoSize);
  const startGestureRecognizer = useGestureRecognizer({
    onResults: (results) => {
      const canvas = canvasRef.current;
      const ctx = canvas?.getContext('2d');
      if (!canvas || !ctx || !results) return;

      const rect = canvas.getBoundingClientRect();
      canvas.width = rect.width;
      canvas.height = rect.height;

      if (results.landmarks && results.landmarks.length > 0) {
        drawHandsWithKeyLandmarks(ctx, results);
      }
    },
  });

  React.useEffect(() => {
    startCamera().then(startGestureRecognizer);
  }, []);

  // Ensure you're handling styles that need JavaScript to compute (like `scaledVideoSize`) dynamically within your JSX.
  const dynamicVideoStyles = {
    width: scaledVideoSize.width ? `${scaledVideoSize.width}px` : '100%',
    height: scaledVideoSize.height ? `${scaledVideoSize.height}px` : '100vh',
  };

  return (
    <div className="relative w-full h-screen">
      <video
        ref={videoRef}
        style={dynamicVideoStyles}
        className="absolute w-full h-full object-cover"
      />
      <canvas
        ref={canvasRef}
        style={dynamicVideoStyles}
        className="absolute w-full h-full pointer-events-none"
      />
      <div className="absolute inset-0 z-10 pointer-events-none flex justify-center items-center">
        {/* Button with pointer-events-auto to override the div's pointer-events-none */}
        <Button className="pointer-events-auto btn-circle btn-lg btn-secondary">
          B
        </Button>
      </div>
    </div>
  );
}