[Video] Handle push/pop on Android for autoplay (#5194)
parent
00ce95893d
commit
7e4f8cabd3
|
@ -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",
|
||||||
|
|
|
@ -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) => {
|
||||||
setActiveSource(src ? src : '')
|
// 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 : '')
|
||||||
|
}, 100)
|
||||||
|
} else {
|
||||||
|
setActiveSource(src ? src : '')
|
||||||
|
}
|
||||||
setActiveViewId(viewId ? viewId : '')
|
setActiveViewId(viewId ? viewId : '')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue