ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

master
Carlos Santos 2025-07-28 18:51:20 +02:00
parent 22af5c7df6
commit 8e218ade3c
6 changed files with 72 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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"

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

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

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

@ -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$))

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

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

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

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

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

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