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 d319ccfc..ffcc7c68 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 @@ -70,6 +70,21 @@ export class SessionComponent implements OnInit, OnDestroy { */ @Output() onRoomCreated: EventEmitter = new EventEmitter(); + /** + * Provides event notifications that fire when OpenVidu Room is disconnected. + */ + @Output() onRoomReconnecting: EventEmitter = new EventEmitter(); + + /** + * Provides event notifications that fire when OpenVidu Room is reconnected. + */ + @Output() onRoomReconnected: EventEmitter = new EventEmitter(); + + /** + * Provides event notifications that fire when OpenVidu Room is disconnected. + */ + @Output() onRoomDisconnected: EventEmitter = new EventEmitter(); + /** * Provides event notifications that fire when local participant is created. */ @@ -211,7 +226,7 @@ export class SessionComponent implements OnInit, OnDestroy { if (this.shouldDisconnectRoomWhenComponentIsDestroyed) { await this.disconnectRoom(); } - if(this.room) this.room.removeAllListeners(); + if (this.room) this.room.removeAllListeners(); this.participantService.clear(); // this.room = undefined; if (this.menuSubscription) this.menuSubscription.unsubscribe(); @@ -450,10 +465,12 @@ export class SessionComponent implements OnInit, OnDestroy { this.translateService.translate('ERRORS.CONNECTION'), this.translateService.translate('ERRORS.RECONNECT') ); + this.onRoomReconnecting.emit(); }); this.room.on(RoomEvent.Reconnected, () => { this.log.w('Connection lost: Reconnected'); this.actionService.closeConnectionDialog(); + this.onRoomReconnected.emit(); }); this.room.on(RoomEvent.Disconnected, async (reason: DisconnectReason | undefined) => { @@ -463,6 +480,7 @@ export class SessionComponent implements OnInit, OnDestroy { this.translateService.translate('ERRORS.CONNECTION'), this.translateService.translate('ERRORS.RECONNECT') ); + this.onRoomDisconnected.emit(); } // await this.disconnectRoom(); }); diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts index 4599456c..9c9697f8 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts @@ -46,7 +46,7 @@ import { RecordingService } from '../../services/recording/recording.service'; import { StorageService } from '../../services/storage/storage.service'; import { TranslateService } from '../../services/translate/translate.service'; import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.service'; -import { ParticipantModel } from '../../models/participant.model'; +import { ParticipantLeftEvent, ParticipantModel } from '../../models/participant.model'; import { Room, RoomEvent } from 'livekit-client'; import { ToolbarAdditionalButtonsPosition } from '../../models/toolbar.model'; import { ServiceConfigService } from '../../services/config/service-config.service'; @@ -97,9 +97,9 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { } /** - * This event is emitted when the room has been disconnected. + * This event is emitted when a participant leaves the room. */ - @Output() onRoomDisconnected: EventEmitter = new EventEmitter(); + @Output() onParticipantLeft: EventEmitter = new EventEmitter(); /** * This event is emitted when the video state changes, providing information about if the video is enabled (true) or disabled (false). @@ -506,8 +506,17 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { * @ignore */ async disconnect() { - await this.openviduService.disconnectRoom(); - this.onRoomDisconnected.emit(); + const event: ParticipantLeftEvent = { + roomName: this.openviduService.getRoomName(), + participantId: this.participantService.getLocalParticipant()?.identity || '' + }; + try { + await this.openviduService.disconnectRoom(); + this.onParticipantLeft.emit(event); + } catch (error) { + this.log.e('There was an error disconnecting:', error.code, error.message); + this.actionService.openDialog(this.translateService.translate('ERRORS.DISCONNECT'), error?.error || error?.message || error); + } } /** diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html index 3da692c8..a87f3ef8 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html @@ -22,7 +22,13 @@
- + @@ -47,7 +53,7 @@ = new EventEmitter(); /** - * Provides event notifications that fire when the room has been disconnected. + * This event is emitted when the room connection has been lost and the reconnection process has started. */ @Output() onRoomDisconnected: EventEmitter = new EventEmitter(); + /** + * Provides event notifications that fire when OpenVidu Room is disconnected. + */ + @Output() onRoomReconnecting: EventEmitter = new EventEmitter(); + + /** + * Provides event notifications that fire when OpenVidu Room is reconnected. + */ + @Output() onRoomReconnected: EventEmitter = new EventEmitter(); + + + /** + * This event is emitted when a participant leaves the room. + */ + @Output() onParticipantLeft: EventEmitter = new EventEmitter(); + /** * This event is emitted when the video state changes, providing information about if the video is enabled (true) or disabled (false). */ @@ -492,9 +499,9 @@ export class VideoconferenceComponent implements OnDestroy, AfterViewInit { /** * @internal */ - _onRoomDisconnected() { + _onParticipantLeft(event: ParticipantLeftEvent) { this.isRoomReady = false; - this.onRoomDisconnected.emit(); + this.onParticipantLeft.emit(event); } private subscribeToVideconferenceDirectives() { diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/participant.model.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/participant.model.ts index 11f9636c..d2ab4f70 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/participant.model.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/participant.model.ts @@ -16,6 +16,11 @@ import { VideoPresets } from 'livekit-client'; +export interface ParticipantLeftEvent { + roomName: string; + participantId: string; +} + /** * Interface that defines the properties of the participant track publication. */ diff --git a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.html b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.html index 1dff2d16..8b2276e5 100644 --- a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.html +++ b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.html @@ -30,7 +30,8 @@ (onRoomCreated)="onRoomCreated.emit($event)" (onParticipantCreated)="onParticipantCreated.emit($event)" (onReadyToJoin)="onReadyToJoin.emit()" - (onRoomDisconnected)="_onRoomDisconnected()" + (onRoomDisconnected)="onRoomDisconnected.emit($event)" + (onParticipantLeft)="_onParticipantLeft($event)" (onVideoEnabledChanged)="onVideoEnabledChanged.emit($event)" (onVideoDeviceChanged)="onVideoDeviceChanged.emit($event)" (onAudioEnabledChanged)="onAudioEnabledChanged.emit($event)" diff --git a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts index 0190fc61..78ec4e09 100644 --- a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts +++ b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts @@ -1,5 +1,5 @@ import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core'; -import { OpenViduService, ParticipantModel, Room } from 'openvidu-components-angular'; +import { OpenViduService, ParticipantModel, Room, ParticipantLeftEvent } from 'openvidu-components-angular'; // import { CaptionsLangOption } from '../../../projects/openvidu-components-angular/src/lib/models/caption.model'; import { CustomDevice } from '../../../projects/openvidu-components-angular/src/lib/models/device.model'; import { @@ -590,10 +590,15 @@ export class OpenviduWebComponentComponent { @Output() onReadyToJoin: EventEmitter = new EventEmitter(); /** - * Provides event notifications that fire when the room has been disconnected. + * This event is emitted when the room connection has been lost and the reconnection process has started. */ @Output() onRoomDisconnected: EventEmitter = new EventEmitter(); + /** + * This event is emitted when a participant leaves the room. + */ + @Output() onParticipantLeft: EventEmitter = new EventEmitter(); + /** * This event is emitted when the video state changes, providing information about if the video is enabled (true) or disabled (false). */ @@ -767,9 +772,9 @@ export class OpenviduWebComponentComponent { /** * @internal */ - _onRoomDisconnected() { + _onParticipantLeft(event: ParticipantLeftEvent) { this.success = false; - this.onRoomDisconnected.emit(); + this.onParticipantLeft.emit(event); } /**