feat(frontend): remove server-side upload process and switch to browser process

frontend/src/pages/ClipUpload.tsx

@@ -1,6 +1,5 @@
 import {useState} from "react";
 import {useNavigate} from "react-router-dom";
-import {uploadFile, convertFile, getProgress} from "../utils/endpoints"
 import BlueButton from "../components/buttons/BlueButton.tsx";
 import Box from "../components/Box.tsx";
 
@@ -8,63 +7,14 @@ const ClipUpload = () => {
     const [file, setFile] = useState<File | null>(null);
     const navigate = useNavigate();
     const [error, setError] = useState<null | string>(null);
-    const [progress, setProgress] = useState<number>(0);
 
-    const isVideoFileSupported = (file: File): boolean => {
-        const video = document.createElement("video");
-
-        if (file.type && video.canPlayType(file.type) !== "") {
-            return true;
-        }
-
-        const extension = file.name.split(".").pop()?.toLowerCase();
-        const extensionToMime: Record<string, string> = {
-            mp4: "video/mp4",
-            webm: "video/webm",
-            ogg: "video/ogg",
-            mov: "video/quicktime",
-        };
-
-        if (extension && extensionToMime[extension]) {
-            return video.canPlayType(extensionToMime[extension]) !== "";
-        }
-
-        return false;
-    };
-
-    const press = (() => {
+    const press = () => {
         if (!file) {
             setError("Please choose a file");
             return;
         }
-
-        uploadFile(file)
-            .then(uuid => {
-                if (isVideoFileSupported(file)) {
-                    navigate(`/create/${uuid}`)
-                } else {
-                    convertFile(uuid);
-                    const interval = setInterval(async() => await pollProgress(uuid, interval), 500);
-                }
-            })
-            .catch((e: Error) => setError(`Failed to upload file: ${e.message}`));
-    });
-
-    const pollProgress = async (id: string, intervalId: number) => {
-        getProgress(id)
-            .then((progress) => {
-                setProgress(progress.conversion.progress);
-
-                if (progress.conversion.complete) {
-                    clearInterval(intervalId);
-                    navigate(`/create/${id}`)
-                }
-            })
-            .catch((err: Error) => {
-                setError(`Failed to fetch progress: ${err.message}`);
-                clearInterval(intervalId);
-            });
-    }
+        navigate('/create/new', { state: { file } });
+    };
 
     return (
         <div className="flex items-start justify-center p-8 min-h-full">
@@ -84,8 +34,6 @@ const ClipUpload = () => {
                 <BlueButton onClick={press}>Upload</BlueButton>
 
                 {error && <p className="text-sm text-red-500 text-center">{error}</p>}
-
-                <progress value={progress} className="w-full h-1 rounded bg-gray-200" />
             </Box>
         </div>
     )