@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 2.35 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("react"),o=require("../../../../../utils/formatTime.js"),a=require("../../../../WebCore/Typography/Typography.js"),n=require("./components/Markers/Markers.js"),s=require("./components/Scrubber/Scrubber.js"),i=require("./components/VolumeControls/VolumeControls.js");const l=t.styled(t.Stack)({flex:1,position:"relative"}),m=t.styled(t.Stack)(({theme:e})=>({ml:"auto",alignItems:"center",position:"absolute",width:"100%",overflow:"hidden",right:0,bottom:8,gap:e.spacing(e.custom.margin.xs)})),u=t.styled(a)(({theme:e})=>({color:e.custom.palette.text.secondary,textOverflow:"ellipsis",overflow:"hidden",textWrap:"nowrap",marginLeft:"auto"})),d=t.styled(t.Box)(({theme:e})=>({position:"relative",width:"100%",display:"flex",gap:e.spacing(e.custom.margin.xs),alignItems:"center"})),c=t.styled(t.Box)(({theme:e,left:t,width:r})=>({background:e.custom.palette.neutral[300],height:4,position:"absolute",left:`${t}%`,pointerEvents:"none",top:"50%",transform:"translateY(-50%)",borderRadius:e.custom.radius.round,width:`${r}%`}));var p=r.memo(({startTime:t,currentTime:a,endTime:p,playing:h,markerIndicator:g,bufferRanges:k,handleSeeking:x,handleSeekEnd:b,handleSeekStart:C,markers:f,marker:v,markerIndicatorMode:T,markerIndicatorSize:j,volume:y,muted:w,handleVolumeMute:S,handleVolumeChange:q,volumeControlsType:I,volumeControls:M})=>{const[V,P]=r.useState(h),E=r.useCallback((e,t)=>{e.stopPropagation(),x?.(t)},[x]),z=r.useCallback((e,t)=>{e.stopPropagation(),b?.(V),V&&P(!1)},[V,b]),B=r.useCallback(e=>{e.stopPropagation(),h&&P(h),C?.(h)},[h,C]),R=r.useCallback(()=>{h&&P(h),C?.(h)},[h,C]),W=r.useCallback(()=>{b?.(V),V&&P(!1)},[V,b]);return e.jsxs(l,{children:[e.jsxs(m,{direction:"row",children:[e.jsxs(u,{component:"p",variation:"md",children:[o.formatTime(a-t)," / ",o.formatTime(p-t)]}),M&&e.jsx(i,{volume:y,muted:w,handleVolumeMute:S,handleVolumeChange:q,volumeControlsType:I})]}),k.length>0&&k.map(({startPercent:t,widthPercent:r},o)=>e.jsx(c,{left:t,width:r},o)),e.jsxs(d,{children:[e.jsx(s,{step:.05,value:a,max:p,min:t,onChangeCommitted:z,onMouseDown:B,onChange:E,onTouchStart:R,onTouchEnd:W}),f&&f?.length>0&&e.jsx(n,{markerIndicatorMode:T,markerIndicatorSize:j,markerIndicator:g,markers:f,marker:v,startTime:t,currentTime:a,endTime:p})]})]})});module.exports=p;