Fix type and lint errors

public/locales/en-GB/app.json

@@ -124,6 +124,7 @@
   "Turn off camera": "Turn off camera",
   "Turn on camera": "Turn on camera",
   "Unmute microphone": "Unmute microphone",
+  "Use the upcoming grid system": "Use the upcoming grid system",
   "User ID": "User ID",
   "User menu": "User menu",
   "Username": "Username",

src/room/InCallView.tsx

@@ -41,7 +41,11 @@ import {
   RoomHeaderInfo,
   VersionMismatchWarning,
 } from "../Header";
-import { VideoGrid, useVideoGridLayout } from "../video-grid/VideoGrid";
+import {
+  VideoGrid,
+  useVideoGridLayout,
+  ChildrenProperties,
+} from "../video-grid/VideoGrid";
 import { VideoTileContainer } from "../video-grid/VideoTileContainer";
 import { GroupCallInspector } from "./GroupCallInspector";
 import { OverflowMenu } from "./OverflowMenu";
@@ -296,8 +300,8 @@ export function InCallView({
     if (maximisedParticipant) {
       return (
         <VideoTileContainer
-          height={bounds.height}
+          targetHeight={bounds.height}
-          width={bounds.width}
+          targetWidth={bounds.width}
           key={maximisedParticipant.id}
           item={maximisedParticipant}
           getAvatar={renderAvatar}
@@ -317,13 +321,7 @@ export function InCallView({
         layout={layout}
         disableAnimations={prefersReducedMotion || isSafari}
       >
-        {({
+        {({ item, ...rest }: ChildrenProperties) => (
-          item,
-          ...rest
-        }: {
-          item: TileDescriptor;
-          [x: string]: unknown;
-        }) => (
           <VideoTileContainer
             item={item}
             getAvatar={renderAvatar}

src/useMergedRefs.ts

@@ -12,5 +12,8 @@ export const useMergedRefs = <T>(
           ref.current = value;
         }
       }),
+    // Since this isn't an array literal, we can't use the static dependency
+    // checker, but that's okay
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     refs
   );

src/video-grid/NewVideoGrid.tsx

@@ -28,11 +28,12 @@ import React, {
   useState,
 } from "react";
 import useMeasure from "react-use-measure";
+import { zipWith } from "lodash";
+
 import styles from "./NewVideoGrid.module.css";
 import { TileDescriptor } from "./TileDescriptor";
-import { VideoGridProps as Props } from "./VideoGrid";
+import { VideoGridProps as Props, TileSpring } from "./VideoGrid";
 import { useReactiveState } from "../useReactiveState";
-import { zipWith } from "lodash";
 import { useMergedRefs } from "../useMergedRefs";
 import {
   Grid,
@@ -129,17 +130,6 @@ interface Tile extends Rect {
   item: TileDescriptor;
 }
 
-interface TileSpring {
-  opacity: number;
-  scale: number;
-  shadow: number;
-  zIndex: number;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
 interface DragState {
   tileId: string;
   tileX: number;
@@ -208,7 +198,10 @@ export const NewVideoGrid: FC<Props> = ({
     }
 
     return rects;
-  }, [items, slotGridGeneration, slotGrid, gridBounds]);
+    // The rects may change due to the grid being resized or rerendered, but
+    // eslint can't statically verify this
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [slotGrid, slotGridGeneration, gridBounds]);
 
   const [columns] = useReactiveState<number | null>(
     // Since grid resizing isn't implemented yet, pick a column count on mount

src/video-grid/VideoGrid.tsx

@@ -16,7 +16,12 @@ limitations under the License.
 
 import React, { Key, useCallback, useEffect, useRef, useState } from "react";
 import { FullGestureState, useDrag, useGesture } from "@use-gesture/react";
-import { Interpolation, SpringValue, useSprings } from "@react-spring/web";
+import {
+  SpringRef,
+  SpringValue,
+  SpringValues,
+  useSprings,
+} from "@react-spring/web";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { ReactDOMAttributes } from "@use-gesture/react/dist/declarations/src/types";
@@ -42,6 +47,17 @@ interface Tile {
   presenter: boolean;
 }
 
+export interface TileSpring {
+  opacity: number;
+  scale: number;
+  shadow: number;
+  zIndex: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
 type LayoutDirection = "vertical" | "horizontal";
 
 export function useVideoGridLayout(hasScreenshareFeeds: boolean): {
@@ -692,7 +708,7 @@ interface DragTileData {
   y: number;
 }
 
-interface ChildrenProperties extends ReactDOMAttributes {
+export interface ChildrenProperties extends ReactDOMAttributes {
   key: Key;
   targetWidth: number;
   targetHeight: number;
@@ -970,7 +986,7 @@ export function VideoGrid({
     tilePositions,
     tiles,
     scrollPosition,
-  ]);
+  ]) as unknown as [SpringValues<TileSpring>[], SpringRef<TileSpring>];
 
   const onTap = useCallback(
     (tileKey: Key) => {
@@ -1191,7 +1207,6 @@ export function VideoGrid({
           targetWidth: tilePosition.width,
           targetHeight: tilePosition.height,
           item: tile.item,
-          onDragRef: onTileDragRef,
         });
       })}
     </div>

src/video-grid/VideoTile.tsx

@@ -44,14 +44,14 @@ interface Props {
   showOptions?: boolean;
   isLocal?: boolean;
   disableSpeakingIndicator?: boolean;
-  opacity: SpringValue<number>;
+  opacity?: SpringValue<number>;
-  scale: SpringValue<number>;
+  scale?: SpringValue<number>;
-  shadow: SpringValue<number>;
+  shadow?: SpringValue<number>;
-  zIndex: SpringValue<number>;
+  zIndex?: SpringValue<number>;
-  x: SpringValue<number>;
+  x?: SpringValue<number>;
-  y: SpringValue<number>;
+  y?: SpringValue<number>;
-  width: SpringValue<number>;
+  width?: SpringValue<number>;
-  height: SpringValue<number>;
+  height?: SpringValue<number>;
 }
 
 export const VideoTile = forwardRef<HTMLElement, Props>(
@@ -141,14 +141,17 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
         style={{
           opacity,
           scale,
-          boxShadow: shadow.to(
+          boxShadow: shadow?.to(
             (s) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px 0px`
           ),
           zIndex,
           x,
           y,
-          "--tileWidth": width.to((w) => `${w}px`),
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          "--tileHeight": height.to((h) => `${h}px`),
+          // @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`),
         }}
         ref={ref as ForwardedRef<HTMLDivElement>}
         {...rest}

src/video-grid/VideoTileContainer.tsx

@@ -18,6 +18,8 @@ import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventType
 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";
@@ -26,8 +28,6 @@ import { VideoTile } from "./VideoTile";
 import { VideoTileSettingsModal } from "./VideoTileSettingsModal";
 import { useModalTriggerState } from "../Modal";
 import { TileDescriptor } from "./TileDescriptor";
-import { SpringValue } from "@react-spring/web";
-import { EventTypes, Handler, useDrag } from "@use-gesture/react";
 
 interface Props {
   item: TileDescriptor;
@@ -44,14 +44,14 @@ interface Props {
   maximised: boolean;
   fullscreen: boolean;
   onFullscreen: (item: TileDescriptor) => void;
-  opacity: SpringValue<number>;
+  opacity?: SpringValue<number>;
-  scale: SpringValue<number>;
+  scale?: SpringValue<number>;
-  shadow: SpringValue<number>;
+  shadow?: SpringValue<number>;
-  zIndex: SpringValue<number>;
+  zIndex?: SpringValue<number>;
-  x: SpringValue<number>;
+  x?: SpringValue<number>;
-  y: SpringValue<number>;
+  y?: SpringValue<number>;
-  width: SpringValue<number>;
+  width?: SpringValue<number>;
-  height: SpringValue<number>;
+  height?: SpringValue<number>;
   onDragRef?: RefObject<
     (
       tileId: string,

src/video-grid/model.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import TinyQueue from "tinyqueue";
+
 import { TileDescriptor } from "./TileDescriptor";
 
 /**