moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'fix-infinityNaN-video' into 'main' 

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

Closes #1795

See merge request soapbox-pub/soapbox!3323
This commit is contained in:
Alex Gleason 2025-01-31 18:59:31 +00:00
parent 5f95348ac0 1932ec126c
commit 101017feba
1 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/features/video/index.tsx
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 => {
@ -480,7 +482,11 @@ const Video: React.FC<IVideo> = ({
const playerStyle: React.CSSProperties = {}; const playerStyle: React.CSSProperties = {};
const startTimeout = () => { const startTimeout = () => {
timeoutRef.current = setTimeout(() => setHovered(false), 1000); if (timeoutRef.current) clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(() => {
setHovered(false);
timeoutRef.current = null;
}, 1000);
}; };
if (inline && containerWidth) { if (inline && containerWidth) {
@ -649,9 +655,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 +670,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'