From 95180b669f6d8002c63ad75506ac0289c7ba6774 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Thu, 11 Aug 2022 17:24:11 +0200
Subject: [PATCH] openvidu-components: Updated admin dashboard and fixed
 linters

---
 .../admin/dashboard/dashboard.component.html  | 22 ++++--------------
 .../participant/participant.service.ts        | 23 +++++++++----------
 2 files changed, 16 insertions(+), 29 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
index b80d87c0..278537d0 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
@@ -58,29 +58,17 @@
 			<div
 				*ngFor="
 					let recording of recordings
-						| searchByStringProperty: { properties: ['sessionId', 'properties.name'], filter: searchValue }
+						| searchByStringProperty: { properties: ['sessionId', 'properties?.name || name'], filter: searchValue }
 				"
 				class="item"
 			>
 				<mat-card class="recording-card">
 					<mat-card-content>
 						<div class="video-div-container">
-							<img
-								*ngIf="
-									!!recording.url &&
-									recording.properties.hasVideo &&
-									(recording.properties.outputMode === 'COMPOSED' ||
-										recording.properties.outputMode === 'COMPOSED_QUICK_START')
-								"
-								[src]="recording.url | thumbnailUrl"
-							/>
+							<img *ngIf="!!recording.url" [src]="recording.url | thumbnailUrl" />
 							<div class="video-btns">
 								<button
-									*ngIf="
-										recording.status !== 'failed' &&
-										recording.status !== 'stopped' &&
-										recording.properties.outputMode !== 'INDIVIDUAL'
-									"
+									*ngIf="recording.status !== 'failed' && recording.status !== 'stopped'"
 									mat-icon-button
 									(click)="play(recording)"
 								>
@@ -109,7 +97,7 @@
 							<div>
 								<div class="video-div-tag">
 									<span class="video-card-tag">{{ 'ADMIN.NAME' | translate }}</span
-									><span class="video-card-value">{{ recording.properties.name }}</span>
+									><span class="video-card-value">{{ recording.properties?.name || recording.name }}</span>
 								</div>
 								<div class="video-div-tag">
 									<span class="video-card-tag">{{ 'ADMIN.SESSION' | translate }}</span
@@ -117,7 +105,7 @@
 								</div>
 								<div class="video-div-tag">
 									<span class="video-card-tag">{{ 'ADMIN.OUTPUT' | translate }}</span
-									><span class="video-card-value">{{ recording.properties.outputMode }}</span>
+									><span class="video-card-value">{{ recording.properties?.outputMode || recording.outputMode }}</span>
 								</div>
 								<div class="video-div-tag">
 									<span class="video-card-tag">{{ 'ADMIN.DATE' | translate }}</span
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 f4559765..36ef33b3 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
@@ -15,13 +15,15 @@ export class ParticipantService {
 	 * Local participant Observable which pushes the local participant object in every update.
 	 */
 	localParticipantObs: Observable<ParticipantAbstractModel>;
-	protected _localParticipant = <BehaviorSubject<ParticipantAbstractModel>>new BehaviorSubject(null);
+	protected _localParticipant: BehaviorSubject<ParticipantAbstractModel | null> = new BehaviorSubject<ParticipantAbstractModel | null>(
+		null
+	);
 
 	/**
 	 * Remote participants Observable which pushes the remote participants array in every update.
 	 */
 	remoteParticipantsObs: Observable<ParticipantAbstractModel[]>;
-	protected _remoteParticipants = <BehaviorSubject<ParticipantAbstractModel[]>>new BehaviorSubject([]);
+	protected _remoteParticipants: BehaviorSubject<ParticipantAbstractModel[]> = new BehaviorSubject<ParticipantAbstractModel[]>([]);
 
 	protected localParticipant: ParticipantAbstractModel;
 	protected remoteParticipants: ParticipantAbstractModel[] = [];
@@ -118,7 +120,7 @@ export class ParticipantService {
 			videoEnlarged: true,
 			streamManager: screenPublisher,
 			connected: true,
-			connectionId: null
+			connectionId: ''
 		};
 
 		this.resetRemoteStreamsToNormalSize();
@@ -176,11 +178,8 @@ export class ParticipantService {
 	 */
 	clear() {
 		this.disableScreenStream();
-		// this.localParticipant = this.newParticipant();
-		// this._screensharing.next(false);
 		this.remoteParticipants = [];
-		this._remoteParticipants = <BehaviorSubject<ParticipantAbstractModel[]>>new BehaviorSubject([]);
-		this.remoteParticipantsObs = this._remoteParticipants.asObservable();
+		this.updateRemoteParticipants();
 		this.updateLocalParticipant();
 	}
 
@@ -306,7 +305,7 @@ export class ParticipantService {
 	 */
 	removeConnectionByConnectionId(connectionId: string) {
 		this.log.w('Deleting connection: ', connectionId);
-		let participant = null;
+		let participant: ParticipantAbstractModel | undefined;
 		if (this.localParticipant.hasConnectionId(connectionId)) {
 			participant = this.localParticipant;
 		} else {
@@ -338,11 +337,11 @@ export class ParticipantService {
 	/**
 	 * @internal
 	 */
-	getRemoteParticipantByConnectionId(connectionId: string): ParticipantAbstractModel {
+	getRemoteParticipantByConnectionId(connectionId: string): ParticipantAbstractModel | undefined {
 		return this.remoteParticipants.find((p) => p.hasConnectionId(connectionId));
 	}
 
-	protected getRemoteParticipantById(id: string): ParticipantAbstractModel {
+	protected getRemoteParticipantById(id: string): ParticipantAbstractModel | undefined {
 		return this.remoteParticipants.find((p) => p.id === id);
 	}
 	/**
@@ -356,8 +355,8 @@ export class ParticipantService {
 	 * @internal
 	 */
 	toggleRemoteVideoEnlarged(connectionId: string) {
-		const p = this.getRemoteParticipantByConnectionId(connectionId);
-		p.toggleVideoEnlarged(connectionId);
+		const participant = this.getRemoteParticipantByConnectionId(connectionId);
+		participant?.toggleVideoEnlarged(connectionId);
 	}
 
 	/**