zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/view/com/util/post-embeds/VideoEmbed.web.tsx
View File

@ -43,16 +43,6 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
return () => observer.disconnect()
}, [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 renderError = useCallback(
(error: unknown) => (
@ -84,7 +74,9 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
style={{display: 'flex', flex: 1, cursor: 'default'}}
onClick={evt => evt.stopPropagation()}>
<ErrorBoundary renderError={renderError} key={key}>
<ViewportObserver sendPosition={sendPosition}>
<ViewportObserver
sendPosition={sendPosition}
isAnyViewActive={currentActiveView !== null}>
<VideoEmbedInnerWeb
embed={embed}
active={active}
@ -105,9 +97,11 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
function ViewportObserver({
children,
sendPosition,
isAnyViewActive,
}: {
children: React.ReactNode
sendPosition: (position: number) => void
isAnyViewActive: boolean
}) {
const ref = useRef<HTMLDivElement>(null)
const [nearScreen, setNearScreen] = useState(false)
@ -134,6 +128,15 @@ function ViewportObserver({
return () => observer.disconnect()
}, [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 (
<View style={[a.flex_1, a.flex_row]}>
{nearScreen && children}