"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var BackgroundVideo_exports = {};
__export(BackgroundVideo_exports, {
  default: () => BackgroundVideo
});
module.exports = __toCommonJS(BackgroundVideo_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_css = require("@emotion/css");
var import_react = require("react");
var import_react_player = require("../../../react-player");
var import_use_style = require("../../../../../runtimes/react/use-style");
var import_useIsomorphicLayoutEffect = require("../../../../hooks/useIsomorphicLayoutEffect");
const Container = (0, import_react.forwardRef)(function Container2({ className, ...restOfProps }, ref) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      ...restOfProps,
      ref,
      className: (0, import_css.cx)(
        (0, import_use_style.useStyle)({
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          pointerEvents: "none",
          overflow: "hidden"
        }),
        className
      )
    }
  );
});
function Mask({
  backgroundColor,
  visible
}) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      className: (0, import_use_style.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] = (0, import_react.useState)(false);
  const [scale, setScale] = (0, import_react.useState)(1);
  const container = (0, import_react.useRef)(null);
  (0, import_useIsomorphicLayoutEffect.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 (!import_react_player.ReactPlayer.canPlay(url))
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, { ref: container, children: [
    container.current && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_react_player.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__ */ (0, import_jsx_runtime.jsx)(Mask, { backgroundColor: maskColor, visible: !ready })
  ] });
}
//# sourceMappingURL=index.js.map