From 7b6c3431b565fa52a5a178c9d9d592a2a0f5c3e8 Mon Sep 17 00:00:00 2001
From: ThisBirchWood <dylanseandefaoite@gmail.com>
Date: Fri, 23 May 2025 11:56:25 +0200
Subject: [PATCH] ADD clip length label

---
 .../frontend/components/ClipRangeSlider.tsx   |  8 ++++++-
 src/main/frontend/views/video/{id}.tsx        | 22 ++++++++++++++-----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/main/frontend/components/ClipRangeSlider.tsx b/src/main/frontend/components/ClipRangeSlider.tsx
index 807d273..48d0729 100644
--- a/src/main/frontend/components/ClipRangeSlider.tsx
+++ b/src/main/frontend/components/ClipRangeSlider.tsx
@@ -8,10 +8,15 @@ type Props = {
     videoRef: HTMLVideoElement | null;
     videoMetadata: VideoMetadata;
     setSliderValue: Function;
+    setClipRangeValue: Function;
     className?: string;
 };
 
-export default function ClipRangeSlider({videoRef, videoMetadata, setSliderValue, className}: Props) {
+export default function ClipRangeSlider({videoRef,
+                                            videoMetadata,
+                                            setSliderValue,
+                                            setClipRangeValue,
+                                            className}: Props) {
     const previousRangeSliderInput = useRef<[number, number]>([0, 0]);
 
     const handleRangeSliderInput = (val: [number, number]) => {
@@ -25,6 +30,7 @@ export default function ClipRangeSlider({videoRef, videoMetadata, setSliderValue
             setSliderValue(val[1]);
         }
 
+        setClipRangeValue(val);
         previousRangeSliderInput.current = val;
     };
 
diff --git a/src/main/frontend/views/video/{id}.tsx b/src/main/frontend/views/video/{id}.tsx
index 882bbe9..2954b3e 100644
--- a/src/main/frontend/views/video/{id}.tsx
+++ b/src/main/frontend/views/video/{id}.tsx
@@ -11,7 +11,8 @@ export default function VideoId() {
     const videoUrl = `api/v1/download/input/${id}`
 
     const [metadata, setMetadata] = useState<VideoMetadata | null>(null);
-    const [sliderValue, setSliderValue] = useState(0);
+    const [playbackValue, setPlaybackValue] = useState(0);
+    const [clipRangeValue, setClipRangeValue] = useState([0, 1]);
 
     useEffect(() => {
         fetch(`api/v1/metadata/original/${id}`)
@@ -24,7 +25,7 @@ export default function VideoId() {
     }, [id]);
 
     return (
-        <div className={"flex flex-col gap-2 max-w-3xl m-auto align-middle"}>
+        <div className={"flex flex-col max-w-3xl m-auto align-middle"}>
             <video
                    ref={videoRef}
                    width={"600"}
@@ -38,21 +39,30 @@ export default function VideoId() {
 
             {metadata &&
                 <div>
-                    <Playbar video={videoRef.current} videoMetadata={metadata}/>
+                    <Playbar
+                        video={videoRef.current}
+                        videoMetadata={metadata}
+                    />
+
                     <PlaybackSlider
                         videoRef={videoRef.current}
                         videoMetadata={metadata}
-                        sliderValue={sliderValue}
-                        setSliderValue={setSliderValue}
+                        sliderValue={playbackValue}
+                        setSliderValue={setPlaybackValue}
                         className={"w-full"}
                     />
 
                     <ClipRangeSlider
                         videoRef={videoRef.current}
                         videoMetadata={metadata}
-                        setSliderValue={setSliderValue}
+                        setSliderValue={setPlaybackValue}
+                        setClipRangeValue={setClipRangeValue}
                         className={"w-full"}
                     />
+
+                    <label>
+                        Clip Length: {Math.round(clipRangeValue[1] - clipRangeValue[0])}
+                    </label>
                 </div>
             }
         </div>