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

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

master
Carlos Santos 2025-08-13 12:49:03 +02:00
parent 6c78abdcc0
commit 020413257f
5 changed files with 88 additions and 7 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/components/toolbar/toolbar.component.html
View File

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

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

@ -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 = '';
}
}
}

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

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

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

@ -473,4 +473,54 @@ export class RecordingActivityShowRecordingsListDirective implements AfterViewIn
private update(value: boolean) {
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 || '' });
}
}

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

@ -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 });
}
@ -575,4 +583,4 @@ export class OpenViduComponentsConfigService {
showRecordingActivityRecordingsList(): boolean {
return this.recordingActivityConfig.subject.getValue().showRecordingsList;
}
}
}