ADD range slider to video page

src/main/frontend/views/@index.tsx

@@ -7,16 +7,20 @@ export default function main() {
     const [file, setFile] = useState<File | null>(null);
     const navigate = useNavigate();
 
+    const [error, setError] = useState(false);
+
     function press() {
         if (file) {
             UploadService.upload(file)
                 .then(uuid => navigate(`video/${uuid}`))
                 .catch(e => console.error(e));
+        } else {
+            setError(true);
         }
     }
 
     return (
-        <div className={"flex flex-col"}>
+        <div className={"flex flex-col justify-between"}>
             <input
                 type="file"
                 onChange={(e) => {
@@ -30,6 +34,10 @@ export default function main() {
                 className={"text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"}
             >Upload</button>
 
+            {error &&
+                <label className={"text-center text-red-500"}>Please choose a file</label>
+            }
+
         </div>
     )
 }

src/main/frontend/views/video/{id}.tsx

@@ -1,19 +1,46 @@
 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';
 
 export default function video() {
     const { id } = useParams();
+    const videoRef = useRef<HTMLVideoElement | null>(null);
     const videoUrl = "api/v1/download/input/" + id;
+    const [videoDuration, setVideoDuration] = useState(0);
+
+    useEffect(() => {
+        const videoEl = videoRef.current;
+
+        if (!videoEl) return;
+
+        const handleLoadedMetadata = () => {
+            setVideoDuration(videoEl.duration);
+        };
+
+        videoEl.addEventListener("loadedmetadata", handleLoadedMetadata);
+
+        return () => {
+            videoEl.removeEventListener("loadedmetadata", handleLoadedMetadata);
+        };
+    }, [videoUrl]);
 
     return (
-        <div className={"flex justify-around"}>
+        <div className={"flex flex-col gap-2 max-w-3xl m-auto"}>
             <video controls
+                   ref={videoRef}
                    width="600"
-                    className={"w-full max-w-3xl rounded-lg shadow-lg border border-gray-300 bg-black"}>
+                   className={"w-full max-w-3xl rounded-lg shadow-lg border border-gray-300 bg-black m-auto"}>
                 <source src={videoUrl} type="video/mp4" />
                 <source src={videoUrl} type="video/webm" />
                 <source src={videoUrl} type="video/ogg" />
                 Your browser does not support the video tag.
             </video>
+
+            <RangeSlider className={"w-600px"}
+                        min={0}
+                        max={videoDuration}/>
         </div>
     );
 }