Pause video when out of focus

1 files changed, 22 insertions, 5 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 921f7693..5b71c64b 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -1,5 +1,12 @@
-import {useNavigation} from '@react-navigation/native';
-import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {useFocusEffect, useNavigation} from '@react-navigation/native';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   Image,
   Keyboard,
@@ -94,6 +101,19 @@ const MomentPost: React.FC<MomentPostProps> = ({
   const mediaHeight = SCREEN_WIDTH / aspectRatio;
   const [isVideoPaused, setIsVideoPaused] = useState<boolean>(false);
   const videoProgress = useSharedValue(0);
+
+  // pause video when out of focus
+  useFocusEffect(
+    useCallback(() => {
+      return () => setIsVideoPaused(true);
+    }, []),
+  );
+
+  // 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
    */
@@ -294,9 +314,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));