Use local seekvalue to smooth out slider drag

This commit is contained in:
jeffvli 2023-02-06 01:45:56 -08:00
parent 1bbdf09dcc
commit 13f48711a9

View file

@ -111,6 +111,8 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
return () => clearInterval(interval);
}, [currentPlayerRef, isSeeking, setCurrentTime, playerType, status]);
const [seekValue, setSeekValue] = useState(0);
return (
<>
<ControlsContainer>
@ -216,11 +218,16 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
max={songDuration}
min={0}
size={6}
value={currentTime}
value={!isSeeking ? currentTime : seekValue}
w="100%"
onChange={(e) => {
setIsSeeking(true);
setSeekValue(e);
}}
onChangeEnd={(e) => {
handleSeekSlider(e);
setIsSeeking(false);
console.log('end');
}}
/>
</SliderWrapper>