Video lightbox

import { useEffect, useRef, useState } from 'react';
import { AnimatePresence, motion, useReducedMotion } from 'motion/react';

type Props = { poster: string; src: string; title: string };
export function VideoLightbox({ poster, src, title }: Props) {
  const [open, setOpen] = useState(false);
  const trigger = useRef<HTMLButtonElement>(null);
  // A shared layoutId makes the player grow out of the thumbnail.
  const layoutId = useReducedMotion() ? undefined : `video-${src}`;

  useEffect(() => {
    if (!open) return;
    const button = trigger.current;
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') setOpen(false);
    };
    document.addEventListener('keydown', onKeyDown);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKeyDown);
      document.body.style.overflow = '';
      button?.focus(); // hand focus back to the play button
    };
  }, [open]);

  return (
    <>
      <button
        ref={trigger}
        type='button'
        onClick={() => setOpen(true)}
        aria-label={`Play ${title}`}
        className='group relative aspect-video w-full max-w-2xl'
      >
        {!open && (
          <motion.img
            layoutId={layoutId}
            src={poster}
            alt=''
            className='size-full rounded-2xl object-cover'
          />
        )}
        <span className='absolute inset-0 m-auto grid size-18 place-items-center rounded-full bg-white/90 text-2xl text-black shadow-lg transition-transform group-hover:scale-110'>
          ▶
        </span>
      </button>
      <AnimatePresence>
        {open && (
          <motion.div
            role='dialog'
            aria-modal='true'
            aria-label={title}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={() => setOpen(false)}
            className='fixed inset-0 z-50 grid place-items-center bg-black/60 p-4'
          >
            <motion.div
              layoutId={layoutId}
              onClick={(event) => event.stopPropagation()}
              className='relative aspect-video w-[90vw] max-w-[960px] overflow-hidden rounded-2xl bg-black'
            >
              {/* The video only loads once the dialog opens. */}
              <video src={src} controls autoPlay className='size-full' />
              <button
                autoFocus
                onClick={() => setOpen(false)}
                aria-label='Close video'
                className='absolute top-3 right-3 grid size-9 place-items-center rounded-full bg-black/60 text-white'
              >
                ✕
              </button>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}