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

ov-components: Refactor recording stop event logging to include room name for better traceability

master
Carlos Santos 2025-08-22 12:23:21 +02:00
parent 1762c43769
commit 03fb7c0a93
2 changed files with 69 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,64 +1,74 @@
<div id="call-container"> <div id="call-container">
<div id="spinner" *ngIf="componentState.isLoading"> <!-- Loading spinner -->
<mat-spinner [diameter]="spinnerDiameter"></mat-spinner> @if (componentState.isLoading) {
<span>{{ 'PREJOIN.PREPARING' | translate }}</span> <div id="spinner" *ngIf="componentState.isLoading">
</div> <mat-spinner [diameter]="spinnerDiameter"></mat-spinner>
<span>{{ 'PREJOIN.PREPARING' | translate }}</span>
<div [@inOutAnimation] id="pre-join-container" *ngIf="componentState.showPrejoin && !componentState.isLoading"> </div>
<ng-container *ngIf="openviduAngularPreJoinTemplate; else defaultPreJoin"> } @else if (componentState.showPrejoin) {
<ng-container *ngTemplateOutlet="openviduAngularPreJoinTemplate"></ng-container> <!-- Prejoin -->
</ng-container> <div [@inOutAnimation] id="pre-join-container">
<ng-template #defaultPreJoin> <ng-container *ngIf="openviduAngularPreJoinTemplate; else defaultPreJoin">
<ov-pre-join <ng-container *ngTemplateOutlet="openviduAngularPreJoinTemplate"></ng-container>
[error]="componentState.error?.tokenError" </ng-container>
(onReadyToJoin)="_onReadyToJoin()" <ng-template #defaultPreJoin>
(onVideoDeviceChanged)="onVideoDeviceChanged.emit($event)" <ov-pre-join
(onVideoEnabledChanged)="onVideoEnabledChanged.emit($event)" [error]="componentState.error?.tokenError"
(onAudioDeviceChanged)="onAudioDeviceChanged.emit($event)" (onReadyToJoin)="_onReadyToJoin()"
(onAudioEnabledChanged)="onAudioEnabledChanged.emit($event)" (onVideoDeviceChanged)="onVideoDeviceChanged.emit($event)"
(onLangChanged)="onLangChanged.emit($event)" (onVideoEnabledChanged)="onVideoEnabledChanged.emit($event)"
></ov-pre-join> (onAudioDeviceChanged)="onAudioDeviceChanged.emit($event)"
</ng-template> (onAudioEnabledChanged)="onAudioEnabledChanged.emit($event)"
</div> (onLangChanged)="onLangChanged.emit($event)"
></ov-pre-join>
<div id="spinner" *ngIf="!componentState.isLoading && componentState.error?.hasError">
<mat-icon class="error-icon">error</mat-icon>
<span>{{ componentState.error?.message }}</span>
</div>
<div
[@inOutAnimation]
id="vc-container"
*ngIf="componentState.isRoomReady && !componentState.showPrejoin && !componentState.isLoading && !componentState.error?.hasError"
>
<ov-session
(onRoomCreated)="onRoomCreated.emit($event)"
(onRoomReconnecting)="onRoomDisconnected.emit()"
(onRoomDisconnected)="onRoomDisconnected.emit()"
(onRoomReconnected)="onRoomReconnected.emit()"
(onParticipantConnected)="onParticipantCreated.emit($event)"
(onParticipantConnected)="onParticipantConnected.emit($event)"
(onParticipantLeft)="_onParticipantLeft($event)"
>
<ng-template #toolbar>
<ng-container *ngIf="openviduAngularToolbarTemplate">
<ng-container *ngTemplateOutlet="openviduAngularToolbarTemplate"></ng-container>
</ng-container>
</ng-template> </ng-template>
</div>
} @else if (componentState.error?.hasError) {
<!-- Error -->
<ng-template #panel> <div id="spinner">
<ng-container *ngIf="openviduAngularPanelTemplate"> <mat-icon class="error-icon">error</mat-icon>
<ng-container *ngTemplateOutlet="openviduAngularPanelTemplate"></ng-container> <span>{{ componentState.error?.message }}</span>
</ng-container> </div>
</ng-template> } @else if (componentState.isRoomReady) {
<!-- VideoConference -->
<ng-template #layout> <div [@inOutAnimation] id="vc-container">
<ng-container *ngIf="openviduAngularLayoutTemplate"> <ov-session
<ng-container *ngTemplateOutlet="openviduAngularLayoutTemplate"></ng-container> (onRoomCreated)="onRoomCreated.emit($event)"
</ng-container> (onRoomReconnecting)="onRoomDisconnected.emit()"
</ng-template> (onRoomDisconnected)="onRoomDisconnected.emit()"
</ov-session> (onRoomReconnected)="onRoomReconnected.emit()"
</div> (onParticipantConnected)="onParticipantCreated.emit($event)"
(onParticipantConnected)="onParticipantConnected.emit($event)"
(onParticipantLeft)="_onParticipantLeft($event)"
>
<ng-template #toolbar>
<ng-container *ngIf="openviduAngularToolbarTemplate">
<ng-container *ngTemplateOutlet="openviduAngularToolbarTemplate"></ng-container>
</ng-container>
</ng-template>
<ng-template #panel>
<ng-container *ngIf="openviduAngularPanelTemplate">
<ng-container *ngTemplateOutlet="openviduAngularPanelTemplate"></ng-container>
</ng-container>
</ng-template>
<ng-template #layout>
<ng-container *ngIf="openviduAngularLayoutTemplate">
<ng-container *ngTemplateOutlet="openviduAngularLayoutTemplate"></ng-container>
</ng-container>
</ng-template>
</ov-session>
</div>
} @else {
<!-- Fallback / unknown state -->
<div id="unknown-state">
<mat-icon class="warning-icon">help_outline</mat-icon>
<span>An error occurred in the video conference</span>
</div>
}
</div> </div>
<ng-template #defaultToolbar> <ng-template #defaultToolbar>

3
openvidu-components-angular/src/app/openvidu-call/call.component.ts
View File

@ -332,7 +332,8 @@ export class CallComponent implements OnInit {
} }
} }
async onRecordingStopRequested(event: RecordingStopRequestedEvent) { async onRecordingStopRequested(event: RecordingStopRequestedEvent) {
this.appendElement('onRecordingStopRequested'); this.appendElement('onRecordingStopRequested-' + event.roomName);
console.warn('STOP RECORDING CLICKED', event); console.warn('STOP RECORDING CLICKED', event);
try { try {
await this.restService.stopRecording(event); await this.restService.stopRecording(event);