From 3d0370017ad5cba417ea30b495d6958885daccf3 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Fri, 14 Oct 2022 13:37:11 +0200
Subject: [PATCH] openvidu-components: Improved poster animation

---
 .../avatar-profile.component.ts               | 11 ++------
 .../components/stream/stream.component.html   |  1 +
 .../lib/components/stream/stream.component.ts | 25 ++++++++++++-------
 3 files changed, 19 insertions(+), 18 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 a45f1415..cfbfc952 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,4 +1,3 @@
-import { animate, style, transition, trigger } from '@angular/animations';
 import { Component, Input } from '@angular/core';
 
 /**
@@ -8,19 +7,13 @@ import { Component, Input } from '@angular/core';
 @Component({
 	selector: 'ov-avatar-profile',
 	template: `
-		<div class="poster" @posterAnimation>
+		<div class="poster">
 			<div class="initial" [ngStyle]="{ 'background-color': color }">
 				<span id="poster-text">{{ letter }}</span>
 			</div>
 		</div>
 	`,
-	styleUrls: ['./avatar-profile.component.css'],
-	animations: [
-		trigger('posterAnimation', [
-			transition(':enter', [style({ opacity: 0 }), animate('600ms', style({ opacity: 1 }))])
-			// transition(':leave', [animate(600, style({ backgroundColor: 'yellow' }))]),
-		])
-	]
+	styleUrls: ['./avatar-profile.component.css']
 })
 export class AvatarProfileComponent {
 	letter: string;
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 1e4b46cb..776e1be2 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
@@ -31,6 +31,7 @@
 	</div>
 
 	<ov-avatar-profile
+		@posterAnimation
 		*ngIf="!_stream.streamManager?.stream?.videoActive && _stream.type === 'CAMERA'"
 		[name]="_stream.participant.nickname"
 		[color]="_stream.participant.colorProfile"
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 0f9547a0..04ecda61 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,17 +1,18 @@
+import { animate, style, transition, trigger } from '@angular/animations';
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { Subscription } from 'rxjs';
 import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';
+import { PublisherProperties } from 'openvidu-browser';
+import { Subscription } from 'rxjs';
 import { VideoSizeIcon } from '../../models/icon.model';
+import { StreamModel } from '../../models/participant.model';
+import { Signal } from '../../models/signal.model';
 import { ScreenType, VideoType } from '../../models/video-type.model';
 import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.service';
-import { OpenViduService } from '../../services/openvidu/openvidu.service';
-import { LayoutService } from '../../services/layout/layout.service';
-import { StorageService } from '../../services/storage/storage.service';
-import { Signal } from '../../models/signal.model';
-import { PublisherProperties } from 'openvidu-browser';
-import { StreamModel } from '../../models/participant.model';
-import { ParticipantService } from '../../services/participant/participant.service';
 import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
+import { LayoutService } from '../../services/layout/layout.service';
+import { OpenViduService } from '../../services/openvidu/openvidu.service';
+import { ParticipantService } from '../../services/participant/participant.service';
+import { StorageService } from '../../services/storage/storage.service';
 
 /**
  * The **StreamComponent** is hosted inside of the {@link LayoutComponent}.
@@ -55,7 +56,13 @@ import { OpenViduAngularConfigService } from '../../services/config/openvidu-ang
 @Component({
 	selector: 'ov-stream',
 	templateUrl: './stream.component.html',
-	styleUrls: ['./stream.component.css']
+	styleUrls: ['./stream.component.css'],
+	animations: [
+		trigger('posterAnimation', [
+			transition(':enter', [style({ opacity: 0 }), animate('400ms', style({ opacity: 1 }))]),
+			transition(':leave', [style({ opacity: 1 }), animate('200ms', style({ opacity: 0 }))]),
+		])
+	]
 })
 export class StreamComponent implements OnInit {
 	/**