diff --git a/projects/customizations-example/src/app/app.component.html b/projects/customizations-example/src/app/app.component.html index f9ca0b5e..0fdf491c 100644 --- a/projects/customizations-example/src/app/app.component.html +++ b/projects/customizations-example/src/app/app.component.html @@ -146,6 +146,8 @@ let-location="location" let-user="user" let-channel="channel" + let-initialsType="initialsType" + let-showOnlineIndicator="showOnlineIndicator" > diff --git a/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.html b/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.html index 1f6edde5..5bc16d1d 100644 --- a/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.html +++ b/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.html @@ -8,6 +8,7 @@ let-user="user" let-location="location" let-initialsType="initialsType" + let-showOnlineIndicator="showOnlineIndicator" > diff --git a/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts b/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts index ff344275..e3f4fd32 100644 --- a/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts +++ b/projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts @@ -15,6 +15,7 @@ import { AvatarType, DefaultStreamChatGenerics, } from '../types'; +import { ThemeService } from '../theme.service'; /** * The `AvatarPlaceholder` component displays the [default avatar](./AvatarComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This component is used by the SDK internally, you likely won't need to use it. @@ -61,6 +62,10 @@ export class AvatarPlaceholderComponent @Input() initialsType: | 'first-letter-of-first-word' | 'first-letter-of-each-word' = 'first-letter-of-first-word'; + /** + * If a channel avatar is displayed, and if the channel has exactly two members a green dot is displayed if the other member is online. Set this flag to `false` to turn off this behavior. + */ + @Input() showOnlineIndicator = true; context: AvatarContext = { name: undefined, imageUrl: undefined, @@ -70,28 +75,32 @@ export class AvatarPlaceholderComponent user: undefined, type: undefined, initialsType: undefined, + showOnlineIndicator: undefined, }; isVisible = true; private mutationObserver?: MutationObserver; constructor( public customTemplatesService: CustomTemplatesService, private hostElement: ElementRef, - private cdRef: ChangeDetectorRef + private cdRef: ChangeDetectorRef, + private themeService: ThemeService ) {} ngAfterViewInit(): void { - if (this.location !== 'message-sender') { - this.isVisible = true; - this.cdRef.detectChanges(); - return; - } - this.checkIfVisible(); const elementToObserve = this.hostElement.nativeElement.parentElement?.parentElement ?.parentElement; - if (!elementToObserve) { + if ( + this.location !== 'message-sender' || + !elementToObserve || + !elementToObserve.classList.contains('str-chat__li') || + this.themeService.themeVersion === '1' + ) { + this.isVisible = true; + this.cdRef.detectChanges(); return; } + this.checkIfVisible(); this.mutationObserver = new MutationObserver(() => { this.checkIfVisible(); }); @@ -110,6 +119,7 @@ export class AvatarPlaceholderComponent user: this.user, channel: this.channel, initialsType: this.initialsType, + showOnlineIndicator: this.showOnlineIndicator, }; } diff --git a/projects/stream-chat-angular/src/lib/types.ts b/projects/stream-chat-angular/src/lib/types.ts index 2f882f73..3f531b18 100644 --- a/projects/stream-chat-angular/src/lib/types.ts +++ b/projects/stream-chat-angular/src/lib/types.ts @@ -192,6 +192,7 @@ export type AvatarContext = { channel?: Channel; user?: User; initialsType?: 'first-letter-of-first-word' | 'first-letter-of-each-word'; + showOnlineIndicator?: boolean; }; export type AttachmentPreviewListContext = {