ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/902/head
CSantosM 2026-06-08 13:29:41 +02:00
parent 99d7660405
commit e28cd0e5c9
4 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html
View File

@ -12,14 +12,14 @@
#streamContainer #streamContainer
> >
<div <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" id="participant-name-container"
class="participant-name" class="participant-name"
[class.fullscreen]="isFullscreen" [class.fullscreen]="isFullscreen"
> >
<div class="participant-name-container"> <div class="participant-name-container">
<span id="participant-name">{{ _track.participant.name }}</span> <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>
</div> </div>

14
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts
View File

@ -55,6 +55,7 @@ export class StreamComponent implements OnInit, OnDestroy {
* @ignore * @ignore
*/ */
showVideoControls: boolean = true; showVideoControls: boolean = true;
/** /**
* @ignore * @ignore
*/ */
@ -91,8 +92,17 @@ export class StreamComponent implements OnInit, OnDestroy {
this._track = track; 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 _streamContainer: ElementRef;
private destroy$ = new Subject<void>(); private destroy$ = new Subject<void>();
private _hasDisplayParticipantNameOverride = false;
private readonly HOVER_TIMEOUT = 2000; private readonly HOVER_TIMEOUT = 2000;
/** /**
@ -187,7 +197,9 @@ export class StreamComponent implements OnInit, OnDestroy {
this.libService.displayParticipantName$ this.libService.displayParticipantName$
.pipe(takeUntil(this.destroy$)) .pipe(takeUntil(this.destroy$))
.subscribe((value: boolean) => { .subscribe((value: boolean) => {
this.showParticipantName = value; if (!this._hasDisplayParticipantNameOverride) {
this.showParticipantName = value;
}
// this.cd.markForCheck(); // this.cd.markForCheck();
}); });

17
openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/stream.directive.ts
View File

@ -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` * 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 * @example
* <ov-videoconference [streamDisplayParticipantName]="false"></ov-videoconference> * <ov-videoconference [streamDisplayParticipantName]="false"></ov-videoconference>
*
* \
* And it also can be used in the {@link StreamComponent}.
* @example
* <ov-stream [displayParticipantName]="false"></ov-stream>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[streamDisplayParticipantName], ov-stream[displayParticipantName]', selector: 'ov-videoconference[streamDisplayParticipantName]',
standalone: false standalone: false
}) })
export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnDestroy { export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnDestroy {
@ -29,10 +26,6 @@ export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnD
this.displayParticipantNameValue = value; this.displayParticipantNameValue = value;
this.update(this.displayParticipantNameValue); this.update(this.displayParticipantNameValue);
} }
@Input() set displayParticipantName(value: boolean) {
this.displayParticipantNameValue = value;
this.update(this.displayParticipantNameValue);
}
displayParticipantNameValue: boolean; displayParticipantNameValue: boolean;

8
openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/videoconference.directive.ts
View File

@ -496,10 +496,16 @@ export class LangOptionsDirective implements OnDestroy {
standalone: false standalone: false
}) })
export class ParticipantNameDirective implements AfterViewInit, OnDestroy { export class ParticipantNameDirective implements AfterViewInit, OnDestroy {
/**
* @ignore
*/
private _participantName: string;
/** /**
* @ignore * @ignore
*/ */
@Input() set participantName(name: string) { @Input() set participantName(name: string) {
this._participantName = name;
this.update(name); this.update(name);
} }
@ -515,7 +521,7 @@ export class ParticipantNameDirective implements AfterViewInit, OnDestroy {
* @ignore * @ignore
*/ */
ngAfterViewInit(): void { ngAfterViewInit(): void {
this.update(this.participantName); this.update(this._participantName);
} }
/** /**