From d14a1933276d82f68581be6236e1bc47e69611e6 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 27 Jul 2021 16:14:14 -0400
Subject: Pause video when out of focus

---
 src/components/moments/MomentPost.tsx | 27 ++++++++++++++++++++++-----
 1 file 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));
-- 
cgit v1.2.3-70-g09d2


From 9c5dd791bb2fdd8197c6d0f34b7030dff839429d Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 29 Jul 2021 14:39:55 -0400
Subject: Use useIsFocused

---
 src/components/moments/MomentPost.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 5b71c64b..f4970f1e 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -1,4 +1,8 @@
-import {useFocusEffect, useNavigation} from '@react-navigation/native';
+import {
+  useFocusEffect,
+  useIsFocused,
+  useNavigation,
+} from '@react-navigation/native';
 import React, {
   useCallback,
   useContext,
@@ -100,15 +104,9 @@ const MomentPost: React.FC<MomentPostProps> = ({
   );
   const mediaHeight = SCREEN_WIDTH / aspectRatio;
   const [isVideoPaused, setIsVideoPaused] = useState<boolean>(false);
+  const screenIsFocused = useIsFocused();
   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));
@@ -248,7 +246,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)) {
-- 
cgit v1.2.3-70-g09d2


From 8974d48777d46aa8edb8857d892773c85dcd5efe Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 29 Jul 2021 14:40:17 -0400
Subject: Lint

---
 src/components/moments/MomentPost.tsx | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index f4970f1e..52b99d58 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -1,16 +1,5 @@
-import {
-  useFocusEffect,
-  useIsFocused,
-  useNavigation,
-} from '@react-navigation/native';
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import {useIsFocused, useNavigation} from '@react-navigation/native';
+import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {
   Image,
   Keyboard,
-- 
cgit v1.2.3-70-g09d2