From 1802659f437936ee4b404f8b96a0b2e7fbcf445c Mon Sep 17 00:00:00 2001
From: ThisBirchWood <dylanseandefaoite@gmail.com>
Date: Fri, 30 May 2025 14:43:53 +0200
Subject: [PATCH] REFACTOR frontend

---
 frontend/src/components/Selector.tsx          | 21 ++++++++++++++
 .../src/components/{ => video}/ClipConfig.tsx | 29 +++++++------------
 .../{ => video}/ClipRangeSlider.tsx           |  2 +-
 .../components/{ => video}/ExportWidget.tsx   |  3 +-
 .../components/{ => video}/PlaybackSlider.tsx |  2 +-
 .../src/components/{ => video}/Playbar.tsx    |  2 +-
 frontend/src/pages/ClipEdit.tsx               | 17 ++++++-----
 frontend/src/pages/ClipUpload.tsx             | 11 +++----
 8 files changed, 51 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/components/Selector.tsx
 rename frontend/src/components/{ => video}/ClipConfig.tsx (75%)
 rename frontend/src/components/{ => video}/ClipRangeSlider.tsx (96%)
 rename frontend/src/components/{ => video}/ExportWidget.tsx (91%)
 rename frontend/src/components/{ => video}/PlaybackSlider.tsx (95%)
 rename frontend/src/components/{ => video}/Playbar.tsx (97%)

