UPDATE "endPoint" to "duration" in frontend to match backend

frontend/src/components/video/ClipRangeSlider.tsx

@@ -33,7 +33,7 @@ export default function ClipRangeSlider({videoRef,
         setMetadata((prevState: VideoMetadata) => ({
             ...prevState,
             startPoint: val[0],
-            endPoint: val[1]
+            duration: val[1] - val[0]
         }
         ))
         previousRangeSliderInput.current = val;
@@ -42,7 +42,7 @@ export default function ClipRangeSlider({videoRef,
     return (
         <RangeSlider
             min={0}
-            max={videoMetadata.endPoint}
+            max={videoMetadata.duration}
             step={0.1}
             onInput={handleRangeSliderInput}
             className={clsx(className)}

frontend/src/components/video/PlaybackSlider.tsx

@@ -15,6 +15,7 @@ export default function PlaybackSlider({videoRef,
                                            sliderValue,
                                            setSliderValue,
                                            className}: Props) {
+
     const updateVideo = (e: React.ChangeEvent<HTMLInputElement>) => {
         if (!videoRef) return;
 
@@ -41,7 +42,7 @@ export default function PlaybackSlider({videoRef,
         <input
             type={"range"}
             min={0}
-            max={videoMetadata.endPoint}
+            max={videoMetadata.duration}
             value={sliderValue}
             onChange={updateVideo}
             step={0.1}

frontend/src/components/video/Playbar.tsx

@@ -81,11 +81,11 @@ export default function Playbar({ video, videoMetadata, className }: Props) {
             >
                 {isPlaying ? <Pause size={24} /> : <Play size={24} />}
             </button>
-            {videoMetadata.endPoint &&
-                <label>
-                    {formatTime(video?.currentTime ?? 0)} / {formatTime(videoMetadata.endPoint)}
-                </label>
-            }
+
+            <label>
+                {formatTime(video?.currentTime ?? 0)} / {formatTime(videoMetadata.duration ?? 0)}
+            </label>
+
         </div>
     );
 }

frontend/src/pages/ClipEdit.tsx

@@ -21,7 +21,7 @@ const ClipEdit = () => {
         title: "",
         description: "",
         startPoint: 0,
-        endPoint: 5,
+        duration: 5,
         width: 1280,
         height: 720,
         fps: 30,

frontend/src/utils/types.ts

@@ -2,7 +2,7 @@ type VideoMetadata = {
     title: string,
     description: string,
     startPoint: number,
-    endPoint: number,
+    duration: number,
     fps: number,
     width: number,
     height: number,