Add logic to pause video when not visible

2 files changed, 18 insertions, 2 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 770cdcee..e6bb5405 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -72,7 +72,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
   const [momentTagId, setMomentTagId] = useState<string>('');
 
   const imageRef = useRef(null);
-  const {keyboardVisible} = useContext(MomentContext);
+  const {keyboardVisible, currentVisibleMomentId} = useContext(MomentContext);
   const isVideo = !(
     moment.moment_url.endsWith('jpg') ||
     moment.moment_url.endsWith('JPG') ||
@@ -213,6 +213,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
                   const {width, height} = response.naturalSize;
                   setAspectRatio(width / height);
                 }}
+                paused={moment.moment_id !== currentVisibleMomentId}
               />
             </View>
           ) : (
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index ca31ad5b..7944c336 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,7 +1,7 @@
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useRef, useState} from 'react';
-import {FlatList, Keyboard} from 'react-native';
+import {FlatList, Keyboard, ViewToken} from 'react-native';
 import {useSelector} from 'react-redux';
 import {MomentPost, TabsGradient} from '../../components';
 import {AVATAR_DIM} from '../../constants';
@@ -17,6 +17,7 @@ import {isIPhoneX} from '../../utils';
 type MomentContextType = {
   keyboardVisible: boolean;
   scrollTo: (index: number) => void;
+  currentVisibleMomentId: string | undefined;
 };
 
 export const MomentContext = React.createContext({} as MomentContextType);
@@ -48,6 +49,18 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
   );
   const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
   const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const [currentVisibleMomentId, setCurrentVisibleMomentId] = useState<
+    string | undefined
+  >();
+  // https://stackoverflow.com/a/57502343
+  const viewabilityConfigCallback = useRef(
+    (info: {viewableItems: ViewToken[]; changed: ViewToken[]}) => {
+      const index = info.viewableItems[0].index;
+      if (index !== null) {
+        setCurrentVisibleMomentId(momentData[index].moment_id);
+      }
+    },
+  );
 
   useEffect(() => {
     const showKeyboard = () => setKeyboardVisible(true);
@@ -74,6 +87,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
       value={{
         keyboardVisible,
         scrollTo,
+        currentVisibleMomentId,
       }}>
       <FlatList
         ref={scrollRef}
@@ -89,6 +103,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
         keyExtractor={(item, _) => item.moment_id}
         showsVerticalScrollIndicator={false}
         initialScrollIndex={initialIndex}
+        onViewableItemsChanged={viewabilityConfigCallback.current}
         onScrollToIndexFailed={(info) => {
           setTimeout(() => {
             scrollRef.current?.scrollToIndex({