[Video] Fix web autoplay (#5274)

1 files changed, 14 insertions, 11 deletions

diff --git a/src/view/com/util/post-embeds/VideoEmbed.web.tsx b/src/view/com/util/post-embeds/VideoEmbed.web.tsx
index a41bf2634..908c06e22 100644
--- a/src/view/com/util/post-embeds/VideoEmbed.web.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbed.web.tsx
@@ -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}