Fix infinity problem when video is streaming or does not have duration data

This commit is contained in:
danidfra 2025-01-31 15:45:01 -03:00
parent 5f95348ac0
commit 5f874b87c1
1 changed files with 13 additions and 8 deletions

View File

@ -191,10 +191,12 @@ const Video: React.FC<IVideo> = ({
}; };
const handleTimeUpdate = () => { const handleTimeUpdate = () => {
if (video.current) { if (!video.current) return;
setCurrentTime(Math.floor(video.current.currentTime));
setDuration(Math.floor(video.current.duration)); const { duration, currentTime } = video.current;
}
setCurrentTime(Math.floor(currentTime));
setDuration(Number.isNaN(duration) || (duration === Infinity) ? 0 : Math.floor(duration));
}; };
const handleVolumeMouseDown: React.MouseEventHandler = e => { const handleVolumeMouseDown: React.MouseEventHandler = e => {
@ -649,9 +651,13 @@ const Video: React.FC<IVideo> = ({
<span> <span>
<span className='text-sm font-medium text-white/75'>{formatTime(currentTime)}</span> <span className='text-sm font-medium text-white/75'>{formatTime(currentTime)}</span>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} {duration > 0 && (
<span className='mx-1.5 inline-block text-sm font-medium text-white/75'>/</span> <>
<span className='text-sm font-medium text-white/75'>{formatTime(duration)}</span> {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span className='mx-1.5 inline-block text-sm font-medium text-white/75'>/</span>
<span className='text-sm font-medium text-white/75'>{formatTime(duration)}</span>
</>
)}
</span> </span>
{link && ( {link && (
@ -660,7 +666,6 @@ const Video: React.FC<IVideo> = ({
</span> </span>
)} )}
</div> </div>
<div className='flex min-w-[30px] flex-auto items-center truncate text-[16px]'> <div className='flex min-w-[30px] flex-auto items-center truncate text-[16px]'>
<button <button
type='button' type='button'