review: Use targetWidth/Height instead of listening to element bounds

src/tile/GridTile.test.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type RemoteTrackPublication } from "livekit-client";
-import { test, expect, beforeAll } from "vitest";
+import { test, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
@@ -28,22 +28,6 @@ global.IntersectionObserver = class MockIntersectionObserver {
   public disconnect(): void {}
 } as unknown as typeof IntersectionObserver;
 
-// Mock ResizeObserver as it is needed by the useMeasure hook used in the GridTile, but is not implemented in JSDOM.
-// We just need to mock it with empty methods as we don't need to test its functionality here.
-beforeAll(() => {
-  window.ResizeObserver = class ResizeObserver {
-    public observe(): void {
-      // do nothing
-    }
-    public unobserve(): void {
-      // do nothing
-    }
-    public disconnect(): void {
-      // do nothing
-    }
-  };
-});
-
 test("GridTile is accessible", async () => {
   const vm = mockRemoteMedia(
     mockRtcMembership("@alice:example.org", "AAAA"),

src/tile/GridTile.tsx

@@ -37,7 +37,6 @@ import {
   Menu,
 } from "@vector-im/compound-web";
 import { useObservableEagerState } from "observable-hooks";
-import useMeasure from "react-use-measure";
 
 import styles from "./GridTile.module.css";
 import { Slider } from "../Slider";
@@ -88,6 +87,8 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
   displayName,
   mxcAvatarUrl,
   focusable,
+  targetWidth,
+  targetHeight,
   ...props
 }) => {
   const { toggleRaisedHand } = useReactionsSender();
@@ -110,19 +111,12 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
   const handRaised = useBehavior(vm.handRaised$);
   const reaction = useBehavior(vm.reaction$);
 
-  // We need to keep track of the tile size.
-  // We use this to get the tile ratio, and compare it to the video ratio to decide
-  // whether to fit the video to frame or keep the ratio.
-  const [measureRef, bounds] = useMeasure();
-  // There is already a ref being passed in, so we need to merge it with the measureRef.
-  const tileRef = useMergedRefs(ref, measureRef);
-
   // Whenever bounds change, inform the viewModel
   useEffect(() => {
-    if (bounds.width > 0 && bounds.height > 0) {
-      vm.setActualDimensions(bounds.width, bounds.height);
+    if (targetWidth > 0 && targetHeight > 0) {
+      vm.setTargetDimensions(targetWidth, targetHeight);
     }
-  }, [bounds.width, bounds.height, vm]);
+  }, [targetWidth, targetHeight, vm]);
 
   const AudioIcon = playbackMuted
     ? VolumeOffSolidIcon
@@ -155,7 +149,7 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
 
   const tile = (
     <MediaView
-      ref={tileRef}
+      ref={ref}
       video={video}
       userId={vm.userId}
       unencryptedWarning={unencryptedWarning}
@@ -207,6 +201,8 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
       audioStreamStats={audioStreamStats}
       videoStreamStats={videoStreamStats}
       rtcBackendIdentity={rtcBackendIdentity}
+      targetWidth={targetWidth}
+      targetHeight={targetHeight}
       {...props}
     />
   );

src/tile/SpotlightTile.test.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { test, expect, vi, beforeAll } from "vitest";
+import { test, expect, vi } from "vitest";
 import { isInaccessible, render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
 import userEvent from "@testing-library/user-event";
@@ -27,22 +27,6 @@ global.IntersectionObserver = class MockIntersectionObserver {
   public unobserve(): void {}
 } as unknown as typeof IntersectionObserver;
 
-// Mock ResizeObserver as it is needed by the useMeasure hook used in the SpotlightTile, but is not implemented in JSDOM.
-// We just need to mock it with empty methods as we don't need to test its functionality here.
-beforeAll(() => {
-  window.ResizeObserver = class ResizeObserver {
-    public observe(): void {
-      // do nothing
-    }
-    public unobserve(): void {
-      // do nothing
-    }
-    public disconnect(): void {
-      // do nothing
-    }
-  };
-});
-
 test("SpotlightTile is accessible", async () => {
   const vm1 = mockRemoteMedia(
     mockRtcMembership("@alice:example.org", "AAAA"),

src/tile/SpotlightTile.tsx

@@ -27,7 +27,6 @@ import { useObservableRef } from "observable-hooks";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
-import useMeasure from "react-use-measure";
 
 import FullScreenMaximiseIcon from "../icons/FullScreenMaximise.svg?react";
 import FullScreenMinimiseIcon from "../icons/FullScreenMinimise.svg?react";
@@ -152,7 +151,13 @@ const SpotlightRemoteScreenShareItem: FC<
 interface SpotlightItemProps {
   ref?: Ref<HTMLDivElement>;
   vm: MediaViewModel;
+  /**
+   * The width this tile will have once its animations have settled.
+   */
   targetWidth: number;
+  /**
+   * The height this tile will have once its animations have settled.
+   */
   targetHeight: number;
   focusable: boolean;
   intersectionObserver$: Observable<IntersectionObserver>;
@@ -175,21 +180,16 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
 }) => {
   const ourRef = useRef<HTMLDivElement | null>(null);
 
-  // We need to keep track of the tile size.
-  // We use this to get the tile ratio, and compare it to the video ratio to decide
-  // whether to fit the video to frame or keep the ratio.
-  const [measureRef, bounds] = useMeasure();
-
-  // Whenever bounds change, inform the viewModel
+  // Whenever target bounds change, inform the viewModel
   useEffect(() => {
-    if (bounds.width > 0 && bounds.height > 0) {
+    if (targetWidth > 0 && targetHeight > 0) {
       if (vm.type != "screen share") {
-        vm.setActualDimensions(bounds.width, bounds.height);
+        vm.setTargetDimensions(targetWidth, targetHeight);
       }
     }
-  }, [bounds.width, bounds.height, vm]);
+  }, [targetWidth, targetHeight, vm]);
 
-  const ref = useMergedRefs(ourRef, theirRef, measureRef);
+  const ref = useMergedRefs(ourRef, theirRef);
   const focusUrl = useBehavior(vm.focusUrl$);
   const displayName = useBehavior(vm.displayName$);
   const mxcAvatarUrl = useBehavior(vm.mxcAvatarUrl$);