ov-components: add participant name visibility control to pre-join component

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"

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) {

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,

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

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