From fa664c97f1c52ce6b7becc733653afbc5b9c1074 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Tue, 29 Jul 2025 10:26:25 +0200
Subject: [PATCH] ov-components: Add view recordings button functionality and
related directives
---
.../recording-activity.component.html | 19 +++++---
.../recording-activity.component.ts | 20 ++++++--
.../directives/api/api.directive.module.ts | 6 ++-
.../lib/directives/api/internals.directive.ts | 46 +++++++++++++++++++
.../config/directive-config.service.ts | 8 ++++
5 files changed, 86 insertions(+), 13 deletions(-)
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
index de2d3050..bd38c0b5 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
@@ -113,12 +113,19 @@
}
-
-
-
+ @if (showViewRecordingsButton) {
+
+
+
+ }
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 c98f806d..b7d42899 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
@@ -134,11 +134,16 @@ export class RecordingActivityComponent implements OnInit, OnDestroy {
*/
viewButtonText: string = 'PANEL.RECORDING.VIEW';
-
/**
* @internal
*/
showStartStopRecordingButton: boolean = true;
+
+ /**
+ * @internal
+ */
+ showViewRecordingsButton: boolean = false;
+
/**
* @internal
*/
@@ -356,10 +361,15 @@ export class RecordingActivityComponent implements OnInit, OnDestroy {
this.cd.markForCheck();
});
- this.libService.recordingActivityStartStopRecordingButton$.pipe(takeUntil(this.destroy$)).subscribe((show: boolean) => {
- this.showStartStopRecordingButton = show;
- this.cd.markForCheck();
- });
+ this.libService.recordingActivityStartStopRecordingButton$.pipe(takeUntil(this.destroy$)).subscribe((show: boolean) => {
+ this.showStartStopRecordingButton = show;
+ this.cd.markForCheck();
+ });
+
+ this.libService.recordingActivityViewRecordingsButton$.pipe(takeUntil(this.destroy$)).subscribe((show: boolean) => {
+ this.showViewRecordingsButton = show;
+ this.cd.markForCheck();
+ });
}
private subscribeToRecordingStatus() {
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 ae8d03a7..3241717d 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
@@ -14,7 +14,8 @@ import {
ToolbarViewRecordingsButtonDirective,
RecordingActivityReadOnlyDirective,
RecordingActivityShowControlsDirective,
- StartStopRecordingButtonsDirective
+ StartStopRecordingButtonsDirective,
+ RecordingActivityViewRecordingsButtonDirective
} from './internals.directive';
import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive';
import {
@@ -105,7 +106,8 @@ const directives = [
AdminLoginErrorDirective,
AdminDashboardTitleDirective,
LayoutRemoteParticipantsDirective,
- StartStopRecordingButtonsDirective
+ StartStopRecordingButtonsDirective,
+ RecordingActivityViewRecordingsButtonDirective
];
@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 be0c8b2f..1c4119ed 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
@@ -383,4 +383,50 @@ export class StartStopRecordingButtonsDirective implements OnDestroy {
private update(value: boolean) {
this.libService.setRecordingActivityStartStopRecordingButton(value);
}
+}
+
+/**
+ * @internal
+ * The **recordingActivityViewRecordingsButton** directive allows to show/hide the view recordings button in the recording activity panel.
+ *
+ * Default: `false`
+ *
+ * Can be used in {@link VideoconferenceComponent}.
+ *
+ * @example
+ *
+ */
+@Directive({
+ selector: 'ov-videoconference[recordingActivityViewRecordingsButton]',
+ standalone: false
+})
+export class RecordingActivityViewRecordingsButtonDirective implements AfterViewInit, OnDestroy {
+ @Input() set recordingActivityViewRecordingsButton(value: boolean) {
+ this._value = value;
+ this.update(this._value);
+ }
+
+ private _value: boolean = false;
+
+ constructor(
+ public elementRef: ElementRef,
+ private libService: OpenViduComponentsConfigService
+ ) {}
+
+ ngAfterViewInit() {
+ this.update(this._value);
+ }
+
+ ngOnDestroy(): void {
+ this.clear();
+ }
+
+ private clear() {
+ this._value = false;
+ this.update(this._value);
+ }
+
+ private update(value: boolean) {
+ this.libService.setRecordingActivityViewRecordingsButton(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 4fa38a15..45e1d4d4 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
@@ -115,6 +115,9 @@ export class OpenViduComponentsConfigService {
private recordingActivityStartStopRecordingButton = >new BehaviorSubject(true);
recordingActivityStartStopRecordingButton$: Observable;
+
+ private recordingActivityViewRecordingsButton = >new BehaviorSubject(false);
+ recordingActivityViewRecordingsButton$: Observable;
// Admin
private adminRecordingsList: BehaviorSubject = new BehaviorSubject([]);
adminRecordingsList$: Observable;
@@ -170,6 +173,7 @@ export class OpenViduComponentsConfigService {
this.recordingActivityReadOnly$ = this.recordingActivityReadOnly.asObservable();
this.recordingActivityShowControls$ = this.recordingActivityShowControls.asObservable();
this.recordingActivityStartStopRecordingButton$ = this.recordingActivityStartStopRecordingButton.asObservable();
+ this.recordingActivityViewRecordingsButton$ = this.recordingActivityViewRecordingsButton.asObservable();
// Broadcasting activity
this.broadcastingActivity$ = this.broadcastingActivity.asObservable();
// Admin dashboard
@@ -517,4 +521,8 @@ export class OpenViduComponentsConfigService {
setRecordingActivityStartStopRecordingButton(show: boolean) {
this.recordingActivityStartStopRecordingButton.next(show);
}
+
+ setRecordingActivityViewRecordingsButton(show: boolean) {
+ this.recordingActivityViewRecordingsButton.next(show);
+ }
}