ov-components: Add start/stop recording button directive and update related components

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

@@ -87,14 +87,14 @@
 				@if (!isReadOnlyMode) {
 					<div class="item recording-action-buttons">
 						<!-- Stop recording button -->
-						@if (recordingAlive) {
+						@if (recordingAlive && showStartStopRecordingButton) {
 							<button mat-flat-button id="stop-recording-btn" (click)="stopRecording()">
 								<span>{{ 'TOOLBAR.STOP_RECORDING' | translate }}</span>
 							</button>
 						}
 
 						<!-- Start recording button -->
-						@if (recordingStatus === recStatusEnum.STOPPED) {
+						@if (recordingStatus === recStatusEnum.STOPPED && showStartStopRecordingButton) {
 							<div
 								[matTooltip]="!hasRoomTracksPublished ? ('PANEL.RECORDING.NO_TRACKS_PUBLISHED' | translate) : ''"
 								[matTooltipDisabled]="hasRoomTracksPublished"

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

@@ -134,6 +134,11 @@ export class RecordingActivityComponent implements OnInit, OnDestroy {
 	 */
 	viewButtonText: string = 'PANEL.RECORDING.VIEW';
 
+
+	/**
+	 * @internal
+	 */
+	showStartStopRecordingButton: boolean = true;
 	/**
 	 * @internal
 	 */
@@ -350,6 +355,11 @@ export class RecordingActivityComponent implements OnInit, OnDestroy {
 				this.showControls = controls;
 				this.cd.markForCheck();
 			});
+
+			this.libService.recordingActivityStartStopRecordingButton$.pipe(takeUntil(this.destroy$)).subscribe((show: boolean) => {
+				this.showStartStopRecordingButton = show;
+				this.cd.markForCheck();
+			});
 	}
 
 	private subscribeToRecordingStatus() {

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts

@@ -836,10 +836,10 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 			this.showSessionName = value;
 			this.cd.markForCheck();
 		});
-		this.libService.captionsButton$.pipe(takeUntil(this.destroy$)).subscribe((value: boolean) => {
+		// this.libService.captionsButton$.pipe(takeUntil(this.destroy$)).subscribe((value: boolean) => {
-			this.showCaptionsButton = value;
+		// 	this.showCaptionsButton = value;
-			this.cd.markForCheck();
+		// 	this.cd.markForCheck();
-		});
+		// });
 
 		this.libService.toolbarAdditionalButtonsPosition$
 			.pipe(takeUntil(this.destroy$))

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

@@ -13,7 +13,8 @@ import {
 	ToolbarBrandingLogoDirective,
 	ToolbarViewRecordingsButtonDirective,
 	RecordingActivityReadOnlyDirective,
-	RecordingActivityShowControlsDirective
+	RecordingActivityShowControlsDirective,
+	StartStopRecordingButtonsDirective
 } from './internals.directive';
 import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive';
 import {
@@ -103,7 +104,8 @@ const directives = [
 	AdminLoginTitleDirective,
 	AdminLoginErrorDirective,
 	AdminDashboardTitleDirective,
-	LayoutRemoteParticipantsDirective
+	LayoutRemoteParticipantsDirective,
+	StartStopRecordingButtonsDirective
 ];
 
 @NgModule({

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

@@ -339,3 +339,48 @@ export class ToolbarViewRecordingsButtonDirective implements AfterViewInit, OnDe
 		}
 	}
 }
+
+/**
+ * @internal
+ *
+ * The **recordingActivityStartStopRecordingButton** directive allows to show or hide the start/stop recording buttons in recording activity.
+ *
+ * Default: `true`
+ *
+ * It is only available for {@link VideoconferenceComponent}.
+ *
+ * @example
+ * <ov-videoconference [recordingActivityStartStopRecordingButton]="false"></ov-videoconference>
+ */
+@Directive({
+	selector: 'ov-videoconference[recordingActivityStartStopRecordingButton]',
+	standalone: false
+})
+export class StartStopRecordingButtonsDirective implements OnDestroy {
+	/**
+	 * @ignore
+	 */
+	@Input() set recordingActivityStartStopRecordingButton(value: boolean) {
+		this.update(value);
+	}
+
+	/**
+	 * @ignore
+	 */
+	constructor(
+		public elementRef: ElementRef,
+		private libService: OpenViduComponentsConfigService
+	) {}
+
+	ngOnDestroy(): void {
+		this.clear();
+	}
+
+	private clear() {
+		this.update(true);
+	}
+
+	private update(value: boolean) {
+		this.libService.setRecordingActivityStartStopRecordingButton(value);
+	}
+}

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

@@ -113,6 +113,8 @@ export class OpenViduComponentsConfigService {
 	);
 	recordingActivityShowControls$: Observable<{ play?: boolean; download?: boolean; delete?: boolean; externalView?: boolean }>;
 
+	private recordingActivityStartStopRecordingButton = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+	recordingActivityStartStopRecordingButton$: Observable<boolean>;
 	// Admin
 	private adminRecordingsList: BehaviorSubject<RecordingInfo[]> = new BehaviorSubject(<RecordingInfo[]>[]);
 	adminRecordingsList$: Observable<RecordingInfo[]>;
@@ -167,6 +169,7 @@ export class OpenViduComponentsConfigService {
 		this.recordingActivity$ = this.recordingActivity.asObservable();
 		this.recordingActivityReadOnly$ = this.recordingActivityReadOnly.asObservable();
 		this.recordingActivityShowControls$ = this.recordingActivityShowControls.asObservable();
+		this.recordingActivityStartStopRecordingButton$ = this.recordingActivityStartStopRecordingButton.asObservable();
 		// Broadcasting activity
 		this.broadcastingActivity$ = this.broadcastingActivity.asObservable();
 		// Admin dashboard
@@ -503,7 +506,6 @@ export class OpenViduComponentsConfigService {
 		return this.recordingActivityReadOnly.getValue();
 	}
 
-
 	setRecordingActivityShowControls(controls: { play?: boolean; download?: boolean; delete?: boolean }) {
 		this.recordingActivityShowControls.next(controls);
 	}
@@ -511,4 +513,8 @@ export class OpenViduComponentsConfigService {
 	getRecordingActivityShowControls(): { play?: boolean; download?: boolean; delete?: boolean } {
 		return this.recordingActivityShowControls.getValue();
 	}
+
+	setRecordingActivityStartStopRecordingButton(show: boolean) {
+		this.recordingActivityStartStopRecordingButton.next(show);
+	}
 }