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

Backend MP4 conversion (#23)

Browse Source 
* ADD conversion queue

* ADD RemuxService for MP4 conversion

* REMOVE unused conversion queue

* REORGANISE Job-related classes

* ADD Job stages

* REVERT to old commit, using Spring Async instead

* ADD asynchronous processing for video tasks

* PATCH and streamline progress tracking

* ADD asynchronous video processing and job restructuring

* REFACTOR job service method

* ADD job remux functionality

* ADD remuxing endpoint

* PATCH complete flag not updating in API response

* ADD progress type in frontend

* ADD reset functionality for job status

* PATCH missing progress bar for subsequent exports

* REDESIGN settings box

* ADD tracking video file conversion in frontend

* PATCH extension bug

* REMOVE autowired decorator
This commit is contained in:
Dylan De Faoite
2025-07-31 20:48:34 +02:00
committed by GitHub
parent 338eb605fd
commit 20f7ec8db4
24 changed files with 324 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/video/ConfigBox.tsx
View File

@@ -9,7 +9,7 @@ type prop = {
export default function ConfigBox({setMetadata, className}: prop) {
const updateRes = (e: React.ChangeEvent<HTMLSelectElement>) => {
var vals = e.target.value.split(",");
const vals = e.target.value.split(",");
setMetadata((prevState: VideoMetadata) => ({
...prevState,
width: parseInt(vals[0]),
@@ -33,14 +33,14 @@ export default function ConfigBox({setMetadata, className}: prop) {
return (
<div className={clsx("flex flex-col gap-2 p-10", className)}>
<h2 className={"text-3xl font-bold mb-4"}>Export Settings</h2>
<h2 className={"text-xl font-bold"}>Export</h2>
<Selector label={"Resolution"}>
<select id="resolution"
name="resolution"
defaultValue="1280,720"
onChange={updateRes}
className={"border-black bg-gray-200 rounded-md w-full"}>
className={"border-black bg-gray-200 rounded-md w-full p-2"}>
<option value="3840,2160">2160p</option>
<option value="2560,1440">1440p</option>
<option value="1920,1080">1080p</option>
@@ -55,7 +55,7 @@ export default function ConfigBox({setMetadata, className}: prop) {
name="fps"
defaultValue="30"
onChange={updateFps}
className={"border-black bg-gray-200 rounded-md w-full"}>
className={"border-black bg-gray-200 rounded-md w-full p-2"}>
<option value="60">60</option>
<option value="30">30</option>
<option value="15">15</option>
@@ -67,7 +67,7 @@ export default function ConfigBox({setMetadata, className}: prop) {
min="1"
defaultValue="10"
onChange={updateFileSize}
className={"border-black bg-gray-200 rounded-md w-full"}
className={"border-black bg-gray-200 rounded-md w-full p-2"}
/>
</Selector>

35
frontend/src/components/video/MetadataBox.tsx
View File

@@ -1,6 +1,5 @@
import clsx from "clsx";
import type {VideoMetadata} from "../../utils/types.ts";
import Selector from "../Selector.tsx";
type MetadataBoxProps = {
setMetadata: Function
@@ -10,30 +9,18 @@ type MetadataBoxProps = {
const MetadataBox = ({setMetadata, className}: MetadataBoxProps) => {
return (
<div className={clsx("flex flex-col content-between p-10 gap-2", className)}>
<h2 className={"text-3xl font-bold mb-4 col-span-2"}>Metadata Settings</h2>
{/*<h2 className={"text-2xl font-bold col-span-2"}>Metadata</h2>*/}
<Selector label={"Title"}>
<input
type="text"
placeholder="Enter title"
onChange={(e) => setMetadata((prevState: VideoMetadata) => ({
...prevState,
title: e.target.value
}))}
className={"border-black bg-gray-200 rounded-md w-full p-2"}
/>
</Selector>
<Selector label={"Description"}>
<textarea
placeholder="Enter description"
onChange={(e) => setMetadata((prevState: VideoMetadata) => ({
...prevState,
description: e.target.value
}))}
className={"border-black bg-gray-200 rounded-md w-full p-2 pb-10 resize-none max-h"}
/>
</Selector>
<p className={"w-full font-bold text-xl "}>Title</p>
<input
type="text"
placeholder="Enter title"
onChange={(e) => setMetadata((prevState: VideoMetadata) => ({
...prevState,
title: e.target.value
}))}
className={"border-black bg-gray-200 rounded-md w-full p-2"}
/>
</div>
)
}