REFACTOR frontend

frontend/src/components/video/ClipConfig.tsx

@@ -0,0 +1,76 @@
+import type { VideoMetadata } from "../../utils/types.ts";
+import Selector from "../Selector.tsx";
+import clsx from "clsx";
+
+type prop = {
+    setMetadata: Function;
+    className?: string;
+}
+
+export default function ClipConfig({setMetadata, className}: 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={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>
+
+            <Selector label={"Resolution"}>
+                <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</option>
+                    <option value="2560,1440">1440p</option>
+                    <option value="1920,1080">1080p</option>
+                    <option value="1280,720">720p</option>
+                    <option value="854,480">480p</option>
+                    <option value="640,360">360p</option>
+                </select>
+            </Selector>
+
+            <Selector label={"FPS"}>
+                <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>
+            </Selector>
+
+            <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"}
+                />
+            </Selector>
+
+        </div>
+    )
+}

frontend/src/components/video/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 type { VideoMetadata } from "../../utils/types.ts";
+
+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/src/components/video/ExportWidget.tsx

@@ -0,0 +1,34 @@
+import BlueButton from "../buttons/BlueButton.tsx";
+import React from "react";
+
+type props = {
+    dataSend: React.MouseEventHandler<HTMLButtonElement>;
+    handleDownload: React.MouseEventHandler<HTMLButtonElement>;
+    downloadable: boolean;
+    progress: number
+}
+
+const ExportWidget = ({dataSend, handleDownload, downloadable, progress}: props) => {
+    return (
+        <div className={"flex flex-col gap-3"}>
+            <BlueButton
+                onClick={dataSend}>
+                Export
+            </BlueButton>
+
+            { downloadable ?
+                (<BlueButton
+                    onClick={handleDownload}>
+                    Download
+                </BlueButton>)
+                :(
+                    <progress
+                        value={progress}
+                        className={"bg-gray-300 rounded-lg h-1"}>
+                    </progress> )
+            }
+        </div>
+    )
+}
+
+export default ExportWidget;

frontend/src/components/video/PlaybackSlider.tsx

@@ -0,0 +1,51 @@
+import {useEffect} from "react";
+import clsx from 'clsx';
+import type { VideoMetadata } from "../../utils/types.ts";
+
+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/src/components/video/Playbar.tsx

@@ -0,0 +1,101 @@
+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";
+
+
+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);
+        }
+    };
+
+    let Icon;
+    // update icon
+    if (volume == 0) {
+        Icon = VolumeX;
+    } else if (volume < 50) {
+        Icon = Volume1;
+    } else {
+        Icon = Volume2;
+    }
+
+    const updateVolume = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!video) return;
+
+        let volume = parseInt(e.target.value)
+
+        video.volume = volume / 100;
+        setVolume(volume);
+    }
+
+    // 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 gap-1"}>
+                <Icon 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>
+    );
+}