ADD range slider to video page

package-lock.json

@@ -30,6 +30,7 @@
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-player": "^2.16.0",
+        "react-range-slider-input": "^3.2.1",
         "react-router": "7.5.2",
         "react-router-dom": "^7.6.0"
       },
@@ -5545,6 +5546,15 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -5617,6 +5627,17 @@
         "node": ">=18"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.42.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.42.0.tgz",
+      "integrity": "sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.42.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.42.0.tgz",
@@ -8441,6 +8462,16 @@
         "react": ">=16.6.0"
       }
     },
+    "node_modules/react-range-slider-input": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/react-range-slider-input/-/react-range-slider-input-3.2.1.tgz",
+      "integrity": "sha512-MApTX4a/Uzm9ZrJFoWu2kM87TKHJpnHHBV2JR9N9WmOSWk832DDBT3suNN6vCQmFRRtfJO9stw+bsiGpto0Hig==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "core-js": "^3.22.4"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

package.json

@@ -59,6 +59,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-player": "^2.16.0",
+    "react-range-slider-input": "^3.2.1",
     "react-router": "7.5.2",
     "react-router-dom": "^7.6.0"
   },
@@ -121,7 +122,7 @@
       "workbox-core": "7.3.0",
       "workbox-precaching": "7.3.0"
     },
-    "hash": "59b049c9a7bc172ebcdca8572dc409f94b8f497d56c237ec7c860fe8598c891b"
+    "hash": "c9aa2dc3684f659cdacbd7235263e79680332a1d6598b09ea248bfa5d0d96fa9"
   },
   "type": "module",
   "overrides": {
@@ -151,6 +152,7 @@
     "@vaadin/vaadin-material-styles": "$@vaadin/vaadin-material-styles",
     "@tailwindcss/vite": "$@tailwindcss/vite",
     "react-router-dom": "$react-router-dom",
-    "react-player": "$react-player"
+    "react-player": "$react-player",
+    "react-range-slider-input": "$react-range-slider-input"
   }
 }

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>
     );
 }