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
>
{{ _track.participant.name }}
- _SCREEN
+ _SCREEN
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();
+ 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}:
+ * ``
*
* @example
*
- *
- * \
- * And it also can be used in the {@link StreamComponent}.
- * @example
- *
*/
@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);
}
/**