dylan/vod-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MOVED frontend out of Vaadin/Spring

Browse Source
This commit is contained in:
Dylan De Faoite
2025-05-28 12:17:45 +02:00
parent c11346ec3b
commit 59fb65d377
18 changed files with 194 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/main/frontend/components/ClipConfig.tsx
View File

@@ -1,72 +0,0 @@
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>
<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>
)
}

47
src/main/frontend/components/ClipRangeSlider.tsx
View File

@@ -1,47 +0,0 @@
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 "Frontend/generated/com/ddf/vodsystem/entities/VideoMetadata";
type Props = {
videoRef: HTMLVideoElement | null;
videoMetadata: VideoMetadata;
setSliderValue: Function;
setClipRangeValue: Function;
className?: string;
};
export default function ClipRangeSlider({videoRef,
videoMetadata,
setSliderValue,
setClipRangeValue,
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]);
}
setClipRangeValue(val);
previousRangeSliderInput.current = val;
};
return (
<RangeSlider
min={0}
max={videoMetadata.endPoint}
step={0.1}
onInput={handleRangeSliderInput}
className={clsx(className)}
id={"range-slider"}
/>
)
}

51
src/main/frontend/components/PlaybackSlider.tsx
View File

@@ -1,51 +0,0 @@
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)}
/>
)
}

89
src/main/frontend/components/Playbar.tsx
View File

@@ -1,89 +0,0 @@
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>
);
}

28
src/main/frontend/index.css
View File

@@ -1,28 +0,0 @@
@import "tailwindcss";
@theme {
--font-display: "Satoshi", "sans-serif";
/* Breakpoints */
--breakpoint-3xl: 1920px;
--color-primary: oklch(0.55 0.21 254); /* Modern Blue (#2563EB) */
--color-secondary: oklch(0.94 0.01 250); /* Light Gray (#E5E7EB) */
--color-accent: oklch(0.68 0.20 288); /* Indigo Accent (#6366F1) */
--color-text: oklch(0.17 0.01 270); /* Dark Slate (#111827) */
--color-background: oklch(0.98 0.005 250);/* Soft off-white (#F9FAFB) */
--color-primary-pressed: oklch(0.55 0.21 254 / 0.5);
/* Easing */
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
--ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}
#range-slider .range-slider__range{
background: var(--color-primary);
}
#range-slider .range-slider__thumb{
background: var(--color-primary);
}

43
src/main/frontend/views/@index.tsx
View File

@@ -1,43 +0,0 @@
import {useState} from "react";
import {UploadService} from "Frontend/generated/endpoints";
import { useNavigate } from 'react-router-dom';
import "./../index.css";
export default function main() {
const [file, setFile] = useState<File | null>(null);
const navigate = useNavigate();
const [error, setError] = useState(false);
function press() {
if (file) {
UploadService.upload(file)
.then(uuid => navigate(`video/${uuid}`))
.catch(e => console.error(e));
} else {
setError(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>
{error &&
<label className={"text-center text-red-500"}>Please choose a file</label>
}
</div>
)
}

171
src/main/frontend/views/video/{id}.tsx
View File

@@ -1,171 +0,0 @@
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 * as editService from "../../generated/EditService";
import * as metadataService from "../../generated/MetadataService"
import VideoMetadata from "Frontend/generated/com/ddf/vodsystem/entities/VideoMetadata";
function exportFile(uuid: string,
startPoint: number,
endPoint: number,
width: number,
height: number,
fps: number,
fileSize: number,
setProgress: Function,
setDownloadable: Function) {
setDownloadable(false);
const metadata: VideoMetadata = {
startPoint: startPoint,
endPoint: endPoint,
width: width,
height: height,
fps: fps,
fileSize: fileSize*1000
}
editService.edit(uuid, metadata)
.then(r => {
editService.process(uuid);
});
// get progress updates
const interval = setInterval(async () => {
try {
const result = await editService.getProgress(uuid);
setProgress(result);
if (result >= 1) {
clearInterval(interval);
setDownloadable(true);
console.log('Progress complete');
} else {
setDownloadable(false);
}
} catch (err) {
console.error('Failed to fetch progress', err);
clearInterval(interval);
}
}, 200); // 0.5 seconds
}
export default function VideoId() {
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 [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);
const [progress, setProgress] = useState(0);
const [downloadable, setDownloadable] = useState(false);
useEffect(() => {
if (!id) return;
metadataService.getInputFileMetadata(id)
.then((data) => setMetadata(data ?? null)) // 👈 Normalize undefined to null
.catch((err) => console.error("Metadata fetch failed:", err));
}, [id]);
const sendData = () => {
if (!id) return
exportFile(id,clipRangeValue[0], clipRangeValue[1], width, height, fps, fileSize, setProgress, setDownloadable);
}
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);
};
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
setWidth={setWidth}
setHeight={setHeight}
setFileSize={setFileSize}
setFps={setFps}
/>
{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}
setClipRangeValue={setClipRangeValue}
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>
);
}

