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

[Perf] Sticker View: Do not render full media during heavy animation on Android

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-04-15 13:51:00 +02:00
parent d872273def
commit b83ff5181b
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/common/StickerView.tsx
View File

@ -5,7 +5,7 @@ import type { FC } from '../../lib/teact/teact';
import type { ObserveFn } from '../../hooks/useIntersectionObserver'; import type { ObserveFn } from '../../hooks/useIntersectionObserver';
import type { ApiSticker } from '../../api/types'; import type { ApiSticker } from '../../api/types';
import { IS_WEBM_SUPPORTED } from '../../util/windowEnvironment'; import { IS_ANDROID, IS_WEBM_SUPPORTED } from '../../util/windowEnvironment';
import * as mediaLoader from '../../util/mediaLoader'; import * as mediaLoader from '../../util/mediaLoader';
import buildClassName from '../../util/buildClassName'; import buildClassName from '../../util/buildClassName';
import generateIdFor from '../../util/generateIdFor'; import generateIdFor from '../../util/generateIdFor';
@ -18,6 +18,7 @@ import useThumbnail from '../../hooks/useThumbnail';
import useMediaTransition from '../../hooks/useMediaTransition'; import useMediaTransition from '../../hooks/useMediaTransition';
import useFlag from '../../hooks/useFlag'; import useFlag from '../../hooks/useFlag';
import useBoundsInSharedCanvas from '../../hooks/useBoundsInSharedCanvas'; import useBoundsInSharedCanvas from '../../hooks/useBoundsInSharedCanvas';
import useHeavyAnimationCheck, { isHeavyAnimating } from '../../hooks/useHeavyAnimationCheck';
import AnimatedSticker from './AnimatedSticker'; import AnimatedSticker from './AnimatedSticker';
import OptimizedVideo from '../ui/OptimizedVideo'; import OptimizedVideo from '../ui/OptimizedVideo';
@ -107,7 +108,10 @@ const StickerView: FC<OwnProps> = ({
const fullMediaData = useMedia(fullMediaHash, !shouldLoad || shouldSkipFullMedia, undefined, cacheBuster); const fullMediaData = useMedia(fullMediaHash, !shouldLoad || shouldSkipFullMedia, undefined, cacheBuster);
// If Lottie data is loaded we will only render thumb if it's good enough (from preview) // If Lottie data is loaded we will only render thumb if it's good enough (from preview)
const [isPlayerReady, markPlayerReady] = useFlag(Boolean(isLottie && fullMediaData && !preloadedPreviewData)); const [isPlayerReady, markPlayerReady] = useFlag(Boolean(isLottie && fullMediaData && !preloadedPreviewData));
const isFullMediaReady = fullMediaData && (isStatic || isPlayerReady); // Delay mounting on Android until heavy animation ends
const [isReadyToMount, markReadyToMount, unmarkReadyToMount] = useFlag(!IS_ANDROID || !isHeavyAnimating());
useHeavyAnimationCheck(unmarkReadyToMount, markReadyToMount, isReadyToMount);
const isFullMediaReady = isReadyToMount && fullMediaData && (isStatic || isPlayerReady);
const isThumbOpaque = sharedCanvasRef && !withTranslucentThumb; const isThumbOpaque = sharedCanvasRef && !withTranslucentThumb;
const thumbClassNames = useMediaTransition(thumbData && !isFullMediaReady); const thumbClassNames = useMediaTransition(thumbData && !isFullMediaReady);
@ -138,7 +142,7 @@ const StickerView: FC<OwnProps> = ({
alt="" alt=""
draggable={false} draggable={false}
/> />
{isLottie ? ( {isReadyToMount && (isLottie ? (
<AnimatedSticker <AnimatedSticker
key={renderId} key={renderId}
renderId={renderId} renderId={renderId}
@ -180,7 +184,7 @@ const StickerView: FC<OwnProps> = ({
alt={emoji} alt={emoji}
draggable={false} draggable={false}
/> />
)} ))}
</> </>
); );
}; };