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/room/VideoPreview.tsx

@@ -18,11 +18,7 @@ import { useEffect, useMemo, useRef, FC, ReactNode, useCallback } from "react";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { usePreviewTracks } from "@livekit/components-react";
-import {
-  CreateLocalTracksOptions,
-  LocalVideoTrack,
-  Track,
-} from "livekit-client";
+import { LocalVideoTrack, Track } from "livekit-client";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
 import { Glass } from "@vector-im/compound-web";
@@ -32,6 +28,7 @@ import styles from "./VideoPreview.module.css";
 import { useMediaDevices } from "../livekit/MediaDevicesContext";
 import { MuteStates } from "./MuteStates";
 import { useMediaQuery } from "../useMediaQuery";
+import { useInitial } from "../useInitial";
 import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 export type MatrixInfo = {
@@ -63,10 +60,10 @@ export const VideoPreview: FC<Props> = ({
   // Capture the audio options as they were when we first mounted, because
   // we're not doing anything with the audio anyway so we don't need to
   // re-open the devices when they change (see below).
-  const initialAudioOptions = useRef<CreateLocalTracksOptions["audio"]>();
-  initialAudioOptions.current ??= muteStates.audio.enabled && {
-    deviceId: devices.audioInput.selectedId,
-  };
+  const initialAudioOptions = useInitial(
+    () =>
+      muteStates.audio.enabled && { deviceId: devices.audioInput.selectedId },
+  );
 
   const localTrackOptions = useMemo(
     () => ({
@@ -76,12 +73,16 @@ export const VideoPreview: FC<Props> = ({
       // reference the initial values here.
       // We also pass in a clone because livekit mutates the object passed in,
       // which would cause the devices to be re-opened on the next render.
-      audio: Object.assign({}, initialAudioOptions.current),
+      audio: Object.assign({}, initialAudioOptions),
       video: muteStates.video.enabled && {
         deviceId: devices.videoInput.selectedId,
       },
     }),
-    [devices.videoInput.selectedId, muteStates.video.enabled],
+    [
+      initialAudioOptions,
+      devices.videoInput.selectedId,
+      muteStates.video.enabled,
+    ],
   );
 
   const onError = useCallback(