diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/participant.model.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/participant.model.ts index 26519b2bf..da88765dc 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/participant.model.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/participant.model.ts @@ -89,6 +89,11 @@ export interface ParticipantProperties { */ participant: LocalParticipant | RemoteParticipant; + /** + * Fallback name used until the SDK participant name is available. + */ + fallbackName?: string; + /** * The room in which the participant is located, applicable only for local participants. */ @@ -129,9 +134,11 @@ export class ParticipantModel { private customVideoTrack: Partial; private _hasEncryptionError: boolean = false; private _decryptedName: string | undefined; + private _fallbackName: string | undefined; constructor(props: ParticipantProperties) { this.participant = props.participant; + this._fallbackName = props.fallbackName?.trim() || undefined; this.colorProfile = props.colorProfile ?? `hsl(${Math.random() * 360}, 100%, 80%)`; this.room = props.room; this.screenTrackPublicationDate = props.screenTrackPublicationDate ?? new Map(); @@ -171,7 +178,7 @@ export class ParticipantModel { * @returns string */ get name(): string | undefined { - return this._decryptedName ?? this.participant.name; + return this._decryptedName?.trim() || this.participant.name?.trim() || this._fallbackName || this.participant.identity; } /** @@ -312,6 +319,7 @@ export class ParticipantModel { getProperties(): ParticipantProperties { return { participant: this.participant, + fallbackName: this._fallbackName, room: this.room, colorProfile: this.colorProfile, screenTrackPublicationDate: this.screenTrackPublicationDate diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/openvidu/openvidu.service.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/openvidu/openvidu.service.ts index 2a7502e73..a9deb861d 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/openvidu/openvidu.service.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/openvidu/openvidu.service.ts @@ -276,10 +276,15 @@ export class OpenViduService { * @internal */ initializeAndSetToken(token: string, livekitUrl?: string): void { - const { livekitUrl: urlFromToken } = this.extractLivekitData(token); + const { livekitUrl: urlFromToken, participantName: participantNameFromToken } = this.extractLivekitData(token); this.livekitToken = token; const url = livekitUrl || urlFromToken; + const currentParticipantName = this.configService.getCurrentParticipantName() || this.storageService.getParticipantName() || undefined; + if (participantNameFromToken && participantNameFromToken !== currentParticipantName) { + this.storageService.setParticipantName(participantNameFromToken); + this.configService.updateGeneralConfig({ participantName: participantNameFromToken }); + } if (!url) { this.log.e('LiveKit URL is not defined. Please, check the livekitUrl parameter of the VideoConferenceComponent'); @@ -751,7 +756,7 @@ export class OpenViduService { * @throws Error if there is an error decoding and parsing the token. * @internal */ - private extractLivekitData(token: string): { livekitUrl?: string; livekitRoomAdmin: boolean } { + private extractLivekitData(token: string): { livekitUrl?: string; livekitRoomAdmin: boolean; participantName?: string } { try { const base64Url = token.split('.')[1]; const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); @@ -766,15 +771,17 @@ export class OpenViduService { ); const payload = JSON.parse(jsonPayload); + const participantName = typeof payload?.name === 'string' && payload.name.trim() ? payload.name.trim() : undefined; if (payload?.metadata) { const tokenMetadata = JSON.parse(payload.metadata); return { livekitUrl: tokenMetadata.livekitUrl, - livekitRoomAdmin: !!tokenMetadata.roomAdmin + livekitRoomAdmin: !!tokenMetadata.roomAdmin, + participantName }; } - return { livekitRoomAdmin: false }; + return { livekitRoomAdmin: false, participantName }; } catch (error) { throw new Error('Error decoding and parsing token: ' + error); } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/participant/participant.service.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/participant/participant.service.ts index dbccc73a4..9e15f9919 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/participant/participant.service.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/participant/participant.service.ts @@ -99,7 +99,8 @@ export class ParticipantService { */ setLocalParticipant(participant: LocalParticipant) { const room = this.openviduService.getRoom(); - this.localParticipant = this.newParticipant({ participant, room }); + const fallbackName = this.directiveService.getCurrentParticipantName() || this.storageSrv.getParticipantName() || undefined; + this.localParticipant = this.newParticipant({ participant, room, fallbackName }); } /**