diff --git a/src/components/common/AnimatedSticker.tsx b/src/components/common/AnimatedSticker.tsx index 02150825c..c40becdc5 100644 --- a/src/components/common/AnimatedSticker.tsx +++ b/src/components/common/AnimatedSticker.tsx @@ -13,6 +13,7 @@ import generateIdFor from '../../util/generateIdFor'; import useHeavyAnimationCheck from '../../hooks/useHeavyAnimationCheck'; import useBackgroundMode from '../../hooks/useBackgroundMode'; import useSyncEffect from '../../hooks/useSyncEffect'; +import { useStateRef } from '../../hooks/useStateRef'; export type OwnProps = { ref?: RefObject; @@ -94,10 +95,9 @@ const AnimatedSticker: FC = ({ const isFrozen = useRef(false); const isFirstRender = useRef(true); - const playRef = useRef(); - playRef.current = play; - const playSegmentRef = useRef<[number, number]>(); - playSegmentRef.current = playSegment; + const canPlay = play || playSegment; + const playRef = useStateRef(play); + const playSegmentRef = useStateRef(playSegment); const isUnmountedRef = useRef(); useEffect(() => { @@ -189,7 +189,7 @@ const AnimatedSticker: FC = ({ animation.play(shouldRestart, viewId); } } - }, [animation, viewId]); + }, [animation, playRef, playSegmentRef, viewId]); const pauseAnimation = useCallback(() => { if (!animation) { @@ -242,7 +242,7 @@ const AnimatedSticker: FC = ({ if (!animation) { return; } - if (play || playSegment) { + if (canPlay) { if (isFrozen.current) { wasPlaying.current = true; } else { @@ -256,7 +256,7 @@ const AnimatedSticker: FC = ({ pauseAnimation(); } } - }, [animation, play, playSegment, noLoop, playAnimation, pauseAnimation]); + }, [animation, canPlay, noLoop, playAnimation, pauseAnimation]); useEffect(() => { if (animation) { @@ -269,11 +269,11 @@ const AnimatedSticker: FC = ({ } }, [playAnimation, animation, tgsUrl]); - useHeavyAnimationCheck(freezeAnimation, unfreezeAnimation, forceOnHeavyAnimation); + useHeavyAnimationCheck(freezeAnimation, unfreezeAnimation, !canPlay || forceOnHeavyAnimation); // Pausing frame may not happen in background, // so we need to make sure it happens right after focusing, // then we can play again. - useBackgroundMode(freezeAnimation, unfreezeAnimationOnRaf); + useBackgroundMode(freezeAnimation, unfreezeAnimationOnRaf, !canPlay); if (sharedCanvas) { return undefined; diff --git a/src/components/middle/message/hooks/useVideoAutoPause.ts b/src/components/middle/message/hooks/useVideoAutoPause.ts index f2ed86539..a673d62aa 100644 --- a/src/components/middle/message/hooks/useVideoAutoPause.ts +++ b/src/components/middle/message/hooks/useVideoAutoPause.ts @@ -31,8 +31,8 @@ export default function useVideoAutoPause(playerRef: { current: HTMLVideoElement fastRaf(unfreezePlaying); }, [unfreezePlaying]); - useBackgroundMode(freezePlaying, unfreezePlayingOnRaf); - useHeavyAnimationCheck(freezePlaying, unfreezePlaying); + useBackgroundMode(freezePlaying, unfreezePlayingOnRaf, !canPlay); + useHeavyAnimationCheck(freezePlaying, unfreezePlaying, !canPlay); const handlePlaying = useCallback(() => { if (!canPlayRef.current || isFrozenRef.current) { diff --git a/src/hooks/useBackgroundMode.ts b/src/hooks/useBackgroundMode.ts index c544280d2..5d2a57a01 100644 --- a/src/hooks/useBackgroundMode.ts +++ b/src/hooks/useBackgroundMode.ts @@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef } from '../lib/teact/teact'; export default function useBackgroundMode( onBlur?: AnyToVoidFunction, onFocus?: AnyToVoidFunction, + isDisabled = false, ) { const wasBlurred = useRef(false); const handleBlur = useCallback(() => { @@ -19,6 +20,10 @@ export default function useBackgroundMode( }, [onFocus]); useEffect(() => { + if (isDisabled) { + return undefined; + } + if (onBlur && !document.hasFocus()) { handleBlur(); } @@ -40,5 +45,5 @@ export default function useBackgroundMode( window.removeEventListener('blur', handleBlur); } }; - }, [handleBlur, handleFocus, onBlur, onFocus]); + }, [handleBlur, handleFocus, isDisabled, onBlur, onFocus]); }