openvidu-components: Updated avatar-profile component

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() {}
 }

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"

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';

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;
 

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,

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 {