From a39249eaaf4d2d7c565ebfa40b406ac4d53bbb2b Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Wed, 30 Mar 2022 12:10:15 +0200
Subject: [PATCH] openvidu-components: Fixed video content style

---
 .../lib/components/video/video.component.ts   | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

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 8d92d9a0..132e1f4f 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
@@ -26,12 +26,13 @@ export class VideoComponent implements AfterViewInit {
 	ngAfterViewInit() {
 		setTimeout(() => {
 			if (this._streamManager && this._videoElement) {
+				this.updateVideoStyles();
 				this._streamManager.addVideoElement(this._videoElement.nativeElement);
 			}
 		});
 	}
 
-	@ViewChild('videoElement')
+	@ViewChild('videoElement', {static:false})
 	set videoElement(element: ElementRef) {
 		this._videoElement = element;
 	}
@@ -41,15 +42,20 @@ export class VideoComponent implements AfterViewInit {
 		if (streamManager) {
 			this._streamManager = streamManager;
 			if (!!this._videoElement && this._streamManager) {
-				this.type = <VideoType>this._streamManager?.stream?.typeOfVideo;
-				if (this.type === VideoType.SCREEN) {
-					this._videoElement.nativeElement.style.objectFit = 'contain';
-					// this._videoElement.nativeElement.style.background = '#272727';
-				} else {
-					this._videoElement.nativeElement.style.objectFit = 'cover';
-				}
+				this.updateVideoStyles();
 				this._streamManager.addVideoElement(this._videoElement.nativeElement);
 			}
 		}
 	}
+
+	private updateVideoStyles() {
+
+		this.type = <VideoType>this._streamManager?.stream?.typeOfVideo;
+		if (this.type === VideoType.SCREEN) {
+			this._videoElement.nativeElement.style.objectFit = 'contain';
+		} else {
+			this._videoElement.nativeElement.style.objectFit = 'cover';
+		}
+
+	}
 }