Implement the new unified grid layout

Here I've implemented an MVP for the new unified grid layout, which scales smoothly up to arbitrarily many participants. It doesn't yet have a special 1:1 layout, so in spotlight mode and 1:1s, we will still fall back to the legacy grid systems.

Things that happened along the way:
- The part of VideoTile that is common to both spotlight and grid tiles, I refactored into MediaView
- VideoTile renamed to GridTile
- Added SpotlightTile for the new, glassy spotlight designs
- NewVideoGrid renamed to Grid, and refactored to be even more generic
- I extracted the media name logic into a custom React hook
- Deleted the BigGrid experiment

src/tile/MediaView.tsx

@@ -0,0 +1,130 @@
+/*
+Copyright 2024 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 { TrackReferenceOrPlaceholder } from "@livekit/components-core";
+import { animated } from "@react-spring/web";
+import { RoomMember } from "matrix-js-sdk/src/matrix";
+import { ComponentProps, ReactNode, forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+import classNames from "classnames";
+import { VideoTrack } from "@livekit/components-react";
+import { Text, Tooltip } from "@vector-im/compound-web";
+import ErrorIcon from "@vector-im/compound-design-tokens/icons/error.svg?react";
+
+import styles from "./MediaView.module.css";
+import { Avatar } from "../Avatar";
+
+interface Props extends ComponentProps<typeof animated.div> {
+  className?: string;
+  style?: ComponentProps<typeof animated.div>["style"];
+  targetWidth: number;
+  targetHeight: number;
+  video: TrackReferenceOrPlaceholder;
+  videoFit: "cover" | "contain";
+  mirror: boolean;
+  member: RoomMember | undefined;
+  videoEnabled: boolean;
+  unencryptedWarning: boolean;
+  nameTagLeadingIcon?: ReactNode;
+  nameTag: string;
+  displayName: string;
+  primaryButton?: ReactNode;
+  secondaryButton?: ReactNode;
+}
+
+export const MediaView = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      className,
+      style,
+      targetWidth,
+      targetHeight,
+      video,
+      videoFit,
+      mirror,
+      member,
+      videoEnabled,
+      unencryptedWarning,
+      nameTagLeadingIcon,
+      nameTag,
+      displayName,
+      primaryButton,
+      secondaryButton,
+      ...props
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+
+    return (
+      <animated.div
+        className={classNames(styles.media, className, {
+          [styles.mirror]: mirror,
+          [styles.videoMuted]: !videoEnabled,
+        })}
+        style={style}
+        ref={ref}
+        data-testid="videoTile"
+        data-video-fit={videoFit}
+        {...props}
+      >
+        <div className={styles.bg}>
+          <Avatar
+            id={member?.userId ?? displayName}
+            name={displayName}
+            size={Math.round(Math.min(targetWidth, targetHeight) / 2)}
+            src={member?.getMxcAvatarUrl()}
+            className={styles.avatar}
+          />
+          {video.publication !== undefined && (
+            <VideoTrack
+              trackRef={video}
+              // There's no reason for this to be focusable
+              tabIndex={-1}
+              disablePictureInPicture
+            />
+          )}
+        </div>
+        <div className={styles.fg}>
+          <div className={styles.nameTag}>
+            {nameTagLeadingIcon}
+            <Text as="span" size="sm" weight="medium" className={styles.name}>
+              {nameTag}
+            </Text>
+            {unencryptedWarning && (
+              <Tooltip
+                label={t("common.unencrypted")}
+                side="bottom"
+                isTriggerInteractive={false}
+              >
+                <ErrorIcon
+                  width={20}
+                  height={20}
+                  aria-label={t("common.unencrypted")}
+                  className={styles.errorIcon}
+                />
+              </Tooltip>
+            )}
+          </div>
+          {primaryButton}
+          {secondaryButton}
+        </div>
+      </animated.div>
+    );
+  },
+);
+
+MediaView.displayName = "MediaView";