image component is added

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -50,7 +50,7 @@
       <div>
         <ul>
           <li *ngIf="getUserProfile(message.senderSeq) != ''">
-            <img
+            <!-- <img
               class="avatar"
               style="width: 50px; height: 50px;"
               [src]="
@@ -62,7 +62,14 @@
                       }
                   | async
               "
-            />
+            /> -->
+            <ucap-ui-imaage
+              [style]="'width: 50px; height: 50px;'"
+              [imageClass]="'avatar'"
+              [base]="profileImageRoot"
+              [path]="getUserProfile(message.senderSeq)"
+              [default]="'assets/images/img_nophoto_50.png'"
+            ></ucap-ui-imaage>
           </li>
           <li>
             {{ getUserName(message.senderSeq) }}

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -4,9 +4,7 @@ import {
   Input,
   EventEmitter,
   Output,
-  ViewChild,
+  ViewEncapsulation
-  ViewChildren,
-  QueryList
 } from '@angular/core';
 
 import { Info, EventType } from '@ucap-webmessenger/protocol-event';
@@ -24,7 +22,8 @@ import { MatMenu, MatMenuTrigger } from '@angular/material';
 @Component({
   selector: 'ucap-chat-messages',
   templateUrl: './messages.component.html',
-  styleUrls: ['./messages.component.scss']
+  styleUrls: ['./messages.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class MessagesComponent implements OnInit {
   @Input()

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html

@@ -9,7 +9,7 @@
   </span>
   <dl class="item-default">
     <dt>
-      <img
+      <!-- <img
         class="thumbnail"
         [src]="
           profileImageRoot
@@ -20,7 +20,14 @@
                 }
             | async
         "
-      />
+      /> -->
+
+      <ucap-ui-imaage
+        [imageClass]="'thumbnail'"
+        [base]="profileImageRoot"
+        [path]="userInfo.profileImageFile"
+        [default]="'assets/images/img_nophoto_50.png'"
+      ></ucap-ui-imaage>
     </dt>
     <dd class="info">
       <div class="detail">
@@ -40,7 +47,12 @@
       </div>
     </dd>
   </dl>
-  <mat-checkbox *ngIf="checkable" #checkbox [checked]="isChecked" (change)="onChangeCheck(checkbox.checked, userInfo)"
+  <mat-checkbox
-    (click)="$event.stopPropagation()">
+    *ngIf="checkable"
+    #checkbox
+    [checked]="isChecked"
+    (change)="onChangeCheck(checkbox.checked, userInfo)"
+    (click)="$event.stopPropagation()"
+  >
   </mat-checkbox>
 </div>

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts

@@ -4,7 +4,8 @@ import {
   Input,
   OnDestroy,
   Output,
-  EventEmitter
+  EventEmitter,
+  ViewEncapsulation
 } from '@angular/core';
 import { UserInfo } from '@ucap-webmessenger/protocol-sync';
 import {
@@ -23,12 +24,12 @@ import { StatusCode } from '@ucap-webmessenger/core';
 
 import { PresenceType } from '../types/presence-type.type';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
-import { MatCheckboxChange, MatPseudoCheckbox } from '@angular/material';
 
 @Component({
   selector: 'ucap-profile-user-list-item',
   templateUrl: './user-list-item.component.html',
-  styleUrls: ['./user-list-item.component.scss']
+  styleUrls: ['./user-list-item.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class UserListItemComponent implements OnInit, OnDestroy {
   @Input()

projects/ucap-webmessenger-ui/src/lib/components/image.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImageComponent } from './image.component';
+
+describe('UI::ImageComponent', () => {
+  let component: ImageComponent;
+  let fixture: ComponentFixture<ImageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ImageComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-ui/src/lib/components/image.component.ts

@@ -0,0 +1,115 @@
+import { Component, OnInit, Input, ElementRef } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { take } from 'rxjs/operators';
+import { NGXLogger } from 'ngx-logger';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+import { ucapAnimations } from '../animations';
+
+@Component({
+  selector: 'ucap-ui-imaage',
+  template: `
+    <img
+      [src]="imageSrc"
+      [style]="baseStyle"
+      [ngClass]="classList"
+      [@fadeInOut]
+    />
+  `,
+  styles: [],
+  animations: ucapAnimations
+})
+export class ImageComponent implements OnInit {
+  @Input()
+  base: string;
+
+  @Input()
+  path: string;
+
+  @Input()
+  validation = true;
+
+  @Input()
+  default: string;
+
+  @Input()
+  set style(style: string | object) {
+    let mappedStyles = style as string;
+
+    if (typeof style === 'object') {
+      mappedStyles = Object.entries(style).reduce(
+        (styleString, [propName, propValue]) => {
+          propName = propName.replace(
+            /([A-Z])/g,
+            matches => `-${matches[0].toLowerCase()}`
+          );
+          return `${styleString}${propName}:${propValue};`;
+        },
+        ''
+      );
+
+      this.baseStyle = this.domSanitizer.bypassSecurityTrustStyle(mappedStyles);
+    } else if (typeof style === 'string') {
+      this.baseStyle = this.domSanitizer.bypassSecurityTrustStyle(mappedStyles);
+    }
+  }
+
+  @Input()
+  set imageClass(classes: string) {
+    if (classes && classes.length) {
+      classes.split(' ').forEach((className: string) => {
+        this.classList[className] = true;
+      });
+
+      this.elementRef.nativeElement.className = '';
+    }
+  }
+
+  baseStyle: SafeStyle;
+  imageSrc: string | ArrayBuffer;
+  classList: { [key: string]: boolean } = {};
+
+  constructor(
+    private elementRef: ElementRef<HTMLElement>,
+    private domSanitizer: DomSanitizer,
+    private httpClient: HttpClient,
+    private logger: NGXLogger
+  ) {
+    this.imageSrc = null;
+  }
+
+  ngOnInit() {
+    if (this.validation) {
+      if (
+        !this.base ||
+        '' === this.base.trim() ||
+        !this.path ||
+        '' === this.path.trim()
+      ) {
+        this.imageSrc = this.default;
+      }
+    }
+
+    if (!this.imageSrc) {
+      this.imageSrc = this.default;
+
+      const imageUrl = `${this.base}${this.path}`;
+
+      this.httpClient
+        .get(imageUrl, { responseType: 'blob' })
+        .pipe(take(1))
+        .subscribe(
+          blob => {
+            const reader = new FileReader();
+            reader.onloadend = ev => {
+              this.imageSrc = reader.result;
+            };
+            reader.readAsDataURL(blob);
+          },
+          error => {
+            this.imageSrc = this.default;
+          }
+        );
+    }
+  }
+}

projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts

@@ -8,7 +8,8 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
 
-const COMPONENTS = [];
+import { ImageComponent } from './components/image.component';
+const COMPONENTS = [ImageComponent];
 
 import { BottomSheetService } from './services/bottom-sheet.service';
 import { ClipboardService } from './services/clipboard.service';