MOVED frontend out of Vaadin/Spring

frontend/components/ClipConfig.tsx

@@ -0,0 +1,80 @@
+import { VideoMetadata } from "Frontend/utils/Endpoints";
+
+type prop = {
+    setMetadata: Function;
+}
+
+export default function ClipConfig({setMetadata}: prop) {
+    const updateRes = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        var vals = e.target.value.split(",");
+        setMetadata((prevState: VideoMetadata) => ({
+            ...prevState,
+            width: parseInt(vals[0]),
+            height: parseInt(vals[1])
+        }))
+    }
+
+    const updateFps = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        setMetadata((prevState: VideoMetadata) => ({
+            ...prevState,
+            fps: parseInt(e.target.value)
+        }))
+    }
+
+    const updateFileSize = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setMetadata((prevState: VideoMetadata) => ({
+            ...prevState,
+            fileSize: parseInt(e.target.value) * 1000
+        }))
+    }
+
+    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>
+            <div className="flex items-center gap-2">
+                <label htmlFor="resolution"
+                       className={"w-full"}
+                >Resolution: </label>
+                <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>
+                    <option value="1920,1080">1080p (Full HD)</option>
+                    <option value="1280,720">720p (HD)</option>
+                    <option value="854,480">480p (SD)</option>
+                    <option value="640,360">360p (Low)</option>
+                </select>
+            </div>
+
+            <div className="flex items-center gap-2">
+                <label htmlFor="fps"
+                       className={"w-full"}
+                >FPS: </label>
+                <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>
+                    <option value="15">15</option>
+                </select>
+            </div>
+
+            <div className="flex items-center gap-2">
+                <label className={"w-full"}>
+                    File Size (mb):
+                </label>
+                <input type="number"
+                       min="1"
+                       defaultValue="10"
+                       onChange={updateFileSize}
+                       className={"border-black bg-gray-200 p-2 rounded-md w-full"}
+                />
+            </div>
+        </div>
+    )
+}

frontend/components/ClipRangeSlider.tsx

@@ -0,0 +1,52 @@
+import RangeSlider from 'react-range-slider-input';
+import 'react-range-slider-input/dist/style.css';
+import {useRef} from "react";
+import clsx from 'clsx';
+import { VideoMetadata } from "../utils/Endpoints"
+
+type Props = {
+    videoRef: HTMLVideoElement | null;
+    videoMetadata: VideoMetadata;
+    setSliderValue: Function;
+    setMetadata: Function;
+    className?: string;
+};
+
+export default function ClipRangeSlider({videoRef,
+                                            videoMetadata,
+                                            setSliderValue,
+                                            setMetadata,
+                                            className}: Props) {
+    const previousRangeSliderInput = useRef<[number, number]>([0, 0]);
+
+    const handleRangeSliderInput = (val: [number, number]) => {
+        if (!videoRef) return;
+
+        if (previousRangeSliderInput.current[0] != val[0]) {
+            videoRef.currentTime = val[0];
+            setSliderValue(val[0]);
+        } else if (previousRangeSliderInput.current[1] != val[1]) {
+            videoRef.currentTime = val[1];
+            setSliderValue(val[1]);
+        }
+
+        setMetadata((prevState: VideoMetadata) => ({
+            ...prevState,
+            startPoint: val[0],
+            endPoint: val[1]
+        }
+        ))
+        previousRangeSliderInput.current = val;
+    };
+
+    return (
+        <RangeSlider
+            min={0}
+            max={videoMetadata.endPoint}
+            step={0.1}
+            onInput={handleRangeSliderInput}
+            className={clsx(className)}
+            id={"range-slider"}
+        />
+    )
+}

frontend/components/PlaybackSlider.tsx

@@ -0,0 +1,51 @@
+import {useEffect, useState} from "react";
+import clsx from 'clsx';
+import VideoMetadata from "Frontend/generated/com/ddf/vodsystem/entities/VideoMetadata";
+
+type Props = {
+    videoRef: HTMLVideoElement | null;
+    videoMetadata: VideoMetadata;
+    sliderValue: number;
+    setSliderValue: Function;
+    className?: string;
+};
+
+export default function PlaybackSlider({videoRef,
+                                           videoMetadata,
+                                           sliderValue,
+                                           setSliderValue,
+                                           className}: Props) {
+    const updateVideo = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!videoRef) return;
+
+        videoRef.currentTime = e.target.valueAsNumber;
+        setSliderValue(e.target.valueAsNumber);
+    }
+
+    // update slider
+    useEffect(() => {
+        if (!videoRef) return;
+
+        const updateSlider = () => {
+            setSliderValue(videoRef.currentTime);
+        };
+
+        videoRef.addEventListener("timeupdate", updateSlider);
+
+        return () => {
+            videoRef.removeEventListener("timeupdate", updateSlider);
+        };
+    }, [videoRef]);
+
+    return (
+        <input
+            type={"range"}
+            min={0}
+            max={videoMetadata.endPoint}
+            value={sliderValue}
+            onChange={updateVideo}
+            step={0.1}
+            className={clsx(className)}
+        />
+    )
+}

