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

[Perf] Video: Do not switch to thumb when not observed, remove preview

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-07-19 01:56:38 +03:00
parent 7c28bfac70
commit 46b0152935
2 changed files with 6 additions and 31 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(() => {

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

@ -19,7 +19,6 @@ import {
} from '../../../modules/helpers'; } from '../../../modules/helpers';
import { ObserveFn, useIsIntersecting } from '../../../hooks/useIntersectionObserver'; import { ObserveFn, useIsIntersecting } from '../../../hooks/useIntersectionObserver';
import useMediaWithDownloadProgress from '../../../hooks/useMediaWithDownloadProgress'; import useMediaWithDownloadProgress from '../../../hooks/useMediaWithDownloadProgress';
import useMedia from '../../../hooks/useMedia';
import useShowTransition from '../../../hooks/useShowTransition'; import useShowTransition from '../../../hooks/useShowTransition';
import useTransitionForMedia from '../../../hooks/useTransitionForMedia'; import useTransitionForMedia from '../../../hooks/useTransitionForMedia';
import usePrevious from '../../../hooks/usePrevious'; import usePrevious from '../../../hooks/usePrevious';
@ -72,12 +71,6 @@ const Video: FC<OwnProps> = ({
const shouldDownload = Boolean(isDownloadAllowed && isIntersecting && lastSyncTime); const shouldDownload = Boolean(isDownloadAllowed && isIntersecting && lastSyncTime);
const [isPlayAllowed, setIsPlayAllowed] = useState(shouldAutoPlay); const [isPlayAllowed, setIsPlayAllowed] = useState(shouldAutoPlay);
const previewBlobUrl = useMedia(
getMessageMediaHash(message, 'pictogram'),
!(isIntersecting && lastSyncTime),
getMessageMediaFormat(message, 'pictogram'),
lastSyncTime,
);
const thumbRef = useBlurredMediaThumbRef(message); const thumbRef = useBlurredMediaThumbRef(message);
const { mediaData, downloadProgress } = useMediaWithDownloadProgress( const { mediaData, downloadProgress } = useMediaWithDownloadProgress(
getMessageMediaHash(message, 'inline'), getMessageMediaHash(message, 'inline'),
@ -85,9 +78,7 @@ const Video: FC<OwnProps> = ({
getMessageMediaFormat(message, 'inline'), getMessageMediaFormat(message, 'inline'),
lastSyncTime, lastSyncTime,
); );
const fullMediaData = localBlobUrl || mediaData; const fullMediaData = localBlobUrl || mediaData;
const isInline = Boolean(isIntersecting && fullMediaData);
const { isBuffered, bufferingHandlers } = useBuffering(!shouldAutoLoad); const { isBuffered, bufferingHandlers } = useBuffering(!shouldAutoLoad);
const { isUploading, isTransferring, transferProgress } = getMediaTransferState( const { isUploading, isTransferring, transferProgress } = getMediaTransferState(
@ -113,11 +104,9 @@ const Video: FC<OwnProps> = ({
const isForwarded = isForwardedMessage(message); const isForwarded = isForwardedMessage(message);
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(fullMediaData && shouldAutoPlay));
usePauseOnInactive(videoRef, isPlayAllowed); usePauseOnInactive(videoRef, isPlayAllowed);
useVideoCleanup(videoRef, [fullMediaData]);
useVideoCleanup(videoRef, [isInline]);
const handleClick = useCallback(() => { const handleClick = useCallback(() => {
if (isUploading) { if (isUploading) {
@ -141,7 +130,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 shouldRenderPlayButton = (isDownloadAllowed && !isPlayAllowed && !shouldRenderSpinner);
const shouldRenderDownloadButton = !isDownloadAllowed; const shouldRenderDownloadButton = !isDownloadAllowed;
@ -154,26 +142,15 @@ const Video: FC<OwnProps> = ({
style={style} style={style}
onClick={isUploading ? undefined : handleClick} onClick={isUploading ? undefined : handleClick}
> >
{(!isInline || shouldRenderThumb || shouldRenderInlineVideo) {(shouldRenderThumb || fullMediaData) && (
&& ( <canvas
<canvas ref={thumbRef}
ref={thumbRef}
className="thumbnail"
// @ts-ignore teact feature
style={`width: ${width}px; height: ${height}px;`}
/>
)}
{previewBlobUrl && (
<img
src={previewBlobUrl}
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;`}
alt=""
/> />
)} )}
{fullMediaData && (
{shouldRenderInlineVideo && (
<video <video
ref={videoRef} ref={videoRef}
className={videoClassName} className={videoClassName}