From f6727a61c8edee350ff1945a6c04fa62fa212910 Mon Sep 17 00:00:00 2001 From: richard-loafle <44828666+richard-loafle@users.noreply.github.com> Date: Mon, 17 Feb 2020 14:39:38 +0900 Subject: [PATCH 1/2] refactoring --- package-lock.json | 11 +-- package.json | 1 - .../src/lib/services/common-api.service.ts | 82 ++++++++----------- .../components/messages.component.ts | 34 +++----- .../src/lib/utils/file.util.ts | 2 +- .../lib/components/messages.component.html | 9 +- .../lib/components/messages.component.scss | 2 - .../src/lib/components/messages.component.ts | 18 ++-- .../src/lib/components/write.component.ts | 5 +- .../directives/file-upload-for.directive.ts | 53 +----------- 10 files changed, 62 insertions(+), 155 deletions(-) diff --git a/package-lock.json b/package-lock.json index 20dfa8d1..b2363187 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ucap-webmessenger", - "version": "0.0.20", + "version": "0.0.21", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -3392,15 +3392,6 @@ "integrity": "sha512-g1QUuhYVVAamfCifK7oB7G3aIl4BbOyzDOqVyUfEr4tfBKrXfeH+M+Tg7HKCXSrbzxYdhyCP7z9WbKo0R2hBCw==", "dev": true }, - "@types/file-type": { - "version": "10.9.1", - "resolved": "https://registry.npmjs.org/@types/file-type/-/file-type-10.9.1.tgz", - "integrity": "sha512-oq0fy8Jqj19HofanFsZ56o5anMDUQtFO9B3wfLqM9o42RyCe1WT+wRbSvRbL2l8ARZXNaJturHk0b442+0yi+g==", - "dev": true, - "requires": { - "file-type": "*" - } - }, "@types/filesize": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@types/filesize/-/filesize-4.2.0.tgz", diff --git a/package.json b/package.json index b7141823..f80e9626 100644 --- a/package.json +++ b/package.json @@ -89,7 +89,6 @@ "@types/electron-debug": "^2.1.0", "@types/electron-devtools-installer": "^2.2.0", "@types/extract-text-webpack-plugin": "^3.0.4", - "@types/file-type": "^10.9.1", "@types/file-saver": "^2.0.1", "@types/filesize": "^4.1.0", "@types/fs-extra": "^8.0.1", diff --git a/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts b/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts index 36c85f80..078a8743 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts +++ b/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts @@ -1,4 +1,4 @@ -import { Injectable, Inject } from '@angular/core'; +import { Injectable, Inject, ChangeDetectorRef } from '@angular/core'; import { HttpClient, HttpEventType, @@ -179,7 +179,10 @@ export class CommonApiService { 'POST', !!fileTalkSaveUrl ? fileTalkSaveUrl : this.urls.fileTalkSave, encodeFileTalkSave(req), - { reportProgress: true, responseType: 'text' as 'json' } + { + reportProgress: true, + responseType: 'text' as 'json' + } ); const progress = req.fileUploadItem.uploadStart(); @@ -200,11 +203,8 @@ export class CommonApiService { ); } - public acceptableExtensionForFileTalk( - extensions: string[] - ): { accept: boolean; reject: string[] } { - let accept = true; - const reject: string[] = []; + public acceptableExtensionForFileTalk(extensions: string[]): string[] { + const rejected: string[] = []; for (const extension of extensions) { if ( !extension || @@ -213,51 +213,39 @@ export class CommonApiService { extension.toLowerCase() ) ) { - reject.push(!!extension ? extension : 'empty-ext'); - accept = false; + rejected.push(!!extension ? extension : 'empty-ext'); } } - return { - accept, - reject - }; + return 0 === rejected.length ? undefined : rejected; } - public checkInvalidMediaMimeForFileTalk( - files: File[] - ): Promise<{ accept: boolean; rejected: string[] }> { - return new Promise<{ accept: boolean; rejected: string[] }>( - async (resolve, reject) => { - const mediaFiles = this.mediaFiles(files); - if (!mediaFiles) { - resolve({ - accept: true, - rejected: undefined - }); - return; - } - - let accept = true; - const rejected: string[] = []; - for (const file of mediaFiles) { - const info = await MimeUtil.getMimeFromBlob(file); - // console.log('mime info', info); - if ( - !file || - !info || - (-1 === info.mime.indexOf('video/') && - -1 === info.mime.indexOf('image/')) - ) { - rejected.push(file.name); - accept = false; - } - } - resolve({ - accept, - rejected - }); + public checkInvalidMediaMimeForFileTalk(files: File[]): Promise { + return new Promise(async (resolve, reject) => { + const mediaFiles = this.mediaFiles(files); + if (!mediaFiles) { + resolve(undefined); + return; } - ); + + const rejected: string[] = []; + for (const file of mediaFiles) { + const info = await MimeUtil.getMimeFromBuffer( + await FileUtil.fromBlobToBuffer(file) + ); + if ( + !file || + !info || + (-1 === info.mime.indexOf('video/') && + -1 === info.mime.indexOf('image/')) + ) { + rejected.push(file.name); + } + } + + resolve(0 === rejected.length ? undefined : rejected); + + return; + }); } mediaFiles(files: File[]): File[] { diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts index df24f98a..510f63c8 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts @@ -71,7 +71,7 @@ import { RoomType, UserInfoShort } from '@ucap-webmessenger/protocol-room'; -import { take, map, catchError } from 'rxjs/operators'; +import { take, map, catchError, tap } from 'rxjs/operators'; import { FormComponent as UCapUiChatFormComponent, MessagesComponent as UCapUiChatMessagesComponent, @@ -1075,6 +1075,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { roomSeq: this.roomInfoSubject.value.roomSeq }; + const files: File[] = fileUploadItems.map(fui => fui.file); + const allObservables: Observable[] = []; const fileAllowSize = @@ -1083,11 +1085,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { : environment.productConfig.CommonSetting.defaultFileAllowSize; if (fileAllowSize > 0) { - if ( - fileUploadItems.filter( - fui => fui.file.size > fileAllowSize * 1024 * 1024 - ).length - ) { + if (files.filter(f => f.size > fileAllowSize * 1024 * 1024).length) { this.snackBarService.open( this.translateService.instant('common.file.errors.oversize', { maxSize: fileAllowSize @@ -1112,9 +1110,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { // ); const checkExt = this.commonApiService.acceptableExtensionForFileTalk( - fileUploadItems.map(fui => FileUtil.getExtension(fui.file.name)) + files.map(f => FileUtil.getExtension(f.name)) ); - if (!checkExt.accept) { + if (!!checkExt) { if (!!this.fileUploadQueue) { this.fileUploadQueue.onUploadComplete(); } @@ -1130,8 +1128,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { html: this.translateService.instant( 'common.file.errors.notSupporedType', { - supporedType: - checkExt.reject.length > 0 ? checkExt.reject.join(',') : '' + supporedType: checkExt.join(',') } ) } @@ -1140,10 +1137,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { return; } - const fakeMedia = await this.commonApiService.checkInvalidMediaMimeForFileTalk( - fileUploadItems.map(fui => fui.file) + const fakeMedias = await this.commonApiService.checkInvalidMediaMimeForFileTalk( + files ); - if (!fakeMedia.accept) { + if (!!fakeMedias) { if (!!this.fileUploadQueue) { this.fileUploadQueue.onUploadComplete(); } @@ -1159,10 +1156,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { html: this.translateService.instant( 'common.file.errors.notAcceptableMime', { - supporedType: - fakeMedia.rejected.length > 0 - ? fakeMedia.rejected.join(',') - : '' + supporedType: fakeMedias.length > 0 ? fakeMedias.join(',') : '' } ) } @@ -1250,13 +1244,11 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { this.translateService.instant('common.file.errors.failToUpload'), this.translateService.instant('common.file.errors.label') ); - + }, + () => { if (!!this.fileUploadQueue) { this.fileUploadQueue.onUploadComplete(); } - }, - () => { - this.fileUploadQueue.onUploadComplete(); } ); } diff --git a/projects/ucap-webmessenger-core/src/lib/utils/file.util.ts b/projects/ucap-webmessenger-core/src/lib/utils/file.util.ts index 98a6da0c..205d9143 100644 --- a/projects/ucap-webmessenger-core/src/lib/utils/file.util.ts +++ b/projects/ucap-webmessenger-core/src/lib/utils/file.util.ts @@ -31,7 +31,7 @@ export class FileUtil { static fromBlobToBuffer(blob: Blob): Promise { return new Promise((resolve, reject) => { const fileReader = new FileReader(); - fileReader.onload = () => { + fileReader.onloadend = () => { return resolve(Buffer.from(fileReader.result as ArrayBuffer)); }; fileReader.onerror = (event: ProgressEvent) => { 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 9c8a0da5..4265eaa4 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 @@ -86,11 +86,4 @@ #chatMessagesBufferContainer fxFlexFill class="chat-messages-buffer-container disappear" -> -
- +> diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss index bb8127d0..d5e78dc3 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss @@ -169,8 +169,6 @@ $tablet-l-width: 1024px; overflow-y: hidden !important; padding: 2vh 2vw; flex-direction: column; - .chat-messages-buffer { - } } .translation-container { font-size: 0.9em; diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts index 9c4caf79..355e1595 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts @@ -114,9 +114,6 @@ export class MessagesComponent implements OnInit, OnDestroy { @ViewChild('chatMessagesContainer', { static: false }) chatMessagesContainer: ElementRef; - @ViewChild('chatMessagesBuffer', { static: false }) - chatMessagesBuffer: ElementRef; - @ViewChild('chatMessagesBufferContainer', { static: false }) chatMessagesBufferContainer: ElementRef; @@ -457,15 +454,17 @@ export class MessagesComponent implements OnInit, OnDestroy { if (useSwap && !this.swapped) { this.chatMessagesBufferContainer.nativeElement.classList.add('hide'); - this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML; + const scrollElement: HTMLElement = this.virtualScroller[ + // tslint:disable-next-line: no-string-literal + 'element' + ].nativeElement; + + this.chatMessagesBufferContainer.nativeElement.innerHTML = + scrollElement.innerHTML; this.chatMessagesBufferContainer.nativeElement.classList.remove( 'disappear' ); - this.chatMessagesBuffer.nativeElement.scrollTop = this.virtualScroller[ - // tslint:disable-next-line: no-string-literal - 'element' - ].nativeElement.scrollTop; this.chatMessagesBufferContainer.nativeElement.classList.remove('hide'); this.swapped = true; @@ -479,8 +478,7 @@ export class MessagesComponent implements OnInit, OnDestroy { postSwapScroll(useHide: boolean, useSwap: boolean) { if (useSwap && this.swapped) { - this.chatMessagesBuffer.nativeElement.innerHTML = ''; - this.chatMessagesBuffer.nativeElement.scrollTop = 0; + this.chatMessagesBufferContainer.nativeElement.innerHTML = ''; this.chatMessagesBufferContainer.nativeElement.classList.add('disappear'); this.swapped = false; } diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts index e61131e3..e591babb 100644 --- a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts +++ b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts @@ -260,7 +260,7 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit { const checkExt = this.commonApiService.acceptableExtensionForFileTalk( FileUtil.getExtensions(fileList) ); - if (!checkExt.accept) { + if (!!checkExt) { this.ngZone.run(() => { this.snackBarService.openFromComponent< AlertSnackbarComponent, @@ -273,8 +273,7 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit { html: this.translateService.instant( 'common.file.errors.notSupporedType', { - supporedType: - checkExt.reject.length > 0 ? checkExt.reject.join(',') : '' + supporedType: checkExt.join(',') } ) } diff --git a/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts b/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts index 3486f148..c7acba9e 100644 --- a/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts +++ b/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts @@ -11,19 +11,6 @@ import { import { NGXLogger } from 'ngx-logger'; import { FileUploadQueueComponent } from '../components/file-upload-queue.component'; import { FileUploadItem } from '@ucap-webmessenger/api'; -import { CommonApiService } from '@ucap-webmessenger/api-common'; -import { FileUtil } from '@ucap-webmessenger/core'; -import { - AlertDialogComponent, - AlertDialogResult, - AlertDialogData -} from '../dialogs/alert.dialog.component'; -import { TranslateService } from '@ngx-translate/core'; -import { SnackBarService } from '../services/snack-bar.service'; -import { - AlertSnackbarComponent, - AlertSnackbarData -} from '../snackbars/alert.snackbar.component'; @Directive({ selector: 'input[ucapFileUploadFor], div[ucapFileUploadFor]' @@ -46,13 +33,7 @@ export class FileUploadForDirective implements AfterViewInit { dragOver = false; - constructor( - private commonApiService: CommonApiService, - private elementRef: ElementRef, - private logger: NGXLogger, - private translateService: TranslateService, - private snackBarService: SnackBarService - ) {} + constructor(private elementRef: ElementRef, private logger: NGXLogger) {} ngAfterViewInit(): void {} @@ -114,38 +95,6 @@ export class FileUploadForDirective implements AfterViewInit { } const files: FileList = event.dataTransfer.files; - const checkExt = this.commonApiService.acceptableExtensionForFileTalk( - FileUtil.getExtensions(files) - ); - if (!checkExt.accept) { - this.logger.debug('window:drop not acceptable'); - if (!!this.fileUploadQueue) { - this.fileUploadQueue.onDragLeave(); - } - this.elementRef.nativeElement.value = ''; - this.dragOver = false; - - this.snackBarService.openFromComponent< - AlertSnackbarComponent, - AlertSnackbarData - >(AlertSnackbarComponent, { - duration: 1000, - verticalPosition: 'bottom', - horizontalPosition: 'center', - data: { - html: this.translateService.instant( - 'common.file.errors.notSupporedType', - { - supporedType: - checkExt.reject.length > 0 ? checkExt.reject.join(',') : '' - } - ) - } - }); - - return; - } - const fileUploadItems = FileUploadItem.fromFiles(files); this.fileSelected.emit(fileUploadItems); event.preventDefault(); From f819b2f0a2daf74f824a34cfde8fb3f8bebd5752 Mon Sep 17 00:00:00 2001 From: richard-loafle <44828666+richard-loafle@users.noreply.github.com> Date: Mon, 17 Feb 2020 14:41:15 +0900 Subject: [PATCH 2/2] file check of message is modified --- .../src/lib/components/write.component.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts index 7755bd5d..6938aaea 100644 --- a/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts +++ b/projects/ucap-webmessenger-ui-message/src/lib/components/write.component.ts @@ -296,7 +296,7 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit { const fakeMedia = await this.commonApiService.checkInvalidMediaMimeForFileTalk( files ); - if (!fakeMedia.accept) { + if (!!fakeMedia) { this.ngZone.run(() => { this.snackBarService.openFromComponent< AlertSnackbarComponent, @@ -309,10 +309,7 @@ export class WriteComponent implements OnInit, OnDestroy, AfterViewInit { html: this.translateService.instant( 'common.file.errors.notAcceptableMime', { - supporedType: - fakeMedia.rejected.length > 0 - ? fakeMedia.rejected.join(',') - : '' + supporedType: fakeMedia.join(',') } ) }