X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2Fvideo-add%2Fvideo-add.component.ts;h=cd6bb99892ca2752cff29a3ed920131f4dc377ce;hb=2d7653dc8726185615bab66353c4e3fb8fbb5a5f;hp=2b45ea125f8b297d670f7dafe4d0e3098a5756f1;hpb=e822fdaeee90cb7c70d5678f19249198cd7aae8c;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/videos/video-add/video-add.component.ts b/client/src/app/videos/video-add/video-add.component.ts index 2b45ea125..cd6bb9989 100644 --- a/client/src/app/videos/video-add/video-add.component.ts +++ b/client/src/app/videos/video-add/video-add.component.ts @@ -1,37 +1,49 @@ -import { Control, ControlGroup, Validators } from '@angular/common'; import { Component, ElementRef, OnInit } from '@angular/core'; -import { Router } from '@angular/router-deprecated'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { Router } from '@angular/router'; -import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; -import { PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/components/progressbar'; -import { FileSelectDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload'; +import { FileUploader } from 'ng2-file-upload/ng2-file-upload'; +import { NotificationsService } from 'angular2-notifications'; -import { AuthService } from '../../shared'; +import { AuthService } from '../../core'; +import { FormReactive, VIDEO_NAME, VIDEO_DESCRIPTION, VIDEO_TAGS } from '../../shared'; @Component({ selector: 'my-videos-add', - styles: [ require('./video-add.component.scss') ], - template: require('./video-add.component.html'), - directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES ], - pipes: [ BytesPipe ] + styleUrls: [ './video-add.component.scss' ], + templateUrl: './video-add.component.html' }) -export class VideoAddComponent implements OnInit { - currentTag: string; // Tag the user is writing in the input - error: string = null; - videoForm: ControlGroup; +export class VideoAddComponent extends FormReactive implements OnInit { + tags: string[] = []; uploader: FileUploader; - video = { + + error: string = null; + form: FormGroup; + formErrors = { name: '', - tags: [], - description: '' + description: '', + currentTag: '' }; + validationMessages = { + name: VIDEO_NAME.MESSAGES, + description: VIDEO_DESCRIPTION.MESSAGES, + currentTag: VIDEO_TAGS.MESSAGES + }; + + // Special error messages + tagsError = ''; + fileError = ''; constructor( private authService: AuthService, private elementRef: ElementRef, - private router: Router - ) {} + private formBuilder: FormBuilder, + private router: Router, + private notificationsService: NotificationsService + ) { + super(); + } get filename() { if (this.uploader.queue.length === 0) { @@ -41,42 +53,17 @@ export class VideoAddComponent implements OnInit { return this.uploader.queue[0].file.name; } - get isTagsInputDisabled () { - return this.video.tags.length >= 3; - } - - getInvalidFieldsTitle() { - let title = ''; - const nameControl = this.videoForm.controls['name']; - const descriptionControl = this.videoForm.controls['description']; - - if (!nameControl.valid) { - title += 'A name is required\n'; - } - - if (this.video.tags.length === 0) { - title += 'At least one tag is required\n'; - } - - if (this.filename === null) { - title += 'A file is required\n'; - } - - if (!descriptionControl.valid) { - title += 'A description is required\n'; - } + buildForm() { + this.form = this.formBuilder.group({ + name: [ '', VIDEO_NAME.VALIDATORS ], + description: [ '', VIDEO_DESCRIPTION.VALIDATORS ], + currentTag: [ '', VIDEO_TAGS.VALIDATORS ] + }); - return title; + this.form.valueChanges.subscribe(data => this.onValueChanged(data)); } ngOnInit() { - this.videoForm = new ControlGroup({ - name: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(50) ])), - description: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(250) ])), - tags: new Control('', Validators.pattern('^[a-zA-Z0-9]{2,10}$')) - }); - - this.uploader = new FileUploader({ authToken: this.authService.getRequestHeaderValue(), queueLimit: 1, @@ -85,26 +72,57 @@ export class VideoAddComponent implements OnInit { }); this.uploader.onBuildItemForm = (item, form) => { - form.append('name', this.video.name); - form.append('description', this.video.description); + const name = this.form.value['name']; + const description = this.form.value['description']; + + form.append('name', name); + form.append('description', description); - for (let i = 0; i < this.video.tags.length; i++) { - form.append(`tags[${i}]`, this.video.tags[i]); + for (let i = 0; i < this.tags.length; i++) { + form.append(`tags[${i}]`, this.tags[i]); } }; + + this.buildForm(); + } + + checkForm() { + this.forceCheck(); + + if (this.tags.length === 0) { + this.tagsError = 'You have 0 tags'; + } + + if (this.filename === null) { + this.fileError = 'You did not add a file.'; + } + + return this.form.valid === true && this.tagsError === '' && this.fileError === ''; + } + + fileChanged() { + this.fileError = ''; } onTagKeyPress(event: KeyboardEvent) { + const currentTag = this.form.value['currentTag']; + // Enter press if (event.keyCode === 13) { // Check if the tag is valid and does not already exist if ( - this.currentTag !== '' && - this.videoForm.controls['tags'].valid && - this.video.tags.indexOf(this.currentTag) === -1 + currentTag.length >= 2 && + this.form.controls['currentTag'].valid && + this.tags.indexOf(currentTag) === -1 ) { - this.video.tags.push(this.currentTag); - this.currentTag = ''; + this.tags.push(currentTag); + this.form.patchValue({ currentTag: '' }); + + if (this.tags.length >= 3) { + this.form.get('currentTag').disable(); + } + + this.tagsError = ''; } } } @@ -114,27 +132,55 @@ export class VideoAddComponent implements OnInit { } removeTag(tag: string) { - this.video.tags.splice(this.video.tags.indexOf(tag), 1); + this.tags.splice(this.tags.indexOf(tag), 1); + this.form.get('currentTag').enable(); } upload() { + if (this.checkForm() === false) { + return; + } + const item = this.uploader.queue[0]; // TODO: wait for https://github.com/valor-software/ng2-file-upload/pull/242 item.alias = 'videofile'; + // FIXME: remove + // Run detection change for progress bar + const interval = setInterval(() => { ; }, 250); + item.onSuccess = () => { + clearInterval(interval); + console.log('Video uploaded.'); + this.notificationsService.success('Success', 'Video uploaded.'); + // Print all the videos once it's finished - this.router.navigate(['VideosList']); + this.router.navigate(['/videos/list']); }; item.onError = (response: string, status: number) => { - this.error = (status === 400) ? response : 'Unknow error'; - console.error(this.error); + clearInterval(interval); + + // We need to handle manually these cases beceause we use the FileUpload component + if (status === 400) { + this.error = response; + } else if (status === 401) { + this.error = 'Access token was expired, refreshing token...'; + this.authService.refreshAccessToken().subscribe( + () => { + // Update the uploader request header + this.uploader.authToken = this.authService.getRequestHeaderValue(); + this.error += ' access token refreshed. Please retry your request.'; + } + ); + } else { + this.error = 'Unknow error'; + console.error(this.error); + } }; - this.uploader.uploadAll(); } }