ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

image loading is modified

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
angular.json
View File

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

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

@ -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>

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

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

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

@ -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],

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

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

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

@ -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()

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

@ -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]

76
projects/ucap-webmessenger-ui/src/lib/pipes/image.pipe.ts Normal file
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;
})
);
}
}

9
projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
View File

@ -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: [],
declarations: [...DIALOGS],
exports: [...COMPONENTS, ...PIPES],
declarations: [...COMPONENTS, ...DIALOGS, ...PIPES],
entryComponents: [...DIALOGS]
})
export class UCapUiModule {

2
projects/ucap-webmessenger-ui/src/public-api.ts
View File

@ -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';

14
projects/ucap-webmessenger-ui/tslint.json
View File

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