PATCH NaN values on video load

This commit is contained in:
2025-05-23 11:08:03 +02:00
parent 84ad154bd4
commit 62af69e45b
2 changed files with 16 additions and 15 deletions

View File

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

View File

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