From b529f6edc61e0365ed4ab9025c5d875e5f4413c1 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Mon, 28 Feb 2022 14:37:35 +0100
Subject: [PATCH] openvidu-components: Refactored nickname container

---
 .../components/session/session.component.ts   |  2 +-
 .../components/stream/stream.component.css    |  3 +-
 .../components/stream/stream.component.html   | 32 ++++++-------------
 .../lib/components/stream/stream.component.ts | 20 ++++++------
 .../user-settings/user-settings.component.ts  |  4 +--
 .../participant/participant.service.ts        | 22 ++++++-------
 6 files changed, 35 insertions(+), 48 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
index 541ad097..7398f80f 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
+++ b/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);
 			}
 		});
 	}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
index c46200ef..86d9173d 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
+++ b/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 {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
index 5ecfb18f..71fa9318 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
+++ b/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">
-			<form id="nicknameForm">
-				<mat-form-field color="primary">
-					<input
-						matInput
-						#nicknameInput
-						placeholder="Nick: {{ this._stream.nickname }}"
-						[formControl]="nicknameFormControl"
-						[errorStateMatcher]="matcher"
-						(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 *ngIf="toggleNickname && !this._stream.streamManager?.remote" [class.fullscreen]="isFullscreen" id="nickname-input-container">
+			<input
+				matInput
+				#nicknameInput
+				autocomplete="off"
+				maxlength="20"
+				[(ngModel)]="this.nickname"
+				(keypress)="updateNickname($event)"
+				(focusout)="updateNickname($event)"
+			/>
 		</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>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
index a40e7059..32ea866a 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
+++ b/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) {
-		if (event && event.keyCode === 13 && this.nicknameFormControl.valid) {
-			const nickname = this.nicknameFormControl.value;
-			this.participantService.setNickname(this._stream.connectionId, nickname);
-			this.storageService.setNickname(nickname);
-			this.openviduService.sendSignal(Signal.NICKNAME_CHANGED, undefined, { clientData: nickname });
+	updateNickname(event) {
+		if (event?.keyCode === 13 || event?.type === 'focusout') {
+			if(!!this.nickname){
+				this.participantService.setMyNickname(this.nickname);
+				this.storageService.setNickname(this.nickname);
+				this.openviduService.sendSignal(Signal.NICKNAME_CHANGED, undefined, { clientData: this.nickname });
+			}
 			this.toggleNicknameForm();
 		}
 	}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts
index a7bee0fd..aa50c3fe 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.ts
+++ b/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();
 		}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts
index c998f6c6..f1c5dd9a 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts
+++ b/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) {
-		if (this.localParticipant.hasConnectionId(connectionId)) {
-			this.localParticipant.setNickname(nickname);
-			// this.updateLocalParticipant();
-		} else {
-			const participant = this.getRemoteParticipantByConnectionId(connectionId);
-			if (participant) {
-				participant.setNickname(nickname);
-				// this.updateRemoteParticipants();
-			}
-		}
+	setMyNickname(nickname: string) {
+		this.localParticipant.setNickname(nickname);
+		// this.updateLocalParticipant();
 	}
 
 	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);
 	}