ADD page navigation

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

@@ -1,36 +1,34 @@
 import {useState} from "react";
 import {UploadService} from "Frontend/generated/endpoints";
+import { useNavigate } from 'react-router-dom';
 import "./../index.css";
 
 export default function main() {
-    const [uuid, setUuid] = useState<String | undefined> (undefined);
     const [file, setFile] = useState<File | null>(null);
+    const navigate = useNavigate();
 
     function press() {
         if (file) {
             UploadService.upload(file)
-                .then(uuid => setUuid(uuid))
+                .then(uuid => navigate(`video/${uuid}`))
                 .catch(e => console.error(e));
         }
     }
 
     return (
-        <div>
-
-            <video width={640} height={480} controls>
-                { (uuid) &&
-                    <source src={`/download/input/${uuid}`} />
-                }
-            </video>
-
+        <div className={"flex flex-col"}>
             <input
                 type="file"
                 onChange={(e) => {
                     const selected = e.target.files?.[0] ?? null;
                     setFile(selected);
                 }}
+                className={"block w-full cursor-pointer rounded-lg border border-dashed border-gray-400 bg-white p-4 text-center hover:bg-gray-50 transition"}
             />
-            <button onClick={() => press()}>Upload</button>
+            <button
+                onClick={() => press()}
+                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>
 
         </div>
     )

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

@@ -1,3 +1,19 @@
-export default function video() {
+import { useParams } from 'react-router-dom';
 
+export default function video() {
+    const { id } = useParams();
+    const videoUrl = "api/v1/download/input/" + id;
+
+    return (
+        <div className={"flex justify-around"}>
+            <video controls
+                   width="600"
+                    className={"w-full max-w-3xl rounded-lg shadow-lg border border-gray-300 bg-black"}>
+                <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>
+        </div>
+    );
 }