thumbnail is added

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -73,7 +73,7 @@ import {
   FileViewerDialogData,
   FileViewerDialogResult
 } from '@app/layouts/common/dialogs/file-viewer.dialog.component';
-import { CONST, StringUtil } from '@ucap-webmessenger/core';
+import { CONST, StringUtil, FileUtil } from '@ucap-webmessenger/core';
 import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
 import { StatusCode } from '@ucap-webmessenger/api';
 import {
@@ -513,7 +513,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     this.logger.debug('onFileDragLeave');
   }
 
-  onFileSelected(fileUploadItems: FileUploadItem[]) {
+  async onFileSelected(fileUploadItems: FileUploadItem[]) {
     this.logger.debug('onFileSelected', fileUploadItems);
 
     const info = {
@@ -524,6 +524,28 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     const allObservables: Observable<FileTalkSaveResponse>[] = [];
 
     for (const fileUploadItem of fileUploadItems) {
+      let thumbnail: File;
+      if (
+        -1 !==
+        [
+          '3gp',
+          'avi',
+          'm4v',
+          'mkv',
+          'mov',
+          'mp4',
+          'mpeg',
+          'mpg',
+          'rv',
+          'ts',
+          'webm',
+          'wmv'
+        ].indexOf(FileUtil.getExtension(fileUploadItem.file.name))
+      ) {
+        thumbnail = await FileUtil.thumbnail(fileUploadItem.file);
+        this.logger.debug('thumbnail', thumbnail);
+      }
+
       const req: FileTalkSaveRequest = {
         userSeq: this.loginRes.userSeq,
         deviceType: this.environmentsInfo.deviceType,
@@ -531,6 +553,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
         roomSeq: this.roomInfo.roomSeq,
         file: fileUploadItem.file,
         fileName: fileUploadItem.file.name,
+        thumb: thumbnail,
         fileUploadItem
       };
 

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

@@ -55,4 +55,58 @@ export class FileUtil {
       fileReader.readAsArrayBuffer(blob);
     });
   }
+
+  static thumbnail(file: File): Promise<File> {
+    return new Promise<File>((resolve, reject) => {
+      const fileReader = new FileReader();
+      fileReader.onload = () => {
+        const blob = new Blob([fileReader.result], { type: file.type });
+        const url = URL.createObjectURL(blob);
+        const video = document.createElement('video');
+
+        const snapImage = () =>
+          new Promise<Blob>((imgResolve, imgReject) => {
+            const canvas = document.createElement('canvas');
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            canvas
+              .getContext('2d')
+              .drawImage(video, 0, 0, canvas.width, canvas.height);
+
+            canvas.toBlob(imgBlob => {
+              imgResolve(imgBlob);
+            });
+          });
+
+        const timeupdate = () => {
+          snapImage().then(imgBlob => {
+            video.removeEventListener('timeupdate', timeupdate);
+            video.pause();
+            resolve(new File([imgBlob], file.name));
+          });
+        };
+
+        video.onloadeddata = () => {
+          snapImage().then(imgBlob => {
+            video.removeEventListener('timeupdate', timeupdate);
+            resolve(new File([imgBlob], file.name));
+          });
+        };
+
+        video.addEventListener('timeupdate', timeupdate);
+        video.preload = 'metadata';
+        video.src = url;
+        // Load video in Safari / IE11
+        video.muted = true;
+        // tslint:disable-next-line: no-string-literal
+        video['playsInline'] = true;
+        video.play();
+      };
+      fileReader.onerror = (event: ProgressEvent) => {
+        fileReader.abort();
+        return reject(fileReader.error);
+      };
+      fileReader.readAsArrayBuffer(file);
+    });
+  }
 }