[Video] Fix web autoplay (#5274)
parent
dd2d0e6233
commit
991202966e
|
@ -43,16 +43,6 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
|
||||||
return () => observer.disconnect()
|
return () => observer.disconnect()
|
||||||
}, [sendPosition, isFullscreen])
|
}, [sendPosition, isFullscreen])
|
||||||
|
|
||||||
// In case scrolling hasn't started yet, send up the position
|
|
||||||
const isAnyViewActive = currentActiveView !== null
|
|
||||||
useEffect(() => {
|
|
||||||
if (ref.current && !isAnyViewActive) {
|
|
||||||
const rect = ref.current.getBoundingClientRect()
|
|
||||||
const position = rect.y + rect.height / 2
|
|
||||||
sendPosition(position)
|
|
||||||
}
|
|
||||||
}, [isAnyViewActive, sendPosition])
|
|
||||||
|
|
||||||
const [key, setKey] = useState(0)
|
const [key, setKey] = useState(0)
|
||||||
const renderError = useCallback(
|
const renderError = useCallback(
|
||||||
(error: unknown) => (
|
(error: unknown) => (
|
||||||
|
@ -84,7 +74,9 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
|
||||||
style={{display: 'flex', flex: 1, cursor: 'default'}}
|
style={{display: 'flex', flex: 1, cursor: 'default'}}
|
||||||
onClick={evt => evt.stopPropagation()}>
|
onClick={evt => evt.stopPropagation()}>
|
||||||
<ErrorBoundary renderError={renderError} key={key}>
|
<ErrorBoundary renderError={renderError} key={key}>
|
||||||
<ViewportObserver sendPosition={sendPosition}>
|
<ViewportObserver
|
||||||
|
sendPosition={sendPosition}
|
||||||
|
isAnyViewActive={currentActiveView !== null}>
|
||||||
<VideoEmbedInnerWeb
|
<VideoEmbedInnerWeb
|
||||||
embed={embed}
|
embed={embed}
|
||||||
active={active}
|
active={active}
|
||||||
|
@ -105,9 +97,11 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
|
||||||
function ViewportObserver({
|
function ViewportObserver({
|
||||||
children,
|
children,
|
||||||
sendPosition,
|
sendPosition,
|
||||||
|
isAnyViewActive,
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
sendPosition: (position: number) => void
|
sendPosition: (position: number) => void
|
||||||
|
isAnyViewActive: boolean
|
||||||
}) {
|
}) {
|
||||||
const ref = useRef<HTMLDivElement>(null)
|
const ref = useRef<HTMLDivElement>(null)
|
||||||
const [nearScreen, setNearScreen] = useState(false)
|
const [nearScreen, setNearScreen] = useState(false)
|
||||||
|
@ -134,6 +128,15 @@ function ViewportObserver({
|
||||||
return () => observer.disconnect()
|
return () => observer.disconnect()
|
||||||
}, [sendPosition, isFullscreen])
|
}, [sendPosition, isFullscreen])
|
||||||
|
|
||||||
|
// In case scrolling hasn't started yet, send up the position
|
||||||
|
useEffect(() => {
|
||||||
|
if (ref.current && !isAnyViewActive) {
|
||||||
|
const rect = ref.current.getBoundingClientRect()
|
||||||
|
const position = rect.y + rect.height / 2
|
||||||
|
sendPosition(position)
|
||||||
|
}
|
||||||
|
}, [isAnyViewActive, sendPosition])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={[a.flex_1, a.flex_row]}>
|
<View style={[a.flex_1, a.flex_row]}>
|
||||||
{nearScreen && children}
|
{nearScreen && children}
|
||||||
|
|
Loading…
Reference in New Issue