[Video] Fix web autoplay (#5274)

zio/stable
Samuel Newman 2024-09-11 19:36:54 +01:00 committed by GitHub
parent dd2d0e6233
commit 991202966e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 11 deletions

View File

@ -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}