From e28cd0e5c94ddce3a4d832f7328281646dfb210b Mon Sep 17 00:00:00 2001
From: CSantosM <4a.santos@gmail.com>
Date: Mon, 8 Jun 2026 13:29:41 +0200
Subject: [PATCH] ov-components: improve participant name display logic in
 StreamComponent and update directive documentation

---
 .../lib/components/stream/stream.component.html |  4 ++--
 .../lib/components/stream/stream.component.ts   | 14 +++++++++++++-
 .../src/lib/directives/api/stream.directive.ts  | 17 +++++------------
 .../directives/api/videoconference.directive.ts |  8 +++++++-
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html
index f4bd08b7a..45fa3ac84 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html
@@ -12,14 +12,14 @@
 	#streamContainer
 >
 	<div
-		*ngIf="!isMinimal && showParticipantName && !_track.isAudioTrack || (_track.isAudioTrack && _track.participant.onlyHasAudioTracks)"
+		*ngIf="(!isMinimal && showParticipantName && !_track.isAudioTrack) || (!isMinimal && showParticipantName && _track.isAudioTrack && _track.participant.onlyHasAudioTracks)"
 		id="participant-name-container"
 		class="participant-name"
 		[class.fullscreen]="isFullscreen"
 	>
 		<div class="participant-name-container">
 			<span id="participant-name">{{ _track.participant.name }}</span>
-			<span *ngIf="_track.isScreenTrack" id="participant-name">_SCREEN</span>
+			<span *ngIf="_track.isScreenTrack" id="participant-screen-label">_SCREEN</span>
 		</div>
 	</div>
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts
index 099b5bc71..5550eb442 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts
@@ -55,6 +55,7 @@ export class StreamComponent implements OnInit, OnDestroy {
 	 * @ignore
 	 */
 	showVideoControls: boolean = true;
+
 	/**
 	 * @ignore
 	 */
@@ -91,8 +92,17 @@ export class StreamComponent implements OnInit, OnDestroy {
 		this._track = track;
 	}
 
+	@Input()
+	set displayParticipantName(value: boolean) {
+		// A per-instance binding takes precedence over the global stream config and is
+		// immune to the timing window of the shared BehaviorSubject (see subscribeToStreamDirectives).
+		this._hasDisplayParticipantNameOverride = true;
+		this.showParticipantName = value;
+	}
+
 	private _streamContainer: ElementRef;
 	private destroy$ = new Subject<void>();
+	private _hasDisplayParticipantNameOverride = false;
 	private readonly HOVER_TIMEOUT = 2000;
 
 	/**
@@ -187,7 +197,9 @@ export class StreamComponent implements OnInit, OnDestroy {
 		this.libService.displayParticipantName$
 			.pipe(takeUntil(this.destroy$))
 			.subscribe((value: boolean) => {
-				this.showParticipantName = value;
+				if (!this._hasDisplayParticipantNameOverride) {
+					this.showParticipantName = value;
+				}
 				// this.cd.markForCheck();
 			});
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/stream.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/stream.directive.ts
index 28593e488..648e751ff 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/stream.directive.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/stream.directive.ts
@@ -6,22 +6,19 @@ function isVideoconferenceHost(elementRef: ElementRef): boolean {
 }
 
 /**
- * The **displayParticipantName** directive allows show/hide the participants name in stream component.
+ * The **streamDisplayParticipantName** directive allows show/hide the participants name in all stream components
+ * from the parent {@link VideoconferenceComponent}.
  *
  * Default: `true`
  *
- * It can be used in the parent element {@link VideoconferenceComponent} specifying the name of the `stream` component:
+ * To control visibility per individual stream use `[displayParticipantName]` directly on {@link StreamComponent}:
+ * `<ov-stream [displayParticipantName]="false"></ov-stream>`
  *
  * @example
  * <ov-videoconference [streamDisplayParticipantName]="false"></ov-videoconference>
- *
- * \
- * And it also can be used in the {@link StreamComponent}.
- * @example
- * <ov-stream [displayParticipantName]="false"></ov-stream>
  */
 @Directive({
-	selector: 'ov-videoconference[streamDisplayParticipantName], ov-stream[displayParticipantName]',
+	selector: 'ov-videoconference[streamDisplayParticipantName]',
 	standalone: false
 })
 export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnDestroy {
@@ -29,10 +26,6 @@ export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnD
 		this.displayParticipantNameValue = value;
 		this.update(this.displayParticipantNameValue);
 	}
-	@Input() set displayParticipantName(value: boolean) {
-		this.displayParticipantNameValue = value;
-		this.update(this.displayParticipantNameValue);
-	}
 
 	displayParticipantNameValue: boolean;
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/videoconference.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/videoconference.directive.ts
index a22102246..e59e27b49 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/videoconference.directive.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/videoconference.directive.ts
@@ -496,10 +496,16 @@ export class LangOptionsDirective implements OnDestroy {
 	standalone: false
 })
 export class ParticipantNameDirective implements AfterViewInit, OnDestroy {
+	/**
+	 * @ignore
+	 */
+	private _participantName: string;
+
 	/**
 	 * @ignore
 	 */
 	@Input() set participantName(name: string) {
+		this._participantName = name;
 		this.update(name);
 	}
 
@@ -515,7 +521,7 @@ export class ParticipantNameDirective implements AfterViewInit, OnDestroy {
 	 * @ignore
 	 */
 	ngAfterViewInit(): void {
-		this.update(this.participantName);
+		this.update(this._participantName);
 	}
 
 	/**