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

[Perf] Video: Do not render blurred canvas if preview is present

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-07-19 03:34:20 +03:00
parent 68398550a8
commit 5834f250f8
2 changed files with 14 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/middle/message/RoundVideo.tsx
View File

@ -142,9 +142,7 @@ const RoundVideo: FC<OwnProps> = ({
}, [shouldPlay]); }, [shouldPlay]);
useHeavyAnimationCheckForVideo(playerRef, shouldPlay); useHeavyAnimationCheckForVideo(playerRef, shouldPlay);
usePauseOnInactive(playerRef, Boolean(mediaData)); usePauseOnInactive(playerRef, Boolean(mediaData));
useVideoCleanup(playerRef, [mediaData]); useVideoCleanup(playerRef, [mediaData]);
const handleClick = useCallback(() => { const handleClick = useCallback(() => {

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

@ -78,16 +78,16 @@ const Video: FC<OwnProps> = ({
getMessageMediaFormat(message, 'pictogram'), getMessageMediaFormat(message, 'pictogram'),
lastSyncTime, lastSyncTime,
); );
const thumbRef = useBlurredMediaThumbRef(message);
const { mediaData, downloadProgress } = useMediaWithDownloadProgress( const { mediaData, downloadProgress } = useMediaWithDownloadProgress(
getMessageMediaHash(message, 'inline'), getMessageMediaHash(message, 'inline'),
!shouldDownload, !shouldDownload,
getMessageMediaFormat(message, 'inline'), getMessageMediaFormat(message, 'inline'),
lastSyncTime, lastSyncTime,
); );
const fullMediaData = localBlobUrl || mediaData; const fullMediaData = localBlobUrl || mediaData;
const isInline = Boolean(isIntersecting && fullMediaData); const isInline = Boolean(isIntersecting && fullMediaData);
// Thumbnail is always rendered so we can only disable blur if we have preview
const thumbRef = useBlurredMediaThumbRef(message, previewBlobUrl);
const { isBuffered, bufferingHandlers } = useBuffering(!shouldAutoLoad); const { isBuffered, bufferingHandlers } = useBuffering(!shouldAutoLoad);
const { isUploading, isTransferring, transferProgress } = getMediaTransferState( const { isUploading, isTransferring, transferProgress } = getMediaTransferState(
@ -100,7 +100,7 @@ const Video: FC<OwnProps> = ({
shouldRender: shouldRenderSpinner, shouldRender: shouldRenderSpinner,
transitionClassNames: spinnerClassNames, transitionClassNames: spinnerClassNames,
} = useShowTransition(isTransferring, undefined, wasDownloadDisabled); } = useShowTransition(isTransferring, undefined, wasDownloadDisabled);
const { shouldRenderThumb, transitionClassNames } = useTransitionForMedia(fullMediaData, 'slow'); const { transitionClassNames } = useTransitionForMedia(fullMediaData, 'slow');
const [playProgress, setPlayProgress] = useState<number>(0); const [playProgress, setPlayProgress] = useState<number>(0);
const handleTimeUpdate = useCallback((e: React.SyntheticEvent<HTMLVideoElement>) => { const handleTimeUpdate = useCallback((e: React.SyntheticEvent<HTMLVideoElement>) => {
@ -114,9 +114,7 @@ const Video: FC<OwnProps> = ({
const { width, height } = dimensions || calculateVideoDimensions(video, isOwn, isForwarded, noAvatars); const { width, height } = dimensions || calculateVideoDimensions(video, isOwn, isForwarded, noAvatars);
useHeavyAnimationCheckForVideo(videoRef, Boolean(isInline && shouldAutoPlay)); useHeavyAnimationCheckForVideo(videoRef, Boolean(isInline && shouldAutoPlay));
usePauseOnInactive(videoRef, isPlayAllowed); usePauseOnInactive(videoRef, isPlayAllowed);
useVideoCleanup(videoRef, [isInline]); useVideoCleanup(videoRef, [isInline]);
const handleClick = useCallback(() => { const handleClick = useCallback(() => {
@ -141,10 +139,6 @@ const Video: FC<OwnProps> = ({
? `width: ${width}px; height: ${height}px; left: ${dimensions.x}px; top: ${dimensions.y}px;` ? `width: ${width}px; height: ${height}px; left: ${dimensions.x}px; top: ${dimensions.y}px;`
: ''; : '';
const shouldRenderInlineVideo = isInline;
const shouldRenderPlayButton = (isDownloadAllowed && !isPlayAllowed && !shouldRenderSpinner);
const shouldRenderDownloadButton = !isDownloadAllowed;
return ( return (
<div <div
ref={ref} ref={ref}
@ -154,15 +148,14 @@ const Video: FC<OwnProps> = ({
style={style} style={style}
onClick={isUploading ? undefined : handleClick} onClick={isUploading ? undefined : handleClick}
> >
{(!isInline || shouldRenderThumb || shouldRenderInlineVideo) {!previewBlobUrl && (
&& ( <canvas
<canvas ref={thumbRef}
ref={thumbRef} className="thumbnail"
className="thumbnail" // @ts-ignore teact feature
// @ts-ignore teact feature style={`width: ${width}px; height: ${height}px;`}
style={`width: ${width}px; height: ${height}px;`} />
/> )}
)}
{previewBlobUrl && ( {previewBlobUrl && (
<img <img
src={previewBlobUrl} src={previewBlobUrl}
@ -172,8 +165,7 @@ const Video: FC<OwnProps> = ({
alt="" alt=""
/> />
)} )}
{isInline && (
{shouldRenderInlineVideo && (
<video <video
ref={videoRef} ref={videoRef}
className={videoClassName} className={videoClassName}
@ -190,7 +182,7 @@ const Video: FC<OwnProps> = ({
<source src={fullMediaData} /> <source src={fullMediaData} />
</video> </video>
)} )}
{shouldRenderPlayButton && ( {(isDownloadAllowed && !isPlayAllowed && !shouldRenderSpinner) && (
<i className="icon-large-play" /> <i className="icon-large-play" />
)} )}
{shouldRenderSpinner && ( {shouldRenderSpinner && (
@ -198,7 +190,7 @@ const Video: FC<OwnProps> = ({
<ProgressSpinner progress={transferProgress} onClick={isUploading ? handleClick : undefined} /> <ProgressSpinner progress={transferProgress} onClick={isUploading ? handleClick : undefined} />
</div> </div>
)} )}
{shouldRenderDownloadButton && ( {!isDownloadAllowed && (
<i className="icon-download" /> <i className="icon-download" />
)} )}
{isTransferring ? ( {isTransferring ? (