refactoring

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",

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",

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(
+  public acceptableExtensionForFileTalk(extensions: string[]): string[] {
-    extensions: string[]
+    const rejected: string[] = [];
-  ): { accept: boolean; reject: string[] } {
-    let accept = true;
-    const reject: string[] = [];
     for (const extension of extensions) {
       if (
         !extension ||
@@ -213,51 +213,39 @@ export class CommonApiService {
             extension.toLowerCase()
           )
       ) {
-        reject.push(!!extension ? extension : 'empty-ext');
+        rejected.push(!!extension ? extension : 'empty-ext');
-        accept = false;
       }
     }
-    return {
+    return 0 === rejected.length ? undefined : rejected;
-      accept,
-      reject
-    };
   }
 
-  public checkInvalidMediaMimeForFileTalk(
+  public checkInvalidMediaMimeForFileTalk(files: File[]): Promise<string[]> {
-    files: File[]
+    return new Promise<string[]>(async (resolve, reject) => {
-  ): Promise<{ accept: boolean; rejected: string[] }> {
+      const mediaFiles = this.mediaFiles(files);
-    return new Promise<{ accept: boolean; rejected: string[] }>(
+      if (!mediaFiles) {
-      async (resolve, reject) => {
+        resolve(undefined);
-        const mediaFiles = this.mediaFiles(files);
+        return;
-        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
-        });
       }
-    );
+
+      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[] {

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<FileTalkSaveResponse>[] = [];
 
     const fileAllowSize =
@@ -1083,11 +1085,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         : environment.productConfig.CommonSetting.defaultFileAllowSize;
 
     if (fileAllowSize > 0) {
-      if (
+      if (files.filter(f => f.size > fileAllowSize * 1024 * 1024).length) {
-        fileUploadItems.filter(
-          fui => fui.file.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:
+              supporedType: checkExt.join(',')
-                checkExt.reject.length > 0 ? checkExt.reject.join(',') : ''
             }
           )
         }
@@ -1140,10 +1137,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
       return;
     }
 
-    const fakeMedia = await this.commonApiService.checkInvalidMediaMimeForFileTalk(
+    const fakeMedias = await this.commonApiService.checkInvalidMediaMimeForFileTalk(
-      fileUploadItems.map(fui => fui.file)
+      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:
+              supporedType: fakeMedias.length > 0 ? fakeMedias.join(',') : ''
-                fakeMedia.rejected.length > 0
-                  ? fakeMedia.rejected.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();
         }
       );
   }

projects/ucap-webmessenger-core/src/lib/utils/file.util.ts

@@ -31,7 +31,7 @@ export class FileUtil {
   static fromBlobToBuffer(blob: Blob): Promise<Buffer> {
     return new Promise<Buffer>((resolve, reject) => {
       const fileReader = new FileReader();
-      fileReader.onload = () => {
+      fileReader.onloadend = () => {
         return resolve(Buffer.from(fileReader.result as ArrayBuffer));
       };
       fileReader.onerror = (event: ProgressEvent) => {

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

@@ -86,11 +86,4 @@
   #chatMessagesBufferContainer
   fxFlexFill
   class="chat-messages-buffer-container disappear"
->
+></div>
-  <div
-    #chatMessagesBuffer
-    fxFlexFill
-    perfectScrollbar
-    class="chat-messages-buffer"
-  ></div>
-</div>

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;

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<HTMLElement>;
 
-  @ViewChild('chatMessagesBuffer', { static: false })
-  chatMessagesBuffer: ElementRef<HTMLElement>;
-
   @ViewChild('chatMessagesBufferContainer', { static: false })
   chatMessagesBufferContainer: ElementRef<HTMLElement>;
 
@@ -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.chatMessagesBufferContainer.nativeElement.innerHTML = '';
-      this.chatMessagesBuffer.nativeElement.scrollTop = 0;
       this.chatMessagesBufferContainer.nativeElement.classList.add('disappear');
       this.swapped = false;
     }

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:
+                supporedType: checkExt.join(',')
-                  checkExt.reject.length > 0 ? checkExt.reject.join(',') : ''
               }
             )
           }

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(
+  constructor(private elementRef: ElementRef, private logger: NGXLogger) {}
-    private commonApiService: CommonApiService,
-    private elementRef: ElementRef,
-    private logger: NGXLogger,
-    private translateService: TranslateService,
-    private snackBarService: SnackBarService
-  ) {}
 
   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();