import { jsx as t, jsxs as E } from "react/jsx-runtime";
import { forwardRef as k, useRef as C, useState as I, useImperativeHandle as B, useMemo as D, useEffect as i, useCallback as M } from "react";
import R from "../../shop-minis-react/node_modules/.pnpm/video.js@8.23.3/node_modules/video.js/dist/video.es.js";
/* empty css                                                                                                */
const W = k(
  ({
    src: u,
    format: f = "video/mp4",
    poster: d,
    muted: p,
    autoplay: m,
    width: l,
    height: v,
    playButtonComponent: N,
    onPlay: y,
    onPause: h,
    onEnded: j,
    onReady: s
  }, b) => {
    const a = C(null), e = C(null), [o, n] = I(!1);
    B(
      b,
      () => ({
        play: async () => {
          if (e.current)
            try {
              await e.current.play(), n(!0);
            } catch (r) {
              console.error("Error playing video:", r);
            }
        },
        pause: () => {
          e.current && (e.current.pause(), n(!1));
        }
      }),
      []
    );
    const x = D(
      () => ({
        controls: !1,
        controlBar: {
          volumePanel: {
            inline: !1
          }
        },
        preload: "auto",
        muted: p,
        // This makes sure that the video player does not take over the whole screen
        preferFullWindow: !1,
        playsinline: !0,
        poster: d,
        height: v,
        width: l,
        sources: [
          {
            src: u,
            type: f
          }
        ]
      }),
      [p, d, v, l, u, f]
    );
    i(() => {
      const r = e.current;
      return () => {
        r && !r.isDisposed() && (r.dispose(), e.current = null);
      };
    }, [e]), i(() => {
      if (!e.current) return;
      const r = () => {
        y?.(), n(!0);
      }, P = () => {
        h?.(), n(!1);
      }, g = () => {
        j?.(), n(!1);
      };
      return e.current.on("play", r), e.current.on("pause", P), e.current.on("ended", g), () => {
        e.current && (e.current.off("play", r), e.current.off("pause", P), e.current.off("ended", g));
      };
    }, [j, h, y]);
    const c = M(() => {
      o ? (e.current?.pause(), n(!1)) : (e.current?.play(), n(!0));
    }, [o]);
    i(() => {
      if (!e.current) {
        const r = document.createElement("video-js");
        a.current?.appendChild(r), e.current = R(r, x, () => {
          s && s(), m && c();
        });
      }
    }, [x, a, m, s, c]);
    const w = [
      l ? `w-${l}` : void 0,
      "relative"
    ].join(" ");
    return /* @__PURE__ */ t("div", { className: "flex", children: /* @__PURE__ */ E("div", { "data-vjs-player": !0, className: w, children: [
      /* @__PURE__ */ t("div", { ref: a }),
      /* @__PURE__ */ t(
        "div",
        {
          className: "absolute top-0 left-0 w-full h-full flex items-center justify-center cursor-pointer",
          onClick: c,
          "aria-hidden": !0,
          children: o ? null : N ?? /* @__PURE__ */ t(z, {})
        }
      )
    ] }) });
  }
), z = () => /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center bg-black/20 cursor-pointer animate-in fade-in duration-200", children: /* @__PURE__ */ t(
  "svg",
  {
    viewBox: "0 0 24 24",
    className: "w-10 h-10 text-white",
    fill: "currentColor",
    children: /* @__PURE__ */ t("path", { d: "M8 5v14l11-7z" })
  }
) });
export {
  W as VideoPlayer
};
//# sourceMappingURL=video-player.js.map
