ov-components: Add view recordings button functionality and related directives

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html

@@ -113,12 +113,19 @@
 						}
 
 						<!-- View all recordings button -->
-						<div class="item recording-action-buttons">
+						@if (showViewRecordingsButton) {
-							<button mat-flat-button id="view-recordings-btn" (click)="viewAllRecordings()" class="view-recordings-button">
+							<div class="item recording-action-buttons">
-								<span>{{ 'TOOLBAR.VIEW_RECORDINGS' | translate }}</span>
+								<button
-								<mat-icon class="external-link-icon">open_in_new</mat-icon>
+									mat-flat-button
-							</button>
+									id="view-recordings-btn"
-						</div>
+									(click)="viewAllRecordings()"
+									class="view-recordings-button"
+								>
+									<span>{{ 'TOOLBAR.VIEW_RECORDINGS' | translate }}</span>
+									<mat-icon class="external-link-icon">open_in_new</mat-icon>
+								</button>
+							</div>
+						}
 
 						<!-- Recording status messages -->
 						<div class="recording-status-messages">

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.libService.recordingActivityStartStopRecordingButton$.pipe(takeUntil(this.destroy$)).subscribe((show: boolean) => {
-				this.showStartStopRecordingButton = show;
+			this.showStartStopRecordingButton = show;
-				this.cd.markForCheck();
+			this.cd.markForCheck();
-			});
+		});
+
+		this.libService.recordingActivityViewRecordingsButton$.pipe(takeUntil(this.destroy$)).subscribe((show: boolean) => {
+			this.showViewRecordingsButton = show;
+			this.cd.markForCheck();
+		});
 	}
 
 	private subscribeToRecordingStatus() {

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

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
+ * <ov-videoconference [recordingActivityViewRecordingsButton]="true"></ov-videoconference>
+ */
+@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);
+	}
 }

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

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