From 9e7443ae7f43947e7b4210c352b780fcd4d6d62c Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Mon, 26 Jun 2023 13:31:03 +0200
Subject: [PATCH] openvidu-components: Added unique id to video elements

---
 .../lib/components/stream/stream.component.html  |  1 +
 .../src/lib/components/video/video.component.ts  | 16 +++++-----------
 2 files changed, 6 insertions(+), 11 deletions(-)

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 f8849843..1bb59e35 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
@@ -41,6 +41,7 @@
 		(dblclick)="toggleVideoEnlarged()"
 		[streamManager]="_stream.streamManager"
 		[mutedSound]="_stream?.participant?.isMutedForcibly"
+		[participantId]="_stream?.participant?.id"
 	></ov-video>
 
 	<div class="status-icons">
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 6d0589e5..3948fe88 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
@@ -7,18 +7,12 @@ import { VideoType } from '../../models/video-type.model';
  */
 @Component({
 	selector: 'ov-video',
-	template: `
-		<video
-			class="OT_video-element"
-			#videoElement
-			[attr.id]="streamManager && _streamManager.stream ? 'video-' + _streamManager.stream.streamId : 'video-undefined'"
-			[muted]="mutedSound"
-		></video>
-	`,
+	template: ` <video class="OT_video-element" #videoElement [muted]="mutedSound"></video> `,
 	styleUrls: ['./video.component.css']
 })
 export class VideoComponent implements AfterViewInit {
 	@Input() mutedSound: boolean;
+	@Input() participantId: string;
 	_streamManager: StreamManager;
 	_videoElement: ElementRef;
 	type: VideoType = VideoType.CAMERA;
@@ -32,7 +26,7 @@ export class VideoComponent implements AfterViewInit {
 		});
 	}
 
-	@ViewChild('videoElement', {static:false})
+	@ViewChild('videoElement', { static: false })
 	set videoElement(element: ElementRef) {
 		this._videoElement = element;
 	}
@@ -49,15 +43,15 @@ export class VideoComponent implements AfterViewInit {
 	}
 
 	private updateVideoStyles() {
-
 		this.type = <VideoType>this._streamManager?.stream?.typeOfVideo;
 		if (this.type === VideoType.SCREEN) {
 			this._videoElement.nativeElement.style.objectFit = 'contain';
 			this._videoElement.nativeElement.classList.add('screen-type');
+			this._videoElement.nativeElement.id =`video-screen-${this.participantId}`;
 		} else {
 			this._videoElement.nativeElement.style.objectFit = 'cover';
 			this._videoElement.nativeElement.classList.add('camera-type');
+			this._videoElement.nativeElement.id = `video-camera-${this.participantId}`;
 		}
-
 	}
 }