ADD ClipConfig settings

package-lock.json

@@ -8495,15 +8495,6 @@
         "core-js": "^3.22.4"
       }
     },
-    "node_modules/react-range-slider-input/node_modules/clsx": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
-      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

package.json

@@ -126,7 +126,7 @@
       "workbox-core": "7.3.0",
       "workbox-precaching": "7.3.0"
     },
-    "hash": "1d057234cd785dc523e68f6ac1cfce6362e77ff83cc8e5f2a36003d75fe127ea"
+    "hash": "f57acdd04d2a8045dcc51c396a21bfc734165779c3088119b68a4f96387a4200"
   },
   "type": "module",
   "overrides": {
@@ -159,6 +159,7 @@
     "react-player": "$react-player",
     "react-range-slider-input": "$react-range-slider-input",
     "react-slider": "$react-slider",
-    "lucide-react": "$lucide-react"
+    "lucide-react": "$lucide-react",
+    "clsx": "$clsx"
   }
-}
+}

src/main/frontend/components/ClipConfig.tsx

@@ -0,0 +1,47 @@
+export default function ClipConfig() {
+    return (
+        <div className={"flex flex-col gap-2"}>
+            <div className="flex items-center gap-2">
+                <label htmlFor="resolution"
+                       className={"w-24"}
+                >Resolution: </label>
+                <select id="resolution"
+                        name="resolution"
+                        defaultValue="1280,720"
+                        className={"border-black bg-gray-200 p-1 rounded-md"}>
+                    <option value="3840,2160">2160p (4K)</option>
+                    <option value="2560,1440">1440p (QHD)</option>
+                    <option value="1920,1080">1080p (Full HD)</option>
+                    <option value="1280,720">720p (HD)</option>
+                    <option value="854,480">480p (SD)</option>
+                    <option value="640,360">360p (Low)</option>
+                </select>
+            </div>
+
+            <div className="flex items-center gap-2">
+                <label htmlFor="fps"
+                       className={"w-24"}
+                >FPS: </label>
+                <select id="fps"
+                        name="fps"
+                        defaultValue="30"
+                        className={"border-black bg-gray-200 p-1 rounded-md"}>
+                    <option value="60">60</option>
+                    <option value="30">30</option>
+                    <option value="15">15</option>
+                </select>
+            </div>
+
+            <div className="flex items-center gap-2">
+                <label className={"w-24"}>
+                    File Size (mb):
+                </label>
+                <input type="number"
+                       min="1"
+                       defaultValue="10"
+                       className={"border-black bg-gray-200 p-1 rounded-md"}
+                />
+            </div>
+        </div>
+    )
+}

src/main/frontend/components/ClipRangeSlider.tsx

@@ -41,6 +41,7 @@ export default function ClipRangeSlider({videoRef,
             step={0.1}
             onInput={handleRangeSliderInput}
             className={clsx(className)}
+            id={"range-slider"}
         />
     )
 }

src/main/frontend/components/Playbar.tsx

@@ -1,5 +1,6 @@
-import {ChangeEventHandler, useEffect, useState} from "react";
+import { useEffect, useState} from "react";
 import { Volume, Play, Pause } from 'lucide-react';
+import clsx from 'clsx';
 
 
 export type VideoMetadata = {
@@ -14,6 +15,7 @@ export type VideoMetadata = {
 type Props = {
     video: HTMLVideoElement | null;
     videoMetadata: VideoMetadata;
+    className?: string;
 };
 
 function formatTime(seconds: number): string {
@@ -30,7 +32,7 @@ function formatTime(seconds: number): string {
     }
 }
 
-export default function Playbar({ video, videoMetadata }: Props) {
+export default function Playbar({ video, videoMetadata, className }: Props) {
     const [isPlaying, setIsPlaying] = useState(false);
     const [volume, setVolume] = useState(100);
 
@@ -70,7 +72,7 @@ export default function Playbar({ video, videoMetadata }: Props) {
     }, [video]);
 
     return (
-        <div className={"flex justify-between items-center bg-gray-300 p-2 rounded-lg"}>
+        <div className={clsx("flex justify-between items-center p-2 rounded-lg", className)}>
             <div className={"flex"}>
                 <Volume size={24} />
                 <input

src/main/frontend/index.css

@@ -1 +1,26 @@
-@import "tailwindcss";
+@import "tailwindcss";
+
+@theme {
+    --font-display: "Satoshi", "sans-serif";
+
+    /* Breakpoints */
+    --breakpoint-3xl: 1920px;
+
+    --color-primary: oklch(0.55 0.21 254);    /* Modern Blue (#2563EB) */
+    --color-secondary: oklch(0.94 0.01 250);  /* Light Gray (#E5E7EB) */
+    --color-accent: oklch(0.68 0.20 288);     /* Indigo Accent (#6366F1) */
+    --color-text: oklch(0.17 0.01 270);       /* Dark Slate (#111827) */
+    --color-background: oklch(0.98 0.005 250);/* Soft off-white (#F9FAFB) */
+
+    /* Easing */
+    --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+    --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
+}
+
+#range-slider .range-slider__range{
+    background: var(--color-primary);
+}
+
+#range-slider .range-slider__thumb{
+    background: var(--color-primary);
+}

src/main/frontend/views/video/{id}.tsx

@@ -1,9 +1,10 @@
 import { useParams } from 'react-router-dom';
 import { useEffect, useRef, useState } from "react";
 import { VideoMetadata } from "Frontend/components/Playbar";
-import Playbar from "./../../components/Playbar"
+import Playbar from "./../../components/Playbar";
-import PlaybackSlider from "./../../components/PlaybackSlider"
+import PlaybackSlider from "./../../components/PlaybackSlider";
-import ClipRangeSlider from "./../../components/ClipRangeSlider"
+import ClipRangeSlider from "./../../components/ClipRangeSlider";
+import ClipConfig from "./../../components/ClipConfig";
 
 export default function VideoId() {
     const { id } = useParams();
@@ -42,6 +43,7 @@ export default function VideoId() {
                     <Playbar
                         video={videoRef.current}
                         videoMetadata={metadata}
+                        className={"w-full accent-primary text-text"}
                     />
 
                     <PlaybackSlider
@@ -49,7 +51,7 @@ export default function VideoId() {
                         videoMetadata={metadata}
                         sliderValue={playbackValue}
                         setSliderValue={setPlaybackValue}
-                        className={"w-full"}
+                        className={"w-full accent-primary"}
                     />
 
                     <ClipRangeSlider
@@ -57,12 +59,10 @@ export default function VideoId() {
                         videoMetadata={metadata}
                         setSliderValue={setPlaybackValue}
                         setClipRangeValue={setClipRangeValue}
-                        className={"w-full"}
+                        className={"w-full mb-10 bg-primary"}
                     />
 
-                    <label>
+                    <ClipConfig />
-                        Clip Length: {Math.round(clipRangeValue[1] - clipRangeValue[0])}
-                    </label>
                 </div>
             }
         </div>