From 3dbbe5b0f000fd86a0a24902d285f23a0ac9b5a6 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Tue, 9 Jan 2024 13:58:23 +0200
Subject: [PATCH] fix timeline note waitUntilInView rendering

---
 .../app/src/Components/Feed/TimelineFragment.tsx |  5 ++---
 .../app/src/Components/Feed/TimelineRenderer.tsx |  1 -
 .../src/Components/Spotlight/SpotlightMedia.tsx  | 16 ++++++++--------
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/app/src/Components/Feed/TimelineFragment.tsx b/packages/app/src/Components/Feed/TimelineFragment.tsx
index eb25800b..3fd2d917 100644
--- a/packages/app/src/Components/Feed/TimelineFragment.tsx
+++ b/packages/app/src/Components/Feed/TimelineFragment.tsx
@@ -11,7 +11,6 @@ export interface TimelineFragment {
 
 export interface TimelineFragProps {
   frag: TimelineFragment;
-  index: number;
   noteRenderer?: (ev: TaggedNostrEvent) => ReactNode;
   noteOnClick?: (ev: TaggedNostrEvent) => void;
   noteContext?: (ev: TaggedNostrEvent) => ReactNode;
@@ -26,7 +25,7 @@ export function TimelineFragment(props: TimelineFragProps) {
     <>
       {props.frag.title}
       {props.frag.events.map(
-        e =>
+        (e, index) =>
           props.noteRenderer?.(e) ?? (
             <Note
               data={e}
@@ -35,7 +34,7 @@ export function TimelineFragment(props: TimelineFragProps) {
               onClick={props.noteOnClick}
               context={props.noteContext?.(e)}
               options={options}
-              waitUntilInView={props.index > 5}
+              waitUntilInView={index > 5}
             />
           ),
       )}
diff --git a/packages/app/src/Components/Feed/TimelineRenderer.tsx b/packages/app/src/Components/Feed/TimelineRenderer.tsx
index 148c8eef..51893d0f 100644
--- a/packages/app/src/Components/Feed/TimelineRenderer.tsx
+++ b/packages/app/src/Components/Feed/TimelineRenderer.tsx
@@ -98,7 +98,6 @@ export function TimelineRenderer(props: TimelineRendererProps) {
           noteRenderer={props.noteRenderer}
           noteOnClick={props.noteOnClick}
           noteContext={props.noteContext}
-          index={index}
         />
       </ErrorBoundary>
     ));
diff --git a/packages/app/src/Components/Spotlight/SpotlightMedia.tsx b/packages/app/src/Components/Spotlight/SpotlightMedia.tsx
index 7f99f0ac..352cb474 100644
--- a/packages/app/src/Components/Spotlight/SpotlightMedia.tsx
+++ b/packages/app/src/Components/Spotlight/SpotlightMedia.tsx
@@ -20,7 +20,7 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
   const { proxy } = useImgProxy();
   const [idx, setIdx] = useState(props.idx);
 
-  const image = useMemo(() => {
+  const media = useMemo(() => {
     return props.media.at(idx % props.media.length);
   }, [idx, props]);
 
@@ -63,15 +63,15 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
   }, [dec, inc]); // Now dec and inc are stable
 
   const isVideo = useMemo(() => {
-    return image && videoSuffixes.some(suffix => image.endsWith(suffix));
-  }, [image]);
+    return media && videoSuffixes.some(suffix => media.endsWith(suffix));
+  }, [media]);
 
   const mediaEl = useMemo(() => {
-    if (image && isVideo) {
+    if (media && isVideo) {
       return (
         <video
-          src={image}
-          poster={proxy(image)}
+          src={media}
+          poster={proxy(media)}
           autoPlay={true}
           loop={true}
           controls={true}
@@ -79,9 +79,9 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
         />
       );
     } else {
-      return <ProxyImg src={image} className="max-h-screen max-w-full w-full object-contain" />;
+      return <ProxyImg src={media} className="max-h-screen max-w-full w-full object-contain" />;
     }
-  }, [image, isVideo]);
+  }, [media, isVideo]);
 
   const onClickBg = (e: React.MouseEvent) => {
     if (e.target === e.currentTarget) {