64 lines
1.9 KiB
TypeScript
Executable File
64 lines
1.9 KiB
TypeScript
Executable File
import {Slider} from '@common/ui/forms/slider/slider';
|
|
import {UseSliderProps} from '@common/ui/forms/slider/use-slider';
|
|
import {usePlayerActions} from '@common/player/hooks/use-player-actions';
|
|
import {usePlayerStore} from '@common/player/hooks/use-player-store';
|
|
import {useCurrentTime} from '@common/player/hooks/use-current-time';
|
|
import {useRef} from 'react';
|
|
|
|
interface Props {
|
|
trackColor?: UseSliderProps['trackColor'];
|
|
fillColor?: UseSliderProps['fillColor'];
|
|
className?: string;
|
|
onPointerMove?: UseSliderProps['onPointerMove'];
|
|
}
|
|
export function Seekbar({
|
|
trackColor,
|
|
fillColor,
|
|
className,
|
|
onPointerMove,
|
|
}: Props) {
|
|
const {pause, seek, setIsSeeking, play, getState} = usePlayerActions();
|
|
const duration = usePlayerStore(s => s.mediaDuration);
|
|
const playerReady = usePlayerStore(s => s.providerReady);
|
|
const pauseWhileSeeking = usePlayerStore(s => s.pauseWhileSeeking);
|
|
|
|
const currentTime = useCurrentTime();
|
|
|
|
const wasPlayingBeforeDragging = useRef(false);
|
|
|
|
return (
|
|
<Slider
|
|
fillColor={fillColor}
|
|
trackColor={trackColor}
|
|
thumbSize="w-14 h-14"
|
|
showThumbOnHoverOnly
|
|
className={className}
|
|
width="w-auto"
|
|
isDisabled={!playerReady}
|
|
value={currentTime}
|
|
minValue={0}
|
|
maxValue={duration}
|
|
onPointerMove={onPointerMove}
|
|
onPointerDown={() => {
|
|
setIsSeeking(true);
|
|
if (pauseWhileSeeking) {
|
|
wasPlayingBeforeDragging.current =
|
|
getState().isPlaying || getState().isBuffering;
|
|
pause();
|
|
}
|
|
}}
|
|
onChange={value => {
|
|
getState().emit('progress', {currentTime: value});
|
|
seek(value);
|
|
}}
|
|
onChangeEnd={() => {
|
|
setIsSeeking(false);
|
|
if (pauseWhileSeeking && wasPlayingBeforeDragging.current) {
|
|
play();
|
|
wasPlayingBeforeDragging.current = false;
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
}
|