ov-components: add fallback name for participants and update participant name handling in services

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<ParticipantTrackPublication>;
 	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<string, number>();
@@ -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

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);
 		}

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 });
 	}
 
 	/**