ov-components: improve participant name display logic in StreamComponent and update directive documentation

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>
 

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) => {
+				if (!this._hasDisplayParticipantNameOverride) {
 					this.showParticipantName = value;
+				}
 				// this.cd.markForCheck();
 			});
 

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;
 

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);
 	}
 
 	/**