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');
useVideoAutoPause(videoRef, shouldPlayVideo);
const { handlePlaying } = useVideoAutoPause(videoRef, shouldPlayVideo);
useVideoCleanup(videoRef, [shouldPlayVideo]);
useEffect(() => {
@ -170,6 +170,7 @@ const Avatar: FC<OwnProps> = ({
autoPlay
disablePictureInPicture
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();
canPlayRef.current = canPlay;
const isFrozenRef = useRef();
const freezePlaying = useCallback(() => {
isFrozenRef.current = true;
if (!playerRef.current) {
return;
}
@ -23,6 +27,8 @@ export default function useVideoAutoPause(playerRef: { current: HTMLVideoElement
}, [playerRef]);
const unfreezePlaying = useCallback(() => {
isFrozenRef.current = false;
if (
playerRef.current && wasPlaying.current && canPlayRef.current
// At this point HTMLVideoElement can be unmounted from the DOM
@ -38,4 +44,13 @@ export default function useVideoAutoPause(playerRef: { current: HTMLVideoElement
useBackgroundMode(freezePlaying, unfreezePlayingOnRaf);
useHeavyAnimationCheck(freezePlaying, unfreezePlaying);
const handlePlaying = useCallback(() => {
if (isFrozenRef.current) {
wasPlaying.current = true;
playerRef.current!.pause();
}
}, [playerRef]);
return { handlePlaying };
}