diff --git a/frontend/src/components/Selector.tsx b/frontend/src/components/Selector.tsx
new file mode 100644
index 0000000..afb575f
--- /dev/null
+++ b/frontend/src/components/Selector.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+type props = {
+    children: React.ReactNode;
+    label: String;
+}
+
+const Selector = ({children, label}: props) => {
+    return (
+        <div className={"flex items-center gap-2"}>
+            <label
+                className={"w-full"}>
+                { label }
+            </label>
+            <div className="w-px h-6 bg-gray-400 mx-3" />
+            {children}
+        </div>
+    )
+}
+
+export default Selector;
\ No newline at end of file
diff --git a/frontend/src/components/ClipConfig.tsx b/frontend/src/components/video/ClipConfig.tsx
similarity index 75%
rename from frontend/src/components/ClipConfig.tsx
rename to frontend/src/components/video/ClipConfig.tsx
index d5e2f7f..a84b4dd 100644
--- a/frontend/src/components/ClipConfig.tsx
+++ b/frontend/src/components/video/ClipConfig.tsx
@@ -1,4 +1,5 @@
-import type { VideoMetadata } from "../utils/types.ts";
+import type { VideoMetadata } from "../../utils/types.ts";
+import Selector from "../Selector.tsx";
 import clsx from "clsx";
 
 type prop = {
@@ -33,11 +34,8 @@ export default function ClipConfig({setMetadata, className}: prop) {
     return (
         <div className={clsx("flex flex-col gap-2 p-10 rounded-md", className)}>
             <h2 className={"text-3xl font-bold text-gray-800 mb-4"}>Export Settings</h2>
-            <div className="flex items-center gap-2">
-                <label htmlFor="resolution"
-                       className={"w-full"}
-                >Resolution: </label>
-                <div className="w-px h-6 bg-gray-400 mx-3" />
+
+            <Selector label={"Resolution"}>
                 <select id="resolution"
                         name="resolution"
                         defaultValue="1280,720"
@@ -50,13 +48,9 @@ export default function ClipConfig({setMetadata, className}: prop) {
                     <option value="854,480">480p</option>
                     <option value="640,360">360p</option>
                 </select>
-            </div>
+            </Selector>
 
-            <div className="flex items-center gap-2">
-                <label htmlFor="fps"
-                       className={"w-full"}
-                >FPS: </label>
-                <div className="w-px h-6 bg-gray-400 mx-3" />
+            <Selector label={"FPS"}>
                 <select id="fps"
                         name="fps"
                         defaultValue="30"
@@ -66,20 +60,17 @@ export default function ClipConfig({setMetadata, className}: prop) {
                     <option value="30">30</option>
                     <option value="15">15</option>
                 </select>
-            </div>
+            </Selector>
 
-            <div className="flex items-center gap-2">
-                <label className={"w-full"}>
-                    File Size (mb):
-                </label>
-                <div className="w-px h-6 bg-gray-400 mx-3" />
+            <Selector label={"File Size"}>
                 <input type="number"
                        min="1"
                        defaultValue="10"
                        onChange={updateFileSize}
                        className={"border-black bg-gray-200 p-2 rounded-md w-full"}
                 />
-            </div>
+            </Selector>
+
         </div>
     )
 }
\ No newline at end of file
diff --git a/frontend/src/components/ClipRangeSlider.tsx b/frontend/src/components/video/ClipRangeSlider.tsx
similarity index 96%
rename from frontend/src/components/ClipRangeSlider.tsx
rename to frontend/src/components/video/ClipRangeSlider.tsx
index a1760e4..ae80bfa 100644
--- a/frontend/src/components/ClipRangeSlider.tsx
+++ b/frontend/src/components/video/ClipRangeSlider.tsx
@@ -2,7 +2,7 @@ import RangeSlider from 'react-range-slider-input';
 import 'react-range-slider-input/dist/style.css';
 import {useRef} from "react";
 import clsx from 'clsx';
-import type { VideoMetadata } from "../utils/types.ts";
+import type { VideoMetadata } from "../../utils/types.ts";
 
 type Props = {
     videoRef: HTMLVideoElement | null;
diff --git a/frontend/src/components/ExportWidget.tsx b/frontend/src/components/video/ExportWidget.tsx
similarity index 91%
rename from frontend/src/components/ExportWidget.tsx
rename to frontend/src/components/video/ExportWidget.tsx
index 1f125ad..ac9a743 100644
--- a/frontend/src/components/ExportWidget.tsx
+++ b/frontend/src/components/video/ExportWidget.tsx
@@ -1,4 +1,5 @@
-import BlueButton from "./buttons/BlueButton.tsx";
+import BlueButton from "../buttons/BlueButton.tsx";
+import React from "react";
 
 type props = {
     dataSend: React.MouseEventHandler<HTMLButtonElement>;
diff --git a/frontend/src/components/PlaybackSlider.tsx b/frontend/src/components/video/PlaybackSlider.tsx
similarity index 95%
rename from frontend/src/components/PlaybackSlider.tsx
rename to frontend/src/components/video/PlaybackSlider.tsx
index 2bdfde2..f5f7f88 100644
--- a/frontend/src/components/PlaybackSlider.tsx
+++ b/frontend/src/components/video/PlaybackSlider.tsx
@@ -1,6 +1,6 @@
 import {useEffect} from "react";
 import clsx from 'clsx';
-import type { VideoMetadata } from "../utils/types.ts";
+import type { VideoMetadata } from "../../utils/types.ts";
 
 type Props = {
     videoRef: HTMLVideoElement | null;
diff --git a/frontend/src/components/Playbar.tsx b/frontend/src/components/video/Playbar.tsx
similarity index 97%
rename from frontend/src/components/Playbar.tsx
rename to frontend/src/components/video/Playbar.tsx
index 430bb63..08c0250 100644
--- a/frontend/src/components/Playbar.tsx
+++ b/frontend/src/components/video/Playbar.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState} from "react";
 import { Volume1, Volume2, VolumeX, Play, Pause } from 'lucide-react';
 import clsx from 'clsx';
-import type { VideoMetadata } from "../utils/types.ts";
+import type { VideoMetadata } from "../../utils/types.ts";
 
 
 type Props = {
diff --git a/frontend/src/pages/ClipEdit.tsx b/frontend/src/pages/ClipEdit.tsx
index 244eb7d..9c607c6 100644
--- a/frontend/src/pages/ClipEdit.tsx
+++ b/frontend/src/pages/ClipEdit.tsx
@@ -1,13 +1,13 @@
 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 Playbar from "./../components/video/Playbar";
+import PlaybackSlider from "./../components/video/PlaybackSlider";
+import ClipRangeSlider from "./../components/video/ClipRangeSlider";
+import ClipConfig from "./../components/video/ClipConfig";
+import ExportWidget from "../components/video/ExportWidget.tsx";
 import {editFile, getMetadata, processFile, getProgress} from "../utils/endpoints"
 import type { VideoMetadata } from "../utils/types.ts";
 import Box from "../components/Box.tsx";
-import ExportWidget from "../components/ExportWidget.tsx";
 
 const ClipEdit = () => {
     const { id } = useParams();
@@ -104,7 +104,7 @@ const ClipEdit = () => {
                     <Playbar
                         video={videoRef.current}
                         videoMetadata={metadata}
-                        className={"w-full accent-primary text-text"}
+                        className={"w-full accent-primary"}
                     />
 
                     <PlaybackSlider
@@ -120,7 +120,7 @@ const ClipEdit = () => {
                         videoMetadata={metadata}
                         setSliderValue={setPlaybackValue}
                         setMetadata={setOutputMetadata}
-                        className={"w-full mb-10 bg-primary"}
+                        className={"w-full mt-2 bg-primary"}
                     />
                 </Box>}
 
@@ -129,7 +129,8 @@ const ClipEdit = () => {
                     dataSend={sendData}
                     handleDownload={handleDownload}
                     downloadable={downloadable}
-                    progress={progress} />
+                    progress={progress}
+                />
             </Box>
         </div>
     );
diff --git a/frontend/src/pages/ClipUpload.tsx b/frontend/src/pages/ClipUpload.tsx
index 9bb39bb..192dd67 100644
--- a/frontend/src/pages/ClipUpload.tsx
+++ b/frontend/src/pages/ClipUpload.tsx
@@ -2,6 +2,7 @@ import {useState} from "react";
 import {useNavigate} from "react-router-dom";
 import { uploadFile } from "../utils/endpoints"
 import BlueButton from "../components/buttons/BlueButton.tsx";
+import Box from "../components/Box.tsx";
 
 const clipUpload = () => {
     const [file, setFile] = useState<File | null>(null);
@@ -19,7 +20,7 @@ const clipUpload = () => {
     });
 
     return (
-        <div className={"flex flex-col justify-between gap-3"}>
+        <Box className={"flex flex-col justify-between gap-3 p-5"}>
             <input
                 type="file"
                 onChange={(e) => {
@@ -30,14 +31,14 @@ const clipUpload = () => {
             />
 
             <BlueButton
-                onClick={press}
-            >Upload</BlueButton>
+                onClick={press}>
+                Upload
+            </BlueButton>
 
             {noFileError &&
                 <label className={"text-center text-red-500"}>Please choose a file</label>
             }
-
-        </div>
+        </Box>
     )
 };