ADD ClipNames component for title and description input in ClipEdit
This commit is contained in:
37
frontend/src/components/video/ClipNames.tsx
Normal file
37
frontend/src/components/video/ClipNames.tsx
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import clsx from "clsx";
|
||||||
|
import type {VideoMetadata} from "../../utils/types.ts";
|
||||||
|
|
||||||
|
type ClipNamesProps = {
|
||||||
|
setMetadata: Function
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ClipNames = ({setMetadata, className}: ClipNamesProps) => {
|
||||||
|
return (
|
||||||
|
<div className={clsx("flex flex-col gap-2 p-10", className)}>
|
||||||
|
<label>Title: </label>
|
||||||
|
<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"}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<label>Description: </label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
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"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ClipNames;
|
||||||
@@ -8,6 +8,7 @@ import ExportWidget from "../components/video/ExportWidget.tsx";
|
|||||||
import {editFile, getMetadata, processFile, getProgress} from "../utils/endpoints"
|
import {editFile, getMetadata, processFile, getProgress} from "../utils/endpoints"
|
||||||
import type { VideoMetadata } from "../utils/types.ts";
|
import type { VideoMetadata } from "../utils/types.ts";
|
||||||
import Box from "../components/Box.tsx";
|
import Box from "../components/Box.tsx";
|
||||||
|
import ClipNames from "../components/video/ClipNames.tsx";
|
||||||
|
|
||||||
const ClipEdit = () => {
|
const ClipEdit = () => {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
@@ -100,6 +101,9 @@ const ClipEdit = () => {
|
|||||||
|
|
||||||
|
|
||||||
<Box className={"w-4/5 h-full m-auto"}>
|
<Box className={"w-4/5 h-full m-auto"}>
|
||||||
|
<ClipNames
|
||||||
|
setMetadata={setOutputMetadata}
|
||||||
|
/>
|
||||||
<ClipConfig
|
<ClipConfig
|
||||||
setMetadata={setOutputMetadata}
|
setMetadata={setOutputMetadata}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -41,6 +41,7 @@ public class UploadService {
|
|||||||
directoryService.saveData(inputFile, file);
|
directoryService.saveData(inputFile, file);
|
||||||
|
|
||||||
// add job
|
// add job
|
||||||
|
logger.info("Uploaded file and creating job with UUID: {}", uuid);
|
||||||
VideoMetadata videoMetadata = metadataService.getVideoMetadata(inputFile);
|
VideoMetadata videoMetadata = metadataService.getVideoMetadata(inputFile);
|
||||||
Job job = new Job(uuid, inputFile, outputFile, videoMetadata);
|
Job job = new Job(uuid, inputFile, outputFile, videoMetadata);
|
||||||
jobService.add(job);
|
jobService.add(job);
|
||||||
|
|||||||
Reference in New Issue
Block a user