From 40930e07dc830b40d66b094b81bf0edd83acdc05 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Sat, 27 Nov 2021 17:41:04 +0100 Subject: [PATCH] Video: Fix auto-pausing during heavy animation and when in background --- src/components/middle/message/RoundVideo.tsx | 6 +-- src/components/middle/message/Video.tsx | 6 +-- ...auseOnInactive.ts => useVideoAutoPause.ts} | 38 +++++++++---------- src/hooks/useHeavyAnimationCheckForVideo.ts | 24 ------------ 4 files changed, 23 insertions(+), 51 deletions(-) rename src/components/middle/message/hooks/{usePauseOnInactive.ts => useVideoAutoPause.ts} (52%) delete mode 100644 src/hooks/useHeavyAnimationCheckForVideo.ts diff --git a/src/components/middle/message/RoundVideo.tsx b/src/components/middle/message/RoundVideo.tsx index e0bcde77..688e949e 100644 --- a/src/components/middle/message/RoundVideo.tsx +++ b/src/components/middle/message/RoundVideo.tsx @@ -22,9 +22,8 @@ import useShowTransition from '../../../hooks/useShowTransition'; import useMediaTransition from '../../../hooks/useMediaTransition'; import usePrevious from '../../../hooks/usePrevious'; import useBuffering from '../../../hooks/useBuffering'; -import useHeavyAnimationCheckForVideo from '../../../hooks/useHeavyAnimationCheckForVideo'; import useVideoCleanup from '../../../hooks/useVideoCleanup'; -import usePauseOnInactive from './hooks/usePauseOnInactive'; +import useVideoAutoPause from './hooks/useVideoAutoPause'; import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef'; import ProgressSpinner from '../../ui/ProgressSpinner'; @@ -155,8 +154,7 @@ const RoundVideo: FC = ({ } }, [shouldPlay]); - useHeavyAnimationCheckForVideo(playerRef, shouldPlay); - usePauseOnInactive(playerRef, Boolean(mediaData)); + useVideoAutoPause(playerRef, shouldPlay); useVideoCleanup(playerRef, [mediaData]); const handleClick = useCallback(() => { diff --git a/src/components/middle/message/Video.tsx b/src/components/middle/message/Video.tsx index e1de08b3..0ccb23cd 100644 --- a/src/components/middle/message/Video.tsx +++ b/src/components/middle/message/Video.tsx @@ -24,9 +24,8 @@ import useMedia from '../../../hooks/useMedia'; import useShowTransition from '../../../hooks/useShowTransition'; import usePrevious from '../../../hooks/usePrevious'; import useBuffering from '../../../hooks/useBuffering'; -import useHeavyAnimationCheckForVideo from '../../../hooks/useHeavyAnimationCheckForVideo'; import useVideoCleanup from '../../../hooks/useVideoCleanup'; -import usePauseOnInactive from './hooks/usePauseOnInactive'; +import useVideoAutoPause from './hooks/useVideoAutoPause'; import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef'; import ProgressSpinner from '../../ui/ProgressSpinner'; @@ -132,8 +131,7 @@ const Video: FC = ({ const isForwarded = isForwardedMessage(message); const { width, height } = dimensions || calculateVideoDimensions(video, isOwn, isForwarded, noAvatars); - useHeavyAnimationCheckForVideo(videoRef, Boolean(isInline && canAutoPlay)); - usePauseOnInactive(videoRef, isPlayAllowed); + useVideoAutoPause(videoRef, isInline); useVideoCleanup(videoRef, [isInline]); const handleClick = useCallback(() => { diff --git a/src/components/middle/message/hooks/usePauseOnInactive.ts b/src/components/middle/message/hooks/useVideoAutoPause.ts similarity index 52% rename from src/components/middle/message/hooks/usePauseOnInactive.ts rename to src/components/middle/message/hooks/useVideoAutoPause.ts index db01cf55..91d3fb02 100644 --- a/src/components/middle/message/hooks/usePauseOnInactive.ts +++ b/src/components/middle/message/hooks/useVideoAutoPause.ts @@ -1,16 +1,17 @@ import { useCallback, useRef } from '../../../../lib/teact/teact'; -import { fastRaf } from '../../../../util/schedulers'; -import useBackgroundMode from '../../../../hooks/useBackgroundMode'; -import safePlay from '../../../../util/safePlay'; -export default (playerRef: { current: HTMLVideoElement | null }, isPlayAllowed = false) => { - const wasPlaying = useRef(false); - const isFrozen = useRef(false); +import { fastRaf } from '../../../../util/schedulers'; +import safePlay from '../../../../util/safePlay'; +import useBackgroundMode from '../../../../hooks/useBackgroundMode'; +import useHeavyAnimationCheck from '../../../../hooks/useHeavyAnimationCheck'; + +export default function useVideoAutoPause(playerRef: { current: HTMLVideoElement | null }, canPlay: boolean) { + const wasPlaying = useRef(playerRef.current?.paused); + const canPlayRef = useRef(); + canPlayRef.current = canPlay; const freezePlaying = useCallback(() => { - isFrozen.current = true; - - if (!isPlayAllowed || !playerRef.current) { + if (!playerRef.current) { return; } @@ -19,25 +20,24 @@ export default (playerRef: { current: HTMLVideoElement | null }, isPlayAllowed = } playerRef.current.pause(); - }, [isPlayAllowed, playerRef]); + }, [playerRef]); const unfreezePlaying = useCallback(() => { - // At this point HTMLVideoElement can be unmounted from the DOM - if (isPlayAllowed && playerRef.current && wasPlaying.current && document.body.contains(playerRef.current)) { + if ( + playerRef.current && wasPlaying.current && canPlayRef.current + // At this point HTMLVideoElement can be unmounted from the DOM + && document.body.contains(playerRef.current) + ) { safePlay(playerRef.current); } wasPlaying.current = false; - isFrozen.current = false; - }, [isPlayAllowed, playerRef]); + }, [playerRef]); const unfreezePlayingOnRaf = useCallback(() => { fastRaf(unfreezePlaying); }, [unfreezePlaying]); - if (!document.hasFocus()) { - freezePlaying(); - } - useBackgroundMode(freezePlaying, unfreezePlayingOnRaf); -}; + useHeavyAnimationCheck(freezePlaying, unfreezePlaying); +} diff --git a/src/hooks/useHeavyAnimationCheckForVideo.ts b/src/hooks/useHeavyAnimationCheckForVideo.ts deleted file mode 100644 index 6ac03236..00000000 --- a/src/hooks/useHeavyAnimationCheckForVideo.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { RefObject } from 'react'; -import { useCallback, useRef } from '../lib/teact/teact'; - -import useHeavyAnimationCheck from './useHeavyAnimationCheck'; -import safePlay from '../util/safePlay'; - -export default function useHeavyAnimationCheckForVideo(playerRef: RefObject, shouldPlay: boolean) { - const shouldPlayRef = useRef(); - shouldPlayRef.current = shouldPlay; - - const pause = useCallback(() => { - if (playerRef.current) { - playerRef.current.pause(); - } - }, [playerRef]); - - const play = useCallback(() => { - if (playerRef.current && shouldPlayRef.current) { - safePlay(playerRef.current); - } - }, [playerRef]); - - useHeavyAnimationCheck(pause, play); -}