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

FSE UI components library

import { j as t } from "./index.es277.js";
import { ArrowDown as G } from "./index.es19.js";
import { RichText as U } from "./index.es217.js";
import { clsx as n } from "./index.es279.js";
import { useState as m, useRef as B } from "react";
import './components/ui/VideoPlayer/VideoPlayer.css';/* empty css            */
import { VIDEO_PLAYER_SIZE as e } from "./index.es267.js";
import F from "./index.es506.js";
import { Col as O } from "./index.es82.js";
import { PlayVideo as X } from "./index.es209.js";
const $ = {
  [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"
  }
}, L = {
  [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"
  }
}, nt = ({
  btnText: E = "Trascrizione",
  sizeComp: o = e.LARGE,
  transcription: u,
  previewImageSrc: g,
  videoSrc: f,
  videoTitle: b,
  videoLang: y,
  playButtonLabel: R = "Riproduci",
  videoAriaLabel: A = "Video player",
  showDivider: N = !0
}) => {
  const [v, S] = m(!1), [s, W] = m(!1), [a, M] = m(!1), w = B(null), l = F(), { width: d } = $[o];
  let r, h;
  if (d.includes("%"))
    r = d, h = L[o].heightImg;
  else {
    const i = parseInt(d, 10), p = parseInt(L[o].heightImg, 10) / i, H = o === e.SMALL || o === e.MEDIUM ? 32 : 0, _ = l ? l - H : i, j = l ? Math.min(i, _) : i, V = Math.round(j * p);
    r = `${j}px`, h = `${V}px`;
  }
  const c = o === e.VERTICAL, P = o === e.EXTRA_LARGE || o === e.FULL_WIDTH, I = c ? "642px" : r, T = c ? "640px" : h, k = c ? "360px" : r, D = async (i) => {
    i && (i.preventDefault(), i.stopPropagation());
    const x = w.current;
    if (!x) {
      console.error("no video element found");
      return;
    }
    try {
      s || (W(!0), S(!0), await x.play());
    } catch (p) {
      console.error("Error controlling video:", p);
    }
  };
  return /* @__PURE__ */ t.jsxs(
    O,
    {
      br: "x4",
      style: { width: I },
      className: n("video-section-container"),
      children: [
        /* @__PURE__ */ t.jsxs(
          "div",
          {
            className: "video-player-container",
            style: {
              height: T,
              width: k,
              ...c && { alignSelf: "center" }
            },
            children: [
              /* @__PURE__ */ t.jsx(
                "button",
                {
                  className: n("start-video-container", {
                    "fade-out": v || s
                  }),
                  style: {
                    backgroundImage: g && !s ? `url("${g}")` : "none",
                    display: s ? "none" : "block"
                  },
                  onClick: (i) => D(i),
                  type: "button",
                  children: /* @__PURE__ */ t.jsxs("div", { className: n("play-button-container", { hidden: v }), children: [
                    /* @__PURE__ */ t.jsx("div", { className: "play-button-icon", children: /* @__PURE__ */ t.jsx(X, { 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: f || void 0,
                  "aria-label": A,
                  title: b || void 0,
                  children: [
                    /* @__PURE__ */ t.jsx("source", { src: f || void 0 }),
                    y && /* @__PURE__ */ t.jsx("track", { kind: "subtitles", src: "subtitles_en.vtt", srcLang: y === "italiano" ? "it" : "en" }),
                    " "
                  ]
                }
              ) })
            ]
          }
        ),
        u && /* @__PURE__ */ t.jsxs(
          "div",
          {
            className: n(
              P ? "transcription-container" : "ui-has-border-bottom",
              !N && "ui-video-no-divider"
            ),
            style: { width: I },
            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: () => M(!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: E
                          }
                        ),
                        /* @__PURE__ */ t.jsx(
                          G,
                          {
                            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(
                    U,
                    {
                      additionalClass: "text-black text-charcoal-dust rich-text-element",
                      classNameTitle: "heading-2-lg fw-extra-bold text-black text-charcoal-dust",
                      description: u
                    }
                  )
                }
              )
            ]
          }
        )
      ]
    }
  );
};
export {
  e as VIDEO_PLAYER_SIZE,
  nt as VideoPlayer
};
//# sourceMappingURL=index.es269.js.map