diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts index 033aa129e6..d319ccfc3b 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts +++ b/openvidu-components-angular/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/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/action/action.service.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/action/action.service.ts index e0329101c9..95ed10f323 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/action/action.service.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/action/action.service.ts @@ -20,6 +20,10 @@ export class ActionService { | MatDialogRef | undefined; private dialogSubscription: Subscription; + private connectionDialogRef: MatDialogRef | 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) {