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

master
Carlos Santos 2025-07-29 10:47:22 +02:00
parent fa664c97f1
commit 9bac0f6490
5 changed files with 80 additions and 4 deletions

View File

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

View File

@ -499,7 +499,9 @@ export class SessionComponent implements OnInit, OnDestroy {
case DataTopic.ROOM_STATUS:
const { recordingList, isRecordingStarted, isBroadcastingStarted, broadcastingId } = event as RoomStatusData;
if (this.libService.showRecordingActivityRecordingsList()) {
this.recordingService.setRecordingList(recordingList);
}
if (isRecordingStarted) {
const recordingActive = recordingList.find((recording) => recording.status === RecordingStatus.STARTED);
this.recordingService.setRecordingStarted(recordingActive);

View File

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

View File

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

View File

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