image loading is modified

angular.json

@@ -1375,9 +1375,7 @@
               "projects/ucap-webmessenger-ui-group/tsconfig.lib.json",
               "projects/ucap-webmessenger-ui-group/tsconfig.spec.json"
             ],
-            "exclude": [
+            "exclude": ["**/node_modules/**"]
-              "**/node_modules/**"
-            ]
           }
         }
       }
@@ -1410,9 +1408,7 @@
               "projects/ucap-webmessenger-util-translate/tsconfig.lib.json",
               "projects/ucap-webmessenger-util-translate/tsconfig.spec.json"
             ],
-            "exclude": [
+            "exclude": ["**/node_modules/**"]
-              "**/node_modules/**"
-            ]
           }
         }
       }
@@ -1445,9 +1441,7 @@
               "projects/ucap-webmessenger-native-browser/tsconfig.lib.json",
               "projects/ucap-webmessenger-native-browser/tsconfig.spec.json"
             ],
-            "exclude": [
+            "exclude": ["**/node_modules/**"]
-              "**/node_modules/**"
-            ]
           }
         }
       }

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

@@ -51,10 +51,17 @@
         <ul>
           <li *ngIf="getUserProfile(message.senderSeq) != ''">
             <img
-              [src]="getUserProfile(message.senderSeq)"
-              onerror="this.src='assets/images/img_nophoto_50.png'"
               class="avatar"
               style="width: 50px; height: 50px;"
+              [src]="
+                profileImageRoot
+                  | ucapUiImaage
+                    : {
+                        path: getUserProfile(message.senderSeq),
+                        default: 'assets/images/img_nophoto_50.png'
+                      }
+                  | async
+              "
             />
           </li>
           <li>

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

@@ -85,7 +85,7 @@ export class MessagesComponent implements OnInit {
       user => user.seq === seq
     );
     if (!!userInfo && userInfo.length > 0) {
-      return this.profileImageRoot + userInfo[0].profileImageFile;
+      return userInfo[0].profileImageFile;
     }
     return '';
   }

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

@@ -10,6 +10,8 @@ import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 
+import { UCapUiModule } from '@ucap-webmessenger/ui';
+
 import { FormComponent } from './components/form.component';
 import { MessagesComponent } from './components/messages.component';
 
@@ -62,7 +64,9 @@ const PROVIDERS = [DatePipe];
     MatIconModule,
     MatInputModule,
     MatButtonModule,
-    MatMenuModule
+    MatMenuModule,
+
+    UCapUiModule
   ],
   exports: [...COMPONENTS],
   declarations: [...COMPONENTS],

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

@@ -11,8 +11,15 @@
     <dt>
       <img
         class="thumbnail"
-        [src]="profileImageRoot + userInfo.profileImageFile"
+        [src]="
-        onerror="this.src='assets/images/img_nophoto_50.png'"
+          profileImageRoot
+            | ucapUiImaage
+              : {
+                  path: userInfo.profileImageFile,
+                  default: 'assets/images/img_nophoto_50.png'
+                }
+            | async
+        "
       />
     </dt>
     <dd class="info">

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

@@ -36,7 +36,6 @@ export class UserListItemComponent implements OnInit, OnDestroy {
   profileImageRoot?: string;
   @Input()
   set presence(value: StatusBulkInfo | StatusInfo) {
-    this.logger.debug('presence', value);
     this.userPresence = value;
   }
   @Input()

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

@@ -3,12 +3,14 @@ import { CommonModule } from '@angular/common';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+import { MatRippleModule, MatCheckboxModule } from '@angular/material';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 
+import { UCapUiModule } from '@ucap-webmessenger/ui';
+
 import { ListItemComponent } from './components/list-item.component';
 import { UserListItemComponent } from './components/user-list-item.component';
-import { MatRippleModule, MatCheckboxModule } from '@angular/material';
 
 const COMPONENTS = [ListItemComponent, UserListItemComponent];
 
@@ -21,7 +23,9 @@ const SERVICES = [];
     MatButtonModule,
     MatIconModule,
     MatRippleModule,
-    MatCheckboxModule
+    MatCheckboxModule,
+
+    UCapUiModule
   ],
   exports: [...COMPONENTS],
   declarations: [...COMPONENTS]

