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

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

master
Carlos Santos 2025-07-29 10:26:25 +02:00
parent 8e218ade3c
commit fa664c97f1
5 changed files with 86 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -113,12 +113,19 @@
}
<!-- View all recordings button -->
<div class="item recording-action-buttons">
<button mat-flat-button id="view-recordings-btn" (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>
@if (showViewRecordingsButton) {
<div class="item recording-action-buttons">
<button
mat-flat-button
id="view-recordings-btn"
(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">

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

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

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

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

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

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

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

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