From 8e218ade3c1fbfa8652af07568156fefa401fc12 Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Mon, 28 Jul 2025 18:51:20 +0200 Subject: [PATCH] ov-components: Add start/stop recording button directive and update related components --- .../recording-activity.component.html | 4 +- .../recording-activity.component.ts | 10 +++++ .../components/toolbar/toolbar.component.ts | 8 ++-- .../directives/api/api.directive.module.ts | 6 ++- .../lib/directives/api/internals.directive.ts | 45 +++++++++++++++++++ .../config/directive-config.service.ts | 8 +++- 6 files changed, 72 insertions(+), 9 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 8602a8ca..de2d3050 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 @@ -87,14 +87,14 @@ @if (!isReadOnlyMode) {
- @if (recordingAlive) { + @if (recordingAlive && showStartStopRecordingButton) { } - @if (recordingStatus === recStatusEnum.STOPPED) { + @if (recordingStatus === recStatusEnum.STOPPED && showStartStopRecordingButton) {
{ + this.showStartStopRecordingButton = show; + this.cd.markForCheck(); + }); } private subscribeToRecordingStatus() { diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts index 417da154..aa5db1a6 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts +++ b/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.showCaptionsButton = value; - this.cd.markForCheck(); - }); + // this.libService.captionsButton$.pipe(takeUntil(this.destroy$)).subscribe((value: boolean) => { + // this.showCaptionsButton = value; + // this.cd.markForCheck(); + // }); this.libService.toolbarAdditionalButtonsPosition$ .pipe(takeUntil(this.destroy$)) 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 459f791a..ae8d03a7 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 @@ -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({ 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 3c9d6515..be0c8b2f 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 @@ -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 + * + */ +@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); + } +} \ 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 d5ee3b71..4fa38a15 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 @@ -113,6 +113,8 @@ export class OpenViduComponentsConfigService { ); recordingActivityShowControls$: Observable<{ play?: boolean; download?: boolean; delete?: boolean; externalView?: boolean }>; + private recordingActivityStartStopRecordingButton = >new BehaviorSubject(true); + recordingActivityStartStopRecordingButton$: Observable; // Admin private adminRecordingsList: BehaviorSubject = new BehaviorSubject([]); adminRecordingsList$: Observable; @@ -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); + } }