ADD input structure for metadata

frontend/src/components/video/ClipNames.tsx

@@ -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;

frontend/src/components/video/ConfigBox.tsx

@@ -7,7 +7,7 @@ type prop = {
     className?: string;
 }
 
-export default function ClipConfig({setMetadata, className}: prop) {
+export default function ConfigBox({setMetadata, className}: prop) {
     const updateRes = (e: React.ChangeEvent<HTMLSelectElement>) => {
         var vals = e.target.value.split(",");
         setMetadata((prevState: VideoMetadata) => ({

frontend/src/components/video/MetadataBox.tsx

@@ -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;

frontend/src/pages/ClipEdit.tsx

@@ -3,12 +3,12 @@ import { useEffect, useRef, useState } from "react";
 import Playbar from "./../components/video/Playbar";
 import PlaybackSlider from "./../components/video/PlaybackSlider";
 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 {editFile, getMetadata, processFile, getProgress} from "../utils/endpoints"
 import type { VideoMetadata } from "../utils/types.ts";
 import Box from "../components/Box.tsx";
-import ClipNames from "../components/video/ClipNames.tsx";
+import MetadataBox from "../components/video/MetadataBox.tsx";
 
 const ClipEdit = () => {
     const { id } = useParams();
@@ -101,10 +101,10 @@ const ClipEdit = () => {
 
 
             <Box className={"w-4/5 h-full m-auto"}>
-                <ClipNames
+                <MetadataBox
                     setMetadata={setOutputMetadata}
                 />
-                <ClipConfig
+                <ConfigBox
                     setMetadata={setOutputMetadata}
                 />
             </Box>