[Video] Much simpler fix to fullscreen bug (#5251)
* much simpler fix * allow old behaviour on firefox * rm logszio/stable
parent
db9cf92d87
commit
6bc5a05f4b
|
@ -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={{
|
||||
|
|
Loading…
Reference in New Issue