ttvfx/components/PlayReel.tsx

"use client";

import { useEffect, useRef, useState } from "react";

// "Play reel" button that opens the full reel in a fullscreen lightbox.
export default function PlayReel({ src, poster, label = "Play reel" }: { src: string; poster?: string; label?: string }) {
  const [open, setOpen] = useState(false);
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    videoRef.current?.play().catch(() => {});
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open]);

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="group flex items-center gap-3 font-mono text-xs tracking-[0.2em] whitespace-nowrap uppercase"
      >
        <span className="flex h-11 w-11 items-center justify-center rounded-full border border-white/40 transition-colors group-hover:border-accent group-hover:bg-accent">
          <svg viewBox="0 0 10 12" className="ml-0.5 h-3 w-3 fill-current" aria-hidden="true">
            <path d="M0 0l10 6-10 6z" />
          </svg>
        </span>
        {label}
      </button>

      {open && (
        <div
          role="dialog"
          aria-modal="true"
          aria-label="Showreel"
          className="fixed inset-0 z-[70] flex items-center justify-center bg-black/95 p-4 md:p-10"
          onClick={() => setOpen(false)}
        >
          <button
            type="button"
            onClick={() => setOpen(false)}
            className="absolute top-4 right-5 font-mono text-xs tracking-[0.2em] text-muted uppercase hover:text-fg"
          >
            Close ✕
          </button>
          <video
            ref={videoRef}
            src={src}
            poster={poster}
            controls
            playsInline
            className="max-h-full w-full max-w-7xl bg-black"
            onClick={(e) => e.stopPropagation()}
          />
        </div>
      )}
    </>
  );
}