38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import { useEffect, type Dispatch, type SetStateAction } from "react";
|
|
import type { VideoMetadata } from "../../utils/types.ts";
|
|
|
|
type Props = {
|
|
videoRef: HTMLVideoElement | null;
|
|
videoMetadata: VideoMetadata;
|
|
sliderValue: number;
|
|
setSliderValue: Dispatch<SetStateAction<number>>;
|
|
className?: string;
|
|
};
|
|
|
|
export default function PlaybackSlider({ videoRef, videoMetadata, sliderValue, setSliderValue, className }: Props) {
|
|
const updateVideo = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (!videoRef) return;
|
|
videoRef.currentTime = e.target.valueAsNumber;
|
|
setSliderValue(e.target.valueAsNumber);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!videoRef) return;
|
|
const updateSlider = () => setSliderValue(videoRef.currentTime);
|
|
videoRef.addEventListener("timeupdate", updateSlider);
|
|
return () => videoRef.removeEventListener("timeupdate", updateSlider);
|
|
}, [videoRef]);
|
|
|
|
return (
|
|
<input
|
|
type="range"
|
|
min={0}
|
|
max={videoMetadata.duration}
|
|
value={sliderValue}
|
|
onChange={updateVideo}
|
|
step={0.1}
|
|
className={className}
|
|
/>
|
|
);
|
|
}
|