ov-components: Fixed blocking dialog when connection issues

OpenVidu · Oct 10, 2024 · d20f81f · d20f81f
1 parent c273ae0
commit d20f81f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/...ular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts b/...ular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts
@@ -211,7 +211,7 @@ export class SessionComponent implements OnInit, OnDestroy {
 		if (this.shouldDisconnectRoomWhenComponentIsDestroyed) {
 			await this.disconnectRoom();
 		}
-		this.room.removeAllListeners();
+		if(this.room) this.room.removeAllListeners();
 		this.participantService.clear();
 		// this.room = undefined;
 		if (this.menuSubscription) this.menuSubscription.unsubscribe();
@@ -443,27 +443,25 @@ export class SessionComponent implements OnInit, OnDestroy {
 		);
 	}
 
-	private subscribeToReconnection() {
+	subscribeToReconnection() {
 		this.room.on(RoomEvent.Reconnecting, () => {
 			this.log.w('Connection lost: Reconnecting');
-			this.actionService.openDialog(
+			this.actionService.openConnectionDialog(
 				this.translateService.translate('ERRORS.CONNECTION'),
-				this.translateService.translate('ERRORS.RECONNECT'),
-				false
+				this.translateService.translate('ERRORS.RECONNECT')
 			);
 		});
 		this.room.on(RoomEvent.Reconnected, () => {
 			this.log.w('Connection lost: Reconnected');
-			this.actionService.closeDialog();
+			this.actionService.closeConnectionDialog();
 		});
 
 		this.room.on(RoomEvent.Disconnected, async (reason: DisconnectReason | undefined) => {
 			if (reason === DisconnectReason.SERVER_SHUTDOWN) {
 				this.log.e('Room Disconnected', reason);
-				this.actionService.openDialog(
+				this.actionService.openConnectionDialog(
 					this.translateService.translate('ERRORS.CONNECTION'),
-					this.translateService.translate('ERRORS.RECONNECT'),
-					false
+					this.translateService.translate('ERRORS.RECONNECT')
 				);
 			}
 			// await this.disconnectRoom();

diff --git a/...ts-angular/projects/openvidu-components-angular/src/lib/services/action/action.service.ts b/...ts-angular/projects/openvidu-components-angular/src/lib/services/action/action.service.ts
@@ -20,6 +20,10 @@ export class ActionService {
 		| MatDialogRef<DialogTemplateComponent | RecordingDialogComponent | DeleteDialogComponent | ProFeatureDialogTemplateComponent>
 		| undefined;
 	private dialogSubscription: Subscription;
+	private connectionDialogRef: MatDialogRef<DialogTemplateComponent> | undefined;
+	private connectionDialogSubscription: Subscription;
+	private isConnectionDialogOpen: boolean = false;
+
 	constructor(
 		private snackBar: MatSnackBar,
 		public dialog: MatDialog,
@@ -62,23 +66,21 @@ export class ActionService {
 		}
 	}
 
-	// openProFeatureDialog(titleMessage: string, descriptionMessage: string, allowClose = true) {
-	// 	try {
-	// 		this.closeDialog();
-	// 	} catch (error) {
-	// 	} finally {
-	// 		const config: MatDialogConfig = {
-	// 			minWidth: '250px',
-	// 			data: { title: titleMessage, description: descriptionMessage, showActionButtons: allowClose },
-	// 			disableClose: !allowClose
-	// 		};
-	// 		this.dialogRef = this.dialog.open(ProFeatureDialogTemplateComponent, config);
-	// 		this.dialogSubscription = this.dialogRef.afterClosed().subscribe((result) => {
-	// 			this.dialogRef = undefined;
-	// 			if (this.dialogSubscription) this.dialogSubscription.unsubscribe();
-	// 		});
-	// 	}
-	// }
+	openConnectionDialog(titleMessage: string, descriptionMessage: string, allowClose = false) {
+		if (this.isConnectionDialogOpen) return;
+		const config: MatDialogConfig = {
+			minWidth: '250px',
+			data: { title: titleMessage, description: descriptionMessage, showActionButtons: allowClose },
+			disableClose: !allowClose
+		};
+
+		this.connectionDialogRef = this.dialog.open(DialogTemplateComponent, config);
+		this.connectionDialogSubscription = this.connectionDialogRef.beforeClosed().subscribe((result) => {
+			this.connectionDialogRef = undefined;
+			this.isConnectionDialogOpen = false;
+			if (this.connectionDialogSubscription) this.connectionDialogSubscription.unsubscribe();
+		});
+	}
 
 	openDeleteRecordingDialog(succsessCallback) {
 		try {
@@ -121,6 +123,10 @@ export class ActionService {
 		this.dialogRef?.close();
 	}
 
+	closeConnectionDialog() {
+		this.connectionDialogRef?.close();
+	}
+
 	private handleRecordingPlayerError(error: MediaError | null) {
 		let message = 'ERRORS.MEDIA_ERR_GENERIC';
 		if (error) {