fix: audio component recursive loading for expo (#3038)

Author: isekovanic

package/src/components/Attachment/AudioAttachment.tsx

@@ -208,10 +208,14 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
       if (!isExpoCLI) {
         return;
       }
-      if (item.paused) {
-        await pauseAudio();
-      } else {
-        await playAudio();
+      try {
+        if (item.paused) {
+          await pauseAudio();
+        } else {
+          await playAudio();
+        }
+      } catch (e) {
+        console.log('An error has occurred while trying to interact with the audio. ', e);
       }
     };
     // For expo CLI

package/src/hooks/useAudioPlayer.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { NativeHandlers, SoundReturnType } from '../native';
 
@@ -15,7 +15,7 @@ export const useAudioPlayer = (props: UseSoundPlayerProps) => {
 
   const isExpoCLI = NativeHandlers.SDK === 'stream-chat-expo';
 
-  const playAudio = async () => {
+  const playAudio = useCallback(async () => {
     if (isExpoCLI) {
       if (soundRef.current?.playAsync) {
         await soundRef.current.playAsync();
@@ -25,9 +25,9 @@ export const useAudioPlayer = (props: UseSoundPlayerProps) => {
         soundRef.current.resume();
       }
     }
-  };
+  }, [isExpoCLI, soundRef]);
 
-  const pauseAudio = async () => {
+  const pauseAudio = useCallback(async () => {
     if (isExpoCLI) {
       if (soundRef.current?.pauseAsync) {
         await soundRef.current.pauseAsync();
@@ -37,39 +37,45 @@ export const useAudioPlayer = (props: UseSoundPlayerProps) => {
         soundRef.current.pause();
       }
     }
-  };
+  }, [isExpoCLI, soundRef]);
 
-  const seekAudio = async (currentTime: number) => {
-    if (isExpoCLI) {
-      if (currentTime === 0) {
-        // If currentTime is 0, we should replay the video from 0th position.
-        if (soundRef.current?.replayAsync) {
-          await soundRef.current.replayAsync({
-            positionMillis: 0,
-            shouldPlay: false,
-          });
+  const seekAudio = useCallback(
+    async (currentTime: number) => {
+      if (isExpoCLI) {
+        if (currentTime === 0) {
+          // If currentTime is 0, we should replay the video from 0th position.
+          if (soundRef.current?.replayAsync) {
+            await soundRef.current.replayAsync({
+              positionMillis: 0,
+              shouldPlay: false,
+            });
+          }
+        } else {
+          if (soundRef.current?.setPositionAsync) {
+            await soundRef.current.setPositionAsync(currentTime * 1000);
+          }
         }
       } else {
-        if (soundRef.current?.setPositionAsync) {
-          await soundRef.current.setPositionAsync(currentTime * 1000);
+        if (soundRef.current?.seek) {
+          soundRef.current.seek(currentTime);
         }
       }
-    } else {
-      if (soundRef.current?.seek) {
-        soundRef.current.seek(currentTime);
-      }
-    }
-  };
+    },
+    [isExpoCLI, soundRef],
+  );
 
-  const changeAudioSpeed = async (speed: number) => {
-    // Handled through prop `rate` in `Sound.Player`
-    if (!isExpoCLI) {
-      return;
-    }
-    if (soundRef.current?.setRateAsync) {
-      await soundRef.current.setRateAsync(speed);
-    }
-  };
+  const changeAudioSpeed = useCallback(
+    async (speed: number) => {
+      // Handled through prop `rate` in `Sound.Player`
+      if (!isExpoCLI) {
+        return;
+      }
+      if (soundRef.current?.setRateAsync) {
+        await soundRef.current.setRateAsync(speed);
+      }
+    },
+    [isExpoCLI, soundRef],
+  );
 
   return { changeAudioSpeed, pauseAudio, playAudio, seekAudio };
 };