import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { cx } from "@emotion/css";
import { useState, useRef, forwardRef } from "react";
import { ReactPlayer } from "../../../react-player";
import { useStyle } from "../../../../../runtimes/react/use-style";
import { useIsomorphicLayoutEffect } from "../../../../hooks/useIsomorphicLayoutEffect";
const Container = forwardRef(function Container2({ className, ...restOfProps }, ref) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...restOfProps,
      ref,
      className: cx(
        useStyle({
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          pointerEvents: "none",
          overflow: "hidden"
        }),
        className
      )
    }
  );
});
function Mask({
  backgroundColor,
  visible
}) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: useStyle({
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        background: backgroundColor,
        opacity: visible ? 1 : 0,
        transition: "opacity 1s"
      })
    }
  );
}
const getScale = (element, aspectRatio, zoom) => {
  const { offsetWidth: width, offsetHeight: height } = element;
  const computedAspectRatio = width / height;
  return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom;
};
function BackgroundVideo({
  url = "",
  aspectRatio = 16 / 9,
  zoom = 1,
  maskColor,
  opacity
}) {
  const [ready, setReady] = useState(false);
  const [scale, setScale] = useState(1);
  const container = useRef(null);
  useIsomorphicLayoutEffect(() => {
    const { current: containerEl } = container;
    if (!containerEl)
      return void 0;
    const { defaultView } = containerEl.ownerDocument;
    const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom));
    handleResize();
    defaultView.addEventListener("resize", handleResize);
    return () => defaultView.removeEventListener("resize", handleResize);
  }, [aspectRatio, zoom]);
  if (!ReactPlayer.canPlay(url))
    return /* @__PURE__ */ jsx(Fragment, {});
  return /* @__PURE__ */ jsxs(Container, { ref: container, children: [
    container.current && /* @__PURE__ */ jsx(
      ReactPlayer,
      {
        url,
        config: {
          vimeo: { playerOptions: { background: true } },
          youtube: {
            playerVars: {
              origin: container.current.ownerDocument.defaultView?.location.origin
            }
          },
          wistia: {
            options: {
              endVideoBehavior: "loop",
              playbackRateControl: false,
              playbar: false,
              playButton: false,
              volumeControl: false,
              fullscreenButton: false,
              muted: true
            }
          }
        },
        playing: true,
        loop: true,
        muted: true,
        playsinline: true,
        controls: false,
        onReady: () => setReady(true),
        style: {
          transform: `scale3d(${scale}, ${scale}, 1)`,
          opacity
        },
        width: "100%",
        height: "100%"
      }
    ),
    /* @__PURE__ */ jsx(Mask, { backgroundColor: maskColor, visible: !ready })
  ] });
}
export {
  BackgroundVideo as default
};
//# sourceMappingURL=index.js.map