From d1360376c3eb1535f432251a2b98ed1d66655ddc Mon Sep 17 00:00:00 2001
From: Samuel Newman <10959775+mozzius@users.noreply.github.com>
Date: Fri, 26 Jul 2024 14:00:06 +0100
Subject: [PATCH] disable perf optimisation to allow overflow

---
 .../Messages/Conversation/MessagesList.tsx    |  3 ---
 src/view/com/posts/FeedItem.tsx               |  1 -
 src/view/com/util/List.tsx                    |  2 --
 src/view/com/util/List.web.tsx                | 22 ++++--------------
 .../util/post-embeds/ActiveVideoContext.tsx   | 10 +-------
 .../com/util/post-embeds/VideoEmbed.web.tsx   |  9 ++++----
 .../com/util/post-embeds/VideoEmbedInner.tsx  |  1 +
 .../util/post-embeds/VideoEmbedInner.web.tsx  | 23 ++++++++++---------
 8 files changed, 23 insertions(+), 48 deletions(-)

diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx
index 11b951e99d..c0e78e9789 100644
--- a/src/screens/Messages/Conversation/MessagesList.tsx
+++ b/src/screens/Messages/Conversation/MessagesList.tsx
@@ -387,9 +387,6 @@ export function MessagesList({
           renderItem={renderItem}
           keyExtractor={keyExtractor}
           disableFullWindowScroll={true}
-          // Prevents wrong position in Firefox when sending a message
-          // as well as scroll getting stuck on Chome when scrolling upwards.
-          disableContainStyle={true}
           disableVirtualization={true}
           style={animatedListStyle}
           // The extra two items account for the header and the footer components
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 9ddc54a989..f811dda90f 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -509,7 +509,6 @@ const styles = StyleSheet.create({
     paddingRight: 15,
     // @ts-ignore web only -prf
     cursor: 'pointer',
-    overflow: 'hidden',
   },
   replyLine: {
     width: 2,
diff --git a/src/view/com/util/List.tsx b/src/view/com/util/List.tsx
index e1a10e4741..9d9b1d8026 100644
--- a/src/view/com/util/List.tsx
+++ b/src/view/com/util/List.tsx
@@ -28,8 +28,6 @@ export type ListProps<ItemT> = Omit<
   // Web only prop to contain the scroll to the container rather than the window
   disableFullWindowScroll?: boolean
   sideBorders?: boolean
-  // Web only prop to disable a perf optimization (which would otherwise be on).
-  disableContainStyle?: boolean
 }
 export type ListRef = React.MutableRefObject<FlatList_INTERNAL | null>
 
diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx
index 12d223db03..ba33e5df8c 100644
--- a/src/view/com/util/List.web.tsx
+++ b/src/view/com/util/List.web.tsx
@@ -4,11 +4,10 @@ import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/rean
 
 import {batchedUpdates} from '#/lib/batchedUpdates'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useScrollHandlers} from '#/lib/ScrollContext'
-import {isSafari} from 'lib/browser'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {addStyle} from 'lib/styles'
+import {addStyle} from '#/lib/styles'
 
 export type ListMethods = any // TODO: Better types.
 export type ListProps<ItemT> = Omit<
@@ -26,8 +25,6 @@ export type ListProps<ItemT> = Omit<
   // Web only prop to contain the scroll to the container rather than the window
   disableFullWindowScroll?: boolean
   sideBorders?: boolean
-  // Web only prop to disable a perf optimization (which would otherwise be on).
-  disableContainStyle?: boolean
 }
 export type ListRef = React.MutableRefObject<any | null> // TODO: Better types.
 
@@ -60,7 +57,6 @@ function ListImpl<ItemT>(
     extraData,
     style,
     sideBorders = true,
-    disableContainStyle,
     ...props
   }: ListProps<ItemT>,
   ref: React.Ref<ListMethods>,
@@ -363,7 +359,6 @@ function ListImpl<ItemT>(
                   renderItem={renderItem}
                   extraData={extraData}
                   onItemSeen={onItemSeen}
-                  disableContainStyle={disableContainStyle}
                 />
               )
             })}
