diff --git a/ios/tooot/Info.plist b/ios/tooot/Info.plist index e325df39..33e171e2 100644 --- a/ios/tooot/Info.plist +++ b/ios/tooot/Info.plist @@ -50,8 +50,6 @@ - NSMicrophoneUsageDescription - $(PRODUCT_NAME) DOES NOT need microphone permission. Please reject this request. NSCameraUsageDescription Allow $(PRODUCT_NAME) to capture photo or video and attach it to your toot NSLocationWhenInUseUsageDescription diff --git a/src/components/Timeline/Shared/Attachment/Video.tsx b/src/components/Timeline/Shared/Attachment/Video.tsx index 35ad16e9..4c204716 100644 --- a/src/components/Timeline/Shared/Attachment/Video.tsx +++ b/src/components/Timeline/Shared/Attachment/Video.tsx @@ -1,8 +1,14 @@ import Button from '@components/Button' import { StyleConstants } from '@utils/styles/constants' import { Video } from 'expo-av' -import React, { useCallback, useRef, useState } from 'react' -import { Pressable, StyleSheet, View } from 'react-native' +import React, { useCallback, useEffect, useRef, useState } from 'react' +import { + AppState, + AppStateStatus, + Pressable, + StyleSheet, + View +} from 'react-native' import { Blurhash } from 'react-native-blurhash' import attachmentAspectRatio from './aspectRatio' import analytics from '@components/analytics' @@ -45,15 +51,43 @@ const AttachmentVideo: React.FC = ({ videoPlayer.current?.setOnPlaybackStatusUpdate(props => { if (props.isLoaded) { setVideoLoaded(true) - } - // @ts-ignore - if (props.positionMillis) { - // @ts-ignore - setVideoPosition(props.positionMillis) + if (props.positionMillis) { + setVideoPosition(props.positionMillis) + } } }) }, [videoLoaded, videoPosition]) + const appState = useRef(AppState.currentState) + useEffect(() => { + AppState.addEventListener('change', _handleAppStateChange) + + return () => { + AppState.removeEventListener('change', _handleAppStateChange) + } + }, []) + const _handleAppStateChange = async (nextAppState: AppStateStatus) => { + if (appState.current.match(/active/) && nextAppState.match(/inactive/)) { + await videoPlayer.current?.pauseAsync() + } else if ( + gifv && + appState.current.match(/background/) && + nextAppState.match(/active/) + ) { + await videoPlayer.current?.setIsMutedAsync(true) + await videoPlayer.current?.playAsync() + } + + appState.current = nextAppState + } + + const playerStatus = useRef(null) + useEffect(() => { + videoPlayer.current?.setOnPlaybackStatusUpdate(playbackStatus => { + playerStatus.current = playbackStatus + }) + }, []) + return ( = ({ posterStyle: { resizeMode: 'cover' } })} useNativeControls={false} - onFullscreenUpdate={event => { + onFullscreenUpdate={async event => { if ( event.fullscreenUpdate === Video.FULLSCREEN_UPDATE_PLAYER_DID_DISMISS ) { if (gifv) { - videoPlayer.current?.setIsLoopingAsync(true) - videoPlayer.current?.playAsync() + await videoPlayer.current?.pauseAsync() } else { - videoPlayer.current?.pauseAsync() + await videoPlayer.current?.pauseAsync() } } }} @@ -108,7 +141,7 @@ const AttachmentVideo: React.FC = ({ }} /> ) : null - ) : !gifv ? ( + ) : !gifv || (gifv && playerStatus.current === false) ? (