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

public/locales/en-GB/app.json

@@ -41,6 +41,7 @@
     "analytics": "Analytics",
     "audio": "Audio",
     "avatar": "Avatar",
+    "back": "Back",
     "camera": "Camera",
     "copied": "Copied!",
     "display_name": "Display name",
@@ -49,6 +50,7 @@
     "home": "Home",
     "loading": "Loading…",
     "microphone": "Microphone",
+    "next": "Next",
     "options": "Options",
     "password": "Password",
     "profile": "Profile",

src/Header.module.css

@@ -22,6 +22,7 @@ limitations under the License.
   user-select: none;
   flex-shrink: 0;
   padding-inline: var(--inline-content-inset);
+  padding-block-end: var(--cpd-space-4x);
 }
 
 .nav {

src/Header.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import classNames from "classnames";
-import { FC, HTMLAttributes, ReactNode } from "react";
+import { FC, HTMLAttributes, ReactNode, forwardRef } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";
@@ -32,13 +32,21 @@ interface HeaderProps extends HTMLAttributes<HTMLElement> {
   className?: string;
 }
 
-export const Header: FC<HeaderProps> = ({ children, className, ...rest }) => {
-  return (
-    <header className={classNames(styles.header, className)} {...rest}>
-      {children}
-    </header>
-  );
-};
+export const Header = forwardRef<HTMLElement, HeaderProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <header
+        ref={ref}
+        className={classNames(styles.header, className)}
+        {...rest}
+      >
+        {children}
+      </header>
+    );
+  },
+);
+
+Header.displayName = "Header";
 
 interface LeftNavProps extends HTMLAttributes<HTMLElement> {
   children: ReactNode;

src/video-grid/BigGrid.module.css → src/grid/Grid.module.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023-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.
@@ -14,15 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.bigGrid {
-  display: grid;
-  grid-auto-rows: 130px;
-  gap: var(--cpd-space-2x);
+.grid {
+  contain: layout style;
 }
 
-@media (min-width: 800px) {
-  .bigGrid {
-    grid-auto-rows: 135px;
-    gap: var(--cpd-space-5x);
-  }
+.slot {
+  contain: strict;
 }