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