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

Animated Stcker: Fix forceOnHeavyAnimation

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-04-26 21:15:18 +04:00
parent b00f413055
commit 6a39a7bdd2
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/common/AnimatedSticker.tsx
View File

@ -80,7 +80,7 @@ const AnimatedSticker: FC<OwnProps> = ({
const animationRef = useRef<RLottieInstance>(); const animationRef = useRef<RLottieInstance>();
const isFirstRender = useRef(true); const isFirstRender = useRef(true);
const canPlay = play || playSegment; const playKey = play || playSegment;
const playRef = useStateRef(play); const playRef = useStateRef(play);
const playSegmentRef = useStateRef(playSegment); const playSegmentRef = useStateRef(playSegment);
@ -162,7 +162,7 @@ const AnimatedSticker: FC<OwnProps> = ({
if ( if (
!animation !animation
|| !(playRef.current || playSegmentRef.current) || !(playRef.current || playSegmentRef.current)
|| isFrozen() || isFrozen(forceOnHeavyAnimation)
) { ) {
return; return;
} }
@ -172,7 +172,7 @@ const AnimatedSticker: FC<OwnProps> = ({
} else { } else {
animation.play(shouldRestart, viewId); animation.play(shouldRestart, viewId);
} }
}, [animation, playRef, playSegmentRef, viewId]); }, [animation, forceOnHeavyAnimation, playRef, playSegmentRef, viewId]);
const playAnimationOnRaf = useCallback(() => { const playAnimationOnRaf = useCallback(() => {
requestMeasure(playAnimation); requestMeasure(playAnimation);
@ -201,14 +201,14 @@ const AnimatedSticker: FC<OwnProps> = ({
return; return;
} }
if (canPlay) { if (playKey) {
if (!isFrozen()) { if (!isFrozen(forceOnHeavyAnimation)) {
playAnimation(noLoop); playAnimation(noLoop);
} }
} else { } else {
pauseAnimation(); pauseAnimation();
} }
}, [animation, canPlay, noLoop, playAnimation, pauseAnimation]); }, [animation, playKey, noLoop, playAnimation, pauseAnimation, forceOnHeavyAnimation]);
useEffect(() => { useEffect(() => {
if (animation) { if (animation) {
@ -221,12 +221,12 @@ const AnimatedSticker: FC<OwnProps> = ({
} }
}, [playAnimation, animation, tgsUrl]); }, [playAnimation, animation, tgsUrl]);
useHeavyAnimationCheck(pauseAnimation, playAnimation, !canPlay || forceOnHeavyAnimation); useHeavyAnimationCheck(pauseAnimation, playAnimation, !playKey || forceOnHeavyAnimation);
usePriorityPlaybackCheck(pauseAnimation, playAnimation, !canPlay); usePriorityPlaybackCheck(pauseAnimation, playAnimation, !playKey);
// Pausing frame may not happen in background, // Pausing frame may not happen in background,
// so we need to make sure it happens right after focusing, // so we need to make sure it happens right after focusing,
// then we can play again. // then we can play again.
useBackgroundMode(pauseAnimation, playAnimationOnRaf, !canPlay); useBackgroundMode(pauseAnimation, playAnimationOnRaf, !playKey);
if (sharedCanvas) { if (sharedCanvas) {
return undefined; return undefined;
@ -248,6 +248,6 @@ const AnimatedSticker: FC<OwnProps> = ({
export default memo(AnimatedSticker); export default memo(AnimatedSticker);
function isFrozen() { function isFrozen(forceOnHeavyAnimation = false) {
return isHeavyAnimating() || isPriorityPlaybackActive() || isBackgroundModeActive(); return (!forceOnHeavyAnimation && isHeavyAnimating()) || isPriorityPlaybackActive() || isBackgroundModeActive();
} }