From ada19e1e7fa15a66d4ab913010d064735b6aa6be Mon Sep 17 00:00:00 2001
From: Samuel Newman <10959775+mozzius@users.noreply.github.com>
Date: Fri, 2 Aug 2024 22:40:09 +0200
Subject: [PATCH] clean up component structure and organisation

---
 src/view/com/util/post-embeds/VideoEmbed.tsx  |  2 -
 .../com/util/post-embeds/VideoEmbed.web.tsx   | 80 ++++++++++++++++---
 .../com/util/post-embeds/VideoEmbedInner.tsx  |  2 -
 .../util/post-embeds/VideoEmbedInner.web.tsx  | 62 --------------
 4 files changed, 71 insertions(+), 75 deletions(-)

diff --git a/src/view/com/util/post-embeds/VideoEmbed.tsx b/src/view/com/util/post-embeds/VideoEmbed.tsx
index ca32364842..99ff77e802 100644
--- a/src/view/com/util/post-embeds/VideoEmbed.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbed.tsx
@@ -32,9 +32,7 @@ export function VideoEmbed({source}: {source: string}) {
           active={active}
           setActive={setActive}
           // web only
-          sendPosition={() => {}}
           onScreen={true}
-          onGoFarOffScreen={() => {}}
         />
       ) : (
         <Button
diff --git a/src/view/com/util/post-embeds/VideoEmbed.web.tsx b/src/view/com/util/post-embeds/VideoEmbed.web.tsx
index 6c5d0018db..74b4b1a64e 100644
--- a/src/view/com/util/post-embeds/VideoEmbed.web.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbed.web.tsx
@@ -45,8 +45,6 @@ export function VideoEmbed({source}: {source: string}) {
     [key],
   )
 
-  console.log(key)
-
   return (
     <View
       style={[
@@ -61,20 +59,84 @@ export function VideoEmbed({source}: {source: string}) {
         style={{display: 'flex', flex: 1, cursor: 'default'}}
         onClick={evt => evt.stopPropagation()}>
         <ErrorBoundary renderError={renderError} key={key}>
-          <VideoEmbedInner
-            source={source}
-            active={active}
-            setActive={setActive}
+          <ViewportObserver
             sendPosition={sendPosition}
-            onScreen={onScreen}
-            isAnyViewActive={currentActiveView !== null}
-          />
+            isAnyViewActive={currentActiveView !== null}>
+            <VideoEmbedInner
+              source={source}
+              active={active}
+              setActive={setActive}
+              onScreen={onScreen}
+            />
+          </ViewportObserver>
         </ErrorBoundary>
       </div>
     </View>
   )
 }
 
+/**
+ * Renders a 100vh tall div and watches it with an IntersectionObserver to
+ * send the position of the div when it's near the screen.
+ */
+function ViewportObserver({
+  children,
+  sendPosition,
+  isAnyViewActive,
+}: {
+  children: React.ReactNode
+  sendPosition: (position: number) => void
+  isAnyViewActive?: boolean
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [nearScreen, setNearScreen] = useState(false)
+
+  // Send position when scrolling. This is done with an IntersectionObserver
+  // observing a div of 100vh height
+  useEffect(() => {
+    if (!ref.current) return
+    const observer = new IntersectionObserver(
+      entries => {
+        const entry = entries[0]
+        if (!entry) return
+        const position =
+          entry.boundingClientRect.y + entry.boundingClientRect.height / 2
+        sendPosition(position)
+        setNearScreen(entry.isIntersecting)
+      },
+      {threshold: Array.from({length: 101}, (_, i) => i / 100)},
+    )
+    observer.observe(ref.current)
+    return () => observer.disconnect()
+  }, [sendPosition])
+
+  // 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}
+      <div
+        ref={ref}
+        style={{
+          position: 'absolute',
+          top: 'calc(50% - 50vh)',
+          left: '50%',
+          height: '100vh',
+          width: 1,
+          pointerEvents: 'none',
+        }}
+      />
+    </View>
+  )
+}
+
 function VideoError({error, retry}: {error: unknown; retry: () => void}) {
   const t = useTheme()
   const {_} = useLingui()
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner.tsx b/src/view/com/util/post-embeds/VideoEmbedInner.tsx
index cb213c0edf..9b1fd54fb6 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbedInner.tsx
@@ -17,9 +17,7 @@ export function VideoEmbedInner({}: {
   source: string
   active: boolean
   setActive: () => void
-  sendPosition: (position: number) => void
   onScreen: boolean
-  isAnyViewActive?: boolean
 }) {
   const player = useVideoPlayer()
   const aref = useAnimatedRef<Animated.View>()
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner.web.tsx b/src/view/com/util/post-embeds/VideoEmbedInner.web.tsx
index dd7cedde5a..b5e4f9954b 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner.web.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbedInner.web.tsx
@@ -6,68 +6,6 @@ import {atoms as a} from '#/alf'
 import {Controls} from './VideoWebControls'
 
 export function VideoEmbedInner({
-  active,
-  sendPosition,
-  isAnyViewActive,
-  ...props
-}: {
-  source: string
-  active: boolean
-  setActive: () => void
-  sendPosition: (position: number) => void
-  onScreen: boolean
-  isAnyViewActive?: boolean
-}) {
-  const ref = useRef<HTMLDivElement>(null)
-  const [nearScreen, setNearScreen] = useState(false)
-
-  // Send position when scrolling. This is done with an IntersectionObserver
-  // observing a div of 100vh height
-  useEffect(() => {
-    if (!ref.current) return
-    const observer = new IntersectionObserver(
-      entries => {
-        const entry = entries[0]
-        if (!entry) return
-        const position =
-          entry.boundingClientRect.y + entry.boundingClientRect.height / 2
-        sendPosition(position)
-        setNearScreen(entry.isIntersecting)
-      },
-      {threshold: Array.from({length: 101}, (_, i) => i / 100)},
-    )
-    observer.observe(ref.current)
-    return () => observer.disconnect()
-  }, [sendPosition])
-
-  // 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 && <VideoPlayer active={active} {...props} />}
-      <div
-        ref={ref}
-        style={{
-          position: 'absolute',
-          top: 'calc(50% - 50vh)',
-          left: '50%',
-          height: '100vh',
-          width: 1,
-          pointerEvents: 'none',
-        }}
-      />
-    </View>
-  )
-}
-
-export function VideoPlayer({
   source,
   active,
   setActive,