From 28fe810f0604bb3d3fdafb135a54871de9cd18e9 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Mon, 7 Feb 2022 10:43:21 +0100
Subject: [PATCH] openvidu-components: Renamed participant input to stream

---
 .../components/layout/layout.component.html   | 12 ++++-----
 .../components/stream/stream.component.html   | 26 +++++++++----------
 .../lib/components/stream/stream.component.ts | 24 ++++++++---------
 .../user-settings.component.html              | 10 +++----
 .../videoconference.component.html            |  2 +-
 .../participant/participant.service.ts        |  1 -
 .../stream-test/stream-test.component.html    |  2 +-
 .../stream-test/stream-test.component.ts      |  4 +--
 .../src/app/openvidu-call/call.component.html |  8 +++++-
 9 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html
index 73a3a1f85..b595a816a 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html
@@ -2,10 +2,10 @@
 	<div
 		class="OT_root OT_publisher"
 		id="localUser"
-		*ngFor="let connection of localParticipant | connections"
-		[ngClass]="{ OV_small: !connection.streamManager?.stream?.videoActive }"
+		*ngFor="let stream of localParticipant | connections"
+		[ngClass]="{ OV_small: !stream.streamManager?.stream?.videoActive }"
 	>
-		<ng-container *ngTemplateOutlet="streamTemplate; context: { stream: connection }"></ng-container>
+		<ng-container *ngTemplateOutlet="streamTemplate; context: { stream: stream }"></ng-container>
 	</div>
 	<!-- <ng-template #stream let-stream="stream">
 		<p>{{prueba.videoEnlarged}}</p>
@@ -13,11 +13,11 @@
 	</ng-template> -->
 
 	<div
-		*ngFor="let connection of remoteParticipants | connections"
+		*ngFor="let stream of remoteParticipants | connections"
 		class="OT_root OT_publisher"
 		id="remote-participant"
-		[ngClass]="{ OV_small: !connection.streamManager?.stream?.videoActive }"
+		[ngClass]="{ OV_small: !stream.streamManager?.stream?.videoActive }"
 	>
-		<ng-container *ngTemplateOutlet="streamTemplate; context: { stream: connection }"></ng-container>
+		<ng-container *ngTemplateOutlet="streamTemplate; context: { stream: stream }"></ng-container>
 	</div>
 </div>
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 513959b4a..94dcf62d9 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
@@ -1,21 +1,21 @@
 <div
-	*ngIf="this._participant"
+	*ngIf="this._stream"
 	class="OT_widget-container"
-	[id]="'container-' + this._participant.streamManager?.stream?.streamId"
+	[id]="'container-' + this._stream.streamManager?.stream?.streamId"
 	#streamComponent
 >
 	<div class="nickname" [class.fullscreen]="isFullscreen">
 		<div (click)="toggleNicknameForm()" class="nicknameContainer" selected *ngIf="!toggleNickname">
-			<span id="nickname">{{ this._participant.nickname }}</span>
-			<span *ngIf="_participant.local || (_participant.streamManager && !_participant.streamManager?.remote)"> (edit)</span>
+			<span id="nickname">{{ this._stream.nickname }}</span>
+			<span *ngIf="_stream.local || (_stream.streamManager && !_stream.streamManager?.remote)"> (edit)</span>
 		</div>
-		<div *ngIf="toggleNickname && !this._participant.streamManager?.remote" [class.fullscreen]="isFullscreen" id="dialogNickname">
+		<div *ngIf="toggleNickname && !this._stream.streamManager?.remote" [class.fullscreen]="isFullscreen" id="dialogNickname">
 			<form id="nicknameForm">
 				<mat-form-field color="primary">
 					<input
 						matInput
 						#nicknameInput
-						placeholder="Nick: {{ this._participant.nickname }}"
+						placeholder="Nick: {{ this._stream.nickname }}"
 						[formControl]="nicknameFormControl"
 						[errorStateMatcher]="matcher"
 						(keypress)="eventKeyPress($event)"
@@ -33,18 +33,18 @@
 
 	<ov-video
 		(dblclick)="toggleVideoSize()"
-		[streamManager]="this._participant.streamManager"
+		[streamManager]="this._stream.streamManager"
 		[mutedSound]="mutedSound"
 		(toggleVideoSizeEvent)="toggleVideoSize($event)"
 	></ov-video>
 
 
 	<div class="status-icons">
-		<!-- <div id="statusMic" *ngIf="!this._participant.streamManager?.stream?.audioActive">
+		<!-- <div id="statusMic" *ngIf="!this._stream.streamManager?.stream?.audioActive">
 			<mat-icon>mic_off</mat-icon>
 		</div> -->
 
-		<button mat-icon-button id="statusMic" *ngIf="!this._participant.streamManager?.stream?.audioActive" disabled>
+		<button mat-icon-button id="statusMic" *ngIf="!this._stream.streamManager?.stream?.audioActive" disabled>
 			<mat-icon>mic_off</mat-icon>
 		</button>
 	</div>
@@ -53,7 +53,7 @@
 
 		<!-- Custom stream notifications -->
 		<ng-container *ngIf="notificationTemplate">
