Skip to content

Commit

Permalink
[Video] Much simpler fix to fullscreen bug (#5251)
Browse files Browse the repository at this point in the history
* much simpler fix

* allow old behaviour on firefox

* rm logs
  • Loading branch information
mozzius authored Sep 10, 2024
1 parent db9cf92 commit 6bc5a05
Showing 1 changed file with 7 additions and 12 deletions.
19 changes: 7 additions & 12 deletions src/view/com/util/post-embeds/VideoEmbed.web.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {AppBskyEmbedVideo} from '@atproto/api'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'

import {isFirefox} from '#/lib/browser'
import {clamp} from '#/lib/numbers'
import {useGate} from '#/lib/statsig/statsig'
import {
Expand All @@ -23,9 +24,11 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
const {active, setActive, sendPosition, currentActiveView} =
useActiveVideoWeb()
const [onScreen, setOnScreen] = useState(false)
const [isFullscreen] = useFullscreen()

useEffect(() => {
if (!ref.current) return
if (isFullscreen && !isFirefox) return
const observer = new IntersectionObserver(
entries => {
const entry = entries[0]
Expand All @@ -39,7 +42,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
)
observer.observe(ref.current)
return () => observer.disconnect()
}, [sendPosition])
}, [sendPosition, isFullscreen])

const [key, setKey] = useState(0)
const renderError = useCallback(
Expand Down Expand Up @@ -108,12 +111,12 @@ function ViewportObserver({
const ref = useRef<HTMLDivElement>(null)
const [nearScreen, setNearScreen] = useState(false)
const [isFullscreen] = useFullscreen()
const [nearScreenOrFullscreen, setNearScreenOrFullscreen] = useState(false)

// Send position when scrolling. This is done with an IntersectionObserver
// observing a div of 100vh height
useEffect(() => {
if (!ref.current) return
if (isFullscreen && !isFirefox) return
const observer = new IntersectionObserver(
entries => {
const entry = entries[0]
Expand All @@ -127,7 +130,7 @@ function ViewportObserver({
)
observer.observe(ref.current)
return () => observer.disconnect()
}, [sendPosition])
}, [sendPosition, isFullscreen])

// In case scrolling hasn't started yet, send up the position
useEffect(() => {
Expand All @@ -138,17 +141,9 @@ function ViewportObserver({
}
}, [isAnyViewActive, sendPosition])

// disguesting effect - it should be `nearScreen` except when fullscreen
// when it should be whatever it was before fullscreen changed
useEffect(() => {
if (!isFullscreen) {
setNearScreenOrFullscreen(nearScreen)
}
}, [isFullscreen, nearScreen])

return (
<View style={[a.flex_1, a.flex_row]}>
{nearScreenOrFullscreen && children}
{nearScreen && children}
<div
ref={ref}
style={{
Expand Down

0 comments on commit 6bc5a05

Please sign in to comment.