add old frontend code back

frontend/src/pages/ClipEdit.tsx

@@ -0,0 +1,151 @@
+import { useParams } from 'react-router-dom';
+import { useEffect, useRef, useState } from "react";
+import Playbar from "./../components/Playbar";
+import PlaybackSlider from "./../components/PlaybackSlider";
+import ClipRangeSlider from "./../components/ClipRangeSlider";
+import ClipConfig from "./../components/ClipConfig";
+import {editFile, getMetadata, processFile, getProgress} from "../utils/Endpoints"
+import type { VideoMetadata } from "../utils/types.ts";
+
+const ClipEdit = () => {
+    const { id } = useParams();
+    const videoRef = useRef<HTMLVideoElement | null>(null);
+    const videoUrl = `/api/v1/download/input/${id}`
+
+    const [metadata, setMetadata] = useState<VideoMetadata | null>(null);
+    const [playbackValue, setPlaybackValue] = useState(0);
+
+    const [outputMetadata, setOutputMetadata] = useState<VideoMetadata>({
+        // default values
+        startPoint: 0,
+        endPoint: 5,
+        width: 1280,
+        height: 720,
+        fps: 30,
+        fileSize: 10000
+    });
+
+    const [progress, setProgress] = useState(0);
+    const [downloadable, setDownloadable] = useState(false);
+
+    const sendData = async() => {
+        if (!id) return;
+
+        setDownloadable(false);
+
+        await editFile(id, outputMetadata);
+        const processed = await processFile(id);
+
+        if (!processed) {
+            console.log("Failed to process file");
+            return;
+        }
+
+        const interval = setInterval(async () => {
+           const progress = await getProgress(id);
+           setProgress(progress);
+
+           if (progress >= 1) {
+               clearInterval(interval);
+               setDownloadable(true);
+               console.log("Downloadable");
+           }
+        }, 500);
+    }
+
+    const handleDownload = async (filename: string | undefined) => {
+        if (!filename) return;
+
+        const response = await fetch(`/api/v1/download/output/${id}`);
+
+        if (!response.ok) {
+            console.error('Download failed');
+            return;
+        }
+
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        window.URL.revokeObjectURL(url);
+    };
+
+    useEffect(() => {
+        if (!id) return;
+
+        getMetadata(id)
+            .then((data) => setMetadata(data ?? null))
+            .catch((err) => console.error("Metadata fetch failed:", err));
+    }, [id]);
+
+    return (
+        <div className={"grid grid-cols-[70%_30%]"}>
+            <video
+                   ref={videoRef}
+                   className={"w-full 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. Bzzzz.
+            </video>
+
+
+            <ClipConfig
+                setMetadata={setOutputMetadata}
+            />
+
+            {metadata &&
+                <div>
+                    <Playbar
+                        video={videoRef.current}
+                        videoMetadata={metadata}
+                        className={"w-full accent-primary text-text"}
+                    />
+
+                    <PlaybackSlider
+                        videoRef={videoRef.current}
+                        videoMetadata={metadata}
+                        sliderValue={playbackValue}
+                        setSliderValue={setPlaybackValue}
+                        className={"w-full accent-primary"}
+                    />
+
+                    <ClipRangeSlider
+                        videoRef={videoRef.current}
+                        videoMetadata={metadata}
+                        setSliderValue={setPlaybackValue}
+                        setMetadata={setOutputMetadata}
+                        className={"w-full mb-10 bg-primary"}
+                    />
+                </div>}
+
+            <div className={"flex flex-col gap-2 w-4/5 m-auto"}>
+                <button
+                    className={"bg-primary text-text p-2 rounded-lg hover:bg-primary-pressed h-10"}
+                    onClick={sendData}>
+                    Export
+                </button>
+
+                { downloadable ?
+                    (<button
+                        className={"bg-primary text-text p-2 rounded-lg hover:bg-primary-pressed h-10"}
+                        onClick={() => handleDownload(id)}>
+                        Download
+                    </button>)
+                    :(
+                    <progress
+                        value={progress}
+                        className={"bg-gray-200 rounded-lg h-1"}>
+                    </progress> )
+                }
+            </div>
+        </div>
+    );
+}
+
+export default ClipEdit;

frontend/src/pages/ClipUpload.tsx

@@ -0,0 +1,43 @@
+import {useState} from "react";
+import {useNavigate} from "react-router-dom";
+import { uploadFile } from "../utils/Endpoints"
+
+const clipUpload = () => {
+    const [file, setFile] = useState<File | null>(null);
+    const navigate = useNavigate();
+
+    const [noFileError, setNoFileError] = useState(false);
+    const press = (() => {
+        if (file) {
+            uploadFile(file)
+                .then(uuid => navigate(`/create/${uuid}`))
+                .catch(e => console.error(e));
+        } else {
+            setNoFileError(true);
+        }
+    });
+
+    return (
+        <div className={"flex flex-col justify-between"}>
+            <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}
+                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>
+
+            {noFileError &&
+                <label className={"text-center text-red-500"}>Please choose a file</label>
+            }
+
+        </div>
+    )
+};
+
+export default clipUpload;