Merge pull request #123 from dprevost-LMI/stop-only-the-playing-player

fix: stop only the current player and not all players

Author: mukesh-simform

example/src/App.tsx

@@ -44,18 +44,15 @@ import { Colors } from './theme';
 import FastImage from 'react-native-fast-image';
 import fs from 'react-native-fs';
 
+let currentPlayingRef: React.RefObject<IWaveformRef> | undefined;
 const RenderListItem = React.memo(
   ({
     item,
-    currentPlaying,
-    setCurrentPlaying,
     onPanStateChange,
     currentPlaybackSpeed,
     changeSpeed,
   }: {
     item: ListItem;
-    currentPlaying: string;
-    setCurrentPlaying: Dispatch<SetStateAction<string>>;
     onPanStateChange: (value: boolean) => void;
     currentPlaybackSpeed: PlaybackSpeedType;
     changeSpeed: () => void;
@@ -65,35 +62,57 @@ const RenderListItem = React.memo(
     const styles = stylesheet({ currentUser: item.fromCurrentUser });
     const [isLoading, setIsLoading] = useState(true);
 
-    const handleButtonAction = () => {
-      if (playerState === PlayerState.stopped) {
-        setCurrentPlaying(item.path);
-      } else if (playerState === PlayerState.playing) {
-        ref.current?.pausePlayer();
-      } else {
-        ref.current?.resumePlayer();
+    const handlePlayPauseAction = async () => {
+      // If we are recording do nothing
+      if (
+        currentPlayingRef?.current?.currentState === RecorderState.recording
+      ) {
+        return;
       }
-    };
 
-    const handleStopAction = () => {
-      setCurrentPlaying('');
-    };
+      const startNewPlayer = async () => {
+        currentPlayingRef = ref;
+        if (ref.current?.currentState === PlayerState.paused) {
+          await ref.current?.resumePlayer();
+        } else {
+          await ref.current?.startPlayer({
+            finishMode: FinishMode.stop,
+          });
+        }
+      };
 
-    useEffect(() => {
-      if (currentPlaying !== item.path) {
-        ref.current?.stopPlayer();
+      // If no player or if current player is stopped just start the new player!
+      if (
+        currentPlayingRef == null ||
+        [PlayerState.stopped, PlayerState.paused].includes(
+          currentPlayingRef?.current?.currentState as PlayerState
+        )
+      ) {
+        await startNewPlayer();
       } else {
-        ref.current?.startPlayer({ finishMode: FinishMode.stop });
+        // Pause current player if it was playing
+        if (currentPlayingRef?.current?.currentState === PlayerState.playing) {
+          await currentPlayingRef?.current?.pausePlayer();
+        }
+
+        // Start player when it is a different one!
+        if (currentPlayingRef?.current?.playerKey !== ref?.current?.playerKey) {
+          await startNewPlayer();
+        }
       }
-    }, [currentPlaying]);
+    };
+
+    const handleStopAction = async () => {
+      ref.current?.stopPlayer();
+    };
 
     return (
       <View key={item.path} style={[styles.listItemContainer]}>
         <View style={styles.listItemWidth}>
           <View style={[styles.buttonContainer]}>
             <Pressable
               disabled={isLoading}
-              onPress={handleButtonAction}
+              onPress={handlePlayPauseAction}
               style={styles.playBackControlPressable}>
               {isLoading ? (
                 <ActivityIndicator color={'#FFFFFF'} />
@@ -140,25 +159,14 @@ const RenderListItem = React.memo(
               scrubColor={Colors.white}
               waveColor={Colors.lightWhite}
               candleHeightScale={4}
-              onPlayerStateChange={state => {
-                setPlayerState(state);
-                if (
-                  state === PlayerState.stopped &&
-                  currentPlaying === item.path
-                ) {
-                  setCurrentPlaying('');
-                }
-              }}
+              onPlayerStateChange={setPlayerState}
               onPanStateChange={onPanStateChange}
               onError={error => {
                 console.log(error, 'we are in example');
               }}
               onCurrentProgressChange={(currentProgress, songDuration) => {
                 console.log(
-                  'currentProgress ',
-                  currentProgress,
-                  'songDuration ',
-                  songDuration
+                  `currentProgress ${currentProgress}, songDuration ${songDuration}`
                 );
               }}
               onChangeWaveformLoadState={state => {
@@ -203,13 +211,20 @@ const LivePlayerComponent = ({
 
   const handleRecorderAction = async () => {
     if (recorderState === RecorderState.stopped) {
-      let hasPermission = await checkHasAudioRecorderPermission();
+      // Stopping other player before starting recording
+      if (currentPlayingRef?.current?.currentState === PlayerState.playing) {
+        currentPlayingRef?.current?.stopPlayer();
+      }
+
+      const hasPermission = await checkHasAudioRecorderPermission();
 
       if (hasPermission === PermissionStatus.granted) {
+        currentPlayingRef = ref;
         startRecording();
       } else if (hasPermission === PermissionStatus.undetermined) {
         const permissionStatus = await getAudioRecorderPermission();
         if (permissionStatus === PermissionStatus.granted) {
+          currentPlayingRef = ref;
           startRecording();
         }
       } else {
@@ -219,6 +234,7 @@ const LivePlayerComponent = ({
       ref.current?.stopRecord().then(path => {
         setList(prev => [...prev, { fromCurrentUser: true, path }]);
       });
+      currentPlayingRef = undefined;
     }
   };
 
@@ -250,7 +266,6 @@ const LivePlayerComponent = ({
 
 const AppContainer = () => {
   const [shouldScroll, setShouldScroll] = useState<boolean>(true);
-  const [currentPlaying, setCurrentPlaying] = useState<string>('');
   const [list, setList] = useState<ListItem[]>([]);
   const [nbOfRecording, setNumberOfRecording] = useState<number>(0);
   const [currentPlaybackSpeed, setCurrentPlaybackSpeed] =
@@ -350,8 +365,6 @@ const AppContainer = () => {
               {list.map(item => (
                 <RenderListItem
                   key={item.path}
-                  currentPlaying={currentPlaying}
-                  setCurrentPlaying={setCurrentPlaying}
                   item={item}
                   onPanStateChange={value => setShouldScroll(!value)}
                   {...{ currentPlaybackSpeed, changeSpeed }}

src/components/Waveform/Waveform.tsx

@@ -586,6 +586,8 @@ export const Waveform = forwardRef<IWaveformRef, IWaveform>((props, ref) => {
     pauseRecord: pauseRecordingAction,
     stopRecord: stopRecordingAction,
     resumeRecord: resumeRecordingAction,
+    currentState: mode === 'static' ? playerState : recorderState,
+    playerKey: path,
   }));
 
   return (

src/components/Waveform/WaveformTypes.ts

@@ -51,4 +51,6 @@ export interface IWaveformRef {
   stopRecord: () => Promise<string>;
   pauseRecord: () => Promise<boolean>;
   resumeRecord: () => Promise<boolean>;
+  currentState: PlayerState | RecorderState;
+  playerKey: string;
 }