@@ -413,7 +408,6 @@ let Row = function RowImpl<ItemT>({
   renderItem,
   extraData: _unused,
   onItemSeen,
-  disableContainStyle,
 }: {
   item: ItemT
   index: number
@@ -423,7 +417,6 @@ let Row = function RowImpl<ItemT>({
     | ((data: {index: number; item: any; separators: any}) => React.ReactNode)
   extraData: any
   onItemSeen: ((item: any) => void) | undefined
-  disableContainStyle?: boolean
 }): React.ReactNode {
   const rowRef = React.useRef(null)
   const intersectionTimeout = React.useRef<NodeJS.Timer | undefined>(undefined)
@@ -472,11 +465,8 @@ let Row = function RowImpl<ItemT>({
     return null
   }
 
-  const shouldDisableContainStyle = disableContainStyle || isSafari
   return (
-    <View
-      style={shouldDisableContainStyle ? undefined : styles.contain}
-      ref={rowRef}>
+    <View ref={rowRef}>
       {renderItem({item, index, separators: null as any})}
     </View>
   )
@@ -547,10 +537,6 @@ const styles = StyleSheet.create({
     marginLeft: 'auto',
     marginRight: 'auto',
   },
-  contain: {
-    // @ts-ignore web only
-    contain: 'layout paint',
-  },
   minHeightViewport: {
     // @ts-ignore web only
     minHeight: '100vh',
diff --git a/src/view/com/util/post-embeds/ActiveVideoContext.tsx b/src/view/com/util/post-embeds/ActiveVideoContext.tsx
index 2112e7c21b..ec1619a347 100644
--- a/src/view/com/util/post-embeds/ActiveVideoContext.tsx
+++ b/src/view/com/util/post-embeds/ActiveVideoContext.tsx
@@ -32,14 +32,6 @@ export function ActiveVideoProvider({children}: {children: React.ReactNode}) {
       sendViewPosition: (viewId: string, y: number) => {
         if (isNative) return
 
-        // console.log(
-        //   'sendViewPosition',
-        //   viewId,
-        //   y,
-        //   activeViewId,
-        //   activeViewLocationRef.current,
-        // )
-
         if (viewId === activeViewId) {
           activeViewLocationRef.current = y
         } else {
@@ -57,7 +49,7 @@ export function ActiveVideoProvider({children}: {children: React.ReactNode}) {
         }
 
         function distanceToIdealPosition(yPos: number) {
-          return Math.abs(yPos - windowHeight / 3)
+          return Math.abs(yPos - windowHeight / 2.5)
         }
 
         function withinViewport(yPos: number) {
diff --git a/src/view/com/util/post-embeds/VideoEmbed.web.tsx b/src/view/com/util/post-embeds/VideoEmbed.web.tsx
index e347d0da37..41c8f36be0 100644
--- a/src/view/com/util/post-embeds/VideoEmbed.web.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbed.web.tsx
@@ -12,9 +12,10 @@ import {VideoEmbedInner} from './VideoEmbedInner'
 export function VideoEmbed({source}: {source: string}) {
   const t = useTheme()
   const ref = useRef<HTMLDivElement>(null)
-  const {active, setActive, sendPosition} = useActiveVideoView({
-    source,
-  })
+  const {active, setActive, sendPosition, currentActiveView} =
+    useActiveVideoView({
+      source,
+    })
   const [onScreen, setOnScreen] = useState(false)
   const {_} = useLingui()
 
@@ -24,7 +25,6 @@ export function VideoEmbed({source}: {source: string}) {
     if (!ref.current) return
     const observer = new IntersectionObserver(
       entries => {
-        console.log('OUTER')
         const entry = entries[0]
         if (!entry) return
         setOnScreen(entry.isIntersecting)
@@ -54,6 +54,7 @@ export function VideoEmbed({source}: {source: string}) {
             setActive={setActive}
             sendPosition={sendPosition}
             onScreen={onScreen}
+            isAnyViewActive={currentActiveView !== null}
           />
         ) : (
           <Button
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner.tsx b/src/view/com/util/post-embeds/VideoEmbedInner.tsx
index 43c4be5fb0..cb213c0edf 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbedInner.tsx
@@ -19,6 +19,7 @@ export function VideoEmbedInner({}: {
   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 a676fc41ef..df62fd2028 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner.web.tsx
+++ b/src/view/com/util/post-embeds/VideoEmbedInner.web.tsx
@@ -7,6 +7,7 @@ import {atoms as a, useTheme} from '#/alf'
 export function VideoEmbedInner({
   active,
   sendPosition,
+  isAnyViewActive,
   ...props
 }: {
   source: string
@@ -14,6 +15,7 @@ export function VideoEmbedInner({
   setActive: () => void
   sendPosition: (position: number) => void
   onScreen: boolean
+  isAnyViewActive?: boolean
 }) {
   const ref = useRef<HTMLDivElement>(null)
 
@@ -25,7 +27,6 @@ export function VideoEmbedInner({
       entries => {
         const entry = entries[0]
         if (!entry) return
-        console.log('observing', entry.intersectionRatio)
         const position =
           entry.boundingClientRect.y + entry.boundingClientRect.height / 2
         sendPosition(position)
@@ -38,12 +39,12 @@ export function VideoEmbedInner({
 
   // In case scrolling hasn't started yet, send up the position
   useEffect(() => {
-    if (ref.current && !active) {
+    if (ref.current && !isAnyViewActive) {
       const rect = ref.current.getBoundingClientRect()
-      const position = rect.top + rect.height / 2
+      const position = rect.y + rect.height / 2
       sendPosition(position)
     }
-  }, [active, sendPosition])
+  }, [isAnyViewActive, sendPosition])
 
   return (
     <View style={[a.flex_1, a.flex_row]}>
@@ -53,9 +54,10 @@ export function VideoEmbedInner({
         style={{
           position: 'absolute',
           top: 'calc(50% - 50vh)',
+          left: '50%',
           height: '100vh',
-          width: 10,
-          background: 'green',
+          width: 1,
+          pointerEvents: 'none',
         }}
       />
     </View>
@@ -106,13 +108,11 @@ export function VideoPlayer({
 
   useEffect(() => {
     if (!ref.current) return
-    if (active && onScreen) {
-      // ref.current?.play()
-    } else {
-      ref.current?.pause()
+    if (!onScreen || !active) {
+      ref.current.pause()
       setFocused(false)
     }
-  }, [active, onScreen])
+  }, [onScreen, active])
 
   return (
     <View
@@ -141,6 +141,7 @@ export function VideoPlayer({
         preload="none"
         loop
         muted={!focused}
+        autoPlay={active}
         onClick={evt => {
           evt.stopPropagation()
           if (focused) {