From 020413257fbdb6517fc6184a19866a30c4f91593 Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Wed, 13 Aug 2025 12:49:03 +0200 Subject: [PATCH] ov-components: Implement toolbar room name directive and update toolbar to display room name dynamically --- .../components/toolbar/toolbar.component.html | 2 +- .../components/toolbar/toolbar.component.ts | 25 ++++++++- .../directives/api/api.directive.module.ts | 6 ++- .../lib/directives/api/internals.directive.ts | 52 ++++++++++++++++++- .../config/directive-config.service.ts | 10 +++- 5 files changed, 88 insertions(+), 7 deletions(-) diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html index 3866e984..47b246bb 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html +++ b/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" > - {{ room.name }} + {{ roomName }}
{ - 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 = ''; + } + } } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts index 81f35342..aee2a866 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts +++ b/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({ diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts index 5a5d6257..203f29a1 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts @@ -473,4 +473,54 @@ export class RecordingActivityShowRecordingsListDirective implements AfterViewIn private update(value: boolean) { this.libService.updateRecordingActivityConfig({ showRecordingsList: value }); } -} \ No newline at end of file +} + +/** + * @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 + * + */ +@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 || '' }); + } +} diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/config/directive-config.service.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/config/directive-config.service.ts index 3c019acb..fb1332c4 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/config/directive-config.service.ts +++ b/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 = this.toolbarConfig.observable$.pipe(map((config) => config.chatPanel)); activitiesPanelButton$: Observable = this.toolbarConfig.observable$.pipe(map((config) => config.activitiesPanel)); displayRoomName$: Observable = this.toolbarConfig.observable$.pipe(map((config) => config.displayRoomName)); + roomName$: Observable = this.toolbarConfig.observable$.pipe(map((config) => config.roomName)); brandingLogo$: Observable = this.toolbarConfig.observable$.pipe(map((config) => config.brandingLogo)); displayLogo$: Observable = this.toolbarConfig.observable$.pipe(map((config) => config.displayLogo)); toolbarAdditionalButtonsPosition$: Observable = 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 }); } @@ -575,4 +583,4 @@ export class OpenViduComponentsConfigService { showRecordingActivityRecordingsList(): boolean { return this.recordingActivityConfig.subject.getValue().showRecordingsList; } -} \ No newline at end of file +}