ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ov-components: Fired room and participantLeft events

master
Carlos Santos 2025-02-13 12:31:50 +01:00
parent 09ba39642e
commit d8452c42ad
7 changed files with 78 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts
View File

@ -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();
});

19
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts
View File

@ -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();
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);
}
}
/**

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

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

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

@ -1,14 +1,5 @@
import { animate, style, transition, trigger } from '@angular/animations';
import {
AfterViewInit,
Component,
ContentChild,
EventEmitter,
OnDestroy,
Output,
TemplateRef,
ViewChild
} from '@angular/core';
import { 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() {

5
openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/participant.model.ts
View File

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

3
openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.html
View File

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

13
openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts
View File

@ -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);
}
/**