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

Video: Fix auto-pausing during heavy animation and when in background

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-11-27 17:41:04 +01:00
parent eed0934c0a
commit 40930e07dc
4 changed files with 23 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/middle/message/RoundVideo.tsx
View File

@ -22,9 +22,8 @@ import useShowTransition from '../../../hooks/useShowTransition';
import useMediaTransition from '../../../hooks/useMediaTransition'; import useMediaTransition from '../../../hooks/useMediaTransition';
import usePrevious from '../../../hooks/usePrevious'; import usePrevious from '../../../hooks/usePrevious';
import useBuffering from '../../../hooks/useBuffering'; import useBuffering from '../../../hooks/useBuffering';
import useHeavyAnimationCheckForVideo from '../../../hooks/useHeavyAnimationCheckForVideo';
import useVideoCleanup from '../../../hooks/useVideoCleanup'; import useVideoCleanup from '../../../hooks/useVideoCleanup';
import usePauseOnInactive from './hooks/usePauseOnInactive'; import useVideoAutoPause from './hooks/useVideoAutoPause';
import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef'; import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef';
import ProgressSpinner from '../../ui/ProgressSpinner'; import ProgressSpinner from '../../ui/ProgressSpinner';
@ -155,8 +154,7 @@ const RoundVideo: FC<OwnProps> = ({
} }
}, [shouldPlay]); }, [shouldPlay]);
useHeavyAnimationCheckForVideo(playerRef, shouldPlay); useVideoAutoPause(playerRef, shouldPlay);
usePauseOnInactive(playerRef, Boolean(mediaData));
useVideoCleanup(playerRef, [mediaData]); useVideoCleanup(playerRef, [mediaData]);
const handleClick = useCallback(() => { const handleClick = useCallback(() => {

6
src/components/middle/message/Video.tsx
View File

@ -24,9 +24,8 @@ import useMedia from '../../../hooks/useMedia';
import useShowTransition from '../../../hooks/useShowTransition'; import useShowTransition from '../../../hooks/useShowTransition';
import usePrevious from '../../../hooks/usePrevious'; import usePrevious from '../../../hooks/usePrevious';
import useBuffering from '../../../hooks/useBuffering'; import useBuffering from '../../../hooks/useBuffering';
import useHeavyAnimationCheckForVideo from '../../../hooks/useHeavyAnimationCheckForVideo';
import useVideoCleanup from '../../../hooks/useVideoCleanup'; import useVideoCleanup from '../../../hooks/useVideoCleanup';
import usePauseOnInactive from './hooks/usePauseOnInactive'; import useVideoAutoPause from './hooks/useVideoAutoPause';
import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef'; import useBlurredMediaThumbRef from './hooks/useBlurredMediaThumbRef';
import ProgressSpinner from '../../ui/ProgressSpinner'; import ProgressSpinner from '../../ui/ProgressSpinner';
@ -132,8 +131,7 @@ const Video: FC<OwnProps> = ({
const isForwarded = isForwardedMessage(message); const isForwarded = isForwardedMessage(message);
const { width, height } = dimensions || calculateVideoDimensions(video, isOwn, isForwarded, noAvatars); const { width, height } = dimensions || calculateVideoDimensions(video, isOwn, isForwarded, noAvatars);
useHeavyAnimationCheckForVideo(videoRef, Boolean(isInline && canAutoPlay)); useVideoAutoPause(videoRef, isInline);
usePauseOnInactive(videoRef, isPlayAllowed);
useVideoCleanup(videoRef, [isInline]); useVideoCleanup(videoRef, [isInline]);
const handleClick = useCallback(() => { const handleClick = useCallback(() => {

38
src/components/middle/message/hooks/usePauseOnInactive.ts → src/components/middle/message/hooks/useVideoAutoPause.ts
View File

@ -1,16 +1,17 @@
import { useCallback, useRef } from '../../../../lib/teact/teact'; 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) => { import { fastRaf } from '../../../../util/schedulers';
const wasPlaying = useRef(false); import safePlay from '../../../../util/safePlay';
const isFrozen = useRef(false); 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(() => { const freezePlaying = useCallback(() => {
isFrozen.current = true; if (!playerRef.current) {
if (!isPlayAllowed || !playerRef.current) {
return; return;
} }
@ -19,25 +20,24 @@ export default (playerRef: { current: HTMLVideoElement | null }, isPlayAllowed =
} }
playerRef.current.pause(); playerRef.current.pause();
}, [isPlayAllowed, playerRef]); }, [playerRef]);
const unfreezePlaying = useCallback(() => { const unfreezePlaying = useCallback(() => {
// At this point HTMLVideoElement can be unmounted from the DOM if (
if (isPlayAllowed && playerRef.current && wasPlaying.current && document.body.contains(playerRef.current)) { playerRef.current && wasPlaying.current && canPlayRef.current
// At this point HTMLVideoElement can be unmounted from the DOM
&& document.body.contains(playerRef.current)
) {
safePlay(playerRef.current); safePlay(playerRef.current);
} }
wasPlaying.current = false; wasPlaying.current = false;
isFrozen.current = false; }, [playerRef]);
}, [isPlayAllowed, playerRef]);
const unfreezePlayingOnRaf = useCallback(() => { const unfreezePlayingOnRaf = useCallback(() => {
fastRaf(unfreezePlaying); fastRaf(unfreezePlaying);
}, [unfreezePlaying]); }, [unfreezePlaying]);
if (!document.hasFocus()) {
freezePlaying();
}
useBackgroundMode(freezePlaying, unfreezePlayingOnRaf); useBackgroundMode(freezePlaying, unfreezePlayingOnRaf);
}; useHeavyAnimationCheck(freezePlaying, unfreezePlaying);
}

24
src/hooks/useHeavyAnimationCheckForVideo.ts
View File

@ -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<HTMLVideoElement>, 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);
}