ADD edit request to frontend

src/main/frontend/components/ClipConfig.tsx

@@ -1,4 +1,25 @@
-export default function ClipConfig() {
+type prop = {
+    setWidth: Function;
+    setHeight: Function;
+    setFps: Function;
+    setFileSize: Function;
+}
+
+export default function ClipConfig({setWidth, setHeight, setFps, setFileSize}: prop) {
+    const updateRes = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        var vals = e.target.value.split(",");
+        setWidth(parseInt(vals[0]))
+        setHeight(parseInt(vals[1]))
+    }
+
+    const updateFps = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        setFps(parseInt(e.target.value))
+    }
+
+    const updateFileSize = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setFileSize(parseInt(e.target.value))
+    }
+
     return (
         <div className={"flex flex-col gap-2 p-10 rounded-md"}>
             <h2 className={"text-3xl font-bold text-gray-800 mb-4 underline"}>Clip Export Settings</h2>
@@ -9,6 +30,7 @@ export default function ClipConfig() {
                 <select id="resolution"
                         name="resolution"
                         defaultValue="1280,720"
+                        onChange={updateRes}
                         className={"border-black bg-gray-200 p-2 rounded-md w-full"}>
                     <option value="3840,2160">2160p (4K)</option>
                     <option value="2560,1440">1440p (QHD)</option>
@@ -26,6 +48,7 @@ export default function ClipConfig() {
                 <select id="fps"
                         name="fps"
                         defaultValue="30"
+                        onChange={updateFps}
                         className={"border-black bg-gray-200 p-2 rounded-md w-full"}>
                     <option value="60">60</option>
                     <option value="30">30</option>
@@ -40,6 +63,7 @@ export default function ClipConfig() {
                 <input type="number"
                        min="1"
                        defaultValue="10"
+                       onChange={updateFileSize}
                        className={"border-black bg-gray-200 p-2 rounded-md w-full"}
                 />
             </div>

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

@@ -6,6 +6,32 @@ import PlaybackSlider from "./../../components/PlaybackSlider";
 import ClipRangeSlider from "./../../components/ClipRangeSlider";
 import ClipConfig from "./../../components/ClipConfig";
 
+function exportFile(uuid: string,
+                    startPoint: number,
+                    endPoint: number,
+                    width: number,
+                    height: number,
+                    fps: number,
+                    fileSize: number) {
+    var body: string = `startPoint=${startPoint}&endPoint=${endPoint}&width=${width}&height=${height}&fps=${fps}&fileSize=${fileSize*1000}`;
+
+    fetch(`api/v1/edit/${uuid}`, {
+        method: "POST",
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+        },
+        body: body,
+    })
+        .then(res => {
+            console.log("RESPONSE: " + res);
+            return res
+        })
+        .then(data => console.log('Response:', data))
+        .catch(err => console.error('Error:', err));
+
+    return null;
+}
+
 export default function VideoId() {
     const { id } = useParams();
     const videoRef = useRef<HTMLVideoElement | null>(null);
@@ -14,6 +40,10 @@ export default function VideoId() {
     const [metadata, setMetadata] = useState<VideoMetadata | null>(null);
     const [playbackValue, setPlaybackValue] = useState(0);
     const [clipRangeValue, setClipRangeValue] = useState([0, 1]);
+    const [width, setWidth] = useState(1280);
+    const [height, setHeight] = useState(720);
+    const [fps, setFps] = useState(30);
+    const [fileSize, setFileSize] = useState(10);
 
     useEffect(() => {
         fetch(`api/v1/metadata/original/${id}`)
@@ -25,6 +55,11 @@ export default function VideoId() {
             .catch((err) => console.log(err.message));
     }, [id]);
 
+    const sendData = () => {
+        if (!id) return
+        exportFile(id,clipRangeValue[0], clipRangeValue[1], width, height, fps, fileSize);
+    }
+
     return (
         <div className={"grid grid-cols-[70%_30%]"}>
             <video
@@ -37,7 +72,12 @@ export default function VideoId() {
             </video>
 
 
-            <ClipConfig />
+            <ClipConfig
+                setWidth={setWidth}
+                setHeight={setHeight}
+                setFileSize={setFileSize}
+                setFps={setFps}
+            />
 
             {metadata &&
                 <div>
@@ -66,6 +106,7 @@ export default function VideoId() {
 
             <button
                 className={"bg-primary text-text p-2 rounded-lg hover:bg-primary-pressed h-10 w-3/4 m-auto"}
+                onClick={sendData}
             >Export</button>
 
         </div>