You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
694 B
34 lines
694 B
import { useSlider } from 'features/StreamPlayer/hooks/useSlider'
|
|
|
|
import {
|
|
Wrapper,
|
|
VolumeButton,
|
|
VolumeProgressList,
|
|
VolumeProgress,
|
|
Scrubber,
|
|
} from './styled'
|
|
|
|
type Props = {
|
|
muted: boolean,
|
|
onChange: (progress: number) => void,
|
|
onClick: () => void,
|
|
value: number,
|
|
}
|
|
|
|
export const VolumeBar = ({
|
|
muted,
|
|
onChange,
|
|
onClick,
|
|
value,
|
|
}: Props) => {
|
|
const progressRef = useSlider({ onChange })
|
|
return (
|
|
<Wrapper>
|
|
<VolumeButton onClick={onClick} muted={muted} />
|
|
<VolumeProgressList ref={progressRef}>
|
|
<VolumeProgress value={muted ? 0 : value} />
|
|
<Scrubber value={muted ? 0 : value} />
|
|
</VolumeProgressList>
|
|
</Wrapper>
|
|
)
|
|
}
|
|
|