diff --git a/src/main/frontend/views/video/{id}.tsx b/src/main/frontend/views/video/{id}.tsx index d463f68..87e312c 100644 --- a/src/main/frontend/views/video/{id}.tsx +++ b/src/main/frontend/views/video/{id}.tsx @@ -2,6 +2,7 @@ import { useParams } from 'react-router-dom'; import { useEffect, useRef, useState } from "react"; import RangeSlider from 'react-range-slider-input'; import 'react-range-slider-input/dist/style.css'; +import Playbar from "./../../components/Playbar" export type VideoMetadata = { @@ -13,21 +14,15 @@ export type VideoMetadata = { fileSize: number } -const fetchMetadata = async (id: string): Promise => { - const res = await fetch(`/api/v1/metadata/original/${id}`); - if (!res.ok) throw new Error("Failed to fetch"); - return res.json(); -}; - -export default function video() { +export default function VideoId() { const { id } = useParams(); const videoRef = useRef(null); const videoUrl = "api/v1/download/input/" + id; const [metadata, setMetadata] = useState(null); const [sliderValue, setSliderValue] = useState(0); + const previousRangeSliderInput = useRef<[number, number]>([0, 0]); - let previousRangeSliderInput = useRef<[number, number]>([0, 0]); const handleRangeSliderInput = (val: [number, number]) => { if (!videoRef.current) { return; @@ -63,6 +58,22 @@ export default function video() { .catch((err) => console.log(err.message)); }, []); + // update slider + useEffect(() => { + const video = videoRef.current; + if (!video) return; + + const updateSlider = () => { + setSliderValue(video.currentTime); + }; + + video.addEventListener("timeupdate", updateSlider); + + return () => { + video.removeEventListener("timeupdate", updateSlider); + }; + }, [videoRef]); + return (