ov-components: Fired room and participantLeft events

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<Room> = new EventEmitter<Room>();
 
+	/**
+	 * Provides event notifications that fire when OpenVidu Room is disconnected.
+	 */
+	@Output() onRoomReconnecting: EventEmitter<void> = new EventEmitter<void>();
+
+	/**
+	 * Provides event notifications that fire when OpenVidu Room is reconnected.
+	 */
+	@Output() onRoomReconnected: EventEmitter<void> = new EventEmitter<void>();
+
+	/**
+	 * Provides event notifications that fire when OpenVidu Room is disconnected.
+	 */
+	@Output() onRoomDisconnected: EventEmitter<void> = new EventEmitter<void>();
+
 	/**
 	 * 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();
 		});

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<void> = new EventEmitter<void>();
+	@Output() onParticipantLeft: EventEmitter<ParticipantLeftEvent> = new EventEmitter<ParticipantLeftEvent>();
 
 	/**
 	 * 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();
+		const event: ParticipantLeftEvent = {
-		this.onRoomDisconnected.emit();
+			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);
+		}
 	}
 
 	/**

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html

@@ -22,7 +22,13 @@
 	</div>
 
 	<div [@inOutAnimation] id="vc-container" *ngIf="isRoomReady && !showPrejoin && !loading && !error">
-		<ov-session (onRoomCreated)="onRoomCreated.emit($event)" (onParticipantCreated)="onParticipantCreated.emit($event)">
+		<ov-session
+			(onRoomCreated)="onRoomCreated.emit($event)"
+			(onRoomReconnecting)="onRoomDisconnected.emit()"
+			(onRoomDisconnected)="onRoomDisconnected.emit()"
+			(onRoomReconnected)="onRoomReconnected.emit()"
+			(onParticipantCreated)="onParticipantCreated.emit($event)"
+		>
 			<ng-template #toolbar>
 				<ng-container *ngIf="openviduAngularToolbarTemplate">
 					<ng-container *ngTemplateOutlet="openviduAngularToolbarTemplate"></ng-container>
@@ -47,7 +53,7 @@
 <ng-template #defaultToolbar>
 	<ov-toolbar
 		id="default-toolbar"
-		(onRoomDisconnected)="_onRoomDisconnected()"
+		(onParticipantLeft)="_onParticipantLeft($event)"
 		(onVideoEnabledChanged)="onVideoEnabledChanged.emit($event)"
 		(onAudioEnabledChanged)="onAudioEnabledChanged.emit($event)"
 		(onScreenShareEnabledChanged)="onScreenShareEnabledChanged.emit($event)"

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.ts

@@ -1,14 +1,5 @@
 import { animate, style, transition, trigger } from '@angular/animations';
-import {
+import { AfterViewInit, Component, ContentChild, EventEmitter, OnDestroy, Output, TemplateRef, ViewChild } from '@angular/core';
-	AfterViewInit,
-	Component,
-	ContentChild,
-	EventEmitter,
-	OnDestroy,
-	Output,
-	TemplateRef,
-	ViewChild
-} from '@angular/core';
 import { Subscription, skip } from 'rxjs';
 import {
 	ActivitiesPanelDirective,
@@ -32,7 +23,7 @@ import { LoggerService } from '../../services/logger/logger.service';
 import { OpenViduService } from '../../services/openvidu/openvidu.service';
 import { StorageService } from '../../services/storage/storage.service';
 import { Room } from 'livekit-client';
-import { ParticipantModel } from '../../models/participant.model';
+import { ParticipantLeftEvent, ParticipantModel } from '../../models/participant.model';
 import { CustomDevice } from '../../models/device.model';
 import {
 	ActivitiesPanelStatusEvent,
@@ -219,10 +210,26 @@ export class VideoconferenceComponent implements OnDestroy, AfterViewInit {
 	@Output() onReadyToJoin: EventEmitter<void> = new EventEmitter<void>();
 
 	/**
-	 * 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<void> = new EventEmitter<void>();
 
+	/**
+	 * Provides event notifications that fire when OpenVidu Room is disconnected.
+	 */
+	@Output() onRoomReconnecting: EventEmitter<void> = new EventEmitter<void>();
+
+	/**
+	 * Provides event notifications that fire when OpenVidu Room is reconnected.
+	 */
+	@Output() onRoomReconnected: EventEmitter<void> = new EventEmitter<void>();
+
+
+	/**
+	 * This event is emitted when a participant leaves the room.
+	 */
+	@Output() onParticipantLeft: EventEmitter<ParticipantLeftEvent> = new EventEmitter<ParticipantLeftEvent>();
+
 	/**
 	 * 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() {

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.
  */

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)"

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<void> = new EventEmitter<void>();
 
 	/**
-	 * 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<void> = new EventEmitter<void>();
 
+	/**
+	 * This event is emitted when a participant leaves the room.
+	 */
+	@Output() onParticipantLeft: EventEmitter<ParticipantLeftEvent> = new EventEmitter<ParticipantLeftEvent>();
+
 	/**
 	 * 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);
 	}
 
 	/**