-			<ng-container *ngTemplateOutlet="notificationTemplate; context: { stream: _participant }"></ng-container>
+			<ng-container *ngTemplateOutlet="notificationTemplate; context: { stream: _stream }"></ng-container>
 		</ng-container>
 
 		<button mat-icon-button (click)="toggleVideoMenu($event)" matTooltip="Settings" aria-label="Video settings menu">
@@ -66,14 +66,14 @@
 				<span *ngIf="videoSizeIcon === videoSizeIconEnum.NORMAL">Zoom out</span>
 				<span *ngIf="videoSizeIcon === videoSizeIconEnum.BIG">Zoom in</span>
 			</button>
-			<button mat-menu-item id="volumeButton" *ngIf="this._participant.streamManager?.remote" (click)="toggleSound()">
+			<button mat-menu-item id="volumeButton" *ngIf="this._stream.streamManager?.remote" (click)="toggleSound()">
 				<mat-icon *ngIf="!mutedSound">volume_up</mat-icon>
 				<span *ngIf="!mutedSound">Mute sound</span>
 
 				<mat-icon *ngIf="mutedSound">volume_off</mat-icon>
 				<span *ngIf="mutedSound">Unmute sound</span>
 			</button>
-			<!-- <button mat-menu-item *ngIf="this._participant.streamManager?.stream?.videoActive" id="fullscreenButton" (click)="toggleFullscreen()">
+			<!-- <button mat-menu-item *ngIf="this._stream.streamManager?.stream?.videoActive" id="fullscreenButton" (click)="toggleFullscreen()">
 				<mat-icon *ngIf="!isFullscreenEnabled">fullscreen</mat-icon>
 				<span *ngIf="!isFullscreenEnabled">Fullscreen</span>
 
@@ -85,7 +85,7 @@
 				mat-menu-item
 				(click)="replaceScreenTrack()"
 				id="changeScreenButton"
