ADD input structure for metadata
This commit is contained in:
@@ -1,37 +0,0 @@
|
|||||||
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;
|
|
||||||
@@ -7,7 +7,7 @@ type prop = {
|
|||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ClipConfig({setMetadata, className}: prop) {
|
export default function ConfigBox({setMetadata, className}: prop) {
|
||||||
const updateRes = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
const updateRes = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||||
var vals = e.target.value.split(",");
|
var vals = e.target.value.split(",");
|
||||||
setMetadata((prevState: VideoMetadata) => ({
|
setMetadata((prevState: VideoMetadata) => ({
|
||||||
41
frontend/src/components/video/MetadataBox.tsx
Normal file
41
frontend/src/components/video/MetadataBox.tsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import clsx from "clsx";
|
||||||
|
import type {VideoMetadata} from "../../utils/types.ts";
|
||||||
|
import Selector from "../Selector.tsx";
|
||||||
|
|
||||||
|
type MetadataBoxProps = {
|
||||||
|
setMetadata: Function
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MetadataBox;
|
||||||
@@ -3,12 +3,12 @@ import { useEffect, useRef, useState } from "react";
|
|||||||
import Playbar from "./../components/video/Playbar";
|
import Playbar from "./../components/video/Playbar";
|
||||||
import PlaybackSlider from "./../components/video/PlaybackSlider";
|
import PlaybackSlider from "./../components/video/PlaybackSlider";
|
||||||
import ClipRangeSlider from "./../components/video/ClipRangeSlider";
|
import ClipRangeSlider from "./../components/video/ClipRangeSlider";
|
||||||
import ClipConfig from "./../components/video/ClipConfig";
|
import ConfigBox from "../components/video/ConfigBox.tsx";
|
||||||
import ExportWidget from "../components/video/ExportWidget.tsx";
|
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";
|
import MetadataBox from "../components/video/MetadataBox.tsx";
|
||||||
|
|
||||||
const ClipEdit = () => {
|
const ClipEdit = () => {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
@@ -101,10 +101,10 @@ const ClipEdit = () => {
|
|||||||
|
|
||||||
|
|
||||||
<Box className={"w-4/5 h-full m-auto"}>
|
<Box className={"w-4/5 h-full m-auto"}>
|
||||||
<ClipNames
|
<MetadataBox
|
||||||
setMetadata={setOutputMetadata}
|
setMetadata={setOutputMetadata}
|
||||||
/>
|
/>
|
||||||
<ClipConfig
|
<ConfigBox
|
||||||
setMetadata={setOutputMetadata}
|
setMetadata={setOutputMetadata}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
@@ -30,6 +30,7 @@ public class DirectoryService {
|
|||||||
private String tempOutputsDir;
|
private String tempOutputsDir;
|
||||||
|
|
||||||
private static final long TEMP_DIR_TIMELIMIT = 3 * 60 * 60 * (long) 1000; // 3 hours
|
private static final long TEMP_DIR_TIMELIMIT = 3 * 60 * 60 * (long) 1000; // 3 hours
|
||||||
|
private static final long TEMP_DIR_CLEANUP_RATE = 30 * 60 * (long) 1000; // 30 minutes
|
||||||
|
|
||||||
public File getTempInputFile(String id, String extension) {
|
public File getTempInputFile(String id, String extension) {
|
||||||
String dir = tempInputsDir + File.separator + id + (extension.isEmpty() ? "" : "." + extension);
|
String dir = tempInputsDir + File.separator + id + (extension.isEmpty() ? "" : "." + extension);
|
||||||
@@ -111,7 +112,7 @@ public class DirectoryService {
|
|||||||
createDirectory(outputDir);
|
createDirectory(outputDir);
|
||||||
}
|
}
|
||||||
|
|
||||||
@Scheduled(fixedRate = (30 * 60 * 1000))
|
@Scheduled(fixedRate = TEMP_DIR_CLEANUP_RATE)
|
||||||
public void cleanTempDirectories() throws IOException {
|
public void cleanTempDirectories() throws IOException {
|
||||||
cleanUpDirectory(tempInputsDir);
|
cleanUpDirectory(tempInputsDir);
|
||||||
cleanUpDirectory(tempOutputsDir);
|
cleanUpDirectory(tempOutputsDir);
|
||||||
|
|||||||
Reference in New Issue
Block a user