Support silence prop for video component - 51 (#995)

* support silence mode for video component

* update outdate example video

---------

Co-authored-by: draftbitbuildservices <[email protected]>

Author: sieu-db

example/src/VideoPlayerExample.tsx

@@ -24,15 +24,16 @@ const VideoPlayerExample: React.FC = () => {
           ref={videoPlayerRef}
           style={{ width: 350, height: 250 }}
           source={{
-            uri: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
+            uri: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
           }}
           useNativeControls={false}
           posterSource={{
-            uri: "https://fujifilm-x.com/wp-content/uploads/2021/01/gfx100s_sample_04_thum-1.jpg",
+            uri: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg",
           }}
           usePoster
           onPlaybackStatusUpdate={(status) => setPlayerState(status)}
           onPlaybackFinish={() => console.log("Finished playback")}
+          playsInSilentModeIOS={true}
         />
         <Button
           //@ts-ignore

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

@@ -7,6 +7,7 @@ import {
   AVPlaybackStatus,
   VideoFullscreenUpdate,
   AVPlaybackSource,
+  Audio,
 } from "expo-av";
 import { extractSizeStyles } from "../../../utilities";
 import MediaPlaybackWrapper from "../MediaPlaybackWrapper";
@@ -27,6 +28,7 @@ type ExpoVideoPropsOmitted = Omit<
 interface VideoPlayerProps extends ExpoVideoPropsOmitted, MediaPlayerProps {
   resizeMode?: ResizeMode;
   posterResizeMode?: ImageResizeMode;
+  playsInSilentModeIOS?: boolean;
 }
 
 export interface VideoPlayerRef extends MediaPlayerRef {
@@ -42,6 +44,7 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
       onPlaybackStatusUpdate: onPlaybackStatusUpdateProp,
       onPlaybackFinish,
       source,
+      playsInSilentModeIOS = false,
       ...rest
     },
     ref
@@ -102,6 +105,20 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
       }
     }, [isFullscreen, videoMediaObject]);
 
+    const updateAudioMode = React.useCallback(async () => {
+      try {
+        await Audio.setAudioModeAsync({
+          playsInSilentModeIOS,
+        });
+      } catch (e) {
+        console.error("Failed to set audio mode. Error details:", e);
+      }
+    }, [playsInSilentModeIOS]);
+
+    React.useEffect(() => {
+      updateAudioMode();
+    }, [updateAudioMode]);
+
     React.useImperativeHandle(
       ref,
       () => ({
@@ -131,6 +148,7 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
         media={videoMediaObject as Playback | undefined}
         isPlaying={isPlaying}
         ref={mediaPlaybackWrapperRef}
+        onTogglePlayback={updateAudioMode}
       >
         <VideoPlayerComponent
           // https://docs.expo.dev/versions/latest/sdk/av/#example-video to see why ref is handled this way