feat: Additional inputs to avatar #260

Author: szuperaz

projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.html

@@ -3,11 +3,19 @@
   let-name="name"
   let-imageUrl="imageUrl"
   let-size="size"
+  let-type="type"
+  let-channel="channel"
+  let-user="user"
+  let-location="location"
 >
   <stream-avatar
     [name]="name"
     [imageUrl]="imageUrl"
     [size]="size"
+    [type]="type"
+    [channel]="channel"
+    [user]="user"
+    [location]="location"
   ></stream-avatar>
 </ng-template>
 <ng-container

projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.spec.ts

@@ -1,6 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { Channel } from 'stream-chat';
 import { AvatarComponent } from '../avatar/avatar.component';
+import { DefaultStreamChatGenerics } from '../types';
 
 import { AvatarPlaceholderComponent } from './avatar-placeholder.component';
 
@@ -33,10 +35,25 @@ describe('AvatarPlaceholderComponent', () => {
     component.imageUrl = 'imageUrl';
     component.name = 'name';
     component.size = 5;
+    component.type = 'user';
+    component.location = 'autocomplete-item';
+    const user = { id: 'user-id' };
+    component.user = user;
     fixture.detectChanges();
 
     expect(avatar.imageUrl).toBe('imageUrl');
     expect(avatar.name).toBe('name');
     expect(avatar.size).toBe(5);
+    expect(avatar.type).toBe('user');
+    expect(avatar.location).toBe('autocomplete-item');
+    expect(avatar.user).toBe(user);
+
+    component.type = 'channel';
+    const channel = { id: 'channel-id' } as Channel<DefaultStreamChatGenerics>;
+    component.channel = channel;
+    fixture.detectChanges();
+
+    expect(avatar.type).toEqual('channel');
+    expect(avatar.channel).toEqual(channel);
   });
 });

projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts

@@ -1,6 +1,12 @@
 import { Component, Input } from '@angular/core';
+import { Channel, User } from 'stream-chat';
 import { CustomTemplatesService } from '../custom-templates.service';
-import { AvatarContext } from '../types';
+import {
+  AvatarContext,
+  AvatarLocation,
+  AvatarType,
+  DefaultStreamChatGenerics,
+} from '../types';
 
 /**
  * The `AvatarPlaceholder` component displays the [default avatar](./AvatarComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This componet is used by the SDK internally, you likely won't need to use it.
@@ -23,13 +29,33 @@ export class AvatarPlaceholderComponent {
    * The size in pixels of the avatar image.
    */
   @Input() size = 32;
+  /**
+   * The location the avatar will be displayed in
+   */
+  @Input() location: AvatarLocation | undefined;
+  /**
+   * The channel the avatar belongs to (if avatar of a channel is displayed)
+   */
+  @Input() channel?: Channel<DefaultStreamChatGenerics>;
+  /**
+   * The user the avatar belongs to (if avatar of a user is displayed)
+   */
+  @Input() user?: User<DefaultStreamChatGenerics>;
+  /**
+   * The type of the avatar: channel if channel avatar is displayed, user if user avatar is displayed
+   */
+  @Input() type: AvatarType | undefined;
   constructor(public customTemplatesService: CustomTemplatesService) {}
 
   getAvatarContext(): AvatarContext {
     return {
       name: this.name,
       imageUrl: this.imageUrl,
       size: this.size,
+      location: this.location,
+      type: this.type,
+      user: this.user,
+      channel: this.channel,
     };
   }
 }

projects/stream-chat-angular/src/lib/avatar/avatar.component.html

@@ -1,5 +1,7 @@
 <div
-  class="str-chat__avatar str-chat__avatar--circle"
+  class="str-chat__avatar str-chat__avatar--circle stream-chat__avatar--{{
+    location
+  }}"
   title="{{ name }}"
   [style]="{
     flexBasis: size + 'px',

projects/stream-chat-angular/src/lib/avatar/avatar.component.spec.ts

