From dd0d50a6f0f69d8b58f7dd26303b6b89528d2d04 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 9 Aug 2024 03:25:54 -0700
Subject: [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 <10959775+mozzius@users.noreply.github.com>
---
 src/App.native.tsx                                       |  2 ++
 .../VideoEmbedInner/VideoEmbedInnerNative.tsx            | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/App.native.tsx b/src/App.native.tsx
index d2c20fc8e..29a6a738c 100644
--- 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
index 26f6111bc..576866260 100644
--- 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 (
-- 
cgit 1.4.1