diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html index 6992803c..1d22fb6b 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html @@ -50,7 +50,7 @@
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts index 82616cc1..dc882336 100644 --- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.ts +++ b/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() diff --git a/projects/ucap-webmessenger-ui/src/lib/components/image.component.spec.ts b/projects/ucap-webmessenger-ui/src/lib/components/image.component.spec.ts new file mode 100644 index 00000000..ef808505 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ImageComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ImageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ucap-webmessenger-ui/src/lib/components/image.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/image.component.ts new file mode 100644 index 00000000..20834c2a --- /dev/null +++ b/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: ` + + `, + 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, + 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; + } + ); + } + } +} diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts index 31d6bb13..a3a636df 100644 --- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts +++ b/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';