Support isLooping for audio player (#925)

* support isLooping for audio player * update test * resolve comment feedback * clean up
draftbit · Aug 11, 2024 · d1ba086 · d1ba086
1 parent e295b32
commit d1ba086
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 0 deletions.
diff --git a/example/src/AudioPlayerExample.tsx b/example/src/AudioPlayerExample.tsx
@@ -17,6 +17,14 @@ export default function AudioPlayerExample() {
           interruptionMode="stop"
         />
       </Section>
+      <Section style={{}} title="Loop">
+        <AudioPlayer
+          source={require("./assets/loop.wav")}
+          playsInBackground
+          interruptionMode="stop"
+          isLooping
+        />
+      </Section>
       <Section style={{}} title="Custom styling">
         <AudioPlayer
           style={{

diff --git a/packages/core/src/__tests__/components/AudioPlayer.test.tsx b/packages/core/src/__tests__/components/AudioPlayer.test.tsx
@@ -12,6 +12,7 @@ const mockAudioSource = {
 const mockPlayAsync = jest.fn();
 const mockPauseAsync = jest.fn();
 const mockUnloadAsync = jest.fn();
+const mockSetIsLoopAsync = jest.fn();
 
 // To ignore the warning: 'When testing, code that causes React state updates should be wrapped into act'
 // This is caused because state is updated in the useEffect, this is intentional and not an issue, so we can ignore it
@@ -44,6 +45,7 @@ jest.mock("expo-av", () => {
                 positionMillis: position,
               });
             },
+            setIsLoopingAsync: mockSetIsLoopAsync,
           },
         };
       },

diff --git a/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerCommon.ts b/packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerCommon.ts
@@ -8,6 +8,7 @@ export interface HeadlessAudioPlayerProps extends MediaPlayerProps {
   playsInBackground?: boolean;
   playsInSilentModeIOS?: boolean;
   playThroughEarpieceAndroid?: boolean;
+  isLooping?: boolean;
 }
 
 export interface AudioPlayerInterfaceProps {

diff --git a/packages/core/src/components/MediaPlayer/AudioPlayer/HeadlessAudioPlayer.tsx b/packages/core/src/components/MediaPlayer/AudioPlayer/HeadlessAudioPlayer.tsx
@@ -31,12 +31,17 @@ const HeadlessAudioPlayer = React.forwardRef<
       playThroughEarpieceAndroid = false,
       onPlaybackStatusUpdate: onPlaybackStatusUpdateProp,
       onPlaybackFinish,
+      isLooping = false,
     },
     ref
   ) => {
     const [currentSound, setCurrentSound] = React.useState<Audio.Sound>();
     const [isPlaying, setIsPlaying] = React.useState(false);
 
+    React.useEffect(() => {
+      currentSound?.setIsLoopingAsync(isLooping);
+    }, [currentSound, isLooping]);
+
     const updateAudioMode = React.useCallback(async () => {
       try {
         await Audio.setAudioModeAsync({
@@ -71,6 +76,9 @@ const HeadlessAudioPlayer = React.forwardRef<
 
       if (status.isLoaded) {
         if (status.didJustFinish) {
+          if (isLooping) {
+            return;
+          }
           onPlaybackFinish?.();
         }
         setIsPlaying(status.isPlaying);