[Video] Prevent pausing of background audio with expo-video on iOS (#…

…4908) * audio mixing pref * lint * patch expo video to add enter/exit fullscreen events * rm logs * fix audio problems * toggle mute when enter/exiting fullscreen --------- Co-authored-by: Samuel Newman <[email protected]>
bluesky-social · Aug 9, 2024 · dd0d50a · dd0d50a
1 parent 0f993a0
commit dd0d50a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/App.native.tsx b/src/App.native.tsx
@@ -61,6 +61,7 @@ import {Provider as PortalProvider} from '#/components/Portal'
 import {Splash} from '#/Splash'
 import {Provider as TourProvider} from '#/tours'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
+import {PlatformInfo} from '../modules/expo-bluesky-swiss-army'
 
 SplashScreen.preventAutoHideAsync()
 
@@ -157,6 +158,7 @@ function App() {
   const [isReady, setReady] = useState(false)
 
   React.useEffect(() => {
+    PlatformInfo.setAudioMixWithOthers(true)
     initPersistedState().then(() => setReady(true))
   }, [])
 

diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
@@ -12,6 +12,7 @@ import {android, atoms as a, useTheme} from '#/alf'
 import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
 import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as UnmuteIcon} from '#/components/icons/Speaker'
 import {Text} from '#/components/Typography'
+import {PlatformInfo} from '../../../../../../modules/expo-bluesky-swiss-army'
 
 export function VideoEmbedInnerNative() {
   const player = useVideoPlayer()
@@ -37,11 +38,18 @@ export function VideoEmbedInnerNative() {
         player={player}
         style={a.flex_1}
         nativeControls={true}
+        onEnterFullscreen={() => {
+          PlatformInfo.setAudioMixWithOthers(false)
+          player.muted = false
+        }}
+        onExitFullscreen={() => {
+          PlatformInfo.setAudioMixWithOthers(true)
+          player.muted = true
+        }}
       />
       <Controls
         player={player}
         enterFullscreen={() => {
-          player.muted = false
           ref.current?.enterFullscreen()
         }}
       />
@@ -89,7 +97,11 @@ function Controls({
   }, [player])
 
   const toggleSound = useCallback(() => {
-    player.muted = !player.muted
+    const newValue = !player.muted
+    // We want to set this to the _inverse_ of the new value, because we actually want for the audio to be mixed when
+    // the video is muted, and vice versa.
+    PlatformInfo.setAudioMixWithOthers(!newValue)
+    player.muted = newValue
   }, [player])
 
   return (