thumbnail is added
This commit is contained in:
parent
77ceeb84f7
commit
85dafe6922
|
@ -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
|
||||
};
|
||||
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user