Merge pull request #472 from GetStream/avatar-inputs

Avatar inputs

Author: szuperaz

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"
 >
   <stream-avatar
     [name]="name"
@@ -155,6 +157,8 @@
     [location]="location"
     [user]="user"
     [channel]="channel"
+    [initialsType]="initialsType"
+    [showOnlineIndicator]="showOnlineIndicator"
   ></stream-avatar>
 </ng-template>
 

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"
 >
   <stream-avatar
     [name]="name"
@@ -18,6 +19,7 @@
     [user]="user"
     [location]="location"
     [initialsType]="initialsType"
+    [showOnlineIndicator]="showOnlineIndicator"
   ></stream-avatar>
 </ng-template>
 <ng-container *ngIf="isVisible; else emptyPlaceholder">

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<HTMLElement>,
-    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,
     };
   }
 

projects/stream-chat-angular/src/lib/types.ts

@@ -192,6 +192,7 @@ export type AvatarContext = {
   channel?: Channel<DefaultStreamChatGenerics>;
   user?: User<DefaultStreamChatGenerics>;
   initialsType?: 'first-letter-of-first-word' | 'first-letter-of-each-word';
+  showOnlineIndicator?: boolean;
 };
 
 export type AttachmentPreviewListContext = {