@anoki/fse-ui/dist/index.es41.js

FSE UI components library

import { j as e } from "./index.es244.js";
import { clsx as i } from "./index.es246.js";
import './components/ui/VideoPlayer/VideoPlayer.css';/* empty css            */
import { ArrowDown as w } from "./index.es158.js";
import { useState as a, useRef as b } from "react";
import { Col as N } from "./index.es10.js";
import { PlayVideo as k } from "./index.es221.js";
var T = /* @__PURE__ */ ((t) => (t.SMALL = "small", t.MEDIUM = "medium", t.LARGE = "large", t.EXTRA_LARGE = "extra-large", t.VERTICAL = "vertical", t.FULL_WIDTH = "full-width", t))(T || {});
const C = {
  small: {
    width: "311px"
  },
  medium: {
    width: "388px"
  },
  large: {
    width: "666px"
  },
  "extra-large": {
    width: "992px"
  },
  "full-width": {
    width: "100%"
  },
  vertical: {
    width: "360px"
  }
}, M = {
  small: {
    heightImg: "170px"
  },
  medium: {
    heightImg: "183px"
  },
  large: {
    heightImg: "371px"
  },
  "extra-large": {
    heightImg: "400px"
  },
  vertical: {
    heightImg: "640px"
  },
  "full-width": {
    heightImg: "525px"
  }
}, A = ({
  btnText: t = "Trascrizione",
  sizeComp: o = "large",
  transcription: l,
  previewImageSrc: c,
  videoSrc: d
}) => {
  const [x, p] = a(!1), [s, u] = a(!1), { width: g } = C[o], { heightImg: f } = M[o], [n, y] = a(!1), m = b(null), v = async (r) => {
    r && (r.preventDefault(), r.stopPropagation());
    const h = m.current;
    if (!h) {
      console.error("no video element found");
      return;
    }
    try {
      s || (u(!0), p(!0), await h.play());
    } catch (j) {
      console.error("Error controlling video:", j);
    }
  };
  return /* @__PURE__ */ e.jsxs(
    N,
    {
      br: "x4",
      style: { width: g },
      className: i(
        "shadow",
        n && "ui-expanded",
        "video-section-container"
      ),
      children: [
        /* @__PURE__ */ e.jsxs(
          "div",
          {
            className: "video-player-container",
            style: { height: f },
            children: [
              /* @__PURE__ */ e.jsx(
                "div",
                {
                  className: i("start-video-container", {
                    "fade-out": x || s
                  }),
                  style: {
                    backgroundImage: c && !s ? `url("${c}")` : "none",
                    display: s ? "none" : "block"
                  },
                  onClick: (r) => v(r),
                  children: /* @__PURE__ */ e.jsxs(
                    "div",
                    {
                      className: i("play-button-container", { hidden: x }),
                      children: [
                        /* @__PURE__ */ e.jsx("div", { className: "play-button-icon", children: /* @__PURE__ */ e.jsx(k, {}) }),
                        /* @__PURE__ */ e.jsx("div", { className: "play-button-text", children: "Riproduci" })
                      ]
                    }
                  )
                }
              ),
              /* @__PURE__ */ e.jsx("div", { className: "video-container", children: /* @__PURE__ */ e.jsx(
                "video",
                {
                  ref: m,
                  controls: !0,
                  src: d !== "" ? d : void 0
                }
              ) })
            ]
          }
        ),
        l && /* @__PURE__ */ e.jsxs("div", { className: "transcription-container", children: [
          /* @__PURE__ */ e.jsx(
            "div",
            {
              className: i(
                "expand-button-container",
                "accordion",
                "base-row justify-content-between align-items-center px-x24 w-full flex-1"
              ),
              children: /* @__PURE__ */ e.jsxs(
                "button",
                {
                  className: i(
                    "ui-btn-accordion-video",
                    "base-row justify-content-between align-items-center"
                  ),
                  type: "button",
                  onClick: () => y(!n),
                  children: [
                    /* @__PURE__ */ e.jsx(
                      "span",
                      {
                        className: i(
                          "fw-semibold text-primary base-col justify-content-center"
                        ),
                        children: t
                      }
                    ),
                    /* @__PURE__ */ e.jsx(
                      w,
                      {
                        color: "primary",
                        className: i("ui-arrow", { expanded: n })
                      }
                    )
                  ]
                }
              )
            }
          ),
          n && /* @__PURE__ */ e.jsx(
            "div",
            {
              className: i(
                "transcription-text-container",
                "pt-x8 px-x24 pb-x40 fs-6 fw-regular text-grey-black"
              ),
              children: /* @__PURE__ */ e.jsx("p", { children: l })
            }
          )
        ] })
      ]
    }
  );
};
export {
  T as VIDEO_PLAYER_SIZE,
  A as VideoPlayer
};
//# sourceMappingURL=index.es41.js.map