-				*ngIf="!this._participant.streamManager?.remote && this._participant.streamManager?.stream?.typeOfVideo === videoTypeEnum.SCREEN"
+				*ngIf="!this._stream.streamManager?.remote && this._stream.streamManager?.stream?.typeOfVideo === videoTypeEnum.SCREEN"
 			>
 				<mat-icon>picture_in_picture</mat-icon>
 				<span>Replace screen</span>
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 760e9e9d1..c70b37b05 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
@@ -31,7 +31,7 @@ export class StreamComponent implements OnInit {
 	toggleNickname: boolean;
 	nicknameFormControl: FormControl;
 	matcher: NicknameMatcher;
-	_participant: StreamModel;
+	_stream: StreamModel;
 
 	@ViewChild('streamComponent', { read: ViewContainerRef }) streamComponent: ViewContainerRef;
 	@ViewChild(MatMenuTrigger) public menuTrigger: MatMenuTrigger;
@@ -56,10 +56,10 @@ export class StreamComponent implements OnInit {
 
 
 	@Input()
-	set participant(participant: StreamModel) {
-		this._participant = participant;
-		this.checkVideoSizeBigIcon(participant.videoEnlarged);
-		this.nicknameFormControl = new FormControl(this._participant.nickname, [Validators.maxLength(25), Validators.required]);
+	set stream(stream: StreamModel) {
+		this._stream = stream;
+		this.checkVideoSizeBigIcon(this._stream.videoEnlarged);
+		this.nicknameFormControl = new FormControl(this._stream.nickname, [Validators.maxLength(25), Validators.required]);
 	}
 
 	@ViewChild('nicknameInput')
@@ -87,11 +87,11 @@ export class StreamComponent implements OnInit {
 
 		this.documentService.toggleBigElementClass(element);
 
-		if (!!this._participant.streamManager?.stream?.connection?.connectionId) {
-			if (this.openViduWebRTCService.isMyOwnConnection(this._participant.streamManager?.stream?.connection?.connectionId)) {
-				this.participantService.toggleZoom(this._participant.streamManager?.stream?.connection?.connectionId);
+		if (!!this._stream.streamManager?.stream?.connection?.connectionId) {
+			if (this.openViduWebRTCService.isMyOwnConnection(this._stream.streamManager?.stream?.connection?.connectionId)) {
+				this.participantService.toggleZoom(this._stream.streamManager?.stream?.connection?.connectionId);
 			} else {
-				this.participantService.toggleUserZoom(this._participant.streamManager?.stream?.connection?.connectionId);
+				this.participantService.toggleUserZoom(this._stream.streamManager?.stream?.connection?.connectionId);
 			}
 		}
 		this.layoutService.update();
@@ -102,7 +102,7 @@ export class StreamComponent implements OnInit {
 			this.menuTrigger.closeMenu();
 			return;
 		}
-		this.cdkSrv.setSelector('#container-' + this._participant.streamManager?.stream?.streamId);
+		this.cdkSrv.setSelector('#container-' + this._stream.streamManager?.stream?.streamId);
 		this.menuTrigger.openMenu();
 	}
 
@@ -111,7 +111,7 @@ export class StreamComponent implements OnInit {
 	}
 
 	toggleNicknameForm() {
-		if (this._participant.local) {
+		if (this._stream.local) {
 			this.toggleNickname = !this.toggleNickname;
 		}
 	}
@@ -119,7 +119,7 @@ export class StreamComponent implements OnInit {
 	eventKeyPress(event) {
 		if (event && event.keyCode === 13 && this.nicknameFormControl.valid) {
 			const nickname = this.nicknameFormControl.value;
-			this.participantService.setNickname(this._participant.connectionId, nickname);
+			this.participantService.setNickname(this._stream.connectionId, nickname);
 			this.storageService.set(Storage.USER_NICKNAME, nickname);
 			this.openViduWebRTCService.sendSignal(Signal.NICKNAME_CHANGED, undefined, {clientData: nickname});
 			this.toggleNicknameForm();
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.html
index a4c8b04e5..63c7a931a 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.html
@@ -22,14 +22,14 @@
 							<mat-spinner></mat-spinner>
 						</div>
 						<div class="videoContainer" *ngIf="!isLoading">
-							<div *ngFor="let connection of localParticipant | connections">
+							<div *ngFor="let stream of localParticipant | connections">
 								<!-- Only webcam video will be shown if webcamera is available -->
 								<ov-video
-									*ngIf="(connection.type === 'CAMERA' && hasVideoDevices) || connection.type === 'SCREEN'"
-									[streamManager]="connection.streamManager"
-									[ngClass]="{ ovVideoSmall: localParticipant.connections.size > 1 && connection.type === 'CAMERA' }"
+									*ngIf="(stream.type === 'CAMERA' && hasVideoDevices) || stream.type === 'SCREEN'"
+									[streamManager]="stream.streamManager"
+									[ngClass]="{ ovVideoSmall: localParticipant.connections.size > 1 && stream.type === 'CAMERA' }"
 								></ov-video>
-								<div class="cameraMessageContainer" *ngIf="connection.type === 'CAMERA' && !hasVideoDevices">
+								<div class="cameraMessageContainer" *ngIf="stream.type === 'CAMERA' && !hasVideoDevices">
 									<span *ngIf="!hasVideoDevices && !hasAudioDevices">Oops! Camera and microphone are not available</span>
 									<span *ngIf="!hasVideoDevices && hasAudioDevices">Oops! Camera is not available</span>
 									<span *ngIf="hasVideoDevices && !hasAudioDevices">Oops! Microphone is not available</span>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
index f5eac78ee..a7ee63887 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
@@ -85,7 +85,7 @@
 							<!-- Default stream component if custom component is not injected -->
 							<!-- We must to bind a context for the 'participant' input property -->
 							<ng-template #defaultStream>
-								<ov-stream [participant]="stream"></ov-stream>
+								<ov-stream [stream]="stream"></ov-stream>
 							</ng-template>
 						</ng-template>
 					</ov-layout>
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 78a3cf7dd..146ab47fc 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
@@ -31,7 +31,6 @@ export class ParticipantService {
 
 	constructor(protected loggerSrv: LoggerService) {
 		this.log = this.loggerSrv.get('ParticipantService');
-		// this.participantsObs = this._participants.asObservable();
 
 		this.localParticipantObs = this._localParticipant.asObservable();
 		this.remoteParticipantsObs = this._remoteParticipants.asObservable();
diff --git a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.html b/openvidu-components-angular/src/app/components/stream-test/stream-test.component.html
index a3cfc9f9b..5d52c2094 100644
--- a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.html
+++ b/openvidu-components-angular/src/app/components/stream-test/stream-test.component.html
@@ -31,7 +31,7 @@
 
 <div id="stream-test-container">
 
-	<ov-stream [participant]="participant"></ov-stream>
+	<ov-stream [stream]="stream"></ov-stream>
 </div>
 
 
diff --git a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts b/openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts
index 65597d0e4..b868b79fb 100644
--- a/openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts
+++ b/openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts
@@ -8,11 +8,11 @@ import { ParticipantModel } from 'openvidu-angular';
 })
 export class StreamTestComponent implements OnInit {
 
-  participant: ParticipantModel;
+  stream: ParticipantModel;
   constructor() { }
 
   ngOnInit(): void {
-    this.participant = new ParticipantModel();
+    this.stream = new ParticipantModel();
   }
 
 }
diff --git a/openvidu-components-angular/src/app/openvidu-call/call.component.html b/openvidu-components-angular/src/app/openvidu-call/call.component.html
index b3e7ba5f7..b8bc3eb18 100644
--- a/openvidu-components-angular/src/app/openvidu-call/call.component.html
+++ b/openvidu-components-angular/src/app/openvidu-call/call.component.html
@@ -44,8 +44,14 @@
 
 	<!-- <ng-template #stream let-stream="stream">
 
-		<ov-stream postion="top" [participant]="stream">
+		<ov-stream postion="top" [stream]="stream">
 			<button network-quality> hola</button>
+			<ng-template #notification>
+				<button  mat-icon-button id="hand-notification" *ngIf="stream.videoEnlarged">
+					<mat-icon>front_hand</mat-icon>
+				</button>
+
+			</ng-template>
 		</ov-stream>
 
 	</ng-template> -->