@anoki/fse-ui
Version:
FSE UI components library
216 lines (215 loc) • 6.82 kB
JavaScript
import { j as t } from "./index.es278.js";
import { ArrowDown as V } from "./index.es19.js";
import { RichText as S } from "./index.es218.js";
import { clsx as n } from "./index.es280.js";
import { useState as p, useRef as G } from "react";
import './components/ui/VideoPlayer/VideoPlayer.css';/* empty css */
import { VIDEO_PLAYER_SIZE as e } from "./index.es268.js";
import U from "./index.es508.js";
import { Col as B } from "./index.es82.js";
import { PlayVideo as F } from "./index.es210.js";
const O = {
[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"
}
}, tt = ({
btnText: L = "Trascrizione",
sizeComp: o = e.LARGE,
transcription: m,
previewImageSrc: u,
videoSrc: g,
videoTitle: f,
videoLang: y,
playButtonLabel: R = "Riproduci",
videoAriaLabel: A = "Video player",
showDivider: N = !0
}) => {
const [b, P] = p(!1), [s, T] = p(!1), [r, W] = p(!1), v = G(null), w = U(), { width: l } = O[o];
let a, d;
if (l.includes("%"))
a = l, d = E[o].heightImg;
else {
const i = parseInt(l, 10), x = parseInt(E[o].heightImg, 10) / i, I = w ? Math.min(i, w) : i, M = Math.round(I * x);
a = `${I}px`, d = `${M}px`;
}
const c = o === e.VERTICAL, k = o === e.EXTRA_LARGE || o === e.FULL_WIDTH, j = c ? "642px" : a, H = c ? "640px" : d, _ = c ? "360px" : a, D = async (i) => {
i && (i.preventDefault(), i.stopPropagation());
const h = v.current;
if (!h) {
console.error("no video element found");
return;
}
try {
s || (T(!0), P(!0), await h.play());
} catch (x) {
console.error("Error controlling video:", x);
}
};
return /* @__PURE__ */ t.jsxs(
B,
{
br: "x4",
style: { width: j },
className: n("video-section-container"),
children: [
/* @__PURE__ */ t.jsxs(
"div",
{
className: "video-player-container",
style: {
height: H,
width: _,
...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) => D(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(F, { 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: v,
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(
k ? "transcription-container" : "ui-has-border-bottom",
!N && "ui-video-no-divider"
),
style: { width: j },
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: () => W(!r),
"aria-expanded": r,
"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(
V,
{
color: "primary",
className: n("ui-arrow", { expanded: r }),
decorative: !0
}
)
]
}
)
}
),
r && /* @__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(
S,
{
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,
tt as VideoPlayer
};
//# sourceMappingURL=index.es270.js.map