Added seperate pause/play to media components

Author: YoussefHenna

packages/core/src/__tests__/components/AudioPlayer.test.tsx

@@ -153,6 +153,30 @@ describe("AudioPlayer tests", () => {
     expect(mockPauseAsync).toBeCalled();
   });
 
+  test("should play() play the audio", async () => {
+    const ref = React.createRef<AudioPlayerRef>();
+
+    render(<AudioPlayer ref={ref} source={mockAudioSource} />);
+
+    await act(async () => {
+      await waitForSoundToLoad();
+      ref.current?.play();
+    });
+    expect(mockPlayAsync).toBeCalled();
+  });
+
+  test("should pause() pause the audio", async () => {
+    const ref = React.createRef<AudioPlayerRef>();
+
+    render(<AudioPlayer ref={ref} source={mockAudioSource} />);
+
+    await act(async () => {
+      await waitForSoundToLoad();
+      ref.current?.pause();
+    });
+    expect(mockPauseAsync).toBeCalled();
+  });
+
   test("should audio be cleaned up/unloaded when unmounting", async () => {
     render(<AudioPlayer source={mockAudioSource} />);
 

packages/core/src/__tests__/components/VideoPlayer.test.tsx

@@ -70,6 +70,42 @@ describe("VideoPlayer tests", () => {
     expect(mockPauseAsync).toBeCalled();
   });
 
+  test("should play() play the video", async () => {
+    const ref = React.createRef<VideoPlayerRef>();
+
+    render(
+      <VideoPlayer
+        ref={ref}
+        source={{
+          uri: "video-uri",
+        }}
+      />
+    );
+
+    act(() => {
+      ref.current?.play();
+    });
+    expect(mockPlayAsync).toBeCalled();
+  });
+
+  test("should pause() pause the video", async () => {
+    const ref = React.createRef<VideoPlayerRef>();
+
+    render(
+      <VideoPlayer
+        ref={ref}
+        source={{
+          uri: "video-uri",
+        }}
+      />
+    );
+
+    act(() => {
+      ref.current?.pause();
+    });
+    expect(mockPauseAsync).toBeCalled();
+  });
+
   test("should video be cleaned up/unloaded when unmounting", async () => {
     render(
       <VideoPlayer

packages/core/src/components/MediaPlayer/MediaPlaybackWrapper.tsx

@@ -26,6 +26,16 @@ const MediaPlaybackWrapper = React.forwardRef<
     }
   }, [media, isPlaying, onTogglePlayback]);
 
+  const pause = React.useCallback(async () => {
+    onTogglePlayback?.();
+    await media?.pauseAsync();
+  }, [media, onTogglePlayback]);
+
+  const play = React.useCallback(async () => {
+    onTogglePlayback?.();
+    await media?.playAsync();
+  }, [media, onTogglePlayback]);
+
   const seekToPosition = React.useCallback(
     async (positionMillis: number) => {
       await media?.setPositionAsync(positionMillis);
@@ -46,8 +56,10 @@ const MediaPlaybackWrapper = React.forwardRef<
     () => ({
       seekToPosition,
       togglePlayback,
+      pause,
+      play,
     }),
-    [seekToPosition, togglePlayback]
+    [seekToPosition, togglePlayback, pause, play]
   );
 
   return <>{children}</>;

packages/core/src/components/MediaPlayer/MediaPlayerCommon.ts

@@ -14,6 +14,8 @@ export interface MediaPlayerStatus {
 export interface MediaPlayerRef {
   seekToPosition: (positionMillis: number) => void;
   togglePlayback: () => void;
+  pause: () => void;
+  play: () => void;
 }
 
 export interface MediaPlayerProps {

packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx

@@ -105,6 +105,8 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
           mediaPlaybackWrapperRef.current?.seekToPosition || (() => {}),
         togglePlayback:
           mediaPlaybackWrapperRef.current?.togglePlayback || (() => {}),
+        pause: mediaPlaybackWrapperRef.current?.pause || (() => {}),
+        play: mediaPlaybackWrapperRef.current?.play || (() => {}),
       }),
       // Include 'isPlaying' as dependency because 'togglePlayback' changes when it changes
       // eslint-disable-next-line react-hooks/exhaustive-deps