Fix infinity problem when video is streaming or does not have duration data
This commit is contained in:
parent
5f95348ac0
commit
5f874b87c1
|
@ -191,10 +191,12 @@ const Video: React.FC<IVideo> = ({
|
|||
};
|
||||
|
||||
const handleTimeUpdate = () => {
|
||||
if (video.current) {
|
||||
setCurrentTime(Math.floor(video.current.currentTime));
|
||||
setDuration(Math.floor(video.current.duration));
|
||||
}
|
||||
if (!video.current) return;
|
||||
|
||||
const { duration, currentTime } = video.current;
|
||||
|
||||
setCurrentTime(Math.floor(currentTime));
|
||||
setDuration(Number.isNaN(duration) || (duration === Infinity) ? 0 : Math.floor(duration));
|
||||
};
|
||||
|
||||
const handleVolumeMouseDown: React.MouseEventHandler = e => {
|
||||
|
@ -649,9 +651,13 @@ const Video: React.FC<IVideo> = ({
|
|||
|
||||
<span>
|
||||
<span className='text-sm font-medium text-white/75'>{formatTime(currentTime)}</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>
|
||||
{duration > 0 && (
|
||||
<>
|
||||
{/* 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>
|
||||
|
||||
{link && (
|
||||
|
@ -660,7 +666,6 @@ const Video: React.FC<IVideo> = ({
|
|||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='flex min-w-[30px] flex-auto items-center truncate text-[16px]'>
|
||||
<button
|
||||
type='button'
|
||||
|
|
Loading…
Reference in New Issue