@anoki/fse-ui
Version:
FSE UI components library
3 lines (2 loc) • 4.25 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./components/ui/VideoPlayer/VideoPlayer.css');const t=require("./index.cjs237.js"),N=require("./index.cjs165.js"),T=require("./index.cjs143.js"),n=require("./index.cjs239.js"),l=require("react");;/* empty css */const e=require("./index.cjs139.js"),W=require("./index.cjs451.js"),q=require("./index.cjs61.js"),k=require("./index.cjs220.js"),H={[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"}},M=({btnText:P="Trascrizione",sizeComp:i=e.VIDEO_PLAYER_SIZE.LARGE,transcription:h,previewImageSrc:p,videoSrc:I,videoTitle:R,videoLang:m,playButtonLabel:b="Riproduci",videoAriaLabel:S="Video player"})=>{const[_,V]=l.useState(!1),[o,f]=l.useState(!1),[r,D]=l.useState(!1),j=l.useRef(null),g=W(),{width:x}=H[i];let c,d;if(x.includes("%"))c=x,d=A[i].heightImg;else{const s=parseInt(x,10),u=parseInt(A[i].heightImg,10)/s,y=g?Math.min(s,g):s,Z=Math.round(y*u);c=`${y}px`,d=`${Z}px`}const a=i===e.VIDEO_PLAYER_SIZE.VERTICAL,v=i===e.VIDEO_PLAYER_SIZE.EXTRA_LARGE||i===e.VIDEO_PLAYER_SIZE.FULL_WIDTH,L=a?"642px":c,w=a?"640px":d,O=a?"360px":c,Y=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(q.Col,{br:"x4",style:{width:L},className:n.clsx("video-section-container"),children:[t.jsxRuntimeExports.jsxs("div",{className:"video-player-container",style:{height:w,width:O,...a&&{alignSelf:"center"}},children:[t.jsxRuntimeExports.jsx("button",{className:n.clsx("start-video-container",{"fade-out":_||o}),style:{backgroundImage:p&&!o?`url("${p}")`:"none",display:o?"none":"block"},onClick:s=>Y(s),type:"button",children:t.jsxRuntimeExports.jsxs("div",{className:n.clsx("play-button-container",{hidden:_}),children:[t.jsxRuntimeExports.jsx("div",{className:"play-button-icon",children:t.jsxRuntimeExports.jsx(k.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:n.clsx(v?"transcription-container":"ui-has-border-bottom"),style:{width:L},children:[t.jsxRuntimeExports.jsx("div",{className:n.clsx("expand-button-container","accordion","base-row justify-content-between align-items-center"),children:t.jsxRuntimeExports.jsxs("button",{className:n.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:n.clsx("fw-semibold text-primary base-col justify-content-center fs-custom text-decoration-underline"),children:P}),t.jsxRuntimeExports.jsx(N.ArrowDown,{color:"primary",className:n.clsx("ui-arrow",{expanded:r}),decorative:!0})]})}),r&&t.jsxRuntimeExports.jsx("div",{id:"transcription-content",className:n.clsx("transcription-text-container","pt-x8 px-x24 pb-x40 fs-6 fw-regular text-grey-black"),children:t.jsxRuntimeExports.jsx(T.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=M;
//# sourceMappingURL=index.cjs138.js.map