diff --git a/src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx b/src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx index 95fa0bb0ec..c63aba241d 100644 --- a/src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx +++ b/src/view/com/util/post-embeds/ActiveVideoNativeContext.tsx @@ -2,12 +2,19 @@ import React from 'react' import {useVideoPlayer, VideoPlayer} from 'expo-video' import {isAndroid, isNative} from '#/platform/detection' +import {useAutoplayDisabled} from '#/state/preferences' +import { + AudioCategory, + PlatformInfo, +} from '../../../../../modules/expo-bluesky-swiss-army' const Context = React.createContext<{ activeSource: string activeViewId: string | undefined setActiveSource: (src: string | null, viewId: string | null) => void player: VideoPlayer + mutedInFeed: boolean + setMutedInFeed: (muted: boolean) => void } | null>(null) export function Provider({children}: {children: React.ReactNode}) { @@ -17,9 +24,17 @@ export function Provider({children}: {children: React.ReactNode}) { const [activeSource, setActiveSource] = React.useState('') const [activeViewId, setActiveViewId] = React.useState() + const autoplayDisabled = useAutoplayDisabled() + const [mutedInFeed, setMutedInFeed] = React.useState(!autoplayDisabled) const player = useVideoPlayer(activeSource, p => { - p.muted = true + const mix = !mutedInFeed + const category = mutedInFeed + ? AudioCategory.Ambient + : AudioCategory.Playback + PlatformInfo.setAudioCategory(category) + PlatformInfo.setAudioActive(mix) + p.muted = mutedInFeed p.loop = true // We want to immediately call `play` so we get the loading state p.play() @@ -48,6 +63,8 @@ export function Provider({children}: {children: React.ReactNode}) { setActiveSource: setActiveSourceOuter, activeViewId, player, + mutedInFeed, + setMutedInFeed, }}> {children} diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx index de9a2c74c2..8572a9a1b5 100644 --- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx +++ b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useRef} from 'react' import {Pressable, View} from 'react-native' import Animated, {FadeInDown} from 'react-native-reanimated' -import {VideoPlayer, VideoView} from 'expo-video' +import {VideoView} from 'expo-video' import {AppBskyEmbedVideo} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -33,7 +33,7 @@ export function VideoEmbedInnerNative({ isMuted: boolean }) { const {_} = useLingui() - const {player} = useActiveVideoNative() + const {player, mutedInFeed} = useActiveVideoNative() const ref = useRef(null) const enterFullscreen = useCallback(() => { @@ -69,7 +69,7 @@ export function VideoEmbedInnerNative({ onFullscreenExit={() => { PlatformInfo.setAudioCategory(AudioCategory.Ambient) PlatformInfo.setAudioActive(false) - player.muted = true + player.muted = mutedInFeed player.playbackRate = 1 setIsFullscreen(false) }} @@ -79,7 +79,6 @@ export function VideoEmbedInnerNative({ accessibilityHint="" /> void timeRemaining: number isMuted: boolean }) { const {_} = useLingui() const t = useTheme() + const {player, setMutedInFeed} = useActiveVideoNative() const onPressFullscreen = useCallback(() => { switch (player.status) { @@ -128,7 +126,8 @@ function VideoControls({ PlatformInfo.setAudioCategory(category) PlatformInfo.setAudioActive(mix) player.muted = muted - }, [player]) + setMutedInFeed(muted) + }, [player, setMutedInFeed]) // show countdown when: // 1. timeRemaining is a number - was seeing NaNs