fix: reconcile code with the pause/resume feature

Author: dprevost-LMI

example/src/App.tsx

@@ -63,34 +63,41 @@ const RenderListItem = React.memo(
     const [isLoading, setIsLoading] = useState(true);
 
     const handlePlayPauseAction = async () => {
-      let currentPlayer = currentPlayingRef?.current;
-
-      // If no player or if current player is stopped just start it!
+      // If we are recording do nothing
       if (
-        currentPlayer == null ||
-        currentPlayer.currentState === PlayerState.stopped
+        currentPlayingRef?.current?.currentState === RecorderState.recording
       ) {
+        return;
+      }
+
+      const startNewPlayer = async () => {
         currentPlayingRef = ref;
-        await currentPlayingRef.current?.startPlayer({
-          finishMode: FinishMode.stop,
-        });
-      } else {
-        // If we are recording do nothing
-        if (currentPlayer.currentState === RecorderState.recording) {
-          return;
+        if (ref.current?.currentState === PlayerState.paused) {
+          await ref.current?.resumePlayer();
+        } else {
+          await ref.current?.startPlayer({
+            finishMode: FinishMode.stop,
+          });
         }
+      };
 
+      // 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 {
         // Pause current player if it was playing
-        if (currentPlayer.currentState === PlayerState.playing) {
+        if (currentPlayingRef?.current?.currentState === PlayerState.playing) {
           await currentPlayingRef?.current?.pausePlayer();
         }
 
         // Start player when it is a different one!
-        if (currentPlayer.playerKey() !== ref?.current?.playerKey()) {
-          currentPlayingRef = ref;
-          await currentPlayingRef.current?.startPlayer({
-            finishMode: FinishMode.stop,
-          });
+        if (currentPlayingRef?.current?.playerKey !== ref?.current?.playerKey) {
+          await startNewPlayer();
         }
       }
     };

src/components/Waveform/Waveform.tsx

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

src/components/Waveform/WaveformTypes.ts

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