danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-11-30 04:39:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

[Perf] Avatar: Fix playing during heavy animation

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-09-14 01:35:48 +02:00
parent ed5d716897
commit bede0ba5ab
2 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/common/Avatar.tsx
View File

@ -114,7 +114,7 @@ const Avatar: FC<OwnProps> = ({
const { transitionClassNames } = useShowTransition(hasBlobUrl, undefined, hasBlobUrl, 'slow'); const { transitionClassNames } = useShowTransition(hasBlobUrl, undefined, hasBlobUrl, 'slow');
useVideoAutoPause(videoRef, shouldPlayVideo); const { handlePlaying } = useVideoAutoPause(videoRef, shouldPlayVideo);
useVideoCleanup(videoRef, [shouldPlayVideo]); useVideoCleanup(videoRef, [shouldPlayVideo]);
useEffect(() => { useEffect(() => {
@ -170,6 +170,7 @@ const Avatar: FC<OwnProps> = ({
autoPlay autoPlay
disablePictureInPicture disablePictureInPicture
playsInline playsInline
onPlaying={handlePlaying}
/> />
)} )}
</> </>

15
src/components/middle/message/hooks/useVideoAutoPause.ts
View File

@ -10,7 +10,11 @@ export default function useVideoAutoPause(playerRef: { current: HTMLVideoElement
const canPlayRef = useRef(); const canPlayRef = useRef();
canPlayRef.current = canPlay; canPlayRef.current = canPlay;
const isFrozenRef = useRef();
const freezePlaying = useCallback(() => { const freezePlaying = useCallback(() => {
isFrozenRef.current = true;
if (!playerRef.current) { if (!playerRef.current) {
return; return;
} }
@ -23,6 +27,8 @@ export default function useVideoAutoPause(playerRef: { current: HTMLVideoElement
}, [playerRef]); }, [playerRef]);
const unfreezePlaying = useCallback(() => { const unfreezePlaying = useCallback(() => {
isFrozenRef.current = false;
if ( if (
playerRef.current && wasPlaying.current && canPlayRef.current playerRef.current && wasPlaying.current && canPlayRef.current
// At this point HTMLVideoElement can be unmounted from the DOM // At this point HTMLVideoElement can be unmounted from the DOM
@ -38,4 +44,13 @@ export default function useVideoAutoPause(playerRef: { current: HTMLVideoElement
useBackgroundMode(freezePlaying, unfreezePlayingOnRaf); useBackgroundMode(freezePlaying, unfreezePlayingOnRaf);
useHeavyAnimationCheck(freezePlaying, unfreezePlaying); useHeavyAnimationCheck(freezePlaying, unfreezePlaying);
const handlePlaying = useCallback(() => {
if (isFrozenRef.current) {
wasPlaying.current = true;
playerRef.current!.pause();
}
}, [playerRef]);
return { handlePlaying };
} }