@@ -1,4 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChatClientService } from '../chat-client.service';
+import { generateMockChannels } from '../mocks';
 import { AvatarComponent } from './avatar.component';
 
 describe('AvatarComponent', () => {
@@ -8,10 +10,15 @@ describe('AvatarComponent', () => {
   const imageUrl = 'https://picsum.photos/200/300';
   let queryImg: () => HTMLImageElement | null;
   let queryFallbackImg: () => HTMLImageElement | null;
+  let chatClientServiceMock: { chatClient: { user: { id: string } } };
 
   beforeEach(() => {
+    chatClientServiceMock = { chatClient: { user: { id: 'current-user' } } };
     TestBed.configureTestingModule({
       declarations: [AvatarComponent],
+      providers: [
+        { provide: ChatClientService, useValue: chatClientServiceMock },
+      ],
     });
     fixture = TestBed.createComponent(AvatarComponent);
     component = fixture.componentInstance;
@@ -72,6 +79,7 @@ describe('AvatarComponent', () => {
 
   it(`should display fallback image if #imageUrl wasn't provided`, () => {
     component.name = 'John Doe';
+    component.type = 'user';
     fixture.detectChanges();
     const img = queryImg();
     const fallbackImg = queryFallbackImg();
@@ -83,6 +91,7 @@ describe('AvatarComponent', () => {
   });
 
   it('should display initials correctly', () => {
+    component.type = 'user';
     component.name = 'John Doe';
     fixture.detectChanges();
 
@@ -97,5 +106,63 @@ describe('AvatarComponent', () => {
     fixture.detectChanges();
 
     expect(component.initials).toBe('');
+
+    let channel = generateMockChannels()[0];
+    channel.data!.name = undefined;
+    component.channel = channel;
+    component.type = 'channel';
+    fixture.detectChanges();
+
+    expect(component.initials).toBe('#');
+
+    channel = generateMockChannels()[0];
+    channel.data!.name = 'Test';
+    channel.state.members = {
+      otheruser: {
+        user_id: 'otheruser',
+        user: { id: 'otheruser', name: 'Jack' },
+      },
+      [chatClientServiceMock.chatClient.user.id]: {
+        user_id: chatClientServiceMock.chatClient.user.id,
+        user: { id: chatClientServiceMock.chatClient.user.id, name: 'Sara' },
+      },
+    };
+    component.channel = channel;
+    component.type = 'channel';
+    fixture.detectChanges();
+
+    expect(component.initials).toBe('T');
+
+    channel = generateMockChannels()[0];
+    channel.data!.name = undefined;
+    channel.state.members = {
+      otheruser: {
+        user_id: 'otheruser',
+        user: { id: 'otheruser', name: 'Jack' },
+      },
+      [chatClientServiceMock.chatClient.user.id]: {
+        user_id: chatClientServiceMock.chatClient.user.id,
+        user: { id: chatClientServiceMock.chatClient.user.id, name: 'Sara' },
+      },
+    };
+    component.channel = channel;
+    fixture.detectChanges();
+
+    expect(component.initials).toBe('J');
+
+    channel.state.members = {
+      otheruser: {
+        user_id: 'otheruser',
+        user: { id: 'otheruser', name: 'Jack' },
+      },
+      otheruser2: {
+        user_id: 'otheruser2',
+        user: { id: 'otheruser2', name: 'Sara' },
+      },
+    };
+    component.channel = channel;
+    fixture.detectChanges();
+
+    expect(component.initials).toBe('#');
   });
 });

projects/stream-chat-angular/src/lib/avatar/avatar.component.ts

@@ -1,4 +1,11 @@
 import { Component, Input } from '@angular/core';
+import { Channel, User } from 'stream-chat';
+import { ChatClientService } from '../chat-client.service';
+import {
+  AvatarLocation,
+  AvatarType,
+  DefaultStreamChatGenerics,
+} from '../types';
 
 /**
  * The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
@@ -21,12 +28,49 @@ export class AvatarComponent {
    * The size in pixels of the avatar image.
    */
   @Input() size = 32;
+  /**
+   * The location the avatar will be displayed in
+   */
+  @Input() location: AvatarLocation | undefined;
+  /**
+   * The channel the avatar belongs to (if avatar of a channel is displayed)
+   */
+  @Input() channel?: Channel<DefaultStreamChatGenerics>;
+  /**
+   * The user the avatar belongs to (if avatar of a user is displayed)
+   */
+  @Input() user?: User<DefaultStreamChatGenerics>;
+  /**
+   * The type of the avatar: channel if channel avatar is displayed, user if user avatar is displayed
+   */
+  @Input() type: AvatarType | undefined;
   isLoaded = false;
   isError = false;
 
-  constructor() {}
+  constructor(private chatClientService: ChatClientService) {}
 
   get initials() {
-    return (this.name?.toString() || '').charAt(0);
+    let result: string = '';
+    if (this.type === 'user') {
+      result = this.name?.toString() || '';
+    } else if (this.type === 'channel') {
+      if (this.channel?.data?.name) {
+        result = this.channel?.data?.name;
+      } else {
+        const otherMembers = Object.values(
+          this.channel?.state?.members || {}
+        ).filter(
+          (m) => m.user_id !== this.chatClientService.chatClient.user!.id
+        );
+        if (otherMembers.length === 1) {
+          result =
+            otherMembers[0].user?.name || otherMembers[0].user?.name || '';
+        } else {
+          result = '#';
+        }
+      }
+    }
+
+    return result.charAt(0) || '';
   }
 }

projects/stream-chat-angular/src/lib/channel-header/channel-header.component.html

@@ -9,6 +9,9 @@
   <stream-avatar-placeholder
     imageUrl="{{ activeChannel?.data?.image }}"
     name="{{ avatarName }}"
+    type="channel"
+    location="channel-header"
+    [channel]="activeChannel"
   ></stream-avatar-placeholder>
   <div class="str-chat__header-livestream-left">
     <p data-testid="name" class="str-chat__header-livestream-left--title">

projects/stream-chat-angular/src/lib/channel-header/channel-header.component.spec.ts

@@ -1,17 +1,21 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
 import { Channel, UserResponse } from 'stream-chat';
+import { AvatarPlaceholderComponent } from '../avatar-placeholder/avatar-placeholder.component';
 import { ChannelService } from '../channel.service';
 import { ChatClientService } from '../chat-client.service';
 import { StreamI18nService } from '../stream-i18n.service';
+import { DefaultStreamChatGenerics } from '../types';
 import { ChannelHeaderComponent } from './channel-header.component';
 
 describe('ChannelHeaderComponent', () => {
   let fixture: ComponentFixture<ChannelHeaderComponent>;
   let nativeElement: HTMLElement;
   let queryName: () => HTMLElement | null;
   let queryInfo: () => HTMLElement | null;
+  let queryAvatar: () => AvatarPlaceholderComponent;
   let channelServiceMock: {
     activeChannel$: Subject<Channel>;
   };
@@ -28,7 +32,7 @@ describe('ChannelHeaderComponent', () => {
     };
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
-      declarations: [ChannelHeaderComponent],
+      declarations: [ChannelHeaderComponent, AvatarPlaceholderComponent],
       providers: [
         { provide: ChannelService, useValue: channelServiceMock },
         { provide: ChatClientService, useValue: chatClientServiceMock },
@@ -40,6 +44,9 @@ describe('ChannelHeaderComponent', () => {
     nativeElement = fixture.nativeElement as HTMLElement;
     queryName = () => nativeElement.querySelector('[data-testid="name"]');
     queryInfo = () => nativeElement.querySelector('[data-testid="info"]');
+    queryAvatar = () =>
+      fixture.debugElement.query(By.directive(AvatarPlaceholderComponent))
+        .componentInstance as AvatarPlaceholderComponent;
   });
 
   it('should display members count', () => {
@@ -87,4 +94,25 @@ describe('ChannelHeaderComponent', () => {
 
     expect(queryInfo()?.textContent).not.toContain('5 online');
   });
+
+  it('should display avatar component', () => {
+    const channel = {
+      id: 'running-club',
+      data: {
+        name: 'Running club',
+        image: 'url/to/img',
+      },
+    } as any as Channel;
+    channelServiceMock.activeChannel$.next(channel);
+    const avatar = queryAvatar();
+    fixture.detectChanges();
+
+    expect(avatar.name).toBe('Running club');
+    expect(avatar.imageUrl).toBe('url/to/img');
+    expect(avatar.type).toBe('channel');
+    expect(avatar.location).toBe('channel-header');
+    expect(avatar.channel).toBe(
+      channel as any as Channel<DefaultStreamChatGenerics>
+    );
+  });
 });

projects/stream-chat-angular/src/lib/channel-header/channel-header.component.ts

@@ -89,15 +89,6 @@ export class ChannelHeaderComponent implements OnInit, OnDestroy {
   }
 
   get avatarName() {
-    if (this.activeChannel?.data?.name) {
-      return this.activeChannel?.data?.name;
-    }
-    const otherMembers = Object.values(
-      this.activeChannel?.state.members || {}
-    ).filter((m) => m.user_id !== this.chatClientService.chatClient.user!.id);
-    if (otherMembers.length === 1) {
-      return otherMembers[0].user?.name || otherMembers[0].user?.name;
-    }
-    return '#';
+    return this.activeChannel?.data?.name;
   }
 }

projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.html

@@ -7,9 +7,12 @@
 >
   <div class="str-chat__channel-preview-messenger--left">
     <stream-avatar-placeholder
-      imageUrl="{{ avatarImage }}"
       name="{{ avatarName }}"
+      imageUrl="{{ avatarImage }}"
       [size]="40"
+      type="channel"
+      [channel]="channel"
+      location="channel-preview"
     ></stream-avatar-placeholder>
   </div>
   <div class="str-chat__channel-preview-messenger--right">