Merge pull request #134 from SimformSolutionsPvtLtd/fix/UNT-T30467_seek_on_tap_functionality

fix(UNT-T30467): seek on tap functionality

Author: mukesh-simform

example/src/App.tsx

@@ -68,11 +68,17 @@ const RenderListItem = React.memo(
     const handleButtonAction = () => {
       if (playerState === PlayerState.stopped) {
         setCurrentPlaying(item.path);
+      } else if (playerState === PlayerState.playing) {
+        ref.current?.pausePlayer();
       } else {
-        setCurrentPlaying('');
+        ref.current?.resumePlayer();
       }
     };
 
+    const handleStopAction = () => {
+      setCurrentPlaying('');
+    };
+
     useEffect(() => {
       if (currentPlaying !== item.path) {
         ref.current?.stopPlayer();
@@ -90,19 +96,38 @@ const RenderListItem = React.memo(
               onPress={handleButtonAction}
               style={styles.playBackControlPressable}>
               {isLoading ? (
-                <ActivityIndicator color={'#FF0000'} />
+                <ActivityIndicator color={'#FFFFFF'} />
               ) : (
                 <FastImage
                   source={
-                    playerState === PlayerState.stopped
+                    playerState !== PlayerState.playing
                       ? Icons.play
-                      : Icons.stop
+                      : Icons.pause
                   }
                   style={styles.buttonImage}
                   resizeMode="contain"
                 />
               )}
             </Pressable>
+            <Pressable
+              disabled={PlayerState.stopped == playerState}
+              onPress={handleStopAction}
+              style={styles.playBackControlPressable}>
+              {isLoading ? (
+                <ActivityIndicator color={'#FFFFFF'} />
+              ) : (
+                <FastImage
+                  source={Icons.stop}
+                  style={[
+                    styles.stopButton,
+                    {
+                      opacity: playerState === PlayerState.stopped ? 0.5 : 1,
+                    },
+                  ]}
+                  resizeMode="contain"
+                />
+              )}
+            </Pressable>
             <Waveform
               containerStyle={styles.staticWaveformView}
               mode="static"

example/src/assets/icons/index.ts

@@ -5,4 +5,5 @@ export const Icons = {
   mic: require('./mic.png'),
   logo: require('./logo.png'),
   delete: require('./delete.png'),
+  pause: require('./pause.png'),
 };

example/src/assets/icons/pause.png

@@ -54,6 +54,11 @@ const styles = (params: StyleSheetParams = {}) =>
       tintColor: Colors.white,
       alignSelf: 'flex-end',
     },
+    stopButton: {
+      height: scale(22),
+      width: scale(22),
+      alignSelf: 'center',
+    },
     pinkButtonImage: {
       height: scale(22),
       width: scale(22),

example/src/styles.ts

@@ -67,6 +67,7 @@ export const Waveform = forwardRef<IWaveformRef, IWaveform>((props, ref) => {
   const viewRef = useRef<View>(null);
   const scrollRef = useRef<ScrollView>(null);
   const isLayoutCalculated = useRef<boolean>(false);
+  const isAutoPaused = useRef<boolean>(false);
   const [waveform, setWaveform] = useState<number[]>([]);
   const [viewLayout, setViewLayout] = useState<LayoutRectangle | null>(null);
   const [seekPosition, setSeekPosition] = useState<NativeTouchEvent | null>(
@@ -518,11 +519,14 @@ export const Waveform = forwardRef<IWaveformRef, IWaveform>((props, ref) => {
     if (panMoving) {
       if (playerState === PlayerState.playing) {
         pausePlayerAction();
+        isAutoPaused.current = true;
       }
     } else {
-      if (playerState === PlayerState.paused) {
+      if (playerState === PlayerState.paused && isAutoPaused.current) {
         startPlayerAction();
       }
+
+      isAutoPaused.current = false;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [panMoving]);
@@ -559,6 +563,11 @@ export const Waveform = forwardRef<IWaveformRef, IWaveform>((props, ref) => {
         (onPanStateChange as Function)(false);
         setPanMoving(false);
       },
+      onPanResponderRelease: e => {
+        setSeekPosition(e.nativeEvent);
+        (onPanStateChange as Function)(false);
+        setPanMoving(false);
+      },
     })
   ).current;