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

FSE UI components library

import { j as t } from "./index.es237.js";
import { ArrowDown as M } from "./index.es165.js";
import { RichText as V } from "./index.es143.js";
import { clsx as n } from "./index.es239.js";
import { useState as p, useRef as S } from "react";
import './components/ui/VideoPlayer/VideoPlayer.css';/* empty css            */
import { VIDEO_PLAYER_SIZE as e } from "./index.es139.js";
import G from "./index.es451.js";
import { Col as U } from "./index.es61.js";
import { PlayVideo as B } from "./index.es220.js";
const F = {
  [e.SMALL]: {
    width: "311px"
  },
  [e.MEDIUM]: {
    width: "388px"
  },
  [e.LARGE]: {
    width: "642px"
  },
  [e.EXTRA_LARGE]: {
    width: "992px"
  },
  [e.FULL_WIDTH]: {
    width: "100%"
  },
  [e.VERTICAL]: {
    width: "360px"
  }
}, E = {
  [e.SMALL]: {
    heightImg: "170px"
  },
  [e.MEDIUM]: {
    heightImg: "183px"
  },
  [e.LARGE]: {
    heightImg: "357px"
  },
  [e.EXTRA_LARGE]: {
    heightImg: "400px"
  },
  [e.VERTICAL]: {
    heightImg: "640px"
  },
  [e.FULL_WIDTH]: {
    heightImg: "525px"
  }
}, z = ({
  btnText: L = "Trascrizione",
  sizeComp: o = e.LARGE,
  transcription: m,
  previewImageSrc: u,
  videoSrc: g,
  videoTitle: f,
  videoLang: y,
  playButtonLabel: R = "Riproduci",
  videoAriaLabel: A = "Video player"
}) => {
  const [b, N] = p(!1), [s, P] = p(!1), [a, T] = p(!1), w = S(null), j = G(), { width: l } = F[o];
  let r, d;
  if (l.includes("%"))
    r = l, d = E[o].heightImg;
  else {
    const i = parseInt(l, 10), x = parseInt(E[o].heightImg, 10) / i, I = j ? Math.min(i, j) : i, D = Math.round(I * x);
    r = `${I}px`, d = `${D}px`;
  }
  const c = o === e.VERTICAL, W = o === e.EXTRA_LARGE || o === e.FULL_WIDTH, v = c ? "642px" : r, k = c ? "640px" : d, H = c ? "360px" : r, _ = async (i) => {
    i && (i.preventDefault(), i.stopPropagation());
    const h = w.current;
    if (!h) {
      console.error("no video element found");
      return;
    }
    try {
      s || (P(!0), N(!0), await h.play());
    } catch (x) {
      console.error("Error controlling video:", x);
    }
  };
  return /* @__PURE__ */ t.jsxs(
    U,
    {
      br: "x4",
      style: { width: v },
      className: n("video-section-container"),
      children: [
        /* @__PURE__ */ t.jsxs(
          "div",
          {
            className: "video-player-container",
            style: {
              height: k,
              width: H,
              ...c && { alignSelf: "center" }
            },
            children: [
              /* @__PURE__ */ t.jsx(
                "button",
                {
                  className: n("start-video-container", {
                    "fade-out": b || s
                  }),
                  style: {
                    backgroundImage: u && !s ? `url("${u}")` : "none",
                    display: s ? "none" : "block"
                  },
                  onClick: (i) => _(i),
                  type: "button",
                  children: /* @__PURE__ */ t.jsxs("div", { className: n("play-button-container", { hidden: b }), children: [
                    /* @__PURE__ */ t.jsx("div", { className: "play-button-icon", children: /* @__PURE__ */ t.jsx(B, { decorative: !0 }) }),
                    /* @__PURE__ */ t.jsx("div", { className: "play-button-text", children: R })
                  ] })
                }
              ),
              /* @__PURE__ */ t.jsx("div", { className: "video-container", children: /* @__PURE__ */ t.jsxs(
                "video",
                {
                  ref: w,
                  controls: !0,
                  src: g || void 0,
                  "aria-label": A,
                  title: f || void 0,
                  children: [
                    /* @__PURE__ */ t.jsx("source", { src: g || void 0 }),
                    y && /* @__PURE__ */ t.jsx("track", { kind: "subtitles", src: "subtitles_en.vtt", srcLang: y === "italiano" ? "it" : "en" }),
                    " "
                  ]
                }
              ) })
            ]
          }
        ),
        m && /* @__PURE__ */ t.jsxs(
          "div",
          {
            className: n(
              W ? "transcription-container" : "ui-has-border-bottom"
            ),
            style: { width: v },
            children: [
              /* @__PURE__ */ t.jsx(
                "div",
                {
                  className: n(
                    "expand-button-container",
                    "accordion",
                    "base-row justify-content-between align-items-center"
                  ),
                  children: /* @__PURE__ */ t.jsxs(
                    "button",
                    {
                      className: n(
                        "ui-btn-accordion-video",
                        "base-row justify-content-between align-items-center"
                      ),
                      type: "button",
                      onClick: () => T(!a),
                      "aria-expanded": a,
                      "aria-controls": "transcription-content",
                      children: [
                        /* @__PURE__ */ t.jsx(
                          "span",
                          {
                            className: n(
                              "fw-semibold text-primary base-col justify-content-center fs-custom text-decoration-underline"
                            ),
                            children: L
                          }
                        ),
                        /* @__PURE__ */ t.jsx(
                          M,
                          {
                            color: "primary",
                            className: n("ui-arrow", { expanded: a }),
                            decorative: !0
                          }
                        )
                      ]
                    }
                  )
                }
              ),
              a && /* @__PURE__ */ t.jsx(
                "div",
                {
                  id: "transcription-content",
                  className: n(
                    "transcription-text-container",
                    "pt-x8 px-x24 pb-x40 fs-6 fw-regular text-grey-black"
                  ),
                  children: /* @__PURE__ */ t.jsx(
                    V,
                    {
                      additionalClass: "text-black text-charcoal-dust rich-text-element",
                      classNameTitle: "heading-2-lg fw-extra-bold text-black text-charcoal-dust",
                      description: m
                    }
                  )
                }
              )
            ]
          }
        )
      ]
    }
  );
};
export {
  e as VIDEO_PLAYER_SIZE,
  z as VideoPlayer
};
//# sourceMappingURL=index.es138.js.map