[Video] Much simpler fix to fullscreen bug (#5251)

* much simpler fix

* allow old behaviour on firefox

* rm logs
zio/stable
Samuel Newman 2024-09-10 16:10:13 +01:00 committed by GitHub
parent db9cf92d87
commit 6bc5a05f4b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 12 deletions

View File

@ -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 {
@ -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]
@ -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(
@ -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]
@ -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(() => {
@ -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={{