@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 9.32 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/icons-material/PlayArrow"),a=require("@mui/icons-material/Pause"),l=require("@mui/icons-material/VolumeUp"),i=require("@mui/icons-material/VolumeOff"),n=require("@mui/icons-material/Speed"),o=require("@mui/icons-material/BrandingWatermarkOutlined"),s=require("@mui/icons-material/Fullscreen"),u=require("@mui/icons-material/FullscreenExit"),c=require("@mui/icons-material/PlayCircle"),d=require("@mui/material/Box"),m=require("@mui/material/Slider"),f=require("@mui/material/IconButton"),x=require("@mui/material/Menu"),h=require("@mui/material/MenuItem"),p=require("@mui/material/Stack"),v=require("@mui/material/Typography"),b=require("@mui/material/Fade"),y=require("@mui/material/Tooltip"),w=require("lodash/uniqueId"),S=require("../locales/index.js"),j=require("./locale.json.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var k=g(r),q=g(a),$=g(l),E=g(i),P=g(n),C=g(o),M=g(s),F=g(u),z=g(c),T=g(d),L=g(m),N=g(f),I=g(x),R=g(h),V=g(p),A=g(v),O=g(b),B=g(y),U=g(w);const W="NexusVideoPlayer",_=e=>{if(e){const t=Math.floor(e/60),r=Math.floor(e%60);return`${t.toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`}return 0},D=[{label:"0.25x",value:.25},{label:"0.5x",value:.5},{label:"0.75x",value:.75},{label:"Normal",value:1},{label:"1.25x",value:1.25},{label:"1.5x",value:1.5},{label:"1.75x",value:1.75},{label:"2x",value:2}];exports.VideoPlayerComponent=r=>{const[a]=t.useState((()=>U.default(`${W}-`))),{video:l={},sources:i=[],tracks:n=[],sx:o,...s}=r,{onClick:u,...c}=l,d=S.useTranslate(j.default),[m,f]=t.useState(!1),[x,h]=t.useState(0),[p,v]=t.useState(0),[b,y]=t.useState(1),[w,g]=t.useState(!1),[G,H]=t.useState(null),[J,K]=t.useState(!1),Q=t.useRef(null),X=t.useRef(null),[Y,Z]=t.useState(!1),[ee,te]=t.useState(null),re=t.useCallback((async()=>{const e=Q.current;try{e?.paused?(await(e?.play()),f(!0)):(e?.pause(),f(!1))}catch(e){console.error(e)}}),[]),ae=()=>{const e=Q.current;if(e){const t=e.currentTime||0,r=e.duration||0;h(t/r*100)}},le=()=>{const e=Q.current;e&&(v(50),e.volume=.5)},ie=()=>{f(!1)},ne=e=>{Q.current?.focus(),e.stopPropagation(),re(),u?.(e)},oe=t.useCallback((()=>{ee&&clearTimeout(ee),Z(!0);const e=setTimeout((()=>{Z(!1)}),2e3);te(e)}),[ee]),se=t.useCallback((e=>{const t=Q.current;if(t){switch(e.code){case"Space":case"Enter":re();break;case"ArrowRight":t.currentTime=Math.min(t.duration,t.currentTime+5);break;case"ArrowLeft":t.currentTime=Math.max(0,t.currentTime-5);break;case"ArrowUp":v((e=>{const t=Math.min(100,e+5);return Q.current.volume=t/100,t}));break;case"ArrowDown":v((e=>{const t=Math.max(0,e-5);return Q.current.volume=t/100,t}))}oe()}}),[re,oe]);return t.useEffect((()=>{const e=Q.current;if(e)return e.addEventListener("timeupdate",ae),e.addEventListener("loadeddata",le),e.addEventListener("ended",ie),e.addEventListener("keydown",se),()=>{e.removeEventListener("timeupdate",ae),e.removeEventListener("loadeddata",le),e.removeEventListener("ended",ie),e.removeEventListener("keydown",se)}}),[se,Q]),t.useEffect((()=>{const e=()=>{K(null!==document.fullscreenElement)};return document.addEventListener("fullscreenchange",e),()=>{document.removeEventListener("fullscreenchange",e)}}),[]),t.useEffect((()=>{const e=X.current,t=()=>{oe()},r=()=>{Z(!1)};return e&&(e.addEventListener("mousemove",t),e.addEventListener("mouseleave",r)),()=>{e&&(e.removeEventListener("mousemove",t),e.removeEventListener("mouseleave",r)),ee&&clearTimeout(ee)}}),[ee,oe]),e.jsxs(T.default,{ref:X,className:`${W}-root`,"data-testid":`${W}-root`,sx:[{bgcolor:"common.black",position:"relative","& video":{display:"block",height:"100%",width:"100%",":focus":{outline:"none"}}},...Array.isArray(o)?o:[o]],...s,children:[e.jsxs("video",{ref:Q,controls:!1,tabIndex:0,onClick:ne,className:`${W}-video`,"data-testid":`${W}-video`,...c,children:[i.map(((t,r)=>e.jsx("source",{...t},t.src||r))),n.map(((t,r)=>e.jsx("track",{...t},t.src||r)))]}),e.jsxs(V.default,{className:`${W}-controls controls`,"data-testid":`${W}-controls`,sx:{visibility:Y?"visible":"hidden",position:"absolute",bottom:0,left:0,width:"100%",height:"74px",background:"linear-gradient(to top, rgba(0, 40, 70, 0.5) 2.63%, rgba(0, 40, 70, 0.15) 44.32%, rgba(0, 40, 70, 0) 71.8%);"},justifyContent:"end",children:[e.jsx(L.default,{className:`${W}-videoSlider`,"data-testid":`${W}-videoSlider`,"aria-label":"Video progress",value:x,onChange:(e,t)=>{const r=Q.current;if(r){const e=(r.duration||0)*t/100;r.currentTime=e,h(t)}},min:0,max:100,sx:{py:0,"& .MuiSlider-thumb":{width:8,height:8,display:0===x||100===x?"none":"normal","&:focus, &:hover, &.Mui-active":{boxShadow:"unset"},bgcolor:"primary.light"},"& .MuiSlider-track":{display:0===x?"none":"normal",bgcolor:"primary.light",border:"unset"},"& .MuiSlider-rail":{bgcolor:"grey.300"}}}),e.jsxs(V.default,{direction:"row",justifyContent:"space-between",alignContent:"end",sx:{px:2,py:1,color:"common.white"},children:[e.jsxs(V.default,{direction:"row",alignItems:"center",children:[e.jsx(B.default,{title:d(m?"Pause":"Play"),arrow:!0,children:e.jsx(N.default,{size:"small",onClick:re,color:"inherit",className:`${W}-playPause`,"data-testid":`${W}-playPause`,"aria-label":d(m?"Pause":"Play"),children:m?e.jsx(q.default,{fontSize:"small"}):e.jsx(k.default,{fontSize:"small"})})}),e.jsxs(V.default,{direction:"row",alignItems:"center",onMouseEnter:()=>{g(!0)},onMouseLeave:()=>{g(!1)},children:[e.jsx(B.default,{title:d("Volume"),arrow:!0,children:e.jsx(N.default,{size:"small",color:"inherit",onClick:()=>{const e=Q.current;e&&(0===e.volume?(v(50),e.volume=.5):(v(0),e.volume=0))},className:`${W}-volume`,"data-testid":`${W}-volume`,"aria-label":d("Volume"),children:0===p?e.jsx(E.default,{fontSize:"small"}):e.jsx($.default,{fontSize:"small"})})}),w&&e.jsx(O.default,{in:w,children:e.jsx(L.default,{min:0,max:100,value:p,onChange:(e,t)=>{v(t);const r=Q.current;r&&(r.volume=t/100)},size:"small",sx:{width:"40px",py:0,"& .MuiSlider-thumb":{width:8,height:8,color:"common.white",display:0===p?"none":"normal","&:focus, &:hover, &.Mui-active":{boxShadow:"unset"}},"& .MuiSlider-track":{display:0===p?"none":"normal",bgcolor:"common.white"},"& .MuiSlider-rail":{bgcolor:"common.white"}},"aria-label":"Volume slider","data-testid":`${W}-volumeSlider`})})]}),e.jsx(A.default,{variant:"caption",sx:{color:"common.white",ml:1},children:Q.current&&`${_(Q.current.currentTime)} / ${_(Q.current.duration)}`})]}),e.jsxs(V.default,{direction:"row",children:[e.jsx(B.default,{title:d("Playback speed"),arrow:!0,children:e.jsx(N.default,{id:a,size:"small",onClick:e=>{H(e.currentTarget)},color:"inherit",className:`${W}-playbackSpeed`,"data-testid":`${W}-playbackSpeed`,"aria-label":d("Playback speed"),children:e.jsx(P.default,{fontSize:"small"})})}),e.jsx(B.default,{title:d("Mini player"),arrow:!0,children:e.jsx(N.default,{size:"small",color:"inherit",onClick:async()=>{try{"pictureInPictureEnabled"in document&&null!==Q.current&&Q.current.readyState>=2&&(document.pictureInPictureElement?await document.exitPictureInPicture():await Q.current.requestPictureInPicture())}catch(e){console.error(e)}},className:`${W}-miniPlayer`,"data-testid":`${W}-miniPlayer`,"aria-label":d("Mini player"),children:e.jsx(C.default,{fontSize:"small"})})}),e.jsx(B.default,{title:d(J?"Exit full screen":"Full screen"),arrow:!0,children:e.jsx(N.default,{size:"small",color:"inherit",onClick:async()=>{const e=Q.current,t=X.current;try{e&&t&&(J?(document.exitFullscreen?await document.exitFullscreen():document.mozCancelFullScreen?await document.mozCancelFullScreen():document.webkitExitFullscreen?await document.webkitExitFullscreen():document.msExitFullscreen&&await document.msExitFullscreen(),K(!1)):(t.requestFullscreen?await t.requestFullscreen():t.mozRequestFullScreen?await t.mozRequestFullScreen():t.webkitRequestFullscreen?await t.webkitRequestFullscreen():t.msRequestFullscreen&&await t.msRequestFullscreen(),K(!0)))}catch(e){console.error(e)}},className:`${W}-fullScreen`,"data-testid":`${W}-fullScreen`,"aria-label":d(J?"Exit full screen":"Full screen"),children:J?e.jsx(F.default,{fontSize:"small"}):e.jsx(M.default,{fontSize:"small"})})})]})]})]}),!m&&e.jsx(T.default,{onClick:ne,sx:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},className:`${W}-playCircle`,"data-testid":`${W}-playCircle`,children:e.jsx(z.default,{sx:{width:"56px",height:"56px",color:"grey.600"}})}),m||Y||0!==x||!Q.current?.duration?e.jsx(e.Fragment,{}):e.jsx(T.default,{sx:{position:"absolute",left:8,bottom:8},children:e.jsx(A.default,{variant:"body2",sx:{color:"common.white"},fontWeight:700,className:`${W}-videoTotalTime`,"data-testid":`${W}-videoTotalTime`,children:_(Q.current.duration)})}),G&&e.jsx(I.default,{disablePortal:!0,anchorEl:G,open:Boolean(G),onClose:()=>{H(null)},className:`${W}-playbackSpeedMenu`,"data-testid":`${W}-playbackSpeedMenu`,anchorOrigin:{vertical:"top",horizontal:"left"},transformOrigin:{vertical:"bottom",horizontal:"left"},MenuListProps:{"aria-labelledby":a},children:D.map((t=>e.jsx(R.default,{className:`${W}-speedItem`,"data-testid":`${W}-speedItem`,onClick:()=>(e=>{const t=Q.current;t&&(t.playbackRate=e,y(e),H(null))})(t.value),selected:t.value===b,children:t.label},t.value)))})]})};