openvidu-components: Refactored nickname container

openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts

@@ -252,7 +252,7 @@ export class SessionComponent implements OnInit {
 
 			if (isRemoteConnection) {
 				const nickname = this.participantService.getNicknameFromConnectionData(event.data);
-				this.participantService.setNickname(connectionId, nickname);
+				this.participantService.setRemoteNickname(connectionId, nickname);
 			}
 		});
 	}

openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css

@@ -21,9 +21,10 @@
 	border-radius: var(--ov-panel-radius);
   }
 
-  #dialogNickname {
+  #nickname-input-container {
 	background-color:  #0000005e;
 	border-radius: var(--ov-panel-radius);
+
   }
 
   #closeButton {

openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html

@@ -8,26 +8,17 @@
 		<div (click)="toggleNicknameForm()" class="nicknameContainer" selected *ngIf="!toggleNickname">
 			<span id="nickname" *ngIf="this._stream.type === 'CAMERA'">{{ this._stream.participant.nickname }}</span>
 			<span id="nickname" *ngIf="this._stream.type === 'SCREEN'">{{ this._stream.participant.nickname }}_SCREEN</span>
-
-			<span *ngIf="_stream.local || (_stream.streamManager && !_stream.streamManager?.remote)"> (edit)</span>
 		</div>
-		<div *ngIf="toggleNickname && !this._stream.streamManager?.remote" [class.fullscreen]="isFullscreen" id="dialogNickname">
+		<div *ngIf="toggleNickname && !this._stream.streamManager?.remote" [class.fullscreen]="isFullscreen" id="nickname-input-container">
-			<form id="nicknameForm">
+			<input
-				<mat-form-field color="primary">
+				matInput
-					<input
+				#nicknameInput
-						matInput
+				autocomplete="off"
-						#nicknameInput
+				maxlength="20"
-						placeholder="Nick: {{ this._stream.nickname }}"
+				[(ngModel)]="this.nickname"
-						[formControl]="nicknameFormControl"
+				(keypress)="updateNickname($event)"
-						[errorStateMatcher]="matcher"
+				(focusout)="updateNickname($event)"
-						(keypress)="eventKeyPress($event)"
+			/>
-						autocomplete="off"
-						(focusout)="toggleNicknameForm()"
-					/>
-					<mat-error *ngIf="nicknameFormControl.hasError('required')"> Nickname is <strong>required</strong> </mat-error>
-					<mat-error *ngIf="nicknameFormControl.hasError('maxlength')"> Nickname is <strong>too long!</strong> </mat-error>
-				</mat-form-field>
-			</form>
 		</div>
 	</div>
 
@@ -41,16 +32,13 @@
 		[mutedSound]="_stream?.participant?.isMutedForcibly"
 	></ov-video>
 
-
 	<div class="status-icons">
-
 		<button mat-icon-button id="statusMic" *ngIf="!this._stream.streamManager?.stream?.audioActive" disabled>
 			<mat-icon>mic_off</mat-icon>
 		</button>
 	</div>
 
 	<div class="videoButtons" *ngIf="showSettings">
-
 		<button mat-icon-button (click)="toggleVideoMenu($event)" matTooltip="Settings" aria-label="Video settings menu">
 			<mat-icon>more_vert</mat-icon>
 		</button>

openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts

@@ -1,5 +1,4 @@
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
 import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';
 import { NicknameMatcher } from '../../matchers/nickname.matcher';
 import { VideoSizeIcon } from '../../models/icon.model';
