New ringing UI

This implements the new ringing UI by showing a placeholder tile for the participant being dialed, rather than an overlay.

src/tile/GridTile.test.tsx

@@ -7,9 +7,10 @@ Please see LICENSE in the repository root for full details.
 
 import { type RemoteTrackPublication } from "livekit-client";
 import { test, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
+import { BehaviorSubject } from "rxjs";
 
 import { GridTile } from "./GridTile";
 import {
@@ -21,6 +22,11 @@ import { GridTileViewModel } from "../state/TileViewModel";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 import type { CallViewModel } from "../state/CallViewModel/CallViewModel";
 import { constant } from "../state/Behavior";
+import {
+  createRingingMedia,
+  type RingingMediaViewModel,
+} from "../state/media/RingingMediaViewModel";
+import { type MuteStates } from "../state/MuteStates";
 
 global.IntersectionObserver = class MockIntersectionObserver {
   public observe(): void {}
@@ -28,6 +34,27 @@ global.IntersectionObserver = class MockIntersectionObserver {
   public disconnect(): void {}
 } as unknown as typeof IntersectionObserver;
 
+const fakeRtcSession = {
+  on: () => {},
+  off: () => {},
+  room: {
+    on: () => {},
+    off: () => {},
+    client: {
+      getUserId: () => null,
+      getDeviceId: () => null,
+      on: () => {},
+      off: () => {},
+    },
+  },
+  memberships: [],
+} as unknown as MatrixRTCSession;
+
+const callVm = {
+  reactions$: constant({}),
+  handsRaised$: constant({}),
+} as Partial<CallViewModel> as CallViewModel;
+
 test("GridTile is accessible", async () => {
   const vm = mockRemoteMedia(
     mockRtcMembership("@alice:example.org", "AAAA"),
@@ -42,34 +69,15 @@ test("GridTile is accessible", async () => {
     }),
   );
 
-  const fakeRtcSession = {
-    on: () => {},
-    off: () => {},
-    room: {
-      on: () => {},
-      off: () => {},
-      client: {
-        getUserId: () => null,
-        getDeviceId: () => null,
-        on: () => {},
-        off: () => {},
-      },
-    },
-    memberships: [],
-  } as unknown as MatrixRTCSession;
-  const cVm = {
-    reactions$: constant({}),
-    handsRaised$: constant({}),
-  } as Partial<CallViewModel> as CallViewModel;
   const { container } = render(
-    <ReactionsSenderProvider vm={cVm} rtcSession={fakeRtcSession}>
+    <ReactionsSenderProvider vm={callVm} rtcSession={fakeRtcSession}>
       <GridTile
         vm={new GridTileViewModel(constant(vm))}
         onOpenProfile={() => {}}
         targetWidth={300}
         targetHeight={200}
         showSpeakingIndicators
-        focusable={true}
+        focusable
       />
     </ReactionsSenderProvider>,
   );
@@ -77,3 +85,40 @@ test("GridTile is accessible", async () => {
   // Name should be visible
   screen.getByText("Alice");
 });
+
+test("GridTile displays ringing media", async () => {
+  const pickupState$ = new BehaviorSubject<
+    RingingMediaViewModel["pickupState$"]["value"]
+  >("ringing");
+  const vm = createRingingMedia({
+    pickupState$,
+    muteStates: {
+      video: { enabled$: constant(false) },
+    } as unknown as MuteStates,
+    id: "test",
+    userId: "@alice:example.org",
+    displayName$: constant("Alice"),
+    mxcAvatarUrl$: constant(undefined),
+  });
+
+  const { container } = render(
+    <ReactionsSenderProvider vm={callVm} rtcSession={fakeRtcSession}>
+      <GridTile
+        vm={new GridTileViewModel(constant(vm))}
+        onOpenProfile={() => {}}
+        targetWidth={300}
+        targetHeight={200}
+        showSpeakingIndicators
+        focusable
+      />
+    </ReactionsSenderProvider>,
+  );
+  expect(await axe(container)).toHaveNoViolations();
+  // Name and status should be visible
+  screen.getByText("Alice");
+  screen.getByText("Calling…");
+
+  // Alice declines the call
+  act(() => pickupState$.next("decline"));
+  screen.getByText("Call ended");
+});

src/tile/GridTile.tsx

@@ -29,6 +29,9 @@ import {
   UserProfileIcon,
   VolumeOffSolidIcon,
   SwitchCameraSolidIcon,
+  VideoCallSolidIcon,
+  VoiceCallSolidIcon,
+  EndCallIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import {
   ContextMenu,
@@ -49,6 +52,7 @@ import { useBehavior } from "../useBehavior";
 import { type LocalUserMediaViewModel } from "../state/media/LocalUserMediaViewModel";
 import { type RemoteUserMediaViewModel } from "../state/media/RemoteUserMediaViewModel";
 import { type UserMediaViewModel } from "../state/media/UserMediaViewModel";
+import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
 
 interface TileProps {
   ref?: Ref<HTMLDivElement>;
@@ -56,21 +60,56 @@ interface TileProps {
   style?: ComponentProps<typeof animated.div>["style"];
   targetWidth: number;
   targetHeight: number;
-  focusUrl: string | undefined;
   displayName: string;
   mxcAvatarUrl: string | undefined;
-  showSpeakingIndicators: boolean;
   focusable: boolean;
 }
 
+interface RingingMediaTileProps extends TileProps {
+  vm: RingingMediaViewModel;
+}
+
+const RingingMediaTile: FC<RingingMediaTileProps> = ({
+  vm,
+  className,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const pickupState = useBehavior(vm.pickupState$);
+  const videoEnabled = useBehavior(vm.videoEnabled$);
+
+  return (
+    <MediaView
+      className={classNames(className, styles.tile)}
+      video={undefined}
+      userId={vm.userId}
+      unencryptedWarning={false}
+      status={
+        pickupState === "ringing"
+          ? {
+              text: t("video_tile.calling"),
+              Icon: videoEnabled ? VideoCallSolidIcon : VoiceCallSolidIcon,
+            }
+          : { text: t("video_tile.call_ended"), Icon: EndCallIcon }
+      }
+      videoEnabled={videoEnabled}
+      videoFit="cover"
+      mirror={false}
+      {...props}
+    />
+  );
+};
+
 interface UserMediaTileProps extends TileProps {
   vm: UserMediaViewModel;
+  showSpeakingIndicators: boolean;
   mirror: boolean;
   playbackMuted: boolean;
   waitingForMedia?: boolean;
   primaryButton?: ReactNode;
   menuStart?: ReactNode;
   menuEnd?: ReactNode;
+  focusUrl: string | undefined;
 }
 
 const UserMediaTile: FC<UserMediaTileProps> = ({
@@ -95,7 +134,6 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
   const { t } = useTranslation();
   const video = useBehavior(vm.video$);
   const unencryptedWarning = useBehavior(vm.unencryptedWarning$);
-  const encryptionStatus = useBehavior(vm.encryptionStatus$);
   const audioStreamStats = useObservableEagerState<
     RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
   >(vm.audioStreamStats$);
@@ -153,7 +191,6 @@ const UserMediaTile: FC<UserMediaTileProps> = ({
       video={video}
       userId={vm.userId}
       unencryptedWarning={unencryptedWarning}
-      encryptionStatus={encryptionStatus}
       videoEnabled={videoEnabled}
       videoFit={videoFit}
       className={classNames(className, styles.tile, {
@@ -218,6 +255,7 @@ UserMediaTile.displayName = "UserMediaTile";
 
 interface LocalUserMediaTileProps extends TileProps {
   vm: LocalUserMediaViewModel;
+  showSpeakingIndicators: boolean;
   onOpenProfile: (() => void) | null;
 }
 
@@ -232,6 +270,7 @@ const LocalUserMediaTile: FC<LocalUserMediaTileProps> = ({
   const mirror = useBehavior(vm.mirror$);
   const alwaysShow = useBehavior(vm.alwaysShow$);
   const switchCamera = useBehavior(vm.switchCamera$);
+  const focusUrl = useBehavior(vm.focusUrl$);
 
   const latestAlwaysShow = useLatest(alwaysShow);
   const onSelectAlwaysShow = useCallback(
@@ -278,6 +317,7 @@ const LocalUserMediaTile: FC<LocalUserMediaTileProps> = ({
         )
       }
       focusable={focusable}
+      focusUrl={focusUrl}
       {...props}
     />
   );
@@ -287,6 +327,7 @@ LocalUserMediaTile.displayName = "LocalUserMediaTile";
 
 interface RemoteUserMediaTileProps extends TileProps {
   vm: RemoteUserMediaViewModel;
+  showSpeakingIndicators: boolean;
 }
 
 const RemoteUserMediaTile: FC<RemoteUserMediaTileProps> = ({
@@ -298,6 +339,8 @@ const RemoteUserMediaTile: FC<RemoteUserMediaTileProps> = ({
   const waitingForMedia = useBehavior(vm.waitingForMedia$);
   const playbackMuted = useBehavior(vm.playbackMuted$);
   const playbackVolume = useBehavior(vm.playbackVolume$);
+  const focusUrl = useBehavior(vm.focusUrl$);
+
   const onSelectMute = useCallback(
     (e: Event) => {
       e.preventDefault();
@@ -338,6 +381,7 @@ const RemoteUserMediaTile: FC<RemoteUserMediaTileProps> = ({
           </MenuItem>
         </>
       }
+      focusUrl={focusUrl}
       {...props}
     />
   );
@@ -360,23 +404,33 @@ interface GridTileProps {
 export const GridTile: FC<GridTileProps> = ({
   ref: theirRef,
   vm,
+  showSpeakingIndicators,
   onOpenProfile,
   ...props
 }) => {
   const ourRef = useRef<HTMLDivElement | null>(null);
   const ref = useMergedRefs(ourRef, theirRef);
   const media = useBehavior(vm.media$);
-  const focusUrl = useBehavior(media.focusUrl$);
   const displayName = useBehavior(media.displayName$);
   const mxcAvatarUrl = useBehavior(media.mxcAvatarUrl$);
 
-  if (media.local) {
+  if (media.type === "ringing") {
+    return (
+      <RingingMediaTile
+        ref={ref}
+        vm={media}
+        {...props}
+        displayName={displayName}
+        mxcAvatarUrl={mxcAvatarUrl}
+      />
+    );
+  } else if (media.local) {
     return (
       <LocalUserMediaTile
         ref={ref}
         vm={media}
+        showSpeakingIndicators={showSpeakingIndicators}
         onOpenProfile={onOpenProfile}
-        focusUrl={focusUrl}
         displayName={displayName}
         mxcAvatarUrl={mxcAvatarUrl}
         {...props}
@@ -387,7 +441,7 @@ export const GridTile: FC<GridTileProps> = ({
       <RemoteUserMediaTile
         ref={ref}
         vm={media}
-        focusUrl={focusUrl}
+        showSpeakingIndicators={showSpeakingIndicators}
         displayName={displayName}
         mxcAvatarUrl={mxcAvatarUrl}
         {...props}

src/tile/MediaView.module.css

@@ -52,6 +52,11 @@ Please see LICENSE in the repository root for full details.
   pointer-events: none;
 }
 
+.translucent {
+  opacity: 50%;
+  mix-blend-mode: multiply;
+}
+
 /* CSS makes us put a condition here, even though all we want to do is
 unconditionally select the container so we can use cqmin units */
 @container mediaView (width > 0) {
@@ -71,14 +76,15 @@ unconditionally select the container so we can use cqmin units */
 
 .fg {
   position: absolute;
-  inset: var(
+  --fg-inset: var(
     --media-view-fg-inset,
     calc(var(--media-view-border-radius) - var(--cpd-space-3x))
   );
+  inset: var(--fg-inset);
   display: grid;
   grid-template-columns: 30px 1fr 30px;
   grid-template-rows: 1fr auto;
-  grid-template-areas: "reactions status ." "nameTag nameTag button";
+  grid-template-areas: "status status reactions" "nameTag nameTag button";
   gap: var(--cpd-space-1x);
   place-items: start;
 }
@@ -102,21 +108,19 @@ unconditionally select the container so we can use cqmin units */
 
 .status {
   grid-area: status;
-  justify-self: center;
-  align-self: start;
-  padding: var(--cpd-space-2x);
-  padding-block: var(--cpd-space-2x);
   color: var(--cpd-color-text-primary);
-  background-color: var(--cpd-color-bg-canvas-default);
   display: flex;
+  flex-wrap: none;
   align-items: center;
-  border-radius: var(--cpd-radius-pill-effect);
+  gap: 3px;
   user-select: none;
   overflow: hidden;
-  box-shadow: var(--small-drop-shadow);
-  box-sizing: border-box;
-  max-inline-size: 100%;
-  text-align: center;
+  margin-block-start: calc(var(--cpd-space-3x) - var(--fg-inset));
+  margin-inline-start: calc(var(--cpd-space-4x) - var(--fg-inset));
+}
+
+.status svg {
+  color: var(--cpd-color-icon-tertiary);
 }
 
 .reactions {

src/tile/MediaView.test.tsx

@@ -18,7 +18,6 @@ import { TrackInfo } from "@livekit/protocol";
 import { type ComponentProps } from "react";
 
 import { MediaView } from "./MediaView";
-import { EncryptionStatus } from "../state/media/MemberMediaViewModel";
 import { mockLocalParticipant } from "../utils/test";
 
 describe("MediaView", () => {
@@ -41,7 +40,6 @@ describe("MediaView", () => {
     videoFit: "contain",
     targetWidth: 300,
     targetHeight: 200,
-    encryptionStatus: EncryptionStatus.Connecting,
     mirror: false,
     unencryptedWarning: false,
     video: trackReference,

src/tile/MediaView.tsx

@@ -7,7 +7,13 @@ Please see LICENSE in the repository root for full details.
 
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
 import { animated } from "@react-spring/web";
-import { type FC, type ComponentProps, type ReactNode } from "react";
+import {
+  type FC,
+  type ComponentProps,
+  type ReactNode,
+  type ComponentType,
+  type SVGAttributes,
+} from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { VideoTrack } from "@livekit/components-react";
@@ -16,7 +22,6 @@ import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/ico
 
 import styles from "./MediaView.module.css";
 import { Avatar } from "../Avatar";
-import { type EncryptionStatus } from "../state/media/MemberMediaViewModel";
 import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
 import {
   showConnectionStats as showConnectionStatsSetting,
@@ -38,7 +43,7 @@ interface Props extends ComponentProps<typeof animated.div> {
   userId: string;
   videoEnabled: boolean;
   unencryptedWarning: boolean;
-  encryptionStatus: EncryptionStatus;
+  status?: { text: string; Icon: ComponentType<SVGAttributes<SVGElement>> };
   nameTagLeadingIcon?: ReactNode;
   displayName: string;
   mxcAvatarUrl: string | undefined;
@@ -72,7 +77,7 @@ export const MediaView: FC<Props> = ({
   mxcAvatarUrl,
   focusable,
   primaryButton,
-  encryptionStatus,
+  status,
   raisedHandTime,
   currentReaction,
   raisedHandOnClick,
@@ -106,7 +111,11 @@ export const MediaView: FC<Props> = ({
           name={displayName}
           size={avatarSize}
           src={mxcAvatarUrl}
-          className={styles.avatar}
+          className={classNames(styles.avatar, {
+            // When the avatar is overlaid with a status, make it translucent
+            // for readability
+            [styles.translucent]: status,
+          })}
           style={{ display: video && videoEnabled ? "none" : "initial" }}
         />
         {video?.publication !== undefined && (
@@ -152,6 +161,14 @@ export const MediaView: FC<Props> = ({
             />
           </>
         )}
+        {status && (
+          <div className={styles.status}>
+            <status.Icon width={16} height={16} aria-hidden />
+            <Text as="span" size="sm" weight="medium">
+              {status.text}
+            </Text>
+          </div>
+        )}
         {/* TODO: Bring this back once encryption status is less broken */}
         {/*encryptionStatus !== EncryptionStatus.Okay && (
             <div className={styles.status}>

src/tile/SpotlightTile.test.tsx

@@ -6,10 +6,11 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { test, expect, vi } from "vitest";
-import { isInaccessible, render, screen } from "@testing-library/react";
+import { act, isInaccessible, render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
 import userEvent from "@testing-library/user-event";
 import { TooltipProvider } from "@vector-im/compound-web";
+import { BehaviorSubject } from "rxjs";
 
 import { SpotlightTile } from "./SpotlightTile";
 import {
@@ -23,6 +24,11 @@ import {
 } from "../utils/test";
 import { SpotlightTileViewModel } from "../state/TileViewModel";
 import { constant } from "../state/Behavior";
+import {
+  createRingingMedia,
+  type RingingMediaViewModel,
+} from "../state/media/RingingMediaViewModel";
+import { type MuteStates } from "../state/MuteStates";
 
 global.IntersectionObserver = class MockIntersectionObserver {
   public observe(): void {}
@@ -140,3 +146,41 @@ test("Screen share volume UI is hidden when screen share has no audio", async ()
     screen.queryByRole("button", { name: /volume/i }),
   ).not.toBeInTheDocument();
 });
+
+test("SpotlightTile displays ringing media", async () => {
+  const pickupState$ = new BehaviorSubject<
+    RingingMediaViewModel["pickupState$"]["value"]
+  >("ringing");
+  const vm = createRingingMedia({
+    pickupState$,
+    muteStates: {
+      video: { enabled$: constant(false) },
+    } as unknown as MuteStates,
+    id: "test",
+    userId: "@alice:example.org",
+    displayName$: constant("Alice"),
+    mxcAvatarUrl$: constant(undefined),
+  });
+
+  const toggleExpanded = vi.fn();
+  const { container } = render(
+    <SpotlightTile
+      vm={new SpotlightTileViewModel(constant([vm]), constant(false))}
+      targetWidth={300}
+      targetHeight={200}
+      expanded={false}
+      onToggleExpanded={toggleExpanded}
+      showIndicators
+      focusable={true}
+    />,
+  );
+
+  expect(await axe(container)).toHaveNoViolations();
+  // Alice should be in the spotlight with the right status
+  screen.getByText("Alice");
+  screen.getByText("Calling…");
+
+  // Now we time out ringing to Alice
+  act(() => pickupState$.next("timeout"));
+  screen.getByText("Call ended");
+});

src/tile/SpotlightTile.tsx

@@ -24,6 +24,9 @@ import {
   VolumeOnIcon,
   VolumeOffSolidIcon,
   VolumeOnSolidIcon,
+  VideoCallSolidIcon,
+  VoiceCallSolidIcon,
+  EndCallIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { animated } from "@react-spring/web";
 import { type Observable, map } from "rxjs";
@@ -43,7 +46,7 @@ import { useReactiveState } from "../useReactiveState";
 import { useLatest } from "../useLatest";
 import { type SpotlightTileViewModel } from "../state/TileViewModel";
 import { useBehavior } from "../useBehavior";
-import { type EncryptionStatus } from "../state/media/MemberMediaViewModel";
+import { type MemberMediaViewModel } from "../state/media/MemberMediaViewModel";
 import { type LocalUserMediaViewModel } from "../state/media/LocalUserMediaViewModel";
 import { type RemoteUserMediaViewModel } from "../state/media/RemoteUserMediaViewModel";
 import { type UserMediaViewModel } from "../state/media/UserMediaViewModel";
@@ -52,6 +55,7 @@ import { type RemoteScreenShareViewModel } from "../state/media/RemoteScreenShar
 import { type MediaViewModel } from "../state/media/MediaViewModel";
 import { Slider } from "../Slider";
 import { platform } from "../Platform";
+import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
 
 interface SpotlightItemBaseProps {
   ref?: Ref<HTMLDivElement>;
@@ -59,18 +63,20 @@ interface SpotlightItemBaseProps {
   "data-id": string;
   targetWidth: number;
   targetHeight: number;
-  video: TrackReferenceOrPlaceholder | undefined;
   userId: string;
-  unencryptedWarning: boolean;
-  encryptionStatus: EncryptionStatus;
-  focusUrl: string | undefined;
   displayName: string;
   mxcAvatarUrl: string | undefined;
   focusable: boolean;
   "aria-hidden"?: boolean;
 }
 
-interface SpotlightUserMediaItemBaseProps extends SpotlightItemBaseProps {
+interface SpotlightMemberMediaItemBaseProps extends SpotlightItemBaseProps {
+  video: TrackReferenceOrPlaceholder | undefined;
+  unencryptedWarning: boolean;
+  focusUrl: string | undefined;
+}
+
+interface SpotlightUserMediaItemBaseProps extends SpotlightMemberMediaItemBaseProps {
   videoFit: "contain" | "cover";
   videoEnabled: boolean;
 }
@@ -103,21 +109,32 @@ const SpotlightRemoteUserMediaItem: FC<SpotlightRemoteUserMediaItemProps> = ({
   );
 };
 
-interface SpotlightUserMediaItemProps extends SpotlightItemBaseProps {
+interface SpotlightUserMediaItemProps extends SpotlightMemberMediaItemBaseProps {
   vm: UserMediaViewModel;
 }
 
 const SpotlightUserMediaItem: FC<SpotlightUserMediaItemProps> = ({
   vm,
+  targetWidth,
+  targetHeight,
   ...props
 }) => {
   const videoFit = useBehavior(vm.videoFit$);
   const videoEnabled = useBehavior(vm.videoEnabled$);
 
+  // Whenever target bounds change, inform the viewModel
+  useEffect(() => {
+    if (targetWidth > 0 && targetHeight > 0) {
+      vm.setTargetDimensions(targetWidth, targetHeight);
+    }
+  }, [targetWidth, targetHeight, vm]);
+
   const baseProps: SpotlightUserMediaItemBaseProps &
     RefAttributes<HTMLDivElement> = {
     videoFit,
     videoEnabled,
+    targetWidth,
+    targetHeight,
     ...props,
   };
 
@@ -130,7 +147,7 @@ const SpotlightUserMediaItem: FC<SpotlightUserMediaItemProps> = ({
 
 SpotlightUserMediaItem.displayName = "SpotlightUserMediaItem";
 
-interface SpotlightScreenShareItemProps extends SpotlightItemBaseProps {
+interface SpotlightScreenShareItemProps extends SpotlightMemberMediaItemBaseProps {
   vm: ScreenShareViewModel;
   videoEnabled: boolean;
 }
@@ -142,7 +159,7 @@ const SpotlightScreenShareItem: FC<SpotlightScreenShareItemProps> = ({
   return <MediaView videoFit="contain" mirror={false} {...props} />;
 };
 
-interface SpotlightRemoteScreenShareItemProps extends SpotlightItemBaseProps {
+interface SpotlightRemoteScreenShareItemProps extends SpotlightMemberMediaItemBaseProps {
   vm: RemoteScreenShareViewModel;
 }
 
@@ -155,6 +172,67 @@ const SpotlightRemoteScreenShareItem: FC<
   );
 };
 
+interface SpotlightMemberMediaItemProps extends SpotlightItemBaseProps {
+  vm: MemberMediaViewModel;
+}
+
+const SpotlightMemberMediaItem: FC<SpotlightMemberMediaItemProps> = ({
+  vm,
+  ...props
+}) => {
+  const video = useBehavior(vm.video$);
+  const unencryptedWarning = useBehavior(vm.unencryptedWarning$);
+  const focusUrl = useBehavior(vm.focusUrl$);
+
+  const baseProps: SpotlightMemberMediaItemBaseProps &
+    RefAttributes<HTMLDivElement> = {
+    video: video ?? undefined,
+    unencryptedWarning,
+    focusUrl,
+    ...props,
+  };
+
+  if (vm.type === "user")
+    return <SpotlightUserMediaItem vm={vm} {...baseProps} />;
+  return vm.local ? (
+    <SpotlightScreenShareItem vm={vm} videoEnabled {...baseProps} />
+  ) : (
+    <SpotlightRemoteScreenShareItem vm={vm} {...baseProps} />
+  );
+};
+
+interface SpotlightRingingMediaItemProps extends SpotlightItemBaseProps {
+  vm: RingingMediaViewModel;
+}
+
+const SpotlightRingingMediaItem: FC<SpotlightRingingMediaItemProps> = ({
+  vm,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const pickupState = useBehavior(vm.pickupState$);
+  const videoEnabled = useBehavior(vm.videoEnabled$);
+
+  return (
+    <MediaView
+      video={undefined}
+      unencryptedWarning={false}
+      status={
+        pickupState === "ringing"
+          ? {
+              text: t("video_tile.calling"),
+              Icon: videoEnabled ? VideoCallSolidIcon : VoiceCallSolidIcon,
+            }
+          : { text: t("video_tile.call_ended"), Icon: EndCallIcon }
+      }
+      videoEnabled={false}
+      videoFit="cover"
+      mirror={false}
+      {...props}
+    />
+  );
+};
+
 interface SpotlightItemProps {
   ref?: Ref<HTMLDivElement>;
   vm: MediaViewModel;
@@ -187,22 +265,9 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
 }) => {
   const ourRef = useRef<HTMLDivElement | null>(null);
 
-  // Whenever target bounds change, inform the viewModel
-  useEffect(() => {
-    if (targetWidth > 0 && targetHeight > 0) {
-      if (vm.type != "screen share") {
-        vm.setTargetDimensions(targetWidth, targetHeight);
-      }
-    }
-  }, [targetWidth, targetHeight, vm]);
-
   const ref = useMergedRefs(ourRef, theirRef);
-  const focusUrl = useBehavior(vm.focusUrl$);
   const displayName = useBehavior(vm.displayName$);
   const mxcAvatarUrl = useBehavior(vm.mxcAvatarUrl$);
-  const video = useBehavior(vm.video$);
-  const unencryptedWarning = useBehavior(vm.unencryptedWarning$);
-  const encryptionStatus = useBehavior(vm.encryptionStatus$);
 
   // Hook this item up to the intersection observer
   useEffect(() => {
@@ -225,23 +290,17 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
     className: classNames(styles.item, { [styles.snap]: snap }),
     targetWidth,
     targetHeight,
-    video: video ?? undefined,
     userId: vm.userId,
-    unencryptedWarning,
-    focusUrl,
     displayName,
     mxcAvatarUrl,
     focusable,
-    encryptionStatus,
     "aria-hidden": ariaHidden,
   };
 
-  if (vm.type === "user")
-    return <SpotlightUserMediaItem vm={vm} {...baseProps} />;
-  return vm.local ? (
-    <SpotlightScreenShareItem vm={vm} videoEnabled {...baseProps} />
+  return vm.type === "ringing" ? (
+    <SpotlightRingingMediaItem vm={vm} {...baseProps} />
   ) : (
-    <SpotlightRemoteScreenShareItem vm={vm} {...baseProps} />
+    <SpotlightMemberMediaItem vm={vm} {...baseProps} />
   );
 };