display missing lk participant + fix tile multiplier

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