react-native-media-console+2.2.4.patch

Fix the issue interaction handle is not cleared after changing volume or seek bar. TODO: remove this if this issue is fixed: https://github.com/LunatiqueCoder/react-native-media-console/issues/124

diff --git a/node_modules/react-native-media-console/src/hooks/usePanResponders.tsx b/node_modules/react-native-media-console/src/hooks/usePanResponders.tsx
index e9618d3..669cd47 100644
--- a/node_modules/react-native-media-console/src/hooks/usePanResponders.tsx
+++ b/node_modules/react-native-media-console/src/hooks/usePanResponders.tsx
@@ -1,4 +1,4 @@
-import {Dispatch, SetStateAction, useEffect} from 'react';
+import { Dispatch, SetStateAction, useEffect, useMemo, useRef } from 'react'
 import {PanResponder} from 'react-native';
 
 interface PanRespondersProps {
@@ -20,56 +20,56 @@ interface PanRespondersProps {
   inverted?: boolean;
 }
 
-export const usePanResponders = ({
-  duration,
-  seekerOffset,
-  volumeOffset,
-  loading,
-  seeking,
-  seekerPosition,
-  seek,
-  seekerWidth,
-  clearControlTimeout,
-  setVolumePosition,
-  setSeekerPosition,
-  setSeeking,
-  setControlTimeout,
-  onEnd,
-  horizontal = true,
-  inverted = false,
-}: PanRespondersProps) => {
-  const volumePanResponder = PanResponder.create({
+export const usePanResponders = (props: PanRespondersProps) => {
+  const optionsRef = useRef(props)
+  useEffect(() => {
+    optionsRef.current = props
+  }, [props])
+  const volumeOffsetWhenPanResponderStartRef = useRef<number>(props.volumeOffset)
+  const seekerOffsetWhenPanResponderStartRef = useRef<number>(props.seekerOffset)
+
+  const volumePanResponder = useMemo(()=>PanResponder.create({
     onStartShouldSetPanResponder: () => true,
     onMoveShouldSetPanResponder: () => true,
     onPanResponderGrant: () => {
-      clearControlTimeout();
+      optionsRef.current.clearControlTimeout();
+    },
+    onPanResponderStart:()=>{
+      volumeOffsetWhenPanResponderStartRef.current = optionsRef.current.volumeOffset;
     },
     onPanResponderMove: (_evt, gestureState) => {
+      const {setVolumePosition, horizontal= true, inverted=false} = optionsRef.current;
+      const volumeOffset = volumeOffsetWhenPanResponderStartRef.current;
       const diff = horizontal ? gestureState.dx : gestureState.dy;
       const position = volumeOffset + diff * (inverted ? -1 : 1);
       setVolumePosition(position);
     },
     onPanResponderRelease: () => {
-      setControlTimeout();
+      optionsRef.current.setControlTimeout();
     },
-  });
+  }), []);
 
-  const seekPanResponder = PanResponder.create({
+  const seekPanResponder = useMemo(()=>PanResponder.create({
     onStartShouldSetPanResponder: () => true,
     onMoveShouldSetPanResponder: () => true,
     onPanResponderGrant: (evt) => {
+      const {setSeeking,clearControlTimeout, setSeekerPosition } = optionsRef.current;
       setSeeking(true);
       clearControlTimeout();
       const position = evt.nativeEvent.locationX;
       setSeekerPosition(position);
     },
+    onPanResponderStart: ()=>{seekerOffsetWhenPanResponderStartRef.current = optionsRef.current.seekerOffset},
     onPanResponderMove: (_evt, gestureState) => {
+      const {setSeekerPosition, setSeeking, horizontal=true, inverted=false} = optionsRef.current
+      const seekerOffset = seekerOffsetWhenPanResponderStartRef.current;
       const diff = horizontal ? gestureState.dx : gestureState.dy;
       const position = seekerOffset + diff * (inverted ? -1 : 1);
       setSeekerPosition(position);
       setSeeking(true);
     },
     onPanResponderRelease: () => {
+      const {seekerPosition, seekerWidth, duration, loading,onEnd, seek, setSeeking} = optionsRef.current
       const percent = seekerPosition / seekerWidth;
       const time = duration * percent;
 
@@ -82,15 +82,16 @@ export const usePanResponders = ({
       setSeeking(false);
       seek && seek(time);
     },
-  });
+  }), []);
 
   useEffect(() => {
-    if (seeking) {
-      const percent = seekerPosition / seekerWidth;
-      const time = duration * percent;
-      seek && seek(time);
+    if (props.seeking) {
+      const percent = props.seekerPosition / props.seekerWidth;
+      const time = props.duration * percent;
+      props.seek && props.seek(time);
     }
-  }, [duration, seek, seekerPosition, seekerWidth, seeking]);
+  }, [props.duration, props.seek, props.seekerPosition, props.seekerWidth, props.seeking]);
 
   return {volumePanResponder, seekPanResponder};
 };
+