52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import RangeSlider from 'react-range-slider-input';
|
|
import 'react-range-slider-input/dist/style.css';
|
|
import {useRef} from "react";
|
|
import clsx from 'clsx';
|
|
import { VideoMetadata } from "../utils/Endpoints"
|
|
|
|
type Props = {
|
|
videoRef: HTMLVideoElement | null;
|
|
videoMetadata: VideoMetadata;
|
|
setSliderValue: Function;
|
|
setMetadata: Function;
|
|
className?: string;
|
|
};
|
|
|
|
export default function ClipRangeSlider({videoRef,
|
|
videoMetadata,
|
|
setSliderValue,
|
|
setMetadata,
|
|
className}: Props) {
|
|
const previousRangeSliderInput = useRef<[number, number]>([0, 0]);
|
|
|
|
const handleRangeSliderInput = (val: [number, number]) => {
|
|
if (!videoRef) return;
|
|
|
|
if (previousRangeSliderInput.current[0] != val[0]) {
|
|
videoRef.currentTime = val[0];
|
|
setSliderValue(val[0]);
|
|
} else if (previousRangeSliderInput.current[1] != val[1]) {
|
|
videoRef.currentTime = val[1];
|
|
setSliderValue(val[1]);
|
|
}
|
|
|
|
setMetadata((prevState: VideoMetadata) => ({
|
|
...prevState,
|
|
startPoint: val[0],
|
|
endPoint: val[1]
|
|
}
|
|
))
|
|
previousRangeSliderInput.current = val;
|
|
};
|
|
|
|
return (
|
|
<RangeSlider
|
|
min={0}
|
|
max={videoMetadata.endPoint}
|
|
step={0.1}
|
|
onInput={handleRangeSliderInput}
|
|
className={clsx(className)}
|
|
id={"range-slider"}
|
|
/>
|
|
)
|
|
} |