@shopify/shop-minis-react/dist/components/atoms/video-player.js

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import { jsx as t, jsxs as D } from "react/jsx-runtime";
import { forwardRef as I, useRef as b, useState as B, useImperativeHandle as M, useMemo as R, useEffect as a, useCallback as z } from "react";
import F from "../../shop-minis-react/node_modules/.pnpm/video.js@8.23.3/node_modules/video.js/dist/video.es.js";
/* empty css                                                                                                */
const q = I(
  ({
    src: f,
    format: d = "video/mp4",
    poster: p,
    muted: s,
    autoplay: m,
    preload: v = "auto",
    loop: y = !1,
    width: l,
    height: h,
    playButtonComponent: w,
    onPlay: j,
    onPause: x,
    onEnded: P,
    onReady: c
  }, E) => {
    const i = b(null), e = b(null), [o, n] = B(!1);
    M(
      E,
      () => ({
        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 g = R(
      () => ({
        controls: !1,
        controlBar: {
          volumePanel: {
            inline: !1
          }
        },
        preload: v,
        loop: y,
        muted: s,
        // This makes sure that the video player does not take over the whole screen
        preferFullWindow: !1,
        playsinline: !0,
        poster: p,
        height: h,
        width: l,
        sources: [
          {
            src: f,
            type: d
          }
        ]
      }),
      [s, p, h, l, f, d, v, y]
    );
    a(() => {
      const r = e.current;
      return () => {
        r && !r.isDisposed() && (r.dispose(), e.current = null);
      };
    }, [e]), a(() => {
      if (!e.current) return;
      const r = () => {
        j?.(), n(!0);
      }, C = () => {
        x?.(), n(!1);
      }, N = () => {
        P?.(), n(!1);
      };
      return e.current.on("play", r), e.current.on("pause", C), e.current.on("ended", N), () => {
        e.current && (e.current.off("play", r), e.current.off("pause", C), e.current.off("ended", N));
      };
    }, [P, x, j]);
    const u = z(() => {
      o ? (e.current?.pause(), n(!1)) : (e.current?.play(), n(!0));
    }, [o]);
    a(() => {
      if (!e.current) {
        const r = document.createElement("video-js");
        i.current?.appendChild(r), e.current = F(r, g, () => {
          c && c(), m && u();
        });
      }
    }, [g, i, m, c, u]), a(() => {
      e.current && !e.current.isDisposed() && e.current.muted(s ?? !1);
    }, [s]);
    const k = [
      l ? `w-${l}` : void 0,
      "relative"
    ].join(" ");
    return /* @__PURE__ */ t("div", { className: "flex", children: /* @__PURE__ */ D("div", { "data-vjs-player": !0, className: k, children: [
      /* @__PURE__ */ t("div", { ref: i }),
      /* @__PURE__ */ t(
        "div",
        {
          className: "absolute top-0 left-0 w-full h-full flex items-center justify-center cursor-pointer",
          onClick: u,
          "aria-hidden": !0,
          children: o ? null : w ?? /* @__PURE__ */ t(H, {})
        }
      )
    ] }) });
  }
), H = () => /* @__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 {
  q as VideoPlayer
};
//# sourceMappingURL=video-player.js.map