first commit

common/resources/client/player/ui/controls/seeking/seekbar.tsx

@@ -0,0 +1,63 @@
+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;
+        }
+      }}
+    />
+  );
+}