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 = {