display missing lk participant + fix tile multiplier

src/state/CallViewModel.ts

@@ -406,10 +406,7 @@ export class CallViewModel extends ViewModel {
                 const indexedMediaId = `${mediaId}:${i}`;
                 const prevMedia = prevItems.get(indexedMediaId);
                 if (prevMedia && prevMedia instanceof UserMedia) {
-                  if (
-                    prevMedia.participant.value === undefined &&
-                    participant !== undefined
-                  ) {
+                  if (prevMedia.participant.value !== participant) {
                     // Update the BahviourSubject in the UserMedia.
                     prevMedia.participant.next(participant);
                   }
@@ -421,7 +418,7 @@ export class CallViewModel extends ViewModel {
                   // Once a participant appears we will update the BehaviourSubject. (see above)
                   prevMedia ??
                     new UserMedia(
-                      mediaId,
+                      indexedMediaId,
                       member,
                       participant,
                       this.encryptionSystem,

src/tile/GridTile.tsx

@@ -84,6 +84,9 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
     const videoEnabled = useObservableEagerState(vm.videoEnabled);
     const speaking = useObservableEagerState(vm.speaking);
     const cropVideo = useObservableEagerState(vm.cropVideo);
+    const isRTCParticipantAvailable = useObservableEagerState(
+      vm.isRTCParticipantAvailable,
+    );
     const onSelectFitContain = useCallback(
       (e: Event) => {
         e.preventDefault();
@@ -134,7 +137,10 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
             className={styles.muteIcon}
           />
         }
-        displayName={displayName}
+        displayName={
+          displayName +
+          (isRTCParticipantAvailable ? "" : " missing Livekit Participant...")
+        }
         primaryButton={
           <Menu
             open={menuOpen}
@@ -226,6 +232,7 @@ const RemoteUserMediaTile = forwardRef<
   const { t } = useTranslation();
   const locallyMuted = useObservableEagerState(vm.locallyMuted);
   const localVolume = useObservableEagerState(vm.localVolume);
+
   const onSelectMute = useCallback(
     (e: Event) => {
       e.preventDefault();
@@ -248,6 +255,9 @@ const RemoteUserMediaTile = forwardRef<
       mirror={false}
       menuStart={
         <>
+          {/* {isRTCParticipantAvailable
+            ? "is available"
+            : "Loading RTC participant"} */}
           <ToggleMenuItem
             Icon={MicOffIcon}
             label={t("video_tile.mute_for_me")}

src/tile/MediaView.tsx

@@ -25,7 +25,7 @@ interface Props extends ComponentProps<typeof animated.div> {
   style?: ComponentProps<typeof animated.div>["style"];
   targetWidth: number;
   targetHeight: number;
-  video: TrackReferenceOrPlaceholder;
+  video: TrackReferenceOrPlaceholder | undefined;
   videoFit: "cover" | "contain";
   mirror: boolean;
   member: RoomMember | undefined;
@@ -83,7 +83,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
             src={member?.getMxcAvatarUrl()}
             className={styles.avatar}
           />
-          {video.publication !== undefined && (
+          {video?.publication !== undefined && (
             <VideoTrack
               trackRef={video}
               // There's no reason for this to be focusable