support silence for video component - 52 (#1002)

Author: sieu-db

example/src/VideoPlayerExample.tsx

@@ -19,6 +19,17 @@ const VideoPlayerExample: React.FC = () => {
           resizeMode="cover"
         />
       </Section>
+      <Section style={{}} title="VideoPlayer (Silent mode)">
+        <VideoPlayer
+          style={{ width: 350, height: 250 }}
+          source={{
+            uri: "http://static.draftbit.com/videos/intro-to-draftbit.mp4",
+          }}
+          useNativeControls
+          resizeMode="cover"
+          playsInSilentModeIOS={true}
+        />
+      </Section>
       <Section style={{}} title="VideoPlayer (Poster and custom controls)">
         <VideoPlayer
           ref={videoPlayerRef}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ImageResizeMode } from "react-native";
+import { ImageResizeMode, Platform } from "react-native";
 import {
   Video as VideoPlayerComponent,
   VideoProps as ExpoVideoProps,
@@ -35,6 +35,18 @@ export interface VideoPlayerRef extends MediaPlayerRef {
   toggleFullscreen: () => void;
 }
 
+// Setting playsInSilentModeIOS prop directly on Video component is unreliable,
+// so we need to set the audio mode globally before playing.
+// See:
+// https://github.com/expo/expo/issues/7485
+// https://stackoverflow.com/questions/57371543/how-to-fix-video-play-but-dont-have-sound-on-ios-with-expo
+const triggerAudio = async (ref: React.RefObject<MediaPlayerRef>) => {
+  if (ref && ref?.current && Platform.OS === "ios") {
+    await Audio.setAudioModeAsync({ playsInSilentModeIOS: true });
+    ref.current.play();
+  }
+};
+
 const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
   (
     {
@@ -116,8 +128,8 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
     }, [playsInSilentModeIOS]);
 
     React.useEffect(() => {
-      updateAudioMode();
-    }, [updateAudioMode]);
+      if (isPlaying) triggerAudio(mediaPlaybackWrapperRef);
+    }, [mediaPlaybackWrapperRef, isPlaying]);
 
     React.useImperativeHandle(
       ref,