diff --git a/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html b/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html index d387e311a..2cf4abd42 100755 --- a/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html +++ b/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html @@ -132,6 +132,10 @@
+ +
+
+

Allowed Format .mp4, .mkv, .avi, .webm, .mov

+
+
+ +
+
+ + + +
+ +
+

{{file_attributes.name}} | {{(file_attributes.size/ (1024*1024)).toFixed(2)}} MB

+
+
+ +
+ \ No newline at end of file diff --git a/ng6-seed/src/app/quality-check/upload-video/upload-video.component.scss b/ng6-seed/src/app/quality-check/upload-video/upload-video.component.scss new file mode 100644 index 000000000..e9c31fcb7 --- /dev/null +++ b/ng6-seed/src/app/quality-check/upload-video/upload-video.component.scss @@ -0,0 +1,13 @@ +input[type="file"] { + display: none; +} +.custom-file-upload { + border: 1px solid red; + display: inline-block; + padding: 6px 12px; + cursor: pointer; +} +.custom-file-upload :hover{ + background-color: rgba(255, 0, 0, 0.317); + color: rgba(255, 0, 0, 0.317); +} \ No newline at end of file diff --git a/ng6-seed/src/app/quality-check/upload-video/upload-video.component.spec.ts b/ng6-seed/src/app/quality-check/upload-video/upload-video.component.spec.ts new file mode 100644 index 000000000..ea35dc94b --- /dev/null +++ b/ng6-seed/src/app/quality-check/upload-video/upload-video.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UploadVideoComponent } from './upload-video.component'; + +describe('UploadVideoComponent', () => { + let component: UploadVideoComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UploadVideoComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UploadVideoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng6-seed/src/app/quality-check/upload-video/upload-video.component.ts b/ng6-seed/src/app/quality-check/upload-video/upload-video.component.ts new file mode 100644 index 000000000..4fad6925b --- /dev/null +++ b/ng6-seed/src/app/quality-check/upload-video/upload-video.component.ts @@ -0,0 +1,113 @@ +import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; +import { DomSanitizer } from '@angular/platform-browser'; +import { NotifierService } from 'angular-notifier'; +import { LoaderService } from 'app/shared/loaderService/loader.service'; +import { QcService } from '../qc-service/qc.service'; + +@Component({ + selector: 'app-upload-video', + templateUrl: './upload-video.component.html', + styleUrls: ['./upload-video.component.scss'] +}) +export class UploadVideoComponent implements OnInit { + file_attributes: any = {}; + notifier: NotifierService; + uploadedVideo: any; + videoSrc: any; + @ViewChild('myVideo') myVideo: any; + + constructor(notifier:NotifierService,private dialogRef:MatDialogRef,private loaderService:LoaderService,private qcService:QcService + ,@Inject(MAT_DIALOG_DATA)private pd_details:any) { + this.notifier=notifier + } + + ngOnInit() { + } + inputExcelOnClick(evt) { + const target: HTMLInputElement = evt.target; + if (target.files.length === 0) { + this.notifier.notify('info',"No files Choosen") + this.file_attributes = {} + this.videoSrc = '' + this.uploadedVideo = '' + throw new Error('未上傳'); + } + if (target.files.length > 1) { + this.notifier.notify('info',"Please Upload Single Video File") + this.file_attributes = {} + this.videoSrc = '' + this.uploadedVideo = '' + throw new Error('Cannot use multiple files'); + } + let is_video = this.checkFileExtension(evt.target.files.item(0).name) + if(!is_video) { + this.notifier.notify("info","Please Upload the file with allowed video format") + this.file_attributes = {} + this.videoSrc = '' + this.uploadedVideo = '' + return + } + this.file_attributes = evt.target.files.item(0); + + const reader: FileReader = new FileReader(); + // this.readerExcel(reader); + reader.readAsArrayBuffer(target.files[0]); + this.uploadedVideo = target.files[0]; + console.log(this.file_attributes,this.uploadedVideo) + let url= URL.createObjectURL(this.uploadedVideo); + if(url) { + console.log("First",url) + // this.videoSrc = this.domSanitizer.bypassSecurityTrustResourceUrl(url) + this.videoSrc = url + console.log("second",this.videoSrc) + + } + // this.isEmptyDrop = false; + // this.isExcelDrop = true; + } + checkFileExtension(uploadpath) { + var fileExtension = uploadpath.substring(uploadpath.lastIndexOf(".") + 1, uploadpath.length); + if (fileExtension == "mp4" || fileExtension == "mkv" || fileExtension == "avi" || fileExtension == "webm" || fileExtension == "mov") { + //write code for success + return true; + } + else { + //error code - select only excel files + return false; + } + } + + uploadVideo() { + console.log("clicked") + if(!this.uploadedVideo || !this.file_attributes) { + this.notifier.notify('info',"File is missing please choose the file again") + return; + } + console.log(this.myVideo) + if(this.myVideo && this.myVideo.video && this.myVideo.video.nativeElement) { + this.myVideo.video.nativeElement.pause(); + } + this.loaderService.showMatSpinnerDialog("Upload is in progress.. Please wait..") + let records = {"fk_pd_id":this.pd_details.pd_id,"random_string":this.pd_details.random_string} + let formData= new FormData() + formData.append("video_file",this.uploadedVideo) + formData.append("records",JSON.stringify(records)) + + this.qcService.uploadVideoFile(formData).subscribe(res=>{ + if(res['dataStatus']) { + this.notifier.notify("success","Video Uploaded successfully") + this.dialogRef.close(res) + } + else{ + this.notifier.notify('warning',"Something went wrong") + } + this.loaderService.closeMatSpinnerDialog() + },err=>{ + this.loaderService.closeMatSpinnerDialog() + console.log(err) + this.notifier.notify('warning',"Network Error") + }) + } + +} diff --git a/ng6-seed/src/app/shared/loaderService/loader.service.ts b/ng6-seed/src/app/shared/loaderService/loader.service.ts index 07488a70e..283372fd7 100755 --- a/ng6-seed/src/app/shared/loaderService/loader.service.ts +++ b/ng6-seed/src/app/shared/loaderService/loader.service.ts @@ -1,5 +1,7 @@ import { Injectable } from '@angular/core'; +import { MatDialog } from '@angular/material'; import { Subject } from 'rxjs'; +import { ProgressSpineerDialogComponent } from '../progress-spineer-dialog/progress-spineer-dialog.component'; export interface LoaderState { show: boolean; } @@ -9,11 +11,26 @@ export interface LoaderState { export class LoaderService { private loaderSubject = new Subject(); loaderState = this.loaderSubject.asObservable(); - constructor() { } + spinnerdialogRef: any; + constructor(private dialog:MatDialog) { } show() { this.loaderSubject.next({ show: true }); } hide() { this.loaderSubject.next({ show: false }); } + showMatSpinnerDialog(message :String = '') { + this.spinnerdialogRef = this.dialog.open(ProgressSpineerDialogComponent, { + data:message, + panelClass: 'transparent', + // minHeight:'20%', + minWidth:'20%', + disableClose: true + }); + } + closeMatSpinnerDialog() { + if(this.spinnerdialogRef) { + this.spinnerdialogRef.close(); + } + } } \ No newline at end of file diff --git a/ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.html b/ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.html new file mode 100644 index 000000000..b78dee230 --- /dev/null +++ b/ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.html @@ -0,0 +1,4 @@ +
+ +

{{spinnerMsg}}

+
\ No newline at end of file diff --git a/ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.scss b/ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.scss new file mode 100644 index 000000000..7d7126a42 --- /dev/null +++ b/ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.scss @@ -0,0 +1,5 @@ +::ng-deep {.transparent > .mat-dialog-container { + box-shadow: none; + background: rgba(0, 0, 0, 0.0); +} +} \ No newline at end of file diff --git a/ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.spec.ts b/ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.spec.ts new file mode 100644 index 000000000..e2dc66654 --- /dev/null +++ b/ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProgressSpineerDialogComponent } from './progress-spineer-dialog.component'; + +describe('ProgressSpineerDialogComponent', () => { + let component: ProgressSpineerDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ProgressSpineerDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ProgressSpineerDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.ts b/ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.ts new file mode 100644 index 000000000..18eeb9603 --- /dev/null +++ b/ng6-seed/src/app/shared/progress-spineer-dialog/progress-spineer-dialog.component.ts @@ -0,0 +1,18 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { MAT_DIALOG_DATA } from '@angular/material'; + +@Component({ + selector: 'app-progress-spineer-dialog', + templateUrl: './progress-spineer-dialog.component.html', + styleUrls: ['./progress-spineer-dialog.component.scss'] +}) +export class ProgressSpineerDialogComponent implements OnInit { + + spinnerMsg:String='' + constructor(@Inject(MAT_DIALOG_DATA)private data:any) { + this.spinnerMsg= this.data + } + ngOnInit() { + } + +} diff --git a/ng6-seed/src/app/shared/shared.module.ts b/ng6-seed/src/app/shared/shared.module.ts index cfb4c28cf..ef69fa903 100755 --- a/ng6-seed/src/app/shared/shared.module.ts +++ b/ng6-seed/src/app/shared/shared.module.ts @@ -7,8 +7,11 @@ import { ToggleFullscreenDirective } from './fullscreen/toggle-fullscreen.direct import { RatingComponent} from './rating/rating.component'; import { NumbersOnlyDirective } from './numbers-only/numbers-only.directive'; import { ForMobileNumbersDirective } from './for-mobile-numbers/for-mobile-numbers.directive'; +import { ProgressSpineerDialogComponent } from './progress-spineer-dialog/progress-spineer-dialog.component'; +import { MatProgressSpinnerModule } from '@angular/material'; @NgModule({ + entryComponents:[ProgressSpineerDialogComponent], declarations: [ AccordionAnchorDirective, AccordionLinkDirective, @@ -16,8 +19,10 @@ import { ForMobileNumbersDirective } from './for-mobile-numbers/for-mobile-numbe ToggleFullscreenDirective, RatingComponent, NumbersOnlyDirective, - ForMobileNumbersDirective + ForMobileNumbersDirective, + ProgressSpineerDialogComponent ], + imports:[MatProgressSpinnerModule], exports: [ AccordionAnchorDirective, AccordionLinkDirective, @@ -25,7 +30,8 @@ import { ForMobileNumbersDirective } from './for-mobile-numbers/for-mobile-numbe ToggleFullscreenDirective, RatingComponent, NumbersOnlyDirective, - ForMobileNumbersDirective + ForMobileNumbersDirective, + ProgressSpineerDialogComponent ], providers: [ MenuItems, HorizontalMenuItems ] })