Replace generateKeyed$ with a redesigned generateItems operator

And use it to clean up a number of code smells, fix some reactivity bugs, and avoid some resource leaks.

src/tile/GridTile.tsx

@@ -58,7 +58,9 @@ interface TileProps {
   style?: ComponentProps<typeof animated.div>["style"];
   targetWidth: number;
   targetHeight: number;
+  focusUrl: string | undefined;
   displayName: string;
+  mxcAvatarUrl: string | undefined;
   showSpeakingIndicators: boolean;
   focusable: boolean;
 }
@@ -81,7 +83,9 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
   menuStart,
   menuEnd,
   className,
+  focusUrl,
   displayName,
+  mxcAvatarUrl,
   focusable,
   ...props
 }) => {
@@ -145,7 +149,7 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
     <MediaView
       ref={ref}
       video={video ?? undefined}
-      member={vm.member}
+      userId={vm.userId}
       unencryptedWarning={unencryptedWarning}
       encryptionStatus={encryptionStatus}
       videoEnabled={videoEnabled}
@@ -164,6 +168,7 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
         />
       }
       displayName={displayName}
+      mxcAvatarUrl={mxcAvatarUrl}
       focusable={focusable}
       primaryButton={
         primaryButton ?? (
@@ -190,7 +195,7 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
       currentReaction={reaction ?? undefined}
       raisedHandOnClick={raisedHandOnClick}
       localParticipant={vm.local}
-      focusUrl={vm.focusURL}
+      focusUrl={focusUrl}
       audioStreamStats={audioStreamStats}
       videoStreamStats={videoStreamStats}
       {...props}
@@ -359,7 +364,9 @@ export const GridTile: FC<GridTileProps> = ({
   const ourRef = useRef<HTMLDivElement | null>(null);
   const ref = useMergedRefs(ourRef, theirRef);
   const media = useBehavior(vm.media$);
+  const focusUrl = useBehavior(media.focusUrl$);
   const displayName = useBehavior(media.displayName$);
+  const mxcAvatarUrl = useBehavior(media.mxcAvatarUrl$);
 
   if (media instanceof LocalUserMediaViewModel) {
     return (
@@ -367,7 +374,9 @@ export const GridTile: FC<GridTileProps> = ({
         ref={ref}
         vm={media}
         onOpenProfile={onOpenProfile}
+        focusUrl={focusUrl}
         displayName={displayName}
+        mxcAvatarUrl={mxcAvatarUrl}
         {...props}
       />
     );
@@ -376,7 +385,9 @@ export const GridTile: FC<GridTileProps> = ({
       <RemoteUserMediaTile
         ref={ref}
         vm={media}
+        focusUrl={focusUrl}
         displayName={displayName}
+        mxcAvatarUrl={mxcAvatarUrl}
         {...props}
       />
     );

src/tile/MediaView.tsx

@@ -7,7 +7,6 @@ Please see LICENSE in the repository root for full details.
 
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
 import { animated } from "@react-spring/web";
-import { type RoomMember } from "matrix-js-sdk";
 import { type FC, type ComponentProps, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
@@ -32,12 +31,13 @@ interface Props extends ComponentProps<typeof animated.div> {
   video: TrackReferenceOrPlaceholder | undefined;
   videoFit: "cover" | "contain";
   mirror: boolean;
-  member: RoomMember;
+  userId: string;
   videoEnabled: boolean;
   unencryptedWarning: boolean;
   encryptionStatus: EncryptionStatus;
   nameTagLeadingIcon?: ReactNode;
   displayName: string;
+  mxcAvatarUrl: string | undefined;
   focusable: boolean;
   primaryButton?: ReactNode;
   raisedHandTime?: Date;
@@ -59,11 +59,12 @@ export const MediaView: FC<Props> = ({
   video,
   videoFit,
   mirror,
-  member,
+  userId,
   videoEnabled,
   unencryptedWarning,
   nameTagLeadingIcon,
   displayName,
+  mxcAvatarUrl,
   focusable,
   primaryButton,
   encryptionStatus,
@@ -94,10 +95,10 @@ export const MediaView: FC<Props> = ({
     >
       <div className={styles.bg}>
         <Avatar
-          id={member?.userId ?? displayName}
+          id={userId}
           name={displayName}
           size={avatarSize}
-          src={member?.getMxcAvatarUrl()}
+          src={mxcAvatarUrl}
           className={styles.avatar}
           style={{ display: video && videoEnabled ? "none" : "initial" }}
         />

src/tile/SpotlightTile.tsx

@@ -27,7 +27,6 @@ import { useObservableRef } from "observable-hooks";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
-import { type RoomMember } from "matrix-js-sdk";
 
 import FullScreenMaximiseIcon from "../icons/FullScreenMaximise.svg?react";
 import FullScreenMinimiseIcon from "../icons/FullScreenMinimise.svg?react";
@@ -55,10 +54,12 @@ interface SpotlightItemBaseProps {
   targetHeight: number;
   video: TrackReferenceOrPlaceholder | undefined;
   videoEnabled: boolean;
-  member: RoomMember;
+  userId: string;
   unencryptedWarning: boolean;
   encryptionStatus: EncryptionStatus;
+  focusUrl: string | undefined;
   displayName: string;
+  mxcAvatarUrl: string | undefined;
   focusable: boolean;
   "aria-hidden"?: boolean;
   localParticipant: boolean;
@@ -78,7 +79,7 @@ const SpotlightLocalUserMediaItem: FC<SpotlightLocalUserMediaItemProps> = ({
   ...props
 }) => {
   const mirror = useBehavior(vm.mirror$);
-  return <MediaView mirror={mirror} focusUrl={vm.focusURL} {...props} />;
+  return <MediaView mirror={mirror} {...props} />;
 };
 
 SpotlightLocalUserMediaItem.displayName = "SpotlightLocalUserMediaItem";
@@ -134,7 +135,9 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
 }) => {
   const ourRef = useRef<HTMLDivElement | null>(null);
   const ref = useMergedRefs(ourRef, theirRef);
+  const focusUrl = useBehavior(vm.focusUrl$);
   const displayName = useBehavior(vm.displayName$);
+  const mxcAvatarUrl = useBehavior(vm.mxcAvatarUrl$);
   const video = useBehavior(vm.video$);
   const videoEnabled = useBehavior(vm.videoEnabled$);
   const unencryptedWarning = useBehavior(vm.unencryptedWarning$);
@@ -161,11 +164,13 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
     className: classNames(styles.item, { [styles.snap]: snap }),
     targetWidth,
     targetHeight,
-    video,
+    video: video ?? undefined,
     videoEnabled,
-    member: vm.member,
+    userId: vm.userId,
     unencryptedWarning,
+    focusUrl,
     displayName,
+    mxcAvatarUrl,
     focusable,
     encryptionStatus,
     "aria-hidden": ariaHidden,