1104-flatlist-gesture-handling-enhancement - small improvements

LunatiqueCoder · Aug 12, 2024 · c934f4c · c934f4c
1 parent 8d5a744
commit c934f4c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/packages/media-console/src/hooks/usePanResponders.tsx b/packages/media-console/src/hooks/usePanResponders.tsx
@@ -36,17 +36,29 @@ export const usePanResponders = ({
   onEnd,
   pan: {horizontal = true, inverted = false, parentList} = {},
 }: PanRespondersProps) => {
+  const {ref, scrollEnabled} = parentList || {};
+
   const enableParentScroll = () =>
-    parentList?.ref?.current?.setNativeProps({
-      scrollEnabled: parentList?.scrollEnabled,
-    });
+    ref?.current?.setNativeProps({scrollEnabled});
+
+  const disableParentScroll = () =>
+    ref?.current?.setNativeProps({scrollEnabled: false});
+
+  /**
+   * Options to make the video player work seamlessly within FlatLists or ScrollViews.
+   * @link https://github.com/LunatiqueCoder/react-native-media-console/issues/104
+   */
+  const parentScrollPanOptions = {
+    onPanResponderEnd: enableParentScroll,
+    onPanResponderTerminationRequest: () => false, // https://stackoverflow.com/a/76875305/14056591
+  };
 
   const volumePanResponder = PanResponder.create({
     onStartShouldSetPanResponder: () => true,
     onMoveShouldSetPanResponder: () => true,
     onPanResponderGrant: () => {
       clearControlTimeout();
-      parentList?.ref?.current?.setNativeProps({scrollEnabled: false});
+      disableParentScroll();
     },
     onPanResponderMove: (_evt, gestureState) => {
       const diff = horizontal ? gestureState.dx : gestureState.dy;
@@ -56,8 +68,7 @@ export const usePanResponders = ({
     onPanResponderRelease: () => {
       setControlTimeout();
     },
-    onPanResponderEnd: enableParentScroll,
-    onPanResponderTerminationRequest: () => false, // https://stackoverflow.com/a/76875305/14056591
+    ...parentScrollPanOptions,
   });
 
   const seekPanResponder = PanResponder.create({
@@ -68,7 +79,7 @@ export const usePanResponders = ({
       clearControlTimeout();
       const position = evt.nativeEvent.locationX;
       setSeekerPosition(position);
-      parentList?.ref?.current?.setNativeProps({scrollEnabled: false});
+      disableParentScroll();
     },
     onPanResponderMove: (_evt, gestureState) => {
       const diff = horizontal ? gestureState.dx : gestureState.dy;
@@ -87,8 +98,7 @@ export const usePanResponders = ({
       setSeeking(false);
       seek && seek(time);
     },
-    onPanResponderEnd: enableParentScroll,
-    onPanResponderTerminationRequest: () => false, // https://stackoverflow.com/a/76875305/14056591
+    ...parentScrollPanOptions,
   });
 
   useEffect(() => {

diff --git a/packages/media-console/src/types.ts b/packages/media-console/src/types.ts
@@ -276,15 +276,15 @@ export interface VideoPlayerProps extends ReactVideoProps {
     parentList?: {
       /**
        * Internally, `ref?.current?.setNativeProps({scrollEnabled: boolean});` is used in order
-       * to fix this issue:
+       * to make the video player work seamlessly within FlatLists or ScrollViews:
        * @link https://github.com/LunatiqueCoder/react-native-media-console/issues/104
        */
       ref: RefObject<FlatList | ScrollView>;
       /**
-       * Used to keep a consistency when using `ref?.current?.setNativeProps({scrollEnabled: boolean});`.
+       * Used to keep the state consistency when using `ref?.current?.setNativeProps({scrollEnabled: boolean});`.
        * @see ref
        */
-      scrollEnabled: boolean;
+      scrollEnabled?: boolean;
     };
   };
   /**