diff --git a/src/state/CallViewModel.ts b/src/state/CallViewModel.ts index 734d2410..786e5138 100644 --- a/src/state/CallViewModel.ts +++ b/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, diff --git a/src/tile/GridTile.tsx b/src/tile/GridTile.tsx index 3675e9a7..0cbe1d25 100644 --- a/src/tile/GridTile.tsx +++ b/src/tile/GridTile.tsx @@ -84,6 +84,9 @@ const UserMediaTile = forwardRef( 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( className={styles.muteIcon} /> } - displayName={displayName} + displayName={ + displayName + + (isRTCParticipantAvailable ? "" : " missing Livekit Participant...") + } primaryButton={ { e.preventDefault(); @@ -248,6 +255,9 @@ const RemoteUserMediaTile = forwardRef< mirror={false} menuStart={ <> + {/* {isRTCParticipantAvailable + ? "is available" + : "Loading RTC participant"} */} { style?: ComponentProps["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( src={member?.getMxcAvatarUrl()} className={styles.avatar} /> - {video.publication !== undefined && ( + {video?.publication !== undefined && (