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