projects/ucap-webmessenger-ui/src/lib/pipes/image.pipe.ts

@@ -0,0 +1,76 @@
+import { PipeTransform, Pipe } from '@angular/core';
+import { of, Observable } from 'rxjs';
+import { NGXLogger } from 'ngx-logger';
+import { HttpClient } from '@angular/common/http';
+import { take, map, catchError, switchMap, tap } from 'rxjs/operators';
+
+export interface ImagePipeParameter {
+  path?: string;
+  validation?: boolean;
+  default?: string;
+}
+
+@Pipe({ name: 'ucapUiImaage' })
+export class ImagePipe implements PipeTransform {
+  constructor(private httpClient: HttpClient, private logger: NGXLogger) {}
+
+  transform(
+    base: string,
+    params?: ImagePipeParameter
+  ): Observable<string | ArrayBuffer> {
+    params = !!params ? params : {};
+    params.validation = !!params.validation ? params.validation : true;
+
+    if (params.validation) {
+      if (
+        !base ||
+        '' === base.trim() ||
+        !params.path ||
+        '' === params.path.trim()
+      ) {
+        return of(params.default);
+      }
+    }
+
+    const imageUrl = `${base}${params.path}`;
+
+    return new Observable<string | ArrayBuffer>(subscriber => {
+      subscriber.next(params.default);
+
+      this.httpClient
+        .get(imageUrl, { responseType: 'blob' })
+        .pipe(
+          take(1),
+          tap(blob => {
+            const reader = new FileReader();
+            reader.onloadend = ev => {
+              subscriber.next(reader.result);
+            };
+            reader.readAsDataURL(blob);
+          }),
+          catchError(err => {
+            this.logger.error(err);
+            return params.default;
+          })
+        )
+        .subscribe();
+    });
+
+    return this.httpClient.get(imageUrl, { responseType: 'blob' }).pipe(
+      take(1),
+      switchMap(blob => {
+        return new Observable<string | ArrayBuffer>(subscriber => {
+          const reader = new FileReader();
+          reader.onloadend = ev => {
+            subscriber.next(reader.result);
+          };
+          reader.readAsDataURL(blob);
+        });
+      }),
+      catchError(err => {
+        this.logger.error(err);
+        return params.default;
+      })
+    );
+  }
+}

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

@@ -8,6 +8,8 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
 
+const COMPONENTS = [];
+
 import { BottomSheetService } from './services/bottom-sheet.service';
 import { ClipboardService } from './services/clipboard.service';
 import { DialogService } from './services/dialog.service';
@@ -23,6 +25,9 @@ import { AlertDialogComponent } from './dialogs/alert.dialog.component';
 import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component';
 const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
 
+import { ImagePipe } from './pipes/image.pipe';
+const PIPES = [ImagePipe];
+
 @NgModule({
   imports: [
     CommonModule,
@@ -32,8 +37,8 @@ const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
     MatSnackBarModule,
     DragDropModule
   ],
-  exports: [],
+  exports: [...COMPONENTS, ...PIPES],
-  declarations: [...DIALOGS],
+  declarations: [...COMPONENTS, ...DIALOGS, ...PIPES],
   entryComponents: [...DIALOGS]
 })
 export class UCapUiModule {

projects/ucap-webmessenger-ui/src/public-api.ts

@@ -7,6 +7,8 @@ export * from './lib/animations';
 export * from './lib/dialogs/alert.dialog.component';
 export * from './lib/dialogs/confirm.dialog.component';
 
+export * from './lib/pipes/image.pipe';
+
 export * from './lib/services/bottom-sheet.service';
 export * from './lib/services/clipboard.service';
 export * from './lib/services/dialog.service';

projects/ucap-webmessenger-ui/tslint.json

@@ -1,17 +1,7 @@
 {
   "extends": "../../tslint.json",
   "rules": {
-    "directive-selector": [
+    "directive-selector": [true, "attribute", "ucapUi", "camelCase"],
-      true,
+    "component-selector": [true, "element", "ucap-ui", "kebab-case"]
-      "attribute",
-      "ucapUi",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "ucap-ui",
-      "kebab-case"
-    ]
   }
 }