image loading is modified

This commit is contained in:
병준 박 2019-10-17 16:57:37 +09:00
parent a342dda830
commit 7ab38da3cb
11 changed files with 120 additions and 32 deletions

View File

@ -1375,9 +1375,7 @@
"projects/ucap-webmessenger-ui-group/tsconfig.lib.json", "projects/ucap-webmessenger-ui-group/tsconfig.lib.json",
"projects/ucap-webmessenger-ui-group/tsconfig.spec.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.lib.json",
"projects/ucap-webmessenger-util-translate/tsconfig.spec.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.lib.json",
"projects/ucap-webmessenger-native-browser/tsconfig.spec.json" "projects/ucap-webmessenger-native-browser/tsconfig.spec.json"
], ],
"exclude": [ "exclude": ["**/node_modules/**"]
"**/node_modules/**"
]
} }
} }
} }

View File

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

View File

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

View File

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

View File

@ -11,8 +11,15 @@
<dt> <dt>
<img <img
class="thumbnail" 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> </dt>
<dd class="info"> <dd class="info">

View File

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

View File

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

View File

@ -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;
})
);
}
}

View File

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

View File

@ -7,6 +7,8 @@ export * from './lib/animations';
export * from './lib/dialogs/alert.dialog.component'; export * from './lib/dialogs/alert.dialog.component';
export * from './lib/dialogs/confirm.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/bottom-sheet.service';
export * from './lib/services/clipboard.service'; export * from './lib/services/clipboard.service';
export * from './lib/services/dialog.service'; export * from './lib/services/dialog.service';

View File

@ -1,17 +1,7 @@
{ {
"extends": "../../tslint.json", "extends": "../../tslint.json",
"rules": { "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"
]
} }
} }