ov-components: Implement toolbar room name directive and update toolbar to display room name dynamically

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html

@@ -6,7 +6,7 @@
 				id="session-info-container"
 				[class.collapsed]="recordingStatus === _recordingStatus.STARTED || broadcastingStatus === _broadcastingStatus.STARTED"
 			>
-				<span id="session-name" *ngIf="!isMinimal && room && room.name && showSessionName">{{ room.name }}</span>
+				<span id="session-name" *ngIf="!isMinimal && showRoomName">{{ roomName }}</span>
 				<div
 					id="activities-tag"
 					*ngIf="recordingStatus === _recordingStatus.STARTED || broadcastingStatus === _broadcastingStatus.STARTED"

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

@@ -290,7 +290,12 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 	/**
 	 * @ignore
 	 */
-	showSessionName: boolean = true;
+	showRoomName: boolean = true;
+
+	/**
+	 * @ignore
+	 */
+	roomName: string = '';
 
 	/**
 	 * @ignore
@@ -419,6 +424,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 
 	async ngOnInit() {
 		this.room = this.openviduService.getRoom();
+		this.evalAndSetRoomName(this.libService.getRoomName());
 
 		this.hasVideoDevices = this.oVDevicesService.hasVideoDeviceAvailable();
 		this.hasAudioDevices = this.oVDevicesService.hasAudioDeviceAvailable();
@@ -856,7 +862,12 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 		});
 
 		this.libService.displayRoomName$.pipe(takeUntil(this.destroy$)).subscribe((value: boolean) => {
-			this.showSessionName = value;
+			this.showRoomName = value;
+			this.cd.markForCheck();
+		});
+
+		this.libService.roomName$.pipe(takeUntil(this.destroy$)).subscribe((value: string) => {
+			this.evalAndSetRoomName(value);
 			this.cd.markForCheck();
 		});
 		// this.libService.captionsButton$.pipe(takeUntil(this.destroy$)).subscribe((value: boolean) => {
@@ -894,4 +905,14 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 			this.showBroadcastingButton ||
 			this.showSettingsButton;
 	}
+
+	private evalAndSetRoomName(value: string) {
+		if (!!value) {
+			this.roomName = value;
+		} else if (!!this.room && this.room.name) {
+			this.roomName = this.room.name;
+		} else {
+			this.roomName = '';
+		}
+	}
 }

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

@@ -16,7 +16,8 @@ import {
 	RecordingActivityShowControlsDirective,
 	StartStopRecordingButtonsDirective,
 	RecordingActivityViewRecordingsButtonDirective,
-	RecordingActivityShowRecordingsListDirective
+	RecordingActivityShowRecordingsListDirective,
+	ToolbarRoomNameDirective
 } from './internals.directive';
 import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive';
 import {
@@ -109,7 +110,8 @@ const directives = [
 	LayoutRemoteParticipantsDirective,
 	StartStopRecordingButtonsDirective,
 	RecordingActivityViewRecordingsButtonDirective,
-	RecordingActivityShowRecordingsListDirective
+	RecordingActivityShowRecordingsListDirective,
+	ToolbarRoomNameDirective
 ];
 
 @NgModule({

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

@@ -474,3 +474,53 @@ export class RecordingActivityShowRecordingsListDirective implements AfterViewIn
 		this.libService.updateRecordingActivityConfig({ showRecordingsList: value });
 	}
 }
+
+/**
+ * @internal
+ * The **toolbarRoomName** directive allows to display a specific room name in the toolbar.
+ * If the room name is not set, it will display the room ID instead.
+ *
+ * Can be used in {@link ToolbarComponent}.
+ *
+ * @example
+ * <ov-videoconference [toolbarRoomName]="roomName"></ov-videoconference>
+ */
+@Directive({
+	selector: 'ov-videoconference[toolbarRoomName], ov-toolbar[roomName]',
+	standalone: false
+})
+export class ToolbarRoomNameDirective implements AfterViewInit, OnDestroy {
+	@Input() set toolbarRoomName(value: string | undefined) {
+		this._roomName = value;
+		this.updateRoomName();
+	}
+
+	@Input() set roomName(value: string | undefined) {
+		this._roomName = value;
+		this.updateRoomName();
+	}
+
+	private _roomName?: string;
+
+	constructor(
+		public elementRef: ElementRef,
+		private libService: OpenViduComponentsConfigService
+	) {}
+
+	ngAfterViewInit() {
+		this.updateRoomName();
+	}
+
+	ngOnDestroy(): void {
+		this.clear();
+	}
+
+	private clear() {
+		this._roomName = undefined;
+		this.updateRoomName();
+	}
+
+	private updateRoomName() {
+		this.libService.updateToolbarConfig({ roomName: this._roomName || '' });
+	}
+}

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

@@ -38,6 +38,7 @@ interface ToolbarConfig {
 	chatPanel: boolean;
 	activitiesPanel: boolean;
 	displayRoomName: boolean;
+	roomName: string;
 	displayLogo: boolean;
 	backgroundEffects: boolean;
 	recording: boolean;
@@ -237,6 +238,7 @@ export class OpenViduComponentsConfigService {
 			prev.chatPanel === curr.chatPanel &&
 			prev.activitiesPanel === curr.activitiesPanel &&
 			prev.displayRoomName === curr.displayRoomName &&
+			prev.roomName === curr.roomName &&
 			prev.displayLogo === curr.displayLogo &&
 			prev.backgroundEffects === curr.backgroundEffects &&
 			prev.recording === curr.recording &&
@@ -333,6 +335,7 @@ export class OpenViduComponentsConfigService {
 		chatPanel: true,
 		activitiesPanel: true,
 		displayRoomName: true,
+		roomName: '',
 		displayLogo: true,
 		backgroundEffects: true,
 		recording: true,
@@ -409,6 +412,7 @@ export class OpenViduComponentsConfigService {
 	chatPanelButton$: Observable<boolean> = this.toolbarConfig.observable$.pipe(map((config) => config.chatPanel));
 	activitiesPanelButton$: Observable<boolean> = this.toolbarConfig.observable$.pipe(map((config) => config.activitiesPanel));
 	displayRoomName$: Observable<boolean> = this.toolbarConfig.observable$.pipe(map((config) => config.displayRoomName));
+	roomName$: Observable<string> = this.toolbarConfig.observable$.pipe(map((config) => config.roomName));
 	brandingLogo$: Observable<string> = this.toolbarConfig.observable$.pipe(map((config) => config.brandingLogo));
 	displayLogo$: Observable<boolean> = this.toolbarConfig.observable$.pipe(map((config) => config.displayLogo));
 	toolbarAdditionalButtonsPosition$: Observable<ToolbarAdditionalButtonsPosition> = this.toolbarConfig.observable$.pipe(
@@ -551,6 +555,10 @@ export class OpenViduComponentsConfigService {
 
 	// Toolbar configuration methods
 
+	getRoomName(): string {
+		return this.toolbarConfig.subject.getValue().roomName;
+	}
+
 	setBroadcastingButton(broadcastingButton: boolean) {
 		this.updateToolbarConfig({ broadcasting: broadcastingButton });
 	}