From b4decda1f5feccc32bdc9cfb681848dc46a3e982 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Wed, 2 Mar 2022 11:02:06 +0100
Subject: [PATCH] openvidu-components: Updated avatar-profile component

---
 .../avatar-profile.component.ts               | 30 +++++++++----------
 .../components/stream/stream.component.html   |  6 ++++
 .../lib/components/stream/stream.component.ts |  1 -
 .../lib/components/video/video.component.ts   |  4 ---
 .../src/lib/models/participant.model.ts       |  4 ++-
 .../participant/participant.service.ts        |  2 +-
 6 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.ts
index e0d70722..1f54f11c 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/avatar-profile/avatar-profile.component.ts
@@ -1,24 +1,22 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
-  selector: 'ov-avatar-profile',
+	selector: 'ov-avatar-profile',
 	template: `
-    <div class="poster" [ngStyle]="{ 'background-color': color }">
-      <span id="poster-text">{{letter}}</span>
-    </div>
-  `,
-  styleUrls: ['./avatar-profile.component.css']
+		<div class="poster" [ngStyle]="{ 'background-color': color }">
+			<span id="poster-text">{{ letter }}</span>
+		</div>
+	`,
+	styleUrls: ['./avatar-profile.component.css']
 })
-export class AvatarProfileComponent implements OnInit {
+export class AvatarProfileComponent {
+	letter: string;
 
-  color: string;
-
-  @Input() letter;
-
-  constructor() { }
-
-  ngOnInit(): void {
-		this.color = `hsl(${Math.random() * 360}, 100%, 75%)`;
+	@Input()
+	set name(nickname: string) {
+		this.letter = nickname[0];
 	}
+	@Input() color;
 
+	constructor() {}
 }
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 71fa9318..f4e081f2 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
@@ -26,6 +26,12 @@
 		<ov-audio-wave [streamManager]="_stream.streamManager"></ov-audio-wave>
 	</div>
 
+	<ov-avatar-profile
+		*ngIf="!_stream.streamManager?.stream?.videoActive && _stream.type === 'CAMERA'"
+		[name]="_stream.participant.nickname"
+		[color]="_stream.participant.colorProfile"
+	></ov-avatar-profile>
+
 	<ov-video
 		(dblclick)="toggleVideoEnlarged()"
 		[streamManager]="_stream.streamManager"
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 32ea866a..9d65609d 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,6 +1,5 @@
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';
-import { NicknameMatcher } from '../../matchers/nickname.matcher';
 import { VideoSizeIcon } from '../../models/icon.model';
 import { ScreenType, VideoType } from '../../models/video-type.model';
 import { DocumentService } from '../../services/document/document.service';
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts
index 7acb23f2..9b1b1dce 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.ts
@@ -5,8 +5,6 @@ import { VideoType } from '../../models/video-type.model';
 @Component({
 	selector: 'ov-video',
 	template: `
-		<ov-avatar-profile *ngIf="!_streamManager?.stream?.videoActive && (type === 'CAMERA' || !type)" [letter]="'K'"></ov-avatar-profile>
-
 		<video
 			class="OT_video-element"
 			#videoElement
@@ -18,9 +16,7 @@ import { VideoType } from '../../models/video-type.model';
 })
 export class VideoComponent implements AfterViewInit {
 	@Input() mutedSound: boolean;
-
 	_streamManager: StreamManager;
-
 	_videoElement: ElementRef;
 	type: VideoType = VideoType.CAMERA;
 
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts
index 8fc9b837..44bb22ca 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/participant.model.ts
@@ -15,12 +15,14 @@ export abstract class ParticipantAbstractModel {
 	id: string;
 	local: boolean;
 	nickname: string;
+	colorProfile: string;
 	isMutedForcibly: boolean;
 
 	constructor(model?: StreamModel, id?: string, local: boolean = true, nickname?: string) {
 		this.id = id ? id : new Date().getTime().toString();
 		this.local = local,
-		this.nickname = nickname ? nickname : 'OpenVidu_User',
+		this.nickname = nickname ? nickname : 'OpenVidu_User';
+		this.colorProfile = `hsl(${Math.random()*360}, 100%, 80%)`;
 		this.isMutedForcibly = false;
 		let streamModel: StreamModel = {
 			connected: true,
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 f1c5dd9a..2b351b2b 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
@@ -102,7 +102,7 @@ export class ParticipantService {
 
 	setMyNickname(nickname: string) {
 		this.localParticipant.setNickname(nickname);
-		// this.updateLocalParticipant();
+		this.updateLocalParticipant();
 	}
 
 	getMyNickname(): string {