IMPROVE general styling + ADD logo

frontend/src/components/Box.tsx

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+
+type props = {
+    children: React.ReactNode,
+    className?: string
+}
+
+const Box = ({children, className}: props) => {
+    return (
+        <div className={clsx("bg-gray-200 shadow-lg rounded-lg", className)}>
+            { children }
+        </div>
+    )
+}
+
+export default Box;

frontend/src/components/ClipConfig.tsx

@@ -32,22 +32,23 @@ export default function ClipConfig({setMetadata, className}: prop) {
 
     return (
         <div className={clsx("flex flex-col gap-2 p-10 rounded-md", className)}>
-            <h2 className={"text-3xl font-bold text-gray-800 mb-4 underline"}>Clip Export Settings</h2>
+            <h2 className={"text-3xl font-bold text-gray-800 mb-4"}>Export Settings</h2>
             <div className="flex items-center gap-2">
                 <label htmlFor="resolution"
                        className={"w-full"}
                 >Resolution: </label>
+                <div className="w-px h-6 bg-gray-400 mx-3" />
                 <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="3840,2160">2160p</option>
-                    <option value="2560,1440">1440p (QHD)</option>
+                    <option value="2560,1440">1440p</option>
-                    <option value="1920,1080">1080p (Full HD)</option>
+                    <option value="1920,1080">1080p</option>
-                    <option value="1280,720">720p (HD)</option>
+                    <option value="1280,720">720p</option>
-                    <option value="854,480">480p (SD)</option>
+                    <option value="854,480">480p</option>
-                    <option value="640,360">360p (Low)</option>
+                    <option value="640,360">360p</option>
                 </select>
             </div>
 
@@ -55,6 +56,7 @@ export default function ClipConfig({setMetadata, className}: prop) {
                 <label htmlFor="fps"
                        className={"w-full"}
                 >FPS: </label>
+                <div className="w-px h-6 bg-gray-400 mx-3" />
                 <select id="fps"
                         name="fps"
                         defaultValue="30"
@@ -70,6 +72,7 @@ export default function ClipConfig({setMetadata, className}: prop) {
                 <label className={"w-full"}>
                     File Size (mb):
                 </label>
+                <div className="w-px h-6 bg-gray-400 mx-3" />
                 <input type="number"
                        min="1"
                        defaultValue="10"

frontend/src/components/ExportWidget.tsx

@@ -0,0 +1,33 @@
+import BlueButton from "./buttons/BlueButton.tsx";
+
+type props = {
+    dataSend: React.MouseEventHandler<HTMLButtonElement>;
+    handleDownload: React.MouseEventHandler<HTMLButtonElement>;
+    downloadable: boolean;
+    progress: number
+}
+
+const ExportWidget = ({dataSend, handleDownload, downloadable, progress}: props) => {
+    return (
+        <div className={"flex flex-col gap-3"}>
+            <BlueButton
+                onClick={dataSend}>
+                Export
+            </BlueButton>
+
+            { downloadable ?
+                (<BlueButton
+                    onClick={handleDownload}>
+                    Download
+                </BlueButton>)
+                :(
+                    <progress
+                        value={progress}
+                        className={"bg-gray-300 rounded-lg h-1"}>
+                    </progress> )
+            }
+        </div>
+    )
+}
+
+export default ExportWidget;

frontend/src/components/Sidebar.tsx

@@ -1,7 +1,8 @@
 import { Link } from "react-router-dom";
 import clsx from "clsx";
 import MenuButton from "./buttons/MenuButton.tsx";
-import { Plus, Film } from 'lucide-react';
+import { Plus, Film, Home } from 'lucide-react';
+import Box from "./Box.tsx";
 
 type props = {
     className?: string
@@ -9,10 +10,25 @@ type props = {
 
 const Sidebar = ({className}: props) => {
     return (
-        <div className={clsx("h-screen bg-white shadow-sm border-r flex flex-col gap-2 mr-5", className)}>
+        <Box className={clsx("h-screen  flex flex-col gap-2 mr-5", className)}>
+            <img
+                className={"w-45 mx-auto grayscale-100"}
+                src={"../../public/logo.png"}
+                alt={"VoD System Logo"}
+            />
             <Link
                 className={"w-full"}
-                to="/create">
+                to={"/"}
+            >
+                <MenuButton className={"flex items-center gap-2 w-full"}>
+                    <Home size={20}/> Home
+                </MenuButton>
+            </Link>
+
+            <Link
+                className={"w-full"}
+                to="/create"
+            >
                 <MenuButton className={"flex items-center gap-2 w-full"}>
                     <Plus size={20}/> Create Clip
                 </MenuButton>
@@ -20,7 +36,7 @@ const Sidebar = ({className}: props) => {
             <MenuButton className={"flex items-center gap-2"}>
                 <Film size={20}/> My Clips
             </MenuButton>
-        </div>
+        </Box>
     );
 };
 

frontend/src/index.css

@@ -28,20 +28,16 @@
     background: var(--color-primary);
 }
 
-/*:root {*/
+:root {
-/*  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;*/
+  font-family: Helvetica;
-/*  line-height: 1.5;*/
+  line-height: 1.5;
-/*  font-weight: 400;*/
+  font-weight: 400;
 
-/*  color-scheme: light dark;*/
+  font-synthesis: none;
-/*  color: rgba(255, 255, 255, 0.87);*/
+  text-rendering: optimizeLegibility;
-/*  background-color: #242424;*/
+  -webkit-font-smoothing: antialiased;
-
+  -moz-osx-font-smoothing: grayscale;
-/*  font-synthesis: none;*/
+}
-/*  text-rendering: optimizeLegibility;*/
-/*  -webkit-font-smoothing: antialiased;*/
-/*  -moz-osx-font-smoothing: grayscale;*/
-/*}*/
 
 /*a {*/
 /*  font-weight: 500;*/

frontend/src/pages/ClipEdit.tsx

@@ -6,7 +6,8 @@ import ClipRangeSlider from "./../components/ClipRangeSlider";
 import ClipConfig from "./../components/ClipConfig";
 import {editFile, getMetadata, processFile, getProgress} from "../utils/endpoints"
 import type { VideoMetadata } from "../utils/types.ts";
-import BlueButton from "../components/buttons/BlueButton.tsx";
+import Box from "../components/Box.tsx";
+import ExportWidget from "../components/ExportWidget.tsx";
 
 const ClipEdit = () => {
     const { id } = useParams();
@@ -51,9 +52,7 @@ const ClipEdit = () => {
         }, 500);
     }
 
-    const handleDownload = async (filename: string | undefined) => {
+    const handleDownload = async () => {
-        if (!filename) return;
-
         const response = await fetch(`/api/v1/download/output/${id}`);
 
         if (!response.ok) {
@@ -66,7 +65,7 @@ const ClipEdit = () => {
         const a = document.createElement('a');
 
         a.href = url;
-        a.download = filename;
+        a.download = `${id}.mp4`;
         document.body.appendChild(a);
         a.click();
         a.remove();
@@ -82,7 +81,7 @@ const ClipEdit = () => {
     }, [id]);
 
     return (
-        <div className={"grid grid-cols-[70%_30%]"}>
+        <div className={"grid grid-cols-[7fr_3fr]"}>
             <video
                    ref={videoRef}
                    className={"w-full rounded-lg shadow-lg border border-gray-300 bg-black m-auto"}>
@@ -93,12 +92,15 @@ const ClipEdit = () => {
             </video>
 
 
-            <ClipConfig
+            <Box className={"w-4/5 h-full m-auto"}>
-                setMetadata={setOutputMetadata}
+                <ClipConfig
-            />
+                    setMetadata={setOutputMetadata}
+                />
+            </Box>
+
 
             {metadata &&
-                <div>
+                <Box className={"mt-4 p-5"}>
                     <Playbar
                         video={videoRef.current}
                         videoMetadata={metadata}
@@ -120,26 +122,15 @@ const ClipEdit = () => {
                         setMetadata={setOutputMetadata}
                         className={"w-full mb-10 bg-primary"}
                     />
-                </div>}
+                </Box>}
 
-            <div className={"flex flex-col gap-2 w-4/5 m-auto"}>
+            <Box className={"flex flex-col gap-2 w-4/5 m-auto mt-4 p-5"}>
-                <BlueButton
+                <ExportWidget
-                    onClick={sendData}>
+                    dataSend={sendData}
-                    Export
+                    handleDownload={handleDownload}
-                </BlueButton>
+                    downloadable={downloadable}
-
+                    progress={progress} />
-                { downloadable ?
+            </Box>
-                    (<BlueButton
-                        onClick={() => handleDownload(id)}>
-                        Download
-                    </BlueButton>)
-                    :(
-                    <progress
-                        value={progress}
-                        className={"bg-gray-200 rounded-lg h-1"}>
-                    </progress> )
-                }
-            </div>
         </div>
     );
 }