Decouple video grid from video tile components

This is an attempt to address the feedback in https://github.com/vector-im/element-call/pull/1099#discussion_r1226863404 that the video grid and video tile components have become too tightly coupled. After this change, the only requirements that the video grid makes of its child components are:

- They accept ref, style, and item props
- They attach the ref and styles to a react-spring animated element

Note: I removed the video grid Storybook file, because I'm not aware of anyone using Storybook for development of Element Call beyond Robert, and it would take some effort to fix to work with these changes.

src/room/InCallView.module.css

@@ -82,6 +82,9 @@ limitations under the License.
   bottom: 0;
 }
 
+/* CSS makes us put a condition here, even though all we want to do is
+unconditionally select the container so we can use cqmin units */
+@container videoTile (width > 0) {
   .avatar {
     position: absolute;
     top: 50%;
@@ -89,11 +92,12 @@ limitations under the License.
     transform: translate(-50%, -50%);
     /* To make avatars scale smoothly with their tiles during animations, we
     override the styles set on the element */
-  --avatarSize: calc(min(var(--tileWidth), var(--tileHeight)) / 2);
+    --avatarSize: 50cqmin; /* Half of the smallest dimension of the tile */
     width: var(--avatarSize) !important;
     height: var(--avatarSize) !important;
     border-radius: 10000px !important;
   }
+}
 
 @media (min-height: 300px) {
   .inRoom {

src/room/InCallView.tsx

@@ -44,12 +44,7 @@ import {
   RoomHeaderInfo,
   VersionMismatchWarning,
 } from "../Header";
-import {
+import { VideoGrid, useVideoGridLayout } from "../video-grid/VideoGrid";
-  VideoGrid,
-  useVideoGridLayout,
-  ChildrenProperties,
-} from "../video-grid/VideoGrid";
-import { VideoTileContainer } from "../video-grid/VideoTileContainer";
 import { GroupCallInspector } from "./GroupCallInspector";
 import { GridLayoutMenu } from "./GridLayoutMenu";
 import { Avatar } from "../Avatar";
@@ -77,6 +72,7 @@ import { SettingsModal } from "../settings/SettingsModal";
 import { InviteModal } from "./InviteModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
+import { VideoTile } from "../video-grid/VideoTile";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -303,7 +299,7 @@ export function InCallView({
     }
     if (maximisedParticipant) {
       return (
-        <VideoTileContainer
+        <VideoTile
           targetHeight={bounds.height}
           targetWidth={bounds.width}
           key={maximisedParticipant.id}
@@ -311,10 +307,10 @@ export function InCallView({
           getAvatar={renderAvatar}
           audioContext={audioContext}
           audioDestination={audioDestination}
-          disableSpeakingIndicator={true}
           maximised={Boolean(maximisedParticipant)}
           fullscreen={maximisedParticipant === fullscreenParticipant}
           onFullscreen={toggleFullscreen}
+          showSpeakingIndicator={false}
         />
       );
     }
@@ -325,17 +321,16 @@ export function InCallView({
         layout={layout}
         disableAnimations={prefersReducedMotion || isSafari}
       >
-        {({ item, ...rest }: ChildrenProperties) => (
+        {(props) => (
-          <VideoTileContainer
+          <VideoTile
-            item={item}
             getAvatar={renderAvatar}
             audioContext={audioContext}
             audioDestination={audioDestination}
-            disableSpeakingIndicator={items.length < 3}
             maximised={false}
             fullscreen={false}
             onFullscreen={toggleFullscreen}
-            {...rest}
+            showSpeakingIndicator={items.length > 2}
+            {...props}
           />
         )}
       </Grid>

src/useMergedRefs.ts

@@ -21,14 +21,14 @@ import { MutableRefObject, RefCallback, useCallback } from "react";
  * same DOM node.
  */
 export const useMergedRefs = <T>(
-  ...refs: (MutableRefObject<T | null> | RefCallback<T | null>)[]
+  ...refs: (MutableRefObject<T | null> | RefCallback<T | null> | null)[]
 ): RefCallback<T | null> =>
   useCallback(
     (value) =>
       refs.forEach((ref) => {
         if (typeof ref === "function") {
           ref(value);
-        } else {
+        } else if (ref !== null) {
           ref.current = value;
         }
       }),

src/video-grid/NewVideoGrid.tsx

@@ -45,6 +45,7 @@ import {
   cycleTileSize,
   appendItems,
 } from "./model";
+import { TileWrapper } from "./TileWrapper";
 
 interface GridState extends Grid {
   /**
@@ -452,16 +453,19 @@ export const NewVideoGrid: FC<Props> = ({
       >
         {slots}
       </div>
-      {tileTransitions((style, tile) =>
+      {tileTransitions((spring, tile) => (
-        children({
+        <TileWrapper
-          ...style,
+          key={tile.item.id}
-          key: tile.item.id,
+          id={tile.item.id}
-          targetWidth: tile.width,
+          onDragRef={onTileDragRef}
-          targetHeight: tile.height,
+          targetWidth={tile.width}
-          item: tile.item,
+          targetHeight={tile.height}
-          onDragRef: onTileDragRef,
+          item={tile.item}
-        })
+          {...spring}
-      )}
+        >
+          {children}
+        </TileWrapper>
+      ))}
     </div>
   );
 };

src/video-grid/TileWrapper.tsx

@@ -0,0 +1,101 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { FC, memo, ReactNode, RefObject, useRef } from "react";
+import { EventTypes, Handler, useDrag } from "@use-gesture/react";
+import { SpringValue, to } from "@react-spring/web";
+
+import { TileDescriptor } from "./TileDescriptor";
+import { ChildrenProperties } from "./VideoGrid";
+
+interface Props {
+  id: string;
+  onDragRef: RefObject<
+    (
+      tileId: string,
+      state: Parameters<Handler<"drag", EventTypes["drag"]>>[0]
+    ) => void
+  >;
+  targetWidth: number;
+  targetHeight: number;
+  item: TileDescriptor;
+  opacity: SpringValue<number>;
+  scale: SpringValue<number>;
+  shadow: SpringValue<number>;
+  shadowSpread: SpringValue<number>;
+  zIndex: SpringValue<number>;
+  x: SpringValue<number>;
+  y: SpringValue<number>;
+  width: SpringValue<number>;
+  height: SpringValue<number>;
+  children: (props: ChildrenProperties) => ReactNode;
+}
+
+/**
+ * A wrapper around a tile in a video grid. This component exists to decouple
+ * child components from the grid.
+ */
+export const TileWrapper: FC<Props> = memo(
+  ({
+    id,
+    onDragRef,
+    targetWidth,
+    targetHeight,
+    item,
+    opacity,
+    scale,
+    shadow,
+    shadowSpread,
+    zIndex,
+    x,
+    y,
+    width,
+    height,
+    children,
+  }) => {
+    const ref = useRef<HTMLElement | null>(null);
+
+    useDrag((state) => onDragRef?.current!(id, state), {
+      target: ref,
+      filterTaps: true,
+      preventScroll: true,
+    });
+
+    return (
+      <>
+        {children({
+          ref,
+          style: {
+            opacity,
+            scale,
+            zIndex,
+            x,
+            y,
+            width,
+            height,
+            boxShadow: to(
+              [shadow, shadowSpread],
+              (s, ss) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px ${ss}px`
+            ),
+          },
+          targetWidth,
+          targetHeight,
+          item,
+        })}
+      </>
+    );
+  }
+);

src/video-grid/VideoGrid.stories.tsx

@@ -1,97 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, { useState } from "react";
-import { useMemo } from "react";
-import { RoomMember } from "matrix-js-sdk";
-
-import { VideoGrid, useVideoGridLayout } from "./VideoGrid";
-import { VideoTile } from "./VideoTile";
-import { Button } from "../button";
-import { ConnectionState } from "../room/useGroupCall";
-import { TileDescriptor } from "./TileDescriptor";
-
-export default {
-  title: "VideoGrid",
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export const ParticipantsTest = () => {
-  const { layout, setLayout } = useVideoGridLayout(false);
-  const [participantCount, setParticipantCount] = useState(1);
-
-  const items: TileDescriptor[] = useMemo(
-    () =>
-      new Array(participantCount).fill(undefined).map((_, i) => ({
-        id: (i + 1).toString(),
-        member: new RoomMember("!fake:room.id", `@user${i}:fake.dummy`),
-        focused: false,
-        presenter: false,
-        connectionState: ConnectionState.Connected,
-      })),
-    [participantCount]
-  );
-
-  return (
-    <>
-      <div style={{ display: "flex", width: "100vw", height: "32px" }}>
-        <Button
-          onPress={() =>
-            setLayout(layout === "freedom" ? "spotlight" : "freedom")
-          }
-        >
-          Toggle Layout
-        </Button>
-        {participantCount < 12 && (
-          <Button onPress={() => setParticipantCount((count) => count + 1)}>
-            Add Participant
-          </Button>
-        )}
-        {participantCount > 0 && (
-          <Button onPress={() => setParticipantCount((count) => count - 1)}>
-            Remove Participant
-          </Button>
-        )}
-      </div>
-      <div
-        style={{
-          display: "flex",
-          width: "100vw",
-          height: "calc(100vh - 32px)",
-        }}
-      >
-        <VideoGrid layout={layout} items={items}>
-          {({ item, ...rest }) => (
-            <VideoTile
-              key={item.id}
-              name={`User ${item.id}`}
-              disableSpeakingIndicator={items.length < 3}
-              connectionState={ConnectionState.Connected}
-              {...rest}
-            />
-          )}
-        </VideoGrid>
-      </div>
-    </>
-  );
-};
-
-ParticipantsTest.args = {
-  layout: "freedom",
-  participantCount: 1,
-};

src/video-grid/VideoGrid.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,21 +14,34 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { Key, useCallback, useEffect, useRef, useState } from "react";
+import React, {
-import { FullGestureState, useDrag, useGesture } from "@use-gesture/react";
+  ComponentProps,
+  Key,
+  Ref,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import {
+  EventTypes,
+  FullGestureState,
+  Handler,
+  useGesture,
+} from "@use-gesture/react";
+import {
+  animated,
   SpringRef,
-  SpringValue,
   SpringValues,
   useSprings,
 } from "@react-spring/web";
 import useMeasure from "react-use-measure";
 import { ResizeObserver as JuggleResizeObserver } from "@juggle/resize-observer";
-import { ReactDOMAttributes } from "@use-gesture/react/dist/declarations/src/types";
 
 import styles from "./VideoGrid.module.css";
 import { Layout } from "../room/GridLayoutMenu";
 import { TileDescriptor } from "./TileDescriptor";
+import { TileWrapper } from "./TileWrapper";
 
 interface TilePosition {
   x: number;
@@ -39,7 +52,7 @@ interface TilePosition {
 }
 
 interface Tile {
-  key: Key;
+  key: string;
   order: number;
   item: TileDescriptor;
   remove: boolean;
@@ -717,20 +730,18 @@ interface DragTileData {
   y: number;
 }
 
-export interface ChildrenProperties extends ReactDOMAttributes {
+export interface ChildrenProperties {
-  key: Key;
+  ref: Ref<HTMLElement>;
+  style: ComponentProps<typeof animated.div>["style"];
+  /**
+   * The width this tile will have once its animations have settled.
+   */
   targetWidth: number;
+  /**
+   * The height this tile will have once its animations have settled.
+   */
   targetHeight: number;
   item: TileDescriptor;
-  opacity: SpringValue<number>;
-  scale: SpringValue<number>;
-  shadow: SpringValue<number>;
-  zIndex: SpringValue<number>;
-  x: SpringValue<number>;
-  y: SpringValue<number>;
-  width: SpringValue<number>;
-  height: SpringValue<number>;
-  [index: string]: unknown;
 }
 
 export interface VideoGridProps {
@@ -1063,18 +1074,32 @@ export function VideoGrid({
     [tiles, layout, gridBounds.width, gridBounds.height, pipXRatio, pipYRatio]
   );
 
-  const bindTile = useDrag(
+  // Callback for useDrag. We could call useDrag here, but the default
-    ({ args: [key], active, xy, movement, tap, last, event }) => {
+  // pattern of spreading {...bind()} across the children to bind the gesture
+  // ends up breaking memoization and ruining this component's performance.
+  // Instead, we pass this callback to each tile via a ref, to let them bind the
+  // gesture using the much more sensible ref-based method.
+  const onTileDrag = (
+    tileId: string,
+    {
+      active,
+      xy,
+      movement,
+      tap,
+      last,
+      event,
+    }: Parameters<Handler<"drag", EventTypes["drag"]>>[0]
+  ) => {
     event.preventDefault();
 
     if (tap) {
-        onTap(key);
+      onTap(tileId);
       return;
     }
 
     if (layout !== "freedom") return;
 
-      const dragTileIndex = tiles.findIndex((tile) => tile.key === key);
+    const dragTileIndex = tiles.findIndex((tile) => tile.key === tileId);
     const dragTile = tiles[dragTileIndex];
     const dragTilePosition = tilePositions[dragTile.order];
 
@@ -1119,7 +1144,7 @@ export function VideoGrid({
     } else {
       const hoverTile = tiles.find(
         (tile) =>
-            tile.key !== key &&
+          tile.key !== tileId &&
           isInside(cursorPosition, tilePositions[tile.order])
       );
 
@@ -1171,9 +1196,10 @@ export function VideoGrid({
     }
 
     api.start(animate(newTiles));
-    },
+  };
-    { filterTaps: true, pointer: { buttons: [1] } }
+
-  );
+  const onTileDragRef = useRef(onTileDrag);
+  onTileDragRef.current = onTileDrag;
 
   const onGridGesture = useCallback(
     (
@@ -1220,18 +1246,23 @@ export function VideoGrid({
 
   return (
     <div className={styles.videoGrid} ref={gridRef} {...bindGrid()}>
-      {springs.map((style, i) => {
+      {springs.map((spring, i) => {
         const tile = tiles[i];
         const tilePosition = tilePositions[tile.order];
 
-        return children({
+        return (
-          ...bindTile(tile.key),
+          <TileWrapper
-          ...style,
+            key={tile.key}
-          key: tile.item.id,
+            id={tile.key}
-          targetWidth: tilePosition.width,
+            onDragRef={onTileDragRef}
-          targetHeight: tilePosition.height,
+            targetWidth={tilePosition.width}
-          item: tile.item,
+            targetHeight={tilePosition.height}
-        });
+            item={tile.item}
+            {...spring}
+          >
+            {children}
+          </TileWrapper>
+        );
       })}
     </div>
   );

src/video-grid/VideoTile.module.css

@@ -18,12 +18,10 @@ limitations under the License.
   position: absolute;
   contain: strict;
   top: 0;
-  width: var(--tileWidth);
+  container-name: videoTile;
-  height: var(--tileHeight);
+  container-type: size;
   --tileRadius: 8px;
   border-radius: var(--tileRadius);
-  box-shadow: rgba(0, 0, 0, 0.5) 0px var(--tileShadow)
-    calc(2 * var(--tileShadow)) var(--tileShadowSpread);
   overflow: hidden;
   cursor: pointer;
 

src/video-grid/VideoTile.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,86 +14,105 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ForwardedRef, forwardRef } from "react";
+import React, { ComponentProps, forwardRef, useCallback } from "react";
-import { animated, SpringValue } from "@react-spring/web";
+import { animated } from "@react-spring/web";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
 
 import styles from "./VideoTile.module.css";
 import { ReactComponent as MicIcon } from "../icons/Mic.svg";
 import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
 import { AudioButton, FullscreenButton } from "../button/Button";
 import { ConnectionState } from "../room/useGroupCall";
+import { TileDescriptor } from "./TileDescriptor";
+import { VideoTileSettingsModal } from "./VideoTileSettingsModal";
+import { useCallFeed } from "./useCallFeed";
+import { useSpatialMediaStream } from "./useMediaStream";
+import { useRoomMemberName } from "./useRoomMemberName";
+import { useModalTriggerState } from "../Modal";
+import { useMergedRefs } from "../useMergedRefs";
 
 interface Props {
-  name: string;
+  item: TileDescriptor;
-  connectionState: ConnectionState;
+  maximised: boolean;
-  speaking?: boolean;
+  fullscreen: boolean;
-  audioMuted?: boolean;
+  onFullscreen: (participant: TileDescriptor) => void;
-  videoMuted?: boolean;
-  screenshare?: boolean;
-  avatar?: JSX.Element;
-  mediaRef?: React.RefObject<MediaElement>;
-  onOptionsPress?: () => void;
-  localVolume?: number;
-  hasAudio?: boolean;
-  maximised?: boolean;
-  fullscreen?: boolean;
-  onFullscreen?: () => void;
   className?: string;
-  showOptions?: boolean;
+  showSpeakingIndicator: boolean;
-  isLocal?: boolean;
+  style?: ComponentProps<typeof animated.div>["style"];
-  disableSpeakingIndicator?: boolean;
+  targetWidth: number;
-  opacity?: SpringValue<number>;
+  targetHeight: number;
-  scale?: SpringValue<number>;
+  getAvatar: (
-  shadow?: SpringValue<number>;
+    roomMember: RoomMember,
-  shadowSpread?: SpringValue<number>;
+    width: number,
-  zIndex?: SpringValue<number>;
+    height: number
-  x?: SpringValue<number>;
+  ) => JSX.Element;
-  y?: SpringValue<number>;
+  audioContext: AudioContext;
-  width?: SpringValue<number>;
+  audioDestination: AudioNode;
-  height?: SpringValue<number>;
 }
 
 export const VideoTile = forwardRef<HTMLElement, Props>(
   (
     {
-      name,
+      item,
-      connectionState,
-      speaking,
-      audioMuted,
-      videoMuted,
-      screenshare,
-      avatar,
-      mediaRef,
-      onOptionsPress,
-      localVolume,
-      hasAudio,
       maximised,
       fullscreen,
       onFullscreen,
       className,
-      showOptions,
+      showSpeakingIndicator,
-      isLocal,
+      style,
-      // TODO: disableSpeakingIndicator is not used atm.
+      targetWidth,
-      disableSpeakingIndicator,
+      targetHeight,
-      opacity,
+      getAvatar,
-      scale,
+      audioContext,
-      shadow,
+      audioDestination,
-      shadowSpread,
-      zIndex,
-      x,
-      y,
-      width,
-      height,
-      ...rest
     },
-    ref
+    tileRef1
   ) => {
     const { t } = useTranslation();
 
+    const {
+      isLocal,
+      audioMuted,
+      videoMuted,
+      localVolume,
+      hasAudio,
+      speaking,
+      stream,
+      purpose,
+    } = useCallFeed(item.callFeed);
+    const screenshare = purpose === SDPStreamMetadataPurpose.Screenshare;
+    const { rawDisplayName: name } = useRoomMemberName(item.member);
+
+    const [tileRef2, mediaRef] = useSpatialMediaStream(
+      stream ?? null,
+      audioContext,
+      audioDestination,
+      localVolume,
+      // The feed is muted if it's local audio (because we don't want our own audio,
+      // but it's a hook and we can't call it conditionally so we're stuck with it)
+      // or if there's a maximised feed in which case we always render audio via audio
+      // elements because we wire it up at the video tile container level and only one
+      // video tile container is displayed.
+      isLocal || maximised
+    );
+
+    const tileRef = useMergedRefs(tileRef1, tileRef2);
+
+    const {
+      modalState: videoTileSettingsModalState,
+      modalProps: videoTileSettingsModalProps,
+    } = useModalTriggerState();
+    const onOptionsPress = videoTileSettingsModalState.open;
+
+    const onFullscreenCallback = useCallback(() => {
+      onFullscreen(item);
+    }, [onFullscreen, item]);
+
     const toolbarButtons: JSX.Element[] = [];
-    if (connectionState == ConnectionState.Connected && !isLocal) {
+    if (item.connectionState == ConnectionState.Connected && !isLocal) {
       if (hasAudio) {
         toolbarButtons.push(
           <AudioButton
@@ -111,14 +130,14 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
             key="fullscreen"
             className={styles.button}
             fullscreen={fullscreen}
-            onPress={onFullscreen}
+            onPress={onFullscreenCallback}
           />
         );
       }
     }
 
     let caption: string;
-    switch (connectionState) {
+    switch (item.connectionState) {
       case ConnectionState.EstablishingCall:
         caption = t("{{name}} (Connecting...)", { name });
         break;
@@ -131,32 +150,22 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
         break;
     }
 
+    // Firefox doesn't respect the disablePictureInPicture attribute
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1611831
+
     return (
+      <>
         <animated.div
           className={classNames(styles.videoTile, className, {
             [styles.isLocal]: isLocal,
-          [styles.speaking]: speaking,
+            [styles.speaking]: speaking && showSpeakingIndicator,
             [styles.muted]: audioMuted,
             [styles.screenshare]: screenshare,
             [styles.maximised]: maximised,
           })}
-        style={{
+          style={style}
-          opacity,
+          ref={tileRef}
-          scale,
-          zIndex,
-          x,
-          y,
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore React does in fact support assigning custom properties,
-          // but React's types say no
-          "--tileWidth": width?.to((w) => `${w}px`),
-          "--tileHeight": height?.to((h) => `${h}px`),
-          "--tileShadow": shadow?.to((s) => `${s}px`),
-          "--tileShadowSpread": shadowSpread?.to((s) => `${s}px`),
-        }}
-        ref={ref as ForwardedRef<HTMLDivElement>}
           data-testid="videoTile"
-        {...rest}
         >
           {toolbarButtons.length > 0 && !maximised && (
             <div className={classNames(styles.toolbar)}>{toolbarButtons}</div>
@@ -164,7 +173,7 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
           {videoMuted && (
             <>
               <div className={styles.videoMutedOverlay} />
-            {avatar}
+              {getAvatar(item.member, targetWidth, targetHeight)}
             </>
           )}
           {!maximised &&
@@ -193,6 +202,13 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
             disablePictureInPicture
           />
         </animated.div>
+        {videoTileSettingsModalState.isOpen && !maximised && item.callFeed && (
+          <VideoTileSettingsModal
+            {...videoTileSettingsModalProps}
+            feed={item.callFeed}
+          />
+        )}
+      </>
     );
   }
 );

src/video-grid/VideoTileContainer.tsx

@@ -1,157 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
-import React, { FC, memo, RefObject } from "react";
-import { useCallback } from "react";
-import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { SpringValue } from "@react-spring/web";
-import { EventTypes, Handler, useDrag } from "@use-gesture/react";
-
-import { useCallFeed } from "./useCallFeed";
-import { useSpatialMediaStream } from "./useMediaStream";
-import { useRoomMemberName } from "./useRoomMemberName";
-import { VideoTile } from "./VideoTile";
-import { VideoTileSettingsModal } from "./VideoTileSettingsModal";
-import { useModalTriggerState } from "../Modal";
-import { TileDescriptor } from "./TileDescriptor";
-
-interface Props {
-  item: TileDescriptor;
-  targetWidth: number;
-  targetHeight: number;
-  getAvatar: (
-    roomMember: RoomMember,
-    width: number,
-    height: number
-  ) => JSX.Element;
-  audioContext: AudioContext;
-  audioDestination: AudioNode;
-  disableSpeakingIndicator: boolean;
-  maximised: boolean;
-  fullscreen: boolean;
-  onFullscreen: (item: TileDescriptor) => void;
-  opacity?: SpringValue<number>;
-  scale?: SpringValue<number>;
-  shadow?: SpringValue<number>;
-  shadowSpread?: SpringValue<number>;
-  zIndex?: SpringValue<number>;
-  x?: SpringValue<number>;
-  y?: SpringValue<number>;
-  width?: SpringValue<number>;
-  height?: SpringValue<number>;
-  onDragRef?: RefObject<
-    (
-      tileId: string,
-      state: Parameters<Handler<"drag", EventTypes["drag"]>>[0]
-    ) => void
-  >;
-}
-
-export const VideoTileContainer: FC<Props> = memo(
-  ({
-    item,
-    targetWidth,
-    targetHeight,
-    getAvatar,
-    audioContext,
-    audioDestination,
-    disableSpeakingIndicator,
-    maximised,
-    fullscreen,
-    onFullscreen,
-    onDragRef,
-    ...rest
-  }) => {
-    const {
-      isLocal,
-      audioMuted,
-      videoMuted,
-      localVolume,
-      hasAudio,
-      speaking,
-      stream,
-      purpose,
-    } = useCallFeed(item.callFeed);
-    const { rawDisplayName } = useRoomMemberName(item.member);
-
-    const [tileRef, mediaRef] = useSpatialMediaStream(
-      stream ?? null,
-      audioContext,
-      audioDestination,
-      localVolume,
-      // The feed is muted if it's local audio (because we don't want our own audio,
-      // but it's a hook and we can't call it conditionally so we're stuck with it)
-      // or if there's a maximised feed in which case we always render audio via audio
-      // elements because we wire it up at the video tile container level and only one
-      // video tile container is displayed.
-      isLocal || maximised
-    );
-
-    useDrag((state) => onDragRef?.current!(item.id, state), {
-      target: tileRef,
-      filterTaps: true,
-      preventScroll: true,
-    });
-
-    const {
-      modalState: videoTileSettingsModalState,
-      modalProps: videoTileSettingsModalProps,
-    } = useModalTriggerState();
-    const onOptionsPress = () => {
-      videoTileSettingsModalState.open();
-    };
-
-    const onFullscreenCallback = useCallback(() => {
-      onFullscreen(item);
-    }, [onFullscreen, item]);
-
-    // Firefox doesn't respect the disablePictureInPicture attribute
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1611831
-
-    return (
-      <>
-        <VideoTile
-          isLocal={isLocal}
-          speaking={speaking && !disableSpeakingIndicator}
-          audioMuted={audioMuted}
-          videoMuted={videoMuted}
-          screenshare={purpose === SDPStreamMetadataPurpose.Screenshare}
-          name={rawDisplayName}
-          connectionState={item.connectionState}
-          ref={tileRef}
-          mediaRef={mediaRef}
-          avatar={
-            getAvatar && getAvatar(item.member, targetWidth, targetHeight)
-          }
-          onOptionsPress={onOptionsPress}
-          localVolume={localVolume}
-          hasAudio={hasAudio}
-          maximised={maximised}
-          fullscreen={fullscreen}
-          onFullscreen={onFullscreenCallback}
-          {...rest}
-        />
-        {videoTileSettingsModalState.isOpen && !maximised && item.callFeed && (
-          <VideoTileSettingsModal
-            {...videoTileSettingsModalProps}
-            feed={item.callFeed}
-          />
-        )}
-      </>
-    );
-  }
-);