[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 {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {isFirefox} from '#/lib/browser'
import {clamp} from '#/lib/numbers' import {clamp} from '#/lib/numbers'
import {useGate} from '#/lib/statsig/statsig' import {useGate} from '#/lib/statsig/statsig'
import { import {
@ -23,9 +24,11 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
const {active, setActive, sendPosition, currentActiveView} = const {active, setActive, sendPosition, currentActiveView} =
useActiveVideoWeb() useActiveVideoWeb()
const [onScreen, setOnScreen] = useState(false) const [onScreen, setOnScreen] = useState(false)
const [isFullscreen] = useFullscreen()
useEffect(() => { useEffect(() => {
if (!ref.current) return if (!ref.current) return
if (isFullscreen && !isFirefox) return
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
entries => { entries => {
const entry = entries[0] const entry = entries[0]
@ -39,7 +42,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
) )
observer.observe(ref.current) observer.observe(ref.current)
return () => observer.disconnect() return () => observer.disconnect()
}, [sendPosition]) }, [sendPosition, isFullscreen])
const [key, setKey] = useState(0) const [key, setKey] = useState(0)
const renderError = useCallback( const renderError = useCallback(
@ -108,12 +111,12 @@ function ViewportObserver({
const ref = useRef<HTMLDivElement>(null) const ref = useRef<HTMLDivElement>(null)
const [nearScreen, setNearScreen] = useState(false) const [nearScreen, setNearScreen] = useState(false)
const [isFullscreen] = useFullscreen() const [isFullscreen] = useFullscreen()
const [nearScreenOrFullscreen, setNearScreenOrFullscreen] = useState(false)
// Send position when scrolling. This is done with an IntersectionObserver // Send position when scrolling. This is done with an IntersectionObserver
// observing a div of 100vh height // observing a div of 100vh height
useEffect(() => { useEffect(() => {
if (!ref.current) return if (!ref.current) return
if (isFullscreen && !isFirefox) return
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
entries => { entries => {
const entry = entries[0] const entry = entries[0]
@ -127,7 +130,7 @@ function ViewportObserver({
) )
observer.observe(ref.current) observer.observe(ref.current)
return () => observer.disconnect() return () => observer.disconnect()
}, [sendPosition]) }, [sendPosition, isFullscreen])
// In case scrolling hasn't started yet, send up the position // In case scrolling hasn't started yet, send up the position
useEffect(() => { useEffect(() => {
@ -138,17 +141,9 @@ function ViewportObserver({
} }
}, [isAnyViewActive, sendPosition]) }, [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 ( return (
<View style={[a.flex_1, a.flex_row]}> <View style={[a.flex_1, a.flex_row]}>
{nearScreenOrFullscreen && children} {nearScreen && children}
<div <div
ref={ref} ref={ref}
style={{ style={{