movie-web/src/components/video/parts/VideoPopout.tsx

import { useEffect, useRef } from "react";
import { useVideoPlayerState } from "../VideoContext";

interface Props {
  children?: React.ReactNode;
  id?: string;
  className?: string;
}

export function VideoPopout(props: Props) {
  const { videoState } = useVideoPlayerState();
  const popoutRef = useRef<HTMLDivElement>(null);
  const isOpen = videoState.popout === props.id;

  useEffect(() => {
    if (!isOpen) return;
    const popoutEl = popoutRef.current;
    let hasTriggered = false;
    function windowClick() {
      setTimeout(() => {
        if (hasTriggered) return;
        videoState.closePopout();
        hasTriggered = false;
      }, 10);
    }
    function popoutClick() {
      hasTriggered = true;
      setTimeout(() => {
        hasTriggered = false;
      }, 100);
    }
    window.addEventListener("click", windowClick);
    popoutEl?.addEventListener("click", popoutClick);
    return () => {
      window.removeEventListener("click", windowClick);
      popoutEl?.removeEventListener("click", popoutClick);
    };
  }, [isOpen, videoState]);

  if (!isOpen) return null;

  return (
    <div className="is-popout absolute inset-x-0 h-0">
      <div className="absolute bottom-10 right-0 h-96 w-72 rounded-lg bg-denim-400">
        <div
          ref={popoutRef}
          className={["h-full w-full", props.className].join(" ")}
        >
          {props.children}
        </div>
      </div>
    </div>
  );
}