import {Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, Output, SecurityContext, ViewChild} from '@angular/core'; import {NzMessageService, UploadChangeParam, UploadFile, UploadFileStatus} from 'ng-zorro-antd'; import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser'; @Component({ selector: 'app-upload-video', templateUrl: './upload-video.component.html', styleUrls: ['./upload-video.component.scss'] }) export class UploadVideoComponent implements OnChanges, OnDestroy { uploading = false; checking = false; checkVideoExists = false; uploadClicked = false; @Input() videoFile = null; uploaderInst = null; progress = 0; // @Input() // setCovering = false; @Input() videoUrl = ''; @ViewChild('videoNode', {static: true }) videoNode: ElementRef; // @Input() // extractCoverFunc = null; @Output() videoUploaded = new EventEmitter(); @Output() videoUploadFailure = new EventEmitter(); @Output() extractVideoCover = new EventEmitter(); @Input() showUploadBtn = true; @Input() item: any; // videoItem = null; uploadUrl; uploadData; constructor(private nzMessageService: NzMessageService, private sanitization: DomSanitizer // private cwService: _coursewareService, // private resService: ResourceService ) { this.uploading = false; this.videoFile = null; this.uploadUrl = ( window).courseware.uploadUrl(); this.uploadData = ( window).courseware.uploadData(); window['air'].getUploadCallback = (url, data) => { this.uploadUrl = url; this.uploadData = data; }; } ngOnChanges() { // if (!this.videoFile || this.showUploadBtn) { // return; // } // this.beforeUpload(this.videoFile); // this.handleUpload(); } ngOnDestroy(): void { URL.revokeObjectURL(this.videoUrl); } safeVideoUrl(url) { console.log(url); return this.sanitization.bypassSecurityTrustResourceUrl(url); // `${url}`; } videoLoadedMetaData() { } handleChange(info: UploadChangeParam/* { type: string, file: UploadFile, event: any }*/): void { console.log('info:' , info); switch (info.type) { case 'start': // this.beforeUpload(info.file); if (!this.checkSelectFile(info.file)) { return; } this.uploading = true; this.progress = 0; break; case 'success': this.uploadSuccess(info.file); // this.beforeUpload(info.file); // this.uploadSuccess(info.file); break; case 'progress': this.progress = info.event.percent; this.doProgress(this.progress); break; } } checkSelectFile(file) { if (!file.lastModified) { return false; } const delta = 500; const isOverSize = (file.size / 1024 / 1024) < delta; if (!isOverSize) { this.nzMessageService.error(`video must smaller than ${delta}MB!`); return false; } return true; } checkHashFinish = (hash) => { this.checking = false; this.uploading = true; } uploadSuccess = (file) => { this.nzMessageService.info('Upload Success'); // this.updateStatus(false); this.uploading = false; this.videoFile = null; // this.updateSource(url); this.videoUrl = file.response.url; // console.log(this.picUrl) // this.uploadFinished(url); // if (!inOSS) { const vid = document.createElement('video'); vid.addEventListener('loadedmetadata', () => { const height = vid.videoHeight; const width = vid.videoWidth; let duration = vid.duration; if (duration) { duration = duration * 1000; } file.height = height; file.width = width; file.duration = duration; vid.preload = 'none'; vid.src = ''; vid.remove(); this.videoUploaded.emit(file.response); // this.resService.updateVideo(id, {width, height, duration}).then( () => { // this.videoUploaded.emit({res_id: id, id, name, hash, url}); // }); }); vid.src = file.response.url; // } else { // this.videoUploaded.emit(file.response); // } } uploadFailure = (err, file) => { this.uploading = false; if (err.name && err.name === 'cancel') { return; } console.log(err); this.nzMessageService.error('Upload Error ' + err.message); this.videoUploadFailure.emit(file); } doProgress = (p) => { if (p > 1) { p = 1; } if (p < 0) { p = 0; } // console.log(Math.floor(p * 100)); this.progress = Math.floor(p * 100); } }