Tell tiles whether they're actually visible in a more timely manner

element-hq · Oct 28, 2024 · d3a5546 · d3a5546
1 parent 7650762
commit d3a5546
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 20 deletions.
diff --git a/src/grid/Grid.tsx b/src/grid/Grid.tsx
@@ -24,6 +24,7 @@ import {
   createContext,
   forwardRef,
   memo,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -33,6 +34,8 @@ import {
 import useMeasure from "react-use-measure";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
+import { useObservableEagerState } from "observable-hooks";
+import { fromEvent, map, startWith } from "rxjs";
 
 import styles from "./Grid.module.css";
 import { useMergedRefs } from "../useMergedRefs";
@@ -51,6 +54,7 @@ interface Tile<Model> {
   id: string;
   model: Model;
   onDrag: DragCallback | undefined;
+  setVisible: (visible: boolean) => void;
 }
 
 type PlacedTile<Model> = Tile<Model> & Rect;
@@ -84,6 +88,7 @@ interface SlotProps<Model> extends Omit<ComponentProps<"div">, "onDrag"> {
   id: string;
   model: Model;
   onDrag?: DragCallback;
+  onVisibilityChange?: (visible: boolean) => void;
   style?: CSSProperties;
   className?: string;
 }
@@ -131,6 +136,11 @@ export function useUpdateLayout(): void {
   );
 }
 
+const windowHeightObservable = fromEvent(window, "resize").pipe(
+  startWith(null),
+  map(() => window.innerHeight),
+);
+
 export interface LayoutProps<LayoutModel, TileModel, R extends HTMLElement> {
   ref: LegacyRef<R>;
   model: LayoutModel;
@@ -232,19 +242,42 @@ export function Grid<
   const [gridRoot, gridRef2] = useState<HTMLElement | null>(null);
   const gridRef = useMergedRefs<HTMLElement>(gridRef1, gridRef2);
 
+  const windowHeight = useObservableEagerState(windowHeightObservable);
   const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
   const [generation, setGeneration] = useState<number | null>(null);
   const tiles = useInitial(() => new Map<string, Tile<TileModel>>());
   const prefersReducedMotion = usePrefersReducedMotion();
 
   const Slot: FC<SlotProps<TileModel>> = useMemo(
     () =>
-      function Slot({ id, model, onDrag, style, className, ...props }) {
+      function Slot({
+        id,
+        model,
+        onDrag,
+        onVisibilityChange,
+        style,
+        className,
+        ...props
+      }) {
         const ref = useRef<HTMLDivElement | null>(null);
+        const prevVisible = useRef<boolean | null>(null);
+        const setVisible = useCallback(
+          (visible: boolean) => {
+            if (
+              onVisibilityChange !== undefined &&
+              visible !== prevVisible.current
+            ) {
+              onVisibilityChange(visible);
+              prevVisible.current = visible;
+            }
+          },
+          [onVisibilityChange],
+        );
+
         useEffect(() => {
-          tiles.set(id, { id, model, onDrag });
+          tiles.set(id, { id, model, onDrag, setVisible });
           return (): void => void tiles.delete(id);
-        }, [id, model, onDrag]);
+        }, [id, model, onDrag, setVisible]);
 
         return (
           <div
@@ -302,6 +335,17 @@ export function Grid<
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [gridRoot, layoutRoot, tiles, gridBounds, generation]);
 
+  // The height of the portion of the grid visible at any given time
+  const visibleHeight = useMemo(
+    () => Math.min(gridBounds.bottom, windowHeight) - gridBounds.top,
+    [gridBounds, windowHeight],
+  );
+
+  useEffect(() => {
+    for (const tile of placedTiles)
+      tile.setVisible(tile.y + tile.height <= visibleHeight);
+  }, [placedTiles, visibleHeight]);
+
   // Drag state is stored in a ref rather than component state, because we use
   // react-spring's imperative API during gestures to improve responsiveness
   const dragState = useRef<DragState | null>(null);

diff --git a/src/grid/GridLayout.tsx b/src/grid/GridLayout.tsx
@@ -93,7 +93,13 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
         }
       >
         {model.grid.map((m) => (
-          <Slot key={m.id} className={styles.slot} id={m.id} model={m} />
+          <Slot
+            key={m.id}
+            className={styles.slot}
+            id={m.id}
+            model={m}
+            onVisibilityChange={m.setVisible}
+          />
         ))}
       </div>
     );

diff --git a/src/grid/OneOnOneLayout.tsx b/src/grid/OneOnOneLayout.tsx
@@ -52,6 +52,7 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
         <Slot
           id={model.remote.id}
           model={model.remote}
+          onVisibilityChange={model.remote.setVisible}
           className={styles.container}
           style={{ width: tileWidth, height: tileHeight }}
         >
@@ -60,6 +61,7 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
             id={model.local.id}
             model={model.local}
             onDrag={onDragLocalTile}
+            onVisibilityChange={model.local.setVisible}
             data-block-alignment={pipAlignmentValue.block}
             data-inline-alignment={pipAlignmentValue.inline}
           />

diff --git a/src/grid/SpotlightExpandedLayout.tsx b/src/grid/SpotlightExpandedLayout.tsx
@@ -63,6 +63,7 @@ export const makeSpotlightExpandedLayout: CallLayout<
             id={model.pip.id}
             model={model.pip}
             onDrag={onDragPip}
+            onVisibilityChange={model.pip.setVisible}
             data-block-alignment={pipAlignmentValue.block}
             data-inline-alignment={pipAlignmentValue.inline}
           />

diff --git a/src/grid/SpotlightLandscapeLayout.tsx b/src/grid/SpotlightLandscapeLayout.tsx
@@ -63,7 +63,13 @@ export const makeSpotlightLandscapeLayout: CallLayout<
         />
         <div className={styles.grid}>
           {model.grid.map((m) => (
-            <Slot key={m.id} className={styles.slot} id={m.id} model={m} />
+            <Slot
+              key={m.id}
+              className={styles.slot}
+              id={m.id}
+              model={m}
+              onVisibilityChange={m.setVisible}
+            />
           ))}
         </div>
       </div>

diff --git a/src/grid/SpotlightPortraitLayout.tsx b/src/grid/SpotlightPortraitLayout.tsx
@@ -84,7 +84,13 @@ export const makeSpotlightPortraitLayout: CallLayout<
         />
         <div className={styles.grid}>
           {model.grid.map((m) => (
-            <Slot key={m.id} className={styles.slot} id={m.id} model={m} />
+            <Slot
+              key={m.id}
+              className={styles.slot}
+              id={m.id}
+              model={m}
+              onVisibilityChange={m.setVisible}
+            />
           ))}
         </div>
       </div>

diff --git a/src/state/TileViewModel.ts b/src/state/TileViewModel.ts
@@ -24,9 +24,7 @@ export class GridTileViewModel extends ViewModel {
    */
   public readonly visible: Observable<boolean> = this.visible_;
 
-  public setVisible(value: boolean): void {
-    this.visible_.next(value);
-  }
+  public setVisible = (value: boolean): void => this.visible_.next(value);
 
   public constructor(public readonly media: Observable<UserMediaViewModel>) {
     super();

diff --git a/src/tile/GridTile.tsx b/src/tile/GridTile.tsx
@@ -10,7 +10,6 @@ import {
   ReactNode,
   forwardRef,
   useCallback,
-  useEffect,
   useRef,
   useState,
 } from "react";
@@ -284,16 +283,6 @@ export const GridTile = forwardRef<HTMLDivElement, GridTileProps>(
     const ref = useMergedRefs(ourRef, theirRef);
     const media = useObservableEagerState(vm.media);
     const displayName = useDisplayName(media);
-    useEffect(() => {
-      const io = new IntersectionObserver(
-        (entries) => {
-          vm.setVisible(entries.some((e) => e.isIntersecting));
-        },
-        { threshold: 1 },
-      );
-      io.observe(ourRef.current!);
-      return (): void => io.disconnect();
-    }, [vm]);
 
     if (media instanceof LocalUserMediaViewModel) {
       return (