diff options
| -rw-r--r-- | src/components/moments/MomentPost.tsx | 18 |
1 files changed, 13 insertions, 5 deletions
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 921f7693..52b99d58 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -1,4 +1,4 @@ -import {useNavigation} from '@react-navigation/native'; +import {useIsFocused, useNavigation} from '@react-navigation/native'; import React, {useContext, useEffect, useMemo, useRef, useState} from 'react'; import { Image, @@ -93,7 +93,14 @@ const MomentPost: React.FC<MomentPostProps> = ({ ); const mediaHeight = SCREEN_WIDTH / aspectRatio; const [isVideoPaused, setIsVideoPaused] = useState<boolean>(false); + const screenIsFocused = useIsFocused(); const videoProgress = useSharedValue(0); + + // update play/pause icon based on video pause state + useEffect(() => { + setFadeValue(new Animated.Value(isVideoPaused ? 1 : 0)); + }, [isVideoPaused]); + /* * Load tags on initial render to pass tags data to moment header and content */ @@ -228,7 +235,11 @@ const MomentPost: React.FC<MomentPostProps> = ({ const {width, height} = response.naturalSize; setAspectRatio(width / height); }} - paused={moment.moment_id !== currentVisibleMomentId || isVideoPaused} + paused={ + moment.moment_id !== currentVisibleMomentId || + isVideoPaused || + !screenIsFocused + } onProgress={({currentTime, seekableDuration}) => { const localProgress = currentTime / seekableDuration; if (!isNaN(localProgress)) { @@ -294,9 +305,6 @@ const MomentPost: React.FC<MomentPostProps> = ({ onPress={() => { if (isVideo) { setIsVideoPaused(!isVideoPaused); - isVideoPaused - ? setFadeValue(new Animated.Value(0)) - : setFadeValue(new Animated.Value(1)); } else { setTagsVisible(!tagsVisible); setFadeValue(new Animated.Value(0)); |