@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) • 8.53 kB
JavaScript
import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import{useState as i,useRef as a,useCallback as l,useEffect as o}from"react";import n from"@mui/icons-material/PlayArrow";import c from"@mui/icons-material/Pause";import s from"@mui/icons-material/VolumeUp";import m from"@mui/icons-material/VolumeOff";import u from"@mui/icons-material/Speed";import d from"@mui/icons-material/BrandingWatermarkOutlined";import p from"@mui/icons-material/Fullscreen";import h from"@mui/icons-material/FullscreenExit";import v from"@mui/icons-material/PlayCircle";import b from"@mui/material/Box";import f from"@mui/material/Slider";import y from"@mui/material/IconButton";import w from"@mui/material/Menu";import x from"@mui/material/MenuItem";import g from"@mui/material/Stack";import k from"@mui/material/Typography";import S from"@mui/material/Fade";import $ from"@mui/material/Tooltip";import E from"lodash/uniqueId";import{useTranslate as M}from"../locales/index.js";import P from"./locale.json.js";const F="NexusVideoPlayer",C=e=>{if(e){const r=Math.floor(e/60),t=Math.floor(e%60);return`${r.toString().padStart(2,"0")}:${t.toString().padStart(2,"0")}`}return 0},z=[{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}],L=L=>{const[T]=i((()=>E(`${F}-`))),{video:N={},sources:I=[],tracks:q=[],sx:R,...A}=L,{onClick:V,...j}=N,B=M(P),[O,U]=i(!1),[W,D]=i(0),[G,H]=i(0),[J,K]=i(1),[Q,X]=i(!1),[Y,Z]=i(null),[_,ee]=i(!1),re=a(null),te=a(null),[ie,ae]=i(!1),[le,oe]=i(null),ne=l((async()=>{const e=re.current;try{e?.paused?(await(e?.play()),U(!0)):(e?.pause(),U(!1))}catch(e){console.error(e)}}),[]),ce=()=>{const e=re.current;if(e){const r=e.currentTime||0,t=e.duration||0;D(r/t*100)}},se=()=>{const e=re.current;e&&(H(50),e.volume=.5)},me=()=>{U(!1)},ue=e=>{re.current?.focus(),e.stopPropagation(),ne(),V?.(e)},de=l((()=>{le&&clearTimeout(le),ae(!0);const e=setTimeout((()=>{ae(!1)}),2e3);oe(e)}),[le]),pe=l((e=>{const r=re.current;if(r){switch(e.code){case"Space":case"Enter":ne();break;case"ArrowRight":r.currentTime=Math.min(r.duration,r.currentTime+5);break;case"ArrowLeft":r.currentTime=Math.max(0,r.currentTime-5);break;case"ArrowUp":H((e=>{const r=Math.min(100,e+5);return re.current.volume=r/100,r}));break;case"ArrowDown":H((e=>{const r=Math.max(0,e-5);return re.current.volume=r/100,r}))}de()}}),[ne,de]);return o((()=>{const e=re.current;if(e)return e.addEventListener("timeupdate",ce),e.addEventListener("loadeddata",se),e.addEventListener("ended",me),e.addEventListener("keydown",pe),()=>{e.removeEventListener("timeupdate",ce),e.removeEventListener("loadeddata",se),e.removeEventListener("ended",me),e.removeEventListener("keydown",pe)}}),[pe,re]),o((()=>{const e=()=>{ee(null!==document.fullscreenElement)};return document.addEventListener("fullscreenchange",e),()=>{document.removeEventListener("fullscreenchange",e)}}),[]),o((()=>{const e=te.current,r=()=>{de()},t=()=>{ae(!1)};return e&&(e.addEventListener("mousemove",r),e.addEventListener("mouseleave",t)),()=>{e&&(e.removeEventListener("mousemove",r),e.removeEventListener("mouseleave",t)),le&&clearTimeout(le)}}),[le,de]),e(b,{ref:te,className:`${F}-root`,"data-testid":`${F}-root`,sx:[{bgcolor:"common.black",position:"relative","& video":{display:"block",height:"100%",width:"100%",":focus":{outline:"none"}}},...Array.isArray(R)?R:[R]],...A,children:[e("video",{ref:re,controls:!1,tabIndex:0,onClick:ue,className:`${F}-video`,"data-testid":`${F}-video`,...j,children:[I.map(((e,t)=>r("source",{...e},e.src||t))),q.map(((e,t)=>r("track",{...e},e.src||t)))]}),e(g,{className:`${F}-controls controls`,"data-testid":`${F}-controls`,sx:{visibility:ie?"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:[r(f,{className:`${F}-videoSlider`,"data-testid":`${F}-videoSlider`,"aria-label":"Video progress",value:W,onChange:(e,r)=>{const t=re.current;if(t){const e=(t.duration||0)*r/100;t.currentTime=e,D(r)}},min:0,max:100,sx:{py:0,"& .MuiSlider-thumb":{width:8,height:8,display:0===W||100===W?"none":"normal","&:focus, &:hover, &.Mui-active":{boxShadow:"unset"},bgcolor:"primary.light"},"& .MuiSlider-track":{display:0===W?"none":"normal",bgcolor:"primary.light",border:"unset"},"& .MuiSlider-rail":{bgcolor:"grey.300"}}}),e(g,{direction:"row",justifyContent:"space-between",alignContent:"end",sx:{px:2,py:1,color:"common.white"},children:[e(g,{direction:"row",alignItems:"center",children:[r($,{title:B(O?"Pause":"Play"),arrow:!0,children:r(y,{size:"small",onClick:ne,color:"inherit",className:`${F}-playPause`,"data-testid":`${F}-playPause`,"aria-label":B(O?"Pause":"Play"),children:r(O?c:n,{fontSize:"small"})})}),e(g,{direction:"row",alignItems:"center",onMouseEnter:()=>{X(!0)},onMouseLeave:()=>{X(!1)},children:[r($,{title:B("Volume"),arrow:!0,children:r(y,{size:"small",color:"inherit",onClick:()=>{const e=re.current;e&&(0===e.volume?(H(50),e.volume=.5):(H(0),e.volume=0))},className:`${F}-volume`,"data-testid":`${F}-volume`,"aria-label":B("Volume"),children:r(0===G?m:s,{fontSize:"small"})})}),Q&&r(S,{in:Q,children:r(f,{min:0,max:100,value:G,onChange:(e,r)=>{H(r);const t=re.current;t&&(t.volume=r/100)},size:"small",sx:{width:"40px",py:0,"& .MuiSlider-thumb":{width:8,height:8,color:"common.white",display:0===G?"none":"normal","&:focus, &:hover, &.Mui-active":{boxShadow:"unset"}},"& .MuiSlider-track":{display:0===G?"none":"normal",bgcolor:"common.white"},"& .MuiSlider-rail":{bgcolor:"common.white"}},"aria-label":"Volume slider","data-testid":`${F}-volumeSlider`})})]}),r(k,{variant:"caption",sx:{color:"common.white",ml:1},children:re.current&&`${C(re.current.currentTime)} / ${C(re.current.duration)}`})]}),e(g,{direction:"row",children:[r($,{title:B("Playback speed"),arrow:!0,children:r(y,{id:T,size:"small",onClick:e=>{Z(e.currentTarget)},color:"inherit",className:`${F}-playbackSpeed`,"data-testid":`${F}-playbackSpeed`,"aria-label":B("Playback speed"),children:r(u,{fontSize:"small"})})}),r($,{title:B("Mini player"),arrow:!0,children:r(y,{size:"small",color:"inherit",onClick:async()=>{try{"pictureInPictureEnabled"in document&&null!==re.current&&re.current.readyState>=2&&(document.pictureInPictureElement?await document.exitPictureInPicture():await re.current.requestPictureInPicture())}catch(e){console.error(e)}},className:`${F}-miniPlayer`,"data-testid":`${F}-miniPlayer`,"aria-label":B("Mini player"),children:r(d,{fontSize:"small"})})}),r($,{title:B(_?"Exit full screen":"Full screen"),arrow:!0,children:r(y,{size:"small",color:"inherit",onClick:async()=>{const e=re.current,r=te.current;try{e&&r&&(_?(document.exitFullscreen?await document.exitFullscreen():document.mozCancelFullScreen?await document.mozCancelFullScreen():document.webkitExitFullscreen?await document.webkitExitFullscreen():document.msExitFullscreen&&await document.msExitFullscreen(),ee(!1)):(r.requestFullscreen?await r.requestFullscreen():r.mozRequestFullScreen?await r.mozRequestFullScreen():r.webkitRequestFullscreen?await r.webkitRequestFullscreen():r.msRequestFullscreen&&await r.msRequestFullscreen(),ee(!0)))}catch(e){console.error(e)}},className:`${F}-fullScreen`,"data-testid":`${F}-fullScreen`,"aria-label":B(_?"Exit full screen":"Full screen"),children:r(_?h:p,{fontSize:"small"})})})]})]})]}),!O&&r(b,{onClick:ue,sx:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},className:`${F}-playCircle`,"data-testid":`${F}-playCircle`,children:r(v,{sx:{width:"56px",height:"56px",color:"grey.600"}})}),O||ie||0!==W||!re.current?.duration?r(t,{}):r(b,{sx:{position:"absolute",left:8,bottom:8},children:r(k,{variant:"body2",sx:{color:"common.white"},fontWeight:700,className:`${F}-videoTotalTime`,"data-testid":`${F}-videoTotalTime`,children:C(re.current.duration)})}),Y&&r(w,{disablePortal:!0,anchorEl:Y,open:Boolean(Y),onClose:()=>{Z(null)},className:`${F}-playbackSpeedMenu`,"data-testid":`${F}-playbackSpeedMenu`,anchorOrigin:{vertical:"top",horizontal:"left"},transformOrigin:{vertical:"bottom",horizontal:"left"},MenuListProps:{"aria-labelledby":T},children:z.map((e=>r(x,{className:`${F}-speedItem`,"data-testid":`${F}-speedItem`,onClick:()=>(e=>{const r=re.current;r&&(r.playbackRate=e,K(e),Z(null))})(e.value),selected:e.value===J,children:e.label},e.value)))})]})};export{L as VideoPlayerComponent};