PATCH NaN values on video load

src/main/frontend/components/Playbar.tsx

@@ -1,8 +1,19 @@
 import {ChangeEventHandler, useEffect, useState} from "react";
 import { Volume, Play, Pause } from 'lucide-react';
 
+
+export type VideoMetadata = {
+    startPoint: number,
+    endPoint: number,
+    fps: number,
+    width: number,
+    height: number,
+    fileSize: number
+}
+
 type Props = {
     video: HTMLVideoElement | null;
+    videoMetadata: VideoMetadata;
 };
 
 function formatTime(seconds: number): string {
@@ -19,7 +30,7 @@ function formatTime(seconds: number): string {
     }
 }
 
-export default function Playbar({ video }: Props) {
+export default function Playbar({ video, videoMetadata }: Props) {
     const [isPlaying, setIsPlaying] = useState(false);
     const [volume, setVolume] = useState(100);
 
@@ -75,7 +86,7 @@ export default function Playbar({ video }: Props) {
                 {isPlaying ? <Pause size={24} /> : <Play size={24} />}
             </button>
             <label>
-                {formatTime(video?.currentTime ?? 0)} / {formatTime(video?.duration ?? 0)}
+                {formatTime(video?.currentTime ?? 0)} / {formatTime(videoMetadata.endPoint)}
             </label>
         </div>
     );

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

@@ -2,17 +2,7 @@ import { useParams } from 'react-router-dom';
 import { useEffect, useRef, useState } from "react";
 import RangeSlider from 'react-range-slider-input';
 import 'react-range-slider-input/dist/style.css';
-import Playbar from "./../../components/Playbar"
-
-
-export type VideoMetadata = {
-    startPoint: number,
-    endPoint: number,
-    fps: number,
-    width: number,
-    height: number,
-    fileSize: number
-}
+import Playbar, {VideoMetadata } from "./../../components/Playbar"
 
 export default function VideoId() {
     const { id } = useParams();
@@ -75,7 +65,7 @@ export default function VideoId() {
     }, [videoRef]);
 
     return (
-        <div className={"flex flex-col gap-2 max-w-3xl m-auto"}>
+        <div className={"flex flex-col gap-2 max-w-3xl m-auto align-middle  "}>
             <video
                    ref={videoRef}
                    preload="metadata"
@@ -90,7 +80,7 @@ export default function VideoId() {
 
             {metadata &&
                 <div>
-                    <Playbar video={videoRef.current}/>
+                    <Playbar video={videoRef.current} videoMetadata={metadata}/>
                     <input
                         className={"w-full"}
                         type="range"