[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 {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={{
|
||||||
|
|
Loading…
Reference in New Issue