Merge pull request #534 from IvanIFChen/tma1023-pause-video-out-of-focus

[TMA-1023] Pause Video In Background

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));