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 = () => {
|
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'
|
||||||
|
|
Loading…
Reference in New Issue