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

ov-components: Allowed custom title on admin components

pull/848/head
Carlos Santos 2024-10-07 12:01:08 +02:00
parent 6bb5937b23
commit d19f0f7bb5
7 changed files with 140 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.html
View File

@ -1,6 +1,6 @@
<div class="dashboard-container">
<mat-toolbar class="header">
<span>{{ 'ADMIN.DASHBOARD_TITLE' | translate }}</span>
<span>{{ title || ('ADMIN.DASHBOARD_TITLE' | translate) }}</span>
<span class="toolbar-spacer"></span>
<button class="logout-btn" mat-icon-button aria-label="Refresh" (click)="logout()">

18
openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.ts
View File

@ -35,6 +35,11 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
*/
@Output() onLogoutRequested: EventEmitter<void> = new EventEmitter<void>();
/**
* @internal
*/
title = '';
/**
* @internal
*/
@ -55,7 +60,9 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
* @internal
*/
recordingStatusEnum = RecordingStatus;
private adminSubscription: Subscription;
private recordingsSub: Subscription;
private titleSub: Subscription;
/**
* @internal
*/
@ -76,7 +83,8 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
* @internal
*/
ngOnDestroy() {
if (this.adminSubscription) this.adminSubscription.unsubscribe();
if (this.recordingsSub) this.recordingsSub.unsubscribe();
if (this.titleSub) this.titleSub.unsubscribe();
}
/**
@ -245,7 +253,7 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
}
private subscribeToAdminDirectives() {
this.adminSubscription = this.libService.adminRecordingsList$.subscribe((recordings: RecordingInfo[]) => {
this.recordingsSub = this.libService.adminRecordingsList$.subscribe((recordings: RecordingInfo[]) => {
// Remove the recordings that are marked for deletion
this.filterDeletedRecordings(recordings);
@ -255,5 +263,9 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
this.sortRecordings();
});
this.titleSub = this.libService.adminDashboardTitle$.subscribe((value) => {
this.title = value;
});
}
}

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.html
View File

@ -1,4 +1,4 @@
<mat-toolbar class="header"> {{ 'ADMIN.DASHBOARD_TITLE' | translate }} </mat-toolbar>
<mat-toolbar class="header"> {{ title || ('ADMIN.DASHBOARD_TITLE' | translate) }} </mat-toolbar>
<div class="center-container">
<div *ngIf="loading" class="outer">

11
openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.ts
View File

@ -20,6 +20,11 @@ export class AdminLoginComponent implements OnInit {
password: string;
}>();
/**
* @internal
*/
title: string;
/**
* @internal
*/
@ -36,6 +41,7 @@ export class AdminLoginComponent implements OnInit {
loginForm: FormGroup;
private errorSub: Subscription;
private titleSub: Subscription;
/**
* @internal
@ -64,6 +70,7 @@ export class AdminLoginComponent implements OnInit {
ngOnDestroy() {
this.showSpinner = false;
if (this.errorSub) this.errorSub.unsubscribe();
if (this.titleSub) this.titleSub.unsubscribe();
}
/**
@ -83,5 +90,9 @@ export class AdminLoginComponent implements OnInit {
this.actionService.openDialog(value.error, value.message, true);
}
});
this.titleSub = this.libService.adminLoginTitle$.subscribe((value) => {
this.title = value;
});
}
}

85
openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/admin.directive.ts
View File

@ -43,6 +43,91 @@ export class AdminDashboardRecordingsListDirective implements AfterViewInit, OnD
}
}
/**
* The **navbarTitle** directive allows customize the title of the navbar in {@link AdminLoginComponent}.
*
* Default: `'OpenVidu Call Dashboard'`
*
* @example
* <ov-admin-dashboard [navbarTitle]="'My Dashboard'"></ov-admin-dashboard>
*
*/
@Directive({
selector: 'ov-admin-dashboard[navbarTitle]'
})
export class AdminDashboardTitleDirective implements AfterViewInit, OnDestroy {
@Input() set navbarTitle(value: any) {
this.navbarTitleValue = value;
this.update(this.navbarTitleValue);
}
navbarTitleValue: any = null;
constructor(public elementRef: ElementRef, private libService: OpenViduComponentsConfigService) {}
ngAfterViewInit() {
this.update(this.navbarTitleValue);
}
ngOnDestroy(): void {
this.clear();
}
clear() {
this.navbarTitleValue = null;
this.update(null);
}
update(value: any) {
if (this.libService.getAdminDashboardTitle() !== value) {
this.libService.setAdminDashboardTitle(value);
}
}
}
/**
* The **navbarTitle** directive allows customize the title of the navbar in {@link AdminLoginComponent}.
*
* Default: `'OpenVidu Call Dashboard'`
*
* @example
* <ov-admin-login [navbarTitle]="'My login'"></ov-admin-login>
*
*/
@Directive({
selector: 'ov-admin-login[navbarTitle]'
})
export class AdminLoginTitleDirective implements AfterViewInit, OnDestroy {
@Input() set navbarTitle(value: any) {
this.navbarTitleValue = value;
this.update(this.navbarTitleValue);
}
navbarTitleValue: any = null;
constructor(public elementRef: ElementRef, private libService: OpenViduComponentsConfigService) {}
ngAfterViewInit() {
this.update(this.navbarTitleValue);
}
ngOnDestroy(): void {
this.clear();
}
clear() {
this.navbarTitleValue = null;
this.update(null);
}
update(value: any) {
if (this.libService.getAdminLoginTitle() !== value) {
this.libService.setAdminLoginTitle(value);
}
}
}
/**
* The **error** directive allows show the authentication error in {@link AdminLoginComponent}.
*

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

@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { ActivitiesPanelBroadcastingActivityDirective, ActivitiesPanelRecordingActivityDirective } from './activities-panel.directive';
import { AdminLoginErrorDirective, AdminDashboardRecordingsListDirective } from './admin.directive';
import { AdminLoginErrorDirective, AdminDashboardRecordingsListDirective, AdminLoginTitleDirective, AdminDashboardTitleDirective } from './admin.directive';
import { LayoutRemoteParticipantsDirective, LogoDirective } from './internals.directive';
import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive';
import {
@ -76,7 +76,9 @@ import {
ActivitiesPanelRecordingActivityDirective,
ActivitiesPanelBroadcastingActivityDirective,
AdminDashboardRecordingsListDirective,
AdminLoginTitleDirective,
AdminLoginErrorDirective,
AdminDashboardTitleDirective,
LayoutRemoteParticipantsDirective
],
exports: [
@ -114,7 +116,9 @@ import {
ActivitiesPanelRecordingActivityDirective,
ActivitiesPanelBroadcastingActivityDirective,
AdminDashboardRecordingsListDirective,
AdminLoginTitleDirective,
AdminLoginErrorDirective,
AdminDashboardTitleDirective,
LayoutRemoteParticipantsDirective
]
})

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

@ -88,6 +88,10 @@ export class OpenViduComponentsConfigService {
private adminRecordingsList: BehaviorSubject<RecordingInfo[]> = new BehaviorSubject(<RecordingInfo[]>[]);
adminRecordingsList$: Observable<RecordingInfo[]>;
private adminLoginError = <BehaviorSubject<any>>new BehaviorSubject(null);
private adminLoginTitle = <BehaviorSubject<string>>new BehaviorSubject('');
private adminDashboardTitle = <BehaviorSubject<string>>new BehaviorSubject('');
adminLoginTitle$: Observable<string>;
adminDashboardTitle$: Observable<string>;
adminLoginError$: Observable<any>;
// Internals
@ -131,6 +135,8 @@ export class OpenViduComponentsConfigService {
// Admin dashboard
this.adminRecordingsList$ = this.adminRecordingsList.asObservable();
this.adminLoginError$ = this.adminLoginError.asObservable();
this.adminLoginTitle$ = this.adminLoginTitle.asObservable();
this.adminDashboardTitle$ = this.adminDashboardTitle.asObservable();
// Internals
this.layoutRemoteParticipants$ = this.layoutRemoteParticipants.asObservable();
}
@ -366,6 +372,22 @@ export class OpenViduComponentsConfigService {
return this.adminLoginError.getValue();
}
getAdminLoginTitle(): string {
return this.adminLoginTitle.getValue();
}
setAdminLoginTitle(title: string) {
this.adminLoginTitle.next(title);
}
getAdminDashboardTitle(): string {
return this.adminDashboardTitle.getValue();
}
setAdminDashboardTitle(title: string) {
this.adminDashboardTitle.next(title);
}
isRecordingEnabled(): boolean {
return this.recordingButton.getValue() && this.recordingActivity.getValue();
}