frontend/components/Playbar.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState} from "react";
+import { Volume, Play, Pause } from 'lucide-react';
+import clsx from 'clsx';
+import VideoMetadata from "Frontend/generated/com/ddf/vodsystem/entities/VideoMetadata";
+
+
+type Props = {
+    video: HTMLVideoElement | null;
+    videoMetadata: VideoMetadata;
+    className?: string;
+};
+
+function formatTime(seconds: number): string {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor(seconds % 60);
+
+    const padded = (n: number) => n.toString().padStart(2, '0');
+
+    if (h > 0) {
+        return `${h}:${padded(m)}:${padded(s)}`;
+    } else {
+        return `${m}:${padded(s)}`;
+    }
+}
+
+export default function Playbar({ video, videoMetadata, className }: Props) {
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [volume, setVolume] = useState(100);
+
+    const togglePlay = () => {
+        if (!video) return;
+
+        if (video.paused) {
+            video.play();
+            setIsPlaying(true);
+        } else {
+            video.pause();
+            setIsPlaying(false);
+        }
+    };
+
+    const updateVolume = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!video) return;
+
+        video.volume = parseInt(e.target.value) / 100;
+        setVolume(parseInt(e.target.value));
+    }
+
+    // Sync state with video element changes (e.g., if someone presses spacebar or clicks on the video)
+    useEffect(() => {
+        if (!video) return;
+
+        const handlePlay = () => setIsPlaying(true);
+        const handlePause = () => setIsPlaying(false);
+
+        video.addEventListener("play", handlePlay);
+        video.addEventListener("pause", handlePause);
+
+        return () => {
+            video.removeEventListener("play", handlePlay);
+            video.removeEventListener("pause", handlePause);
+        };
+    }, [video]);
+
+    return (
+        <div className={clsx("flex justify-between items-center p-2 rounded-lg", className)}>
+            <div className={"flex"}>
+                <Volume size={24} />
+                <input
+                    type='range'
+                    min={0}
+                    max={100}
+                    onChange={updateVolume}
+                    value={volume}
+                    className={"w-20"}
+                />
+            </div>
+            <button onClick={togglePlay}>
+                {isPlaying ? <Pause size={24} /> : <Play size={24} />}
+            </button>
+            {videoMetadata.endPoint &&
+                <label>
+                    {formatTime(video?.currentTime ?? 0)} / {formatTime(videoMetadata.endPoint)}
+                </label>
+            }
+        </div>
+    );
+}

frontend/components/Sidebar.tsx

@@ -0,0 +1,9 @@
+export default function Sidebar() {
+    return (
+        <div>
+            <ul>
+                <li>Create Clip</li>
+            </ul>
+        </div>
+    )
+}

frontend/layouts/MainLayout.tsx

@@ -0,0 +1,14 @@
+// layout/MainLayout.jsx
+import Sidebar from 'Frontend/components/Sidebar';
+import { Outlet } from 'react-router-dom';
+
+const MainLayout = () => (
+    <div className="flex">
+        <Sidebar />
+        <div className="flex-1 p-4">
+            <Outlet /> {/* This renders the nested route content */}
+        </div>
+    </div>
+);
+
+export default MainLayout;

frontend/pages/ClipEdit.tsx

@@ -0,0 +1,130 @@
+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 { VideoMetadata, editFile, getMetadata } from "../utils/Endpoints"
+
+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 = () => {
+        if (!id) return;
+        editFile(id, outputMetadata);
+    }
+
+    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/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(`video/${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;

frontend/utils/Endpoints.ts

@@ -0,0 +1,96 @@
+type VideoMetadata = {
+    startPoint: number,
+    endPoint: number,
+    fps: number,
+    width: number,
+    height: number,
+    fileSize: number
+}
+
+const uploadFile = async (file: File): Promise<string> => {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+        const response = await fetch('api/v1/upload', {
+            method: 'POST',
+            body: formData
+        });
+
+        if (response.ok) {
+            console.log("File uploaded successfully");
+            return await response.text();
+        } else {
+            console.log("File upload failed");
+            return "";
+        }
+
+    } catch (error) {
+        console.error('Error uploading file:', error);
+        return "";
+    }
+};
+
+const editFile = async (uuid: string, videoMetadata: VideoMetadata): Promise<boolean> => {
+    const formData = new URLSearchParams();
+    Object.entries(videoMetadata).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+            formData.append(key, value.toString());
+        }
+    });
+
+    try {
+        const response = await fetch(`/api/v1/edit/${uuid}`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded"
+            },
+            body: formData.toString()
+        });
+
+        return response.ok;
+    } catch (error){
+        console.error('Error editing file:', error);
+        return false;
+    }
+}
+
+const processFile = async (uuid: string): Promise<boolean> => {
+    const response = await fetch(`/api/v1/process/${uuid}`);
+    return response.ok;
+}
+
+const getProgress = async (uuid: string): Promise<number> => {
+    const response = await fetch(`/api/v1/progress/${uuid}`);
+
+    if (response.ok) {
+        return response.json();
+    } else {
+        return 0;
+    }
+}
+
+const getMetadata = async (uuid: string): Promise<VideoMetadata> => {
+    try {
+        const response = await fetch(`/api/v1/metadata/${uuid}`);
+        return response.json();
+    } catch (error) {
+        return {
+            startPoint: 0,
+            endPoint: 0,
+            fps: 0,
+            width: 0,
+            height: 0,
+            fileSize: 0
+        }
+    }
+}
+
+export {
+    VideoMetadata,
+    uploadFile,
+    editFile,
+    processFile,
+    getProgress,
+    getMetadata
+}