[Video] Handle push/pop on Android for autoplay (#5194)

zio/stable
Hailey 2024-09-06 15:01:05 -07:00 committed by GitHub
parent 00ce95893d
commit 7e4f8cabd3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 45 additions and 7 deletions

View File

@ -139,7 +139,7 @@
"expo-system-ui": "~3.0.4", "expo-system-ui": "~3.0.4",
"expo-task-manager": "~11.8.1", "expo-task-manager": "~11.8.1",
"expo-updates": "~0.25.14", "expo-updates": "~0.25.14",
"expo-video": "https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4-1.tgz", "expo-video": "https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4-2.tgz",
"expo-web-browser": "~13.0.3", "expo-web-browser": "~13.0.3",
"fast-text-encoding": "^1.0.6", "fast-text-encoding": "^1.0.6",
"history": "^5.3.0", "history": "^5.3.0",

View File

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import {useVideoPlayer, VideoPlayer} from 'expo-video' import {useVideoPlayer, VideoPlayer} from 'expo-video'
import {isNative} from '#/platform/detection' import {isAndroid, isNative} from '#/platform/detection'
const Context = React.createContext<{ const Context = React.createContext<{
activeSource: string activeSource: string
@ -26,7 +26,18 @@ export function Provider({children}: {children: React.ReactNode}) {
}) })
const setActiveSourceOuter = (src: string | null, viewId: string | null) => { const setActiveSourceOuter = (src: string | null, viewId: string | null) => {
// HACK
// expo-video doesn't like it when you try and move a `player` to another `VideoView`. Instead, we need to actually
// unregister that player to let the new screen register it. This is only a problem on Android, so we only need to
// apply it there.
if (src === activeSource && isAndroid) {
setActiveSource('')
setTimeout(() => {
setActiveSource(src ? src : '') setActiveSource(src ? src : '')
}, 100)
} else {
setActiveSource(src ? src : '')
}
setActiveViewId(viewId ? viewId : '') setActiveViewId(viewId ? viewId : '')
} }

View File

@ -71,7 +71,7 @@ function InnerWrapper({embed}: Props) {
const [playerStatus, setPlayerStatus] = useState< const [playerStatus, setPlayerStatus] = useState<
VideoPlayerStatus | 'paused' VideoPlayerStatus | 'paused'
>(player.playing ? 'readyToPlay' : 'paused') >('paused')
const [isMuted, setIsMuted] = useState(player.muted) const [isMuted, setIsMuted] = useState(player.muted)
const [isFullscreen, setIsFullscreen] = React.useState(false) const [isFullscreen, setIsFullscreen] = React.useState(false)
const [timeRemaining, setTimeRemaining] = React.useState(0) const [timeRemaining, setTimeRemaining] = React.useState(0)

View File

@ -8,6 +8,7 @@ import {useLingui} from '@lingui/react'
import {HITSLOP_30} from '#/lib/constants' import {HITSLOP_30} from '#/lib/constants'
import {clamp} from '#/lib/numbers' import {clamp} from '#/lib/numbers'
import {isAndroid} from 'platform/detection'
import {useActiveVideoNative} from 'view/com/util/post-embeds/ActiveVideoNativeContext' import {useActiveVideoNative} from 'view/com/util/post-embeds/ActiveVideoNativeContext'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute' import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
@ -61,6 +62,9 @@ export function VideoEmbedInnerNative({
PlatformInfo.setAudioActive(true) PlatformInfo.setAudioActive(true)
player.muted = false player.muted = false
setIsFullscreen(true) setIsFullscreen(true)
if (isAndroid) {
player.play()
}
}} }}
onFullscreenExit={() => { onFullscreenExit={() => {
PlatformInfo.setAudioCategory(AudioCategory.Ambient) PlatformInfo.setAudioCategory(AudioCategory.Ambient)

View File

@ -11,7 +11,7 @@ import Animated from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context' import {useSafeAreaInsets} from 'react-native-safe-area-context'
import * as NavigationBar from 'expo-navigation-bar' import * as NavigationBar from 'expo-navigation-bar'
import {StatusBar} from 'expo-status-bar' import {StatusBar} from 'expo-status-bar'
import {useNavigationState} from '@react-navigation/native' import {useNavigation, useNavigationState} from '@react-navigation/native'
import {useSession} from '#/state/session' import {useSession} from '#/state/session'
import { import {
@ -20,6 +20,7 @@ import {
useSetDrawerOpen, useSetDrawerOpen,
} from '#/state/shell' } from '#/state/shell'
import {useCloseAnyActiveElement} from '#/state/util' import {useCloseAnyActiveElement} from '#/state/util'
import {useDedupe} from 'lib/hooks/useDedupe'
import {useNotificationsHandler} from 'lib/hooks/useNotificationHandler' import {useNotificationsHandler} from 'lib/hooks/useNotificationHandler'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {useNotificationsRegistration} from 'lib/notifications/notifications' import {useNotificationsRegistration} from 'lib/notifications/notifications'
@ -33,6 +34,7 @@ import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
import {MutedWordsDialog} from '#/components/dialogs/MutedWords' import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
import {SigninDialog} from '#/components/dialogs/Signin' import {SigninDialog} from '#/components/dialogs/Signin'
import {Outlet as PortalOutlet} from '#/components/Portal' import {Outlet as PortalOutlet} from '#/components/Portal'
import {updateActiveViewAsync} from '../../../modules/expo-bluesky-swiss-army/src/VisibilityView'
import {RoutesContainer, TabsNavigator} from '../../Navigation' import {RoutesContainer, TabsNavigator} from '../../Navigation'
import {Composer} from './Composer' import {Composer} from './Composer'
import {DrawerContent} from './Drawer' import {DrawerContent} from './Drawer'
@ -76,6 +78,27 @@ function ShellInner() {
} }
}, [closeAnyActiveElement]) }, [closeAnyActiveElement])
// HACK
// expo-video doesn't like it when you try and move a `player` to another `VideoView`. Instead, we need to actually
// unregister that player to let the new screen register it. This is only a problem on Android, so we only need to
// apply it there.
// The `state` event should only fire whenever we push or pop to a screen, and should not fire consecutively quickly.
// To be certain though, we will also dedupe these calls.
const navigation = useNavigation()
const dedupe = useDedupe(1000)
React.useEffect(() => {
if (!isAndroid) return
const onFocusOrBlur = () => {
setTimeout(() => {
dedupe(updateActiveViewAsync)
}, 500)
}
navigation.addListener('state', onFocusOrBlur)
return () => {
navigation.removeListener('state', onFocusOrBlur)
}
}, [dedupe, navigation])
return ( return (
<> <>
<Animated.View <Animated.View

View File

@ -12414,9 +12414,9 @@ expo-updates@~0.25.14:
ignore "^5.3.1" ignore "^5.3.1"
resolve-from "^5.0.0" resolve-from "^5.0.0"
"expo-video@https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4-1.tgz": "expo-video@https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4-2.tgz":
version "1.2.4" version "1.2.4"
resolved "https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4-1.tgz#57f61a72f41b86e5a587d9782d32bd32487a551e" resolved "https://github.com/bluesky-social/expo/raw/expo-video-1.2.4-patch/packages/expo-video/expo-video-v1.2.4-2.tgz#4127dd5cea5fdf7ab745104c73b8ecf5506f5d34"
expo-web-browser@~13.0.3: expo-web-browser@~13.0.3:
version "13.0.3" version "13.0.3"