Use local seekvalue to smooth out slider drag

2026-05-07 04:20:12 +02:00 · 2023-02-06 01:45:56 -08:00
parent 1bbdf09dcc
commit 13f48711a9
1 changed files with 8 additions and 1 deletions
@@ -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>