Convert media view model classes to interfaces

Timo and I agreed previously that we should ditch the class pattern for view models and instead have them be interfaces which are simply created by functions. They're more straightforward to write, mock, and instantiate this way.

The code for media view models and media items is pretty much the last remaining instance of the class pattern. Since I was about to introduce a new media view model for ringing, I wanted to get this refactor out of the way first rather than add to the technical debt.

This refactor also makes things a little easier for https://github.com/element-hq/element-call/pull/3747 by extracting volume controls into their own module.

src/tile/GridTile.test.tsx

@@ -14,7 +14,7 @@ import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import { GridTile } from "./GridTile";
 import {
   mockRtcMembership,
-  createRemoteMedia,
+  mockRemoteMedia,
   mockRemoteParticipant,
 } from "../utils/test";
 import { GridTileViewModel } from "../state/TileViewModel";
@@ -29,7 +29,7 @@ global.IntersectionObserver = class MockIntersectionObserver {
 } as unknown as typeof IntersectionObserver;
 
 test("GridTile is accessible", async () => {
-  const vm = createRemoteMedia(
+  const vm = mockRemoteMedia(
     mockRtcMembership("@alice:example.org", "AAAA"),
     {
       rawDisplayName: "Alice",

src/tile/GridTile.tsx

@@ -41,7 +41,7 @@ import { useObservableEagerState } from "observable-hooks";
 import styles from "./GridTile.module.css";
 import {
   type UserMediaViewModel,
-  LocalUserMediaViewModel,
+  type LocalUserMediaViewModel,
   type RemoteUserMediaViewModel,
 } from "../state/MediaViewModel";
 import { Slider } from "../Slider";
@@ -68,7 +68,7 @@ interface TileProps {
 interface UserMediaTileProps extends TileProps {
   vm: UserMediaViewModel;
   mirror: boolean;
-  locallyMuted: boolean;
+  playbackMuted: boolean;
   waitingForMedia?: boolean;
   primaryButton?: ReactNode;
   menuStart?: ReactNode;
@@ -79,7 +79,7 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
   ref,
   vm,
   showSpeakingIndicators,
-  locallyMuted,
+  playbackMuted,
   waitingForMedia,
   primaryButton,
   menuStart,
@@ -109,7 +109,7 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
   const onSelectFitContain = useCallback(
     (e: Event) => {
       e.preventDefault();
-      vm.toggleFitContain();
+      vm.toggleCropVideo();
     },
     [vm],
   );
@@ -117,12 +117,12 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
   const handRaised = useBehavior(vm.handRaised$);
   const reaction = useBehavior(vm.reaction$);
 
-  const AudioIcon = locallyMuted
+  const AudioIcon = playbackMuted
     ? VolumeOffSolidIcon
     : audioEnabled
       ? MicOnSolidIcon
       : MicOffSolidIcon;
-  const audioIconLabel = locallyMuted
+  const audioIconLabel = playbackMuted
     ? t("video_tile.muted_for_me")
     : audioEnabled
       ? t("microphone_on")
@@ -166,7 +166,7 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
           width={20}
           height={20}
           aria-label={audioIconLabel}
-          data-muted={locallyMuted || !audioEnabled}
+          data-muted={playbackMuted || !audioEnabled}
           className={styles.muteIcon}
         />
       }
@@ -245,7 +245,7 @@ const LocalUserMediaTile: FC<LocalUserMediaTileProps> = ({
     <UserMediaTile
       ref={ref}
       vm={vm}
-      locallyMuted={false}
+      playbackMuted={false}
       mirror={mirror}
       primaryButton={
         switchCamera === null ? undefined : (
@@ -295,36 +295,31 @@ const RemoteUserMediaTile: FC<RemoteUserMediaTileProps> = ({
 }) => {
   const { t } = useTranslation();
   const waitingForMedia = useBehavior(vm.waitingForMedia$);
-  const locallyMuted = useBehavior(vm.locallyMuted$);
-  const localVolume = useBehavior(vm.localVolume$);
+  const playbackMuted = useBehavior(vm.playbackMuted$);
+  const playbackVolume = useBehavior(vm.playbackVolume$);
   const onSelectMute = useCallback(
     (e: Event) => {
       e.preventDefault();
-      vm.toggleLocallyMuted();
+      vm.togglePlaybackMuted();
     },
     [vm],
   );
-  const onChangeLocalVolume = useCallback(
-    (v: number) => vm.setLocalVolume(v),
-    [vm],
-  );
-  const onCommitLocalVolume = useCallback(() => vm.commitLocalVolume(), [vm]);
 
-  const VolumeIcon = locallyMuted ? VolumeOffIcon : VolumeOnIcon;
+  const VolumeIcon = playbackMuted ? VolumeOffIcon : VolumeOnIcon;
 
   return (
     <UserMediaTile
       ref={ref}
       vm={vm}
       waitingForMedia={waitingForMedia}
-      locallyMuted={locallyMuted}
+      playbackMuted={playbackMuted}
       mirror={false}
       menuStart={
         <>
           <ToggleMenuItem
             Icon={MicOffIcon}
             label={t("video_tile.mute_for_me")}
-            checked={locallyMuted}
+            checked={playbackMuted}
             onSelect={onSelectMute}
           />
           {/* TODO: Figure out how to make this slider keyboard accessible */}
@@ -332,9 +327,9 @@ const RemoteUserMediaTile: FC<RemoteUserMediaTileProps> = ({
             <Slider
               className={styles.volumeSlider}
               label={t("video_tile.volume")}
-              value={localVolume}
-              onValueChange={onChangeLocalVolume}
-              onValueCommit={onCommitLocalVolume}
+              value={playbackVolume}
+              onValueChange={vm.adjustPlaybackVolume}
+              onValueCommit={vm.commitPlaybackVolume}
               min={0}
               max={1}
               step={0.01}
@@ -374,7 +369,7 @@ export const GridTile: FC<GridTileProps> = ({
   const displayName = useBehavior(media.displayName$);
   const mxcAvatarUrl = useBehavior(media.mxcAvatarUrl$);
 
-  if (media instanceof LocalUserMediaViewModel) {
+  if (media.local) {
     return (
       <LocalUserMediaTile
         ref={ref}

src/tile/MediaView.tsx

@@ -19,7 +19,7 @@ import { Avatar } from "../Avatar";
 import { type EncryptionStatus } from "../state/MediaViewModel";
 import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
 import {
-  showConnectionStats,
+  showConnectionStats as showConnectionStatsSetting,
   showHandRaisedTimer,
   useSetting,
 } from "../settings/settings";
@@ -85,7 +85,7 @@ export const MediaView: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
   const [handRaiseTimerVisible] = useSetting(showHandRaisedTimer);
-  const [showConnectioStats] = useSetting(showConnectionStats);
+  const [showConnectionStats] = useSetting(showConnectionStatsSetting);
 
   const avatarSize = Math.round(Math.min(targetWidth, targetHeight) / 2);
 
@@ -139,10 +139,10 @@ export const MediaView: FC<Props> = ({
         {waitingForMedia && (
           <div className={styles.status}>
             {t("video_tile.waiting_for_media")}
-            {showConnectioStats ? " " + rtcBackendIdentity : ""}
+            {showConnectionStats ? " " + rtcBackendIdentity : ""}
           </div>
         )}
-        {(audioStreamStats || videoStreamStats) && (
+        {showConnectionStats && (
           <>
             <RTCConnectionStats
               audio={audioStreamStats}

src/tile/SpotlightTile.test.tsx

@@ -15,8 +15,8 @@ import {
   mockLocalParticipant,
   mockMediaDevices,
   mockRtcMembership,
-  createLocalMedia,
-  createRemoteMedia,
+  mockLocalMedia,
+  mockRemoteMedia,
   mockRemoteParticipant,
 } from "../utils/test";
 import { SpotlightTileViewModel } from "../state/TileViewModel";
@@ -28,7 +28,7 @@ global.IntersectionObserver = class MockIntersectionObserver {
 } as unknown as typeof IntersectionObserver;
 
 test("SpotlightTile is accessible", async () => {
-  const vm1 = createRemoteMedia(
+  const vm1 = mockRemoteMedia(
     mockRtcMembership("@alice:example.org", "AAAA"),
     {
       rawDisplayName: "Alice",
@@ -37,7 +37,7 @@ test("SpotlightTile is accessible", async () => {
     mockRemoteParticipant({}),
   );
 
-  const vm2 = createLocalMedia(
+  const vm2 = mockLocalMedia(
     mockRtcMembership("@bob:example.org", "BBBB"),
     {
       rawDisplayName: "Bob",

src/tile/SpotlightTile.tsx

@@ -34,11 +34,12 @@ import { MediaView } from "./MediaView";
 import styles from "./SpotlightTile.module.css";
 import {
   type EncryptionStatus,
-  LocalUserMediaViewModel,
+  type LocalUserMediaViewModel,
   type MediaViewModel,
-  ScreenShareViewModel,
   type UserMediaViewModel,
   type RemoteUserMediaViewModel,
+  type ScreenShareViewModel,
+  type RemoteScreenShareViewModel,
 } from "../state/MediaViewModel";
 import { useInitial } from "../useInitial";
 import { useMergedRefs } from "../useMergedRefs";
@@ -54,7 +55,6 @@ interface SpotlightItemBaseProps {
   targetWidth: number;
   targetHeight: number;
   video: TrackReferenceOrPlaceholder | undefined;
-  videoEnabled: boolean;
   userId: string;
   unencryptedWarning: boolean;
   encryptionStatus: EncryptionStatus;
@@ -67,6 +67,7 @@ interface SpotlightItemBaseProps {
 
 interface SpotlightUserMediaItemBaseProps extends SpotlightItemBaseProps {
   videoFit: "contain" | "cover";
+  videoEnabled: boolean;
 }
 
 interface SpotlightLocalUserMediaItemProps extends SpotlightUserMediaItemBaseProps {
@@ -106,14 +107,16 @@ const SpotlightUserMediaItem: FC<SpotlightUserMediaItemProps> = ({
   ...props
 }) => {
   const cropVideo = useBehavior(vm.cropVideo$);
+  const videoEnabled = useBehavior(vm.videoEnabled$);
 
   const baseProps: SpotlightUserMediaItemBaseProps &
     RefAttributes<HTMLDivElement> = {
     videoFit: cropVideo ? "cover" : "contain",
+    videoEnabled,
     ...props,
   };
 
-  return vm instanceof LocalUserMediaViewModel ? (
+  return vm.local ? (
     <SpotlightLocalUserMediaItem vm={vm} {...baseProps} />
   ) : (
     <SpotlightRemoteUserMediaItem vm={vm} {...baseProps} />
@@ -122,6 +125,31 @@ const SpotlightUserMediaItem: FC<SpotlightUserMediaItemProps> = ({
 
 SpotlightUserMediaItem.displayName = "SpotlightUserMediaItem";
 
+interface SpotlightScreenShareItemProps extends SpotlightItemBaseProps {
+  vm: ScreenShareViewModel;
+  videoEnabled: boolean;
+}
+
+const SpotlightScreenShareItem: FC<SpotlightScreenShareItemProps> = ({
+  vm,
+  ...props
+}) => {
+  return <MediaView videoFit="contain" mirror={false} {...props} />;
+};
+
+interface SpotlightRemoteScreenShareItemProps extends SpotlightItemBaseProps {
+  vm: RemoteScreenShareViewModel;
+}
+
+const SpotlightRemoteScreenShareItem: FC<
+  SpotlightRemoteScreenShareItemProps
+> = ({ vm, ...props }) => {
+  const videoEnabled = useBehavior(vm.videoEnabled$);
+  return (
+    <SpotlightScreenShareItem vm={vm} videoEnabled={videoEnabled} {...props} />
+  );
+};
+
 interface SpotlightItemProps {
   ref?: Ref<HTMLDivElement>;
   vm: MediaViewModel;
@@ -152,7 +180,6 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
   const displayName = useBehavior(vm.displayName$);
   const mxcAvatarUrl = useBehavior(vm.mxcAvatarUrl$);
   const video = useBehavior(vm.video$);
-  const videoEnabled = useBehavior(vm.videoEnabled$);
   const unencryptedWarning = useBehavior(vm.unencryptedWarning$);
   const encryptionStatus = useBehavior(vm.encryptionStatus$);
 
@@ -178,7 +205,6 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
     targetWidth,
     targetHeight,
     video: video ?? undefined,
-    videoEnabled,
     userId: vm.userId,
     unencryptedWarning,
     focusUrl,
@@ -189,10 +215,12 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
     "aria-hidden": ariaHidden,
   };
 
-  return vm instanceof ScreenShareViewModel ? (
-    <MediaView videoFit="contain" mirror={false} {...baseProps} />
+  if (vm.type === "user")
+    return <SpotlightUserMediaItem vm={vm} {...baseProps} />;
+  return vm.local ? (
+    <SpotlightScreenShareItem vm={vm} videoEnabled {...baseProps} />
   ) : (
-    <SpotlightUserMediaItem vm={vm} {...baseProps} />
+    <SpotlightRemoteScreenShareItem vm={vm} {...baseProps} />
   );
 };