[Video] Tweak playback handling (#5127)
parent
515f87ed24
commit
21e48bb2d8
|
@ -18,7 +18,8 @@ import * as VideoFallback from './VideoEmbedInner/VideoFallback'
|
|||
|
||||
export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
|
||||
const t = useTheme()
|
||||
const {activeSource, setActiveSource} = useActiveVideoNative()
|
||||
const {activeSource, setActiveSource, player} = useActiveVideoNative()
|
||||
const [isFullscreen, setIsFullscreen] = React.useState(false)
|
||||
const isActive = embed.playlist === activeSource
|
||||
const {_} = useLingui()
|
||||
|
||||
|
@ -31,6 +32,20 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
|
|||
)
|
||||
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')) {
|
||||
return null
|
||||
}
|
||||
|
@ -54,15 +69,13 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
|
|||
a.my_xs,
|
||||
]}>
|
||||
<ErrorBoundary renderError={renderError} key={key}>
|
||||
<VisibilityView
|
||||
enabled={true}
|
||||
onChangeStatus={isVisible => {
|
||||
if (isVisible) {
|
||||
setActiveSource(embed.playlist)
|
||||
}
|
||||
}}>
|
||||
<VisibilityView enabled={true} onChangeStatus={onChangeStatus}>
|
||||
{isActive ? (
|
||||
<VideoEmbedInnerNative embed={embed} />
|
||||
<VideoEmbedInnerNative
|
||||
embed={embed}
|
||||
isFullscreen={isFullscreen}
|
||||
setIsFullscreen={setIsFullscreen}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Image
|
||||
|
|
|
@ -20,13 +20,16 @@ import {TimeIndicator} from './TimeIndicator'
|
|||
|
||||
export function VideoEmbedInnerNative({
|
||||
embed,
|
||||
isFullscreen,
|
||||
setIsFullscreen,
|
||||
}: {
|
||||
embed: AppBskyEmbedVideo.View
|
||||
isFullscreen: boolean
|
||||
setIsFullscreen: (isFullscreen: boolean) => void
|
||||
}) {
|
||||
const {_} = useLingui()
|
||||
const {player} = useActiveVideoNative()
|
||||
const ref = useRef<VideoView>(null)
|
||||
const [isFullscreen, setIsFullscreen] = useState(false)
|
||||
|
||||
const enterFullscreen = useCallback(() => {
|
||||
ref.current?.enterFullscreen()
|
||||
|
|
Loading…
Reference in New Issue