ov-components: Add directive to control visibility of recording list and update related services and components

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

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

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({

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts

@@ -430,3 +430,49 @@ export class RecordingActivityViewRecordingsButtonDirective implements AfterView
 		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
+ * <ov-videoconference [recordingActivityShowRecordingsList]="false"></ov-videoconference>
+ */
+@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);
+	}
+}

openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/config/directive-config.service.ts

@@ -118,6 +118,9 @@ export class OpenViduComponentsConfigService {
 
 	private recordingActivityViewRecordingsButton = <BehaviorSubject<boolean>>new BehaviorSubject(false);
 	recordingActivityViewRecordingsButton$: Observable<boolean>;
+
+	private recordingActivityShowRecordingsList = <BehaviorSubject<boolean>>new BehaviorSubject(false);
+	recordingActivityShowRecordingsList$: Observable<boolean>;
 	// Admin
 	private adminRecordingsList: BehaviorSubject<RecordingInfo[]> = new BehaviorSubject(<RecordingInfo[]>[]);
 	adminRecordingsList$: Observable<RecordingInfo[]>;
@@ -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();
+	}
 }