From e373d23cc977787c97c5394456abe0f2aa93b679 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Wed, 12 Mar 2025 17:19:55 +0100
Subject: [PATCH] ov-components: add participant name visibility control to
 pre-join component

---
 .../pre-join/pre-join.component.html          |  2 +-
 .../components/pre-join/pre-join.component.ts |  6 ++++
 .../directives/api/api.directive.module.ts    |  4 ++-
 .../lib/directives/api/internals.directive.ts | 35 +++++++++++++++++++
 .../config/directive-config.service.ts        |  7 ++++
 5 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
index e9d51825..f2f0c4aa 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
@@ -40,7 +40,7 @@
 					></ov-audio-devices-select>
 				</div>
 
-				<div class="participant-name-container">
+				<div class="participant-name-container" *ngIf="showParticipantName">
 					<ov-participant-name-input
 						[isPrejoinPage]="true"
 						[error]="!!_error"
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
index d463ece1..eee9f73f 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
@@ -43,6 +43,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 	showCameraButton: boolean = true;
 	showMicrophoneButton: boolean = true;
 	showLogo: boolean = true;
+	showParticipantName: boolean = true;
 
 	videoTrack: LocalTrack | undefined;
 	audioTrack: LocalTrack | undefined;
@@ -52,6 +53,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 	private microphoneButtonSub: Subscription;
 	private minimalSub: Subscription;
 	private displayLogoSub: Subscription;
+	private displayParticipantNameSub: Subscription;
 	private shouldRemoveTracksWhenComponentIsDestroyed: boolean = true;
 
 	@HostListener('window:resize')
@@ -88,6 +90,7 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 		if (this.cameraButtonSub) this.cameraButtonSub.unsubscribe();
 		if (this.microphoneButtonSub) this.microphoneButtonSub.unsubscribe();
 		if (this.displayLogoSub) this.displayLogoSub.unsubscribe();
+		if (this.displayParticipantNameSub) this.displayParticipantNameSub.unsubscribe();
 
 		if (this.shouldRemoveTracksWhenComponentIsDestroyed) {
 			this.tracks.forEach((track) => {
@@ -151,6 +154,9 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 			if (value) this.participantName = value;
 			// this.cd.markForCheck();
 		});
+		this.displayParticipantNameSub = this.libService.prejoinDisplayParticipantName$.subscribe((value: boolean) => {
+			this.showParticipantName = value;
+		});
 	}
 
 	async videoEnabledChanged(enabled: boolean) {
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 dfa64dd9..ee9d0cdf 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
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { ActivitiesPanelBroadcastingActivityDirective, ActivitiesPanelRecordingActivityDirective } from './activities-panel.directive';
 import { AdminLoginErrorDirective, AdminDashboardRecordingsListDirective, AdminLoginTitleDirective, AdminDashboardTitleDirective } from './admin.directive';
-import { LayoutRemoteParticipantsDirective, FallbackLogoDirective, ToolbarBrandingLogoDirective } from './internals.directive';
+import { LayoutRemoteParticipantsDirective, FallbackLogoDirective, ToolbarBrandingLogoDirective, PrejoinDisplayParticipantName } from './internals.directive';
 import { ParticipantPanelItemMuteButtonDirective } from './participant-panel-item.directive';
 import {
 	StreamDisplayAudioDetectionDirective,
@@ -53,6 +53,7 @@ import {
 		// CaptionsLangOptionsDirective,
 		// CaptionsLangDirective,
 		PrejoinDirective,
+		PrejoinDisplayParticipantName,
 		VideoEnabledDirective,
 		AudioEnabledDirective,
 		ToolbarCameraButtonDirective,
@@ -96,6 +97,7 @@ import {
 		// CaptionsLangOptionsDirective,
 		// CaptionsLangDirective,
 		PrejoinDirective,
+		PrejoinDisplayParticipantName,
 		VideoEnabledDirective,
 		AudioEnabledDirective,
 		ToolbarCameraButtonDirective,
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 fb8ca0da..51e3d9ff 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
@@ -122,3 +122,38 @@ export class ToolbarBrandingLogoDirective implements AfterViewInit, OnDestroy {
 		this.libService.setBrandingLogo(value);
 	}
 }
+
+/**
+ * @internal
+ */
+@Directive({
+	selector: 'ov-videoconference[prejoinDisplayParticipantName]'
+})
+export class PrejoinDisplayParticipantName implements OnDestroy {
+	/**
+	 * @ignore
+	 */
+	@Input() set prejoinDisplayParticipantName(value: boolean) {
+		this.update(value);
+	}
+
+	/**
+	 * @ignore
+	 */
+	constructor(
+		public elementRef: ElementRef,
+		private libService: OpenViduComponentsConfigService
+	) {}
+
+	ngOnDestroy(): void {
+		this.clear();
+	}
+
+	private clear() {
+		this.update(true);
+	}
+
+	private update(value: boolean) {
+		this.libService.setPrejoinDisplayParticipantName(value);
+	}
+}
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 3b8db49f..20f85e24 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
@@ -25,6 +25,8 @@ export class OpenViduComponentsConfigService {
 	participantName$: Observable<string>;
 	private prejoin = <BehaviorSubject<boolean>>new BehaviorSubject(true);
 	prejoin$: Observable<boolean>;
+	private prejoinDisplayParticipantName = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+	prejoinDisplayParticipantName$: Observable<boolean>;
 
 	private videoEnabled = <BehaviorSubject<boolean>>new BehaviorSubject(true);
 	videoEnabled$: Observable<boolean>;
@@ -116,6 +118,7 @@ export class OpenViduComponentsConfigService {
 		this.minimal$ = this.minimal.asObservable();
 		this.participantName$ = this.participantName.asObservable();
 		this.prejoin$ = this.prejoin.asObservable();
+		this.prejoinDisplayParticipantName$ = this.prejoinDisplayParticipantName.asObservable();
 		this.videoEnabled$ = this.videoEnabled.asObservable();
 		this.audioEnabled$ = this.audioEnabled.asObservable();
 		//Toolbar observables
@@ -187,6 +190,10 @@ export class OpenViduComponentsConfigService {
 		this.prejoin.next(prejoin);
 	}
 
+	setPrejoinDisplayParticipantName(prejoinDisplayParticipantName: boolean) {
+		this.prejoinDisplayParticipantName.next(prejoinDisplayParticipantName);
+	}
+
 	isPrejoin(): boolean {
 		return this.prejoin.getValue();
 	}