[Video] Tweak playback handling (#5127)

zio/stable
Hailey 2024-09-04 08:00:53 -07:00 committed by GitHub
parent 515f87ed24
commit 21e48bb2d8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 10 deletions

View File

@ -18,7 +18,8 @@ import * as VideoFallback from './VideoEmbedInner/VideoFallback'
export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) { export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
const t = useTheme() const t = useTheme()
const {activeSource, setActiveSource} = useActiveVideoNative() const {activeSource, setActiveSource, player} = useActiveVideoNative()
const [isFullscreen, setIsFullscreen] = React.useState(false)
const isActive = embed.playlist === activeSource const isActive = embed.playlist === activeSource
const {_} = useLingui() const {_} = useLingui()
@ -31,6 +32,20 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
) )
const gate = useGate() const gate = useGate()
const onChangeStatus = (isVisible: boolean) => {
if (isVisible) {
setActiveSource(embed.playlist)
if (!player.playing) {
player.play()
}
} else if (!isFullscreen) {
player.muted = true
if (player.playing) {
player.pause()
}
}
}
if (!gate('video_view_on_posts')) { if (!gate('video_view_on_posts')) {
return null return null
} }
@ -54,15 +69,13 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
a.my_xs, a.my_xs,
]}> ]}>
<ErrorBoundary renderError={renderError} key={key}> <ErrorBoundary renderError={renderError} key={key}>
<VisibilityView <VisibilityView enabled={true} onChangeStatus={onChangeStatus}>
enabled={true}
onChangeStatus={isVisible => {
if (isVisible) {
setActiveSource(embed.playlist)
}
}}>
{isActive ? ( {isActive ? (
<VideoEmbedInnerNative embed={embed} /> <VideoEmbedInnerNative
embed={embed}
isFullscreen={isFullscreen}
setIsFullscreen={setIsFullscreen}
/>
) : ( ) : (
<> <>
<Image <Image

View File

@ -20,13 +20,16 @@ import {TimeIndicator} from './TimeIndicator'
export function VideoEmbedInnerNative({ export function VideoEmbedInnerNative({
embed, embed,
isFullscreen,
setIsFullscreen,
}: { }: {
embed: AppBskyEmbedVideo.View embed: AppBskyEmbedVideo.View
isFullscreen: boolean
setIsFullscreen: (isFullscreen: boolean) => void
}) { }) {
const {_} = useLingui() const {_} = useLingui()
const {player} = useActiveVideoNative() const {player} = useActiveVideoNative()
const ref = useRef<VideoView>(null) const ref = useRef<VideoView>(null)
const [isFullscreen, setIsFullscreen] = useState(false)
const enterFullscreen = useCallback(() => { const enterFullscreen = useCallback(() => {
ref.current?.enterFullscreen() ref.current?.enterFullscreen()