import { jsxs as c, jsx as t } from "react/jsx-runtime";
import { useState as u } from "react";
import h from "react-player";
import { CircularProgress as m } from "@mui/material";
import l from "lodash/isUndefined";
import { mergeProps as g } from "../Util/index.js";
import { styled as b } from "../Theme/index.js";
function x(p) {
  const e = Object.assign({}, p);
  l(e.width) && (e.width = 640), l(e.height) && (e.height = 400), l(e.style) && (e.style = {});
  const n = g(e, x, ["style"]), { url: i, width: o, height: r, style: y } = n, [s, a] = u(!1), d = Object.assign({ border: "none" }, y, {
    width: o,
    height: r,
    visibility: s ? "visible" : "hidden"
  });
  return i.indexOf("v.qq.com") > 0 ? /* @__PURE__ */ c(f, { style: { width: o, height: r }, children: [
    /* @__PURE__ */ t("iframe", { title: i, style: d, src: i, onLoad: () => a(!0), allowFullScreen: !0 }),
    !s && /* @__PURE__ */ t(m, { className: "loading-indicator", color: "primary" })
  ] }) : /* @__PURE__ */ c(f, { style: { width: o, height: r }, children: [
    /* @__PURE__ */ t(h, { style: d, ...n, onReady: () => a(!0) }),
    !s && /* @__PURE__ */ t(m, { className: "loading-indicator", color: "primary" })
  ] });
}
const f = b("div")`
  background-color: #222222;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .loading-indicator {
    position: absolute;
    top: 45%;
    left: 47%;
    z-index: 2;
  }
`;
export {
  x as default
};
