Add a switch to toggle between the new and old grids

src/room/InCallView.tsx

@@ -51,7 +51,11 @@ import { UserMenuContainer } from "../UserMenuContainer";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
 import { useMediaHandler } from "../settings/useMediaHandler";
-import { useShowInspector, useSpatialAudio } from "../settings/useSetting";
+import {
+  useNewGrid,
+  useShowInspector,
+  useSpatialAudio,
+} from "../settings/useSetting";
 import { useModalTriggerState } from "../Modal";
 import { useAudioContext } from "../video-grid/useMediaStream";
 import { useFullscreen } from "../video-grid/useFullscreen";
@@ -277,6 +281,8 @@ export function InCallView({
     []
   );
 
+  const [newGrid] = useNewGrid();
+  const Grid = newGrid ? NewVideoGrid : VideoGrid;
   const prefersReducedMotion = usePrefersReducedMotion();
 
   const renderContent = (): JSX.Element => {
@@ -306,7 +312,7 @@ export function InCallView({
     }
 
     return (
-      <NewVideoGrid
+      <Grid
         items={items}
         layout={layout}
         disableAnimations={prefersReducedMotion || isSafari}
@@ -330,7 +336,7 @@ export function InCallView({
             {...rest}
           />
         )}
-      </NewVideoGrid>
+      </Grid>
     );
   };
 

src/settings/SettingsModal.tsx

@@ -33,6 +33,7 @@ import {
   useShowInspector,
   useOptInAnalytics,
   canEnableSpatialAudio,
+  useNewGrid,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
@@ -62,6 +63,7 @@ export const SettingsModal = (props: Props) => {
   const [showInspector, setShowInspector] = useShowInspector();
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const [keyboardShortcuts, setKeyboardShortcuts] = useKeyboardShortcuts();
+  const [newGrid, setNewGrid] = useNewGrid();
 
   const downloadDebugLog = useDownloadDebugLog();
 
@@ -216,6 +218,17 @@ export const SettingsModal = (props: Props) => {
               }
             />
           </FieldRow>
+          <FieldRow>
+            <InputField
+              id="newGrid"
+              label={t("Use the upcoming grid system")}
+              type="checkbox"
+              checked={newGrid}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setNewGrid(e.target.checked)
+              }
+            />
+          </FieldRow>
           <FieldRow>
             <Button onPress={downloadDebugLog}>
               {t("Download debug logs")}

src/settings/useSetting.ts

@@ -90,3 +90,4 @@ export const useShowInspector = () => useSetting("show-inspector", false);
 export const useOptInAnalytics = () => useSetting("opt-in-analytics", false);
 export const useKeyboardShortcuts = () =>
   useSetting("keyboard-shortcuts", true);
+export const useNewGrid = () => useSetting("new-grid", false);

src/video-grid/VideoGrid.module.css

@@ -19,4 +19,5 @@ limitations under the License.
   overflow: hidden;
   flex: 1;
   touch-action: none;
+  margin-bottom: var(--footerHeight);
 }

src/video-grid/VideoGrid.tsx

@@ -899,6 +899,7 @@ export function VideoGrid({
               shadow: 0,
               scale: 0,
               opacity: 0,
+              zIndex: 0,
             },
             reset: false,
           };
@@ -922,6 +923,7 @@ export function VideoGrid({
             shadow: number;
             scale: number;
             opacity: number;
+            zIndex?: number;
             x?: number;
             y?: number;
             width?: number;
@@ -1178,22 +1180,18 @@ export function VideoGrid({
 
   return (
     <div className={styles.videoGrid} ref={gridRef} {...bindGrid()}>
-      {springs.map(({ shadow, ...style }, i) => {
+      {springs.map((style, i) => {
         const tile = tiles[i];
         const tilePosition = tilePositions[tile.order];
 
         return children({
           ...bindTile(tile.key),
-          key: tile.key,
+          ...style,
-          style: {
+          key: tile.item.id,
-            boxShadow: shadow.to(
+          targetWidth: tilePosition.width,
-              (s) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px 0px`
+          targetHeight: tilePosition.height,
-            ),
-            ...style,
-          },
-          width: tilePosition.width,
-          height: tilePosition.height,
           item: tile.item,
+          onDragRef: onTileDragRef,
         });
       })}
     </div>

src/video-grid/VideoTileContainer.tsx

@@ -52,7 +52,7 @@ interface Props {
   y: SpringValue<number>;
   width: SpringValue<number>;
   height: SpringValue<number>;
-  onDragRef: RefObject<
+  onDragRef?: RefObject<
     (
       tileId: string,
       state: Parameters<Handler<"drag", EventTypes["drag"]>>[0]
@@ -100,7 +100,7 @@ export const VideoTileContainer: FC<Props> = memo(
       isLocal || maximised
     );
 
-    useDrag((state) => onDragRef.current!(item.id, state), {
+    useDrag((state) => onDragRef?.current!(item.id, state), {
       target: tileRef,
       filterTaps: true,
       preventScroll: true,