Skip to content

Commit

Permalink
[Video] Tweak playback handling (#5127)
Browse files Browse the repository at this point in the history
  • Loading branch information
haileyok authored Sep 4, 2024
1 parent 515f87e commit 21e48bb
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 10 deletions.
31 changes: 22 additions & 9 deletions src/view/com/util/post-embeds/VideoEmbed.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand All @@ -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
}
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down

0 comments on commit 21e48bb

Please sign in to comment.