diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.ts index b7d42899..c951aa08 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.ts @@ -144,6 +144,11 @@ export class RecordingActivityComponent implements OnInit, OnDestroy { */ showViewRecordingsButton: boolean = false; + /** + * @internal + */ + showRecordingList: boolean = true; // Controls visibility of the recording list in the panel + /** * @internal */ @@ -370,13 +375,22 @@ export class RecordingActivityComponent implements OnInit, OnDestroy { this.showViewRecordingsButton = show; this.cd.markForCheck(); }); + + this.libService.recordingActivityShowRecordingsList$.pipe(takeUntil(this.destroy$)).subscribe((show: boolean) => { + this.showRecordingList = show; + this.cd.markForCheck(); + }); } private subscribeToRecordingStatus() { this.recordingService.recordingStatusObs.pipe(takeUntil(this.destroy$)).subscribe((event: RecordingStatusInfo) => { const { status, recordingList, error } = event; this.recordingStatus = status; - this.recordingList = recordingList; + if (this.showRecordingList) { + this.recordingList = recordingList; + } else { + this.recordingList = recordingList.filter((rec) => rec.status === RecordingStatus.STARTED); + } this.recordingError = error; this.recordingAlive = this.recordingStatus === RecordingStatus.STARTED; if (this.recordingStatus !== RecordingStatus.FAILED) { 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 31be3917..5e238003 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 @@ -499,7 +499,9 @@ export class SessionComponent implements OnInit, OnDestroy { case DataTopic.ROOM_STATUS: const { recordingList, isRecordingStarted, isBroadcastingStarted, broadcastingId } = event as RoomStatusData; - this.recordingService.setRecordingList(recordingList); + if (this.libService.showRecordingActivityRecordingsList()) { + this.recordingService.setRecordingList(recordingList); + } if (isRecordingStarted) { const recordingActive = recordingList.find((recording) => recording.status === RecordingStatus.STARTED); this.recordingService.setRecordingStarted(recordingActive); diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts index 3241717d..81f35342 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts @@ -15,7 +15,8 @@ import { RecordingActivityReadOnlyDirective, RecordingActivityShowControlsDirective, StartStopRecordingButtonsDirective, - RecordingActivityViewRecordingsButtonDirective + RecordingActivityViewRecordingsButtonDirective, + RecordingActivityShowRecordingsListDirective } from './internals.directive'; import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive'; import { @@ -107,7 +108,8 @@ const directives = [ AdminDashboardTitleDirective, LayoutRemoteParticipantsDirective, StartStopRecordingButtonsDirective, - RecordingActivityViewRecordingsButtonDirective + RecordingActivityViewRecordingsButtonDirective, + RecordingActivityShowRecordingsListDirective ]; @NgModule({ diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts index 1c4119ed..6caecbe5 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts @@ -429,4 +429,50 @@ export class RecordingActivityViewRecordingsButtonDirective implements AfterView private update(value: boolean) { this.libService.setRecordingActivityViewRecordingsButton(value); } +} + +/** + * @internal + * The **recordingActivityShowRecordingsList** directive allows to show or hide the recordings list in the recording activity panel. + * + * Default: `true` + * + * Can be used in {@link VideoconferenceComponent}. + * + * @example + * + */ +@Directive({ + selector: 'ov-videoconference[recordingActivityShowRecordingsList]', + standalone: false +}) +export class RecordingActivityShowRecordingsListDirective implements AfterViewInit, OnDestroy { + @Input() set recordingActivityShowRecordingsList(value: boolean) { + this._value = value; + this.update(this._value); + } + + private _value: boolean = true; + + constructor( + public elementRef: ElementRef, + private libService: OpenViduComponentsConfigService + ) {} + + ngAfterViewInit() { + this.update(this._value); + } + + ngOnDestroy(): void { + this.clear(); + } + + private clear() { + this._value = true; + this.update(this._value); + } + + private update(value: boolean) { + this.libService.setRecordingActivityShowRecordingsList(value); + } } \ No newline at end of file diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/config/directive-config.service.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/config/directive-config.service.ts index 45e1d4d4..95d3f0ed 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/config/directive-config.service.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/config/directive-config.service.ts @@ -118,6 +118,9 @@ export class OpenViduComponentsConfigService { private recordingActivityViewRecordingsButton = >new BehaviorSubject(false); recordingActivityViewRecordingsButton$: Observable; + + private recordingActivityShowRecordingsList = >new BehaviorSubject(false); + recordingActivityShowRecordingsList$: Observable; // Admin private adminRecordingsList: BehaviorSubject = new BehaviorSubject([]); adminRecordingsList$: Observable; @@ -174,6 +177,7 @@ export class OpenViduComponentsConfigService { this.recordingActivityShowControls$ = this.recordingActivityShowControls.asObservable(); this.recordingActivityStartStopRecordingButton$ = this.recordingActivityStartStopRecordingButton.asObservable(); this.recordingActivityViewRecordingsButton$ = this.recordingActivityViewRecordingsButton.asObservable(); + this.recordingActivityShowRecordingsList$ = this.recordingActivityShowRecordingsList.asObservable(); // Broadcasting activity this.broadcastingActivity$ = this.broadcastingActivity.asObservable(); // Admin dashboard @@ -525,4 +529,12 @@ export class OpenViduComponentsConfigService { setRecordingActivityViewRecordingsButton(show: boolean) { this.recordingActivityViewRecordingsButton.next(show); } + + setRecordingActivityShowRecordingsList(show: boolean) { + this.recordingActivityShowRecordingsList.next(show); + } + + showRecordingActivityRecordingsList(): boolean { + return this.recordingActivityShowRecordingsList.getValue(); + } }