diff --git a/example/src/VideoPlayerExample.tsx b/example/src/VideoPlayerExample.tsx index fd57866d4..53937165e 100644 --- a/example/src/VideoPlayerExample.tsx +++ b/example/src/VideoPlayerExample.tsx @@ -24,11 +24,11 @@ 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)} diff --git a/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx b/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx index abbb2daf7..e10fed72c 100644 --- a/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx +++ b/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( onPlaybackStatusUpdate: onPlaybackStatusUpdateProp, onPlaybackFinish, source, + playsInSilentModeIOS = false, ...rest }, ref @@ -102,6 +105,20 @@ const VideoPlayer = React.forwardRef( } }, [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( media={videoMediaObject as Playback | undefined} isPlaying={isPlaying} ref={mediaPlaybackWrapperRef} + onTogglePlayback={updateAudioMode} >