ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Media Viewer: Fix spinner issue on video loading (#4733)

Browse Source 
Co-authored-by: Alexander Zinchuk <alx.zinchuk@gmail.com>
This commit is contained in:
Alexander Zinchuk 2024-07-15 15:52:56 +02:00
parent ae1a6da2ec
commit 574342e472
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/mediaViewer/VideoPlayer.tsx
View File

@ -323,7 +323,6 @@ const VideoPlayer: FC<OwnProps> = ({
<ProgressSpinner <ProgressSpinner
size="xl" size="xl"
progress={isBuffered ? 1 : loadProgress} progress={isBuffered ? 1 : loadProgress}
square
onClick={onClose} onClick={onClose}
/> />
</div> </div>

21
src/components/middle/message/Video.tsx
View File

@ -176,7 +176,7 @@ const Video = <T,>({
: calculateVideoDimensions(video, Boolean(isOwn), asForwarded, isInWebPage, noAvatars, isMobile) : calculateVideoDimensions(video, Boolean(isOwn), asForwarded, isInWebPage, noAvatars, isMobile)
); );
const handleClick = useLastCallback((e: React.MouseEvent<HTMLElement>) => { const handleClick = useLastCallback((e: React.MouseEvent<HTMLElement, MouseEvent>, isFromSpinner?: boolean) => {
if (isUploading) { if (isUploading) {
onCancelUpload?.(clickArg!); onCancelUpload?.(clickArg!);
return; return;
@ -201,9 +201,21 @@ const Video = <T,>({
return; return;
} }
if (isFromSpinner && shouldLoad && !isPlayerReady && !isFullMediaPreloaded) {
setIsLoadAllowed(false);
e.stopPropagation();
return;
}
onClick?.(clickArg!, e); onClick?.(clickArg!, e);
}); });
const handleClickOnSpinner = useLastCallback(
(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
handleClick(e, true);
},
);
const componentClassName = buildClassName( const componentClassName = buildClassName(
'media-inner dark', 'media-inner dark',
!isUploading && 'interactive', !isUploading && 'interactive',
@ -220,7 +232,7 @@ const Video = <T,>({
id={id} id={id}
className={componentClassName} className={componentClassName}
style={style} style={style}
onClick={isUploading ? undefined : handleClick} onClick={isUploading ? undefined : (e) => handleClick(e)}
> >
{withBlurredBackground && ( {withBlurredBackground && (
<canvas ref={blurredBackgroundRef} className="thumbnail canvas-blur-setup blurred-bg" /> <canvas ref={blurredBackgroundRef} className="thumbnail canvas-blur-setup blurred-bg" />
@ -265,7 +277,10 @@ const Video = <T,>({
/> />
{shouldRenderSpinner && ( {shouldRenderSpinner && (
<div className={buildClassName('media-loading', spinnerClassNames)}> <div className={buildClassName('media-loading', spinnerClassNames)}>
<ProgressSpinner progress={transferProgress} onClick={handleClick} /> <ProgressSpinner
progress={transferProgress}
onClick={handleClickOnSpinner}
/>
</div> </div>
)} )}
{!isLoadAllowed && !fullMediaData && ( {!isLoadAllowed && !fullMediaData && (