New ringing UI

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

src/state/media/MemberMediaViewModel.ts

@@ -38,6 +38,8 @@ import { type ObservableScope } from "../ObservableScope";
 import { observeTrackReference$ } from "../observeTrackReference";
 import { E2eeType } from "../../e2ee/e2eeType";
 import { observeInboundRtpStreamStats$ } from "./observeRtpStreamStats";
+import { type UserMediaViewModel } from "./UserMediaViewModel";
+import { type ScreenShareViewModel } from "./ScreenShareViewModel";
 
 // TODO: Encryption status is kinda broken and thus unused right now. Remove?
 export enum EncryptionStatus {
@@ -49,9 +51,9 @@ export enum EncryptionStatus {
 }
 
 /**
- * Media belonging to an active member of the RTC session.
+ * Properties common to all MemberMediaViewModels.
  */
-export interface MemberMediaViewModel extends BaseMediaViewModel {
+export interface BaseMemberMediaViewModel extends BaseMediaViewModel {
   /**
    * The LiveKit video track for this media.
    */
@@ -88,7 +90,7 @@ export function createMemberMedia(
     encryptionSystem,
     ...inputs
   }: MemberMediaInputs,
-): MemberMediaViewModel {
+): BaseMemberMediaViewModel {
   const trackBehavior$ = (
     source: Track.Source,
   ): Behavior<TrackReference | undefined> =>
@@ -270,3 +272,8 @@ function observeRemoteTrackReceivingOkay$(
     startWith(undefined),
   );
 }
+
+/**
+ * Media belonging to an active member of the call.
+ */
+export type MemberMediaViewModel = UserMediaViewModel | ScreenShareViewModel;