From 74c51debe63e1a59a66c474b5a0bb2549e326945 Mon Sep 17 00:00:00 2001 From: ThisBirchWood Date: Mon, 19 May 2025 15:53:31 +0200 Subject: [PATCH] ADD page navigation --- package-lock.json | 81 +++++++++++++++++++++++++- package.json | 10 +++- src/main/frontend/views/@index.tsx | 20 +++---- src/main/frontend/views/video/{id}.tsx | 18 +++++- 4 files changed, 112 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1b6b4f9..aedff35 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,9 @@ "lit": "3.3.0", "react": "18.3.1", "react-dom": "18.3.1", - "react-router": "7.5.2" + "react-player": "^2.16.0", + "react-router": "7.5.2", + "react-router-dom": "^7.6.0" }, "devDependencies": { "@babel/preset-react": "7.26.3", @@ -5771,7 +5773,6 @@ "version": "4.3.1", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -7681,6 +7682,12 @@ "@types/trusted-types": "^2.0.2" } }, + "node_modules/load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==", + "license": "MIT" + }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -7743,6 +7750,12 @@ "node": ">= 0.4" } }, + "node_modules/memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==", + "license": "MIT" + }, "node_modules/meow": { "version": "13.2.0", "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", @@ -7936,6 +7949,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-inspect": { "version": "1.13.4", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", @@ -8312,6 +8334,17 @@ ], "license": "MIT" }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/pump": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz", @@ -8380,6 +8413,34 @@ "react": "^18.3.1" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", + "license": "MIT" + }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "license": "MIT" + }, + "node_modules/react-player": { + "version": "2.16.0", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.0.tgz", + "integrity": "sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==", + "license": "MIT", + "dependencies": { + "deepmerge": "^4.0.0", + "load-script": "^1.0.0", + "memoize-one": "^5.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.0.1" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, "node_modules/react-refresh": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", @@ -8413,6 +8474,22 @@ } } }, + "node_modules/react-router-dom": { + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.0.tgz", + "integrity": "sha512-DYgm6RDEuKdopSyGOWZGtDfSm7Aofb8CCzgkliTjtu/eDuB0gcsv6qdFhhi8HdtmA+KHkt5MfZ5K2PdzjugYsA==", + "license": "MIT", + "dependencies": { + "react-router": "7.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/readable-stream": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz", diff --git a/package.json b/package.json index d8fbd2f..4174ba5 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,9 @@ "lit": "3.3.0", "react": "18.3.1", "react-dom": "18.3.1", - "react-router": "7.5.2" + "react-player": "^2.16.0", + "react-router": "7.5.2", + "react-router-dom": "^7.6.0" }, "vaadin": { "dependencies": { @@ -119,7 +121,7 @@ "workbox-core": "7.3.0", "workbox-precaching": "7.3.0" }, - "hash": "c398138454287302e894af1729934daf9bf96e137b5bcc9f38a4973751d307d3" + "hash": "59b049c9a7bc172ebcdca8572dc409f94b8f497d56c237ec7c860fe8598c891b" }, "type": "module", "overrides": { @@ -147,6 +149,8 @@ "@vaadin/vaadin-themable-mixin": "$@vaadin/vaadin-themable-mixin", "@vaadin/vaadin-lumo-styles": "$@vaadin/vaadin-lumo-styles", "@vaadin/vaadin-material-styles": "$@vaadin/vaadin-material-styles", - "@tailwindcss/vite": "$@tailwindcss/vite" + "@tailwindcss/vite": "$@tailwindcss/vite", + "react-router-dom": "$react-router-dom", + "react-player": "$react-player" } } \ No newline at end of file diff --git a/src/main/frontend/views/@index.tsx b/src/main/frontend/views/@index.tsx index 17120df..0d05f72 100644 --- a/src/main/frontend/views/@index.tsx +++ b/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 (undefined); const [file, setFile] = useState(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 ( -
- - - +
{ 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"} /> - +
) diff --git a/src/main/frontend/views/video/{id}.tsx b/src/main/frontend/views/video/{id}.tsx index c9dd84a..1c7b73d 100644 --- a/src/main/frontend/views/video/{id}.tsx +++ b/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 ( +
+ +
+ ); } \ No newline at end of file