@@ -24,9 +23,8 @@ export class StreamComponent implements OnInit {
 	videoTypeEnum = VideoType;
 	videoSizeIcon: VideoSizeIcon = VideoSizeIcon.BIG;
 	toggleNickname: boolean;
-	nicknameFormControl: FormControl;
-	matcher: NicknameMatcher;
 	_stream: StreamModel;
+	nickname: string;
 	private _streamContainer: ElementRef;
 	@ViewChild(MatMenuTrigger) public menuTrigger: MatMenuTrigger;
 	@ViewChild('menu') menu: MatMenuPanel;
@@ -61,7 +59,7 @@ export class StreamComponent implements OnInit {
 		this._stream = stream;
 		this.checkVideoEnlarged();
 		if(this._stream.participant) {
-			this.nicknameFormControl = new FormControl(this._stream.participant.nickname, [Validators.maxLength(25), Validators.required]);
+			this.nickname = this._stream.participant.nickname;
 		}
 	}
 
@@ -73,7 +71,6 @@ export class StreamComponent implements OnInit {
 	}
 
 	ngOnInit() {
-		this.matcher = new NicknameMatcher();
 	}
 
 	ngOnDestroy() {
@@ -111,12 +108,13 @@ export class StreamComponent implements OnInit {
 		}
 	}
 
-	eventKeyPress(event) {
+	updateNickname(event) {
-		if (event && event.keyCode === 13 && this.nicknameFormControl.valid) {
+		if (event?.keyCode === 13 || event?.type === 'focusout') {
-			const nickname = this.nicknameFormControl.value;
+			if(!!this.nickname){
-			this.participantService.setNickname(this._stream.connectionId, nickname);
+				this.participantService.setMyNickname(this.nickname);
-			this.storageService.setNickname(nickname);
+				this.storageService.setNickname(this.nickname);
-			this.openviduService.sendSignal(Signal.NICKNAME_CHANGED, undefined, { clientData: nickname });
+				this.openviduService.sendSignal(Signal.NICKNAME_CHANGED, undefined, { clientData: this.nickname });
+			}
 			this.toggleNicknameForm();
 		}
 	}

openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts

@@ -42,7 +42,7 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
 	localParticipant: ParticipantAbstractModel;
 	columns: number;
 
-	nicknameFormControl = new FormControl('', [Validators.maxLength(25), Validators.required]);
+	nicknameFormControl = new FormControl('', [Validators.maxLength(20), Validators.required]);
 	matcher = new NicknameMatcher();
 	hasVideoDevices: boolean;
 	hasAudioDevices: boolean;
@@ -223,7 +223,7 @@ export class UserSettingsComponent implements OnInit, OnDestroy {
 	joinSession() {
 		if (this.nicknameFormControl.valid) {
 			const nickname = this.nicknameFormControl.value;
-			this.participantService.setNickname(this.participantService.getMyCameraConnectionId(), nickname);
+			this.participantService.setMyNickname(nickname);
 			this.storageSrv.setNickname(nickname);
 			return this.onJoinClicked.emit();
 		}

openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts

@@ -100,17 +100,9 @@ export class ParticipantService {
 		this.updateLocalParticipant();
 	}
 
-	setNickname(connectionId: string, nickname: string) {
+	setMyNickname(nickname: string) {
-		if (this.localParticipant.hasConnectionId(connectionId)) {
+		this.localParticipant.setNickname(nickname);
-			this.localParticipant.setNickname(nickname);
+		// this.updateLocalParticipant();
-			// this.updateLocalParticipant();
-		} else {
-			const participant = this.getRemoteParticipantByConnectionId(connectionId);
-			if (participant) {
-				participant.setNickname(nickname);
-				// this.updateRemoteParticipants();
-			}
-		}
 	}
 
 	getMyNickname(): string {
@@ -286,6 +278,14 @@ export class ParticipantService {
 		}
 	}
 
+	setRemoteNickname(connectionId: string, nickname: string) {
+		const participant = this.getRemoteParticipantByConnectionId(connectionId);
+		if (participant) {
+			participant.setNickname(nickname);
+			// this.updateRemoteParticipants();
+		}
+	}
+
 	updateRemoteParticipants() {
 		this._remoteParticipants.next(this.remoteParticipants);
 	}