4
src/main/java/com/ddf/vodsystem/services/DownloadService.java
View File

@@ -4,8 +4,6 @@ import com.ddf.vodsystem.entities.JobStatus;
import com.ddf.vodsystem.exceptions.JobNotFinished;
import com.ddf.vodsystem.exceptions.JobNotFound;
import com.ddf.vodsystem.entities.Job;
import com.vaadin.flow.server.auth.AnonymousAllowed;
import com.vaadin.hilla.Endpoint;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.FileSystemResource;
import org.springframework.core.io.Resource;
@@ -14,8 +12,6 @@ import org.springframework.stereotype.Service;
import java.io.File;
@Service
@Endpoint
@AnonymousAllowed
public class DownloadService {
private final JobService jobService;

4
src/main/java/com/ddf/vodsystem/services/EditService.java
View File

@@ -3,13 +3,9 @@ package com.ddf.vodsystem.services;
import com.ddf.vodsystem.entities.VideoMetadata;
import com.ddf.vodsystem.entities.Job;
import com.ddf.vodsystem.entities.JobStatus;
import com.vaadin.flow.server.auth.AnonymousAllowed;
import com.vaadin.hilla.Endpoint;
import org.springframework.stereotype.Service;
@Service
@Endpoint
@AnonymousAllowed
public class EditService {
private final JobService jobService;

4
src/main/java/com/ddf/vodsystem/services/MetadataService.java
View File

@@ -5,8 +5,6 @@ import com.ddf.vodsystem.entities.VideoMetadata;
import com.ddf.vodsystem.exceptions.FFMPEGException;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.vaadin.flow.server.auth.AnonymousAllowed;
import com.vaadin.hilla.Endpoint;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;
@@ -17,8 +15,6 @@ import java.io.IOException;
import java.io.InputStreamReader;
@Service
@Endpoint
@AnonymousAllowed
public class MetadataService {
private static Logger logger = LoggerFactory.getLogger(MetadataService.class);

4
src/main/java/com/ddf/vodsystem/services/UploadService.java
View File

@@ -2,8 +2,6 @@ package com.ddf.vodsystem.services;
import com.ddf.vodsystem.entities.Job;
import com.ddf.vodsystem.entities.VideoMetadata;
import com.vaadin.flow.server.auth.AnonymousAllowed;
import com.vaadin.hilla.Endpoint;
import jakarta.annotation.PostConstruct;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
@@ -24,8 +22,6 @@ import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
@Service
@Endpoint
@AnonymousAllowed
public class UploadService {
private static final Logger logger = LoggerFactory.getLogger(UploadService.class);

1
src/main/resources/application.properties
View File

@@ -1,4 +1,3 @@
vaadin.launch-browser=true
spring.application.name=vodSystem
# VODs