ov-components: Allowed custom title on admin components

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

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

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

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

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

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

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

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

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

@@ -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}.
  *

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

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

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

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