]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blobdiff - client/src/app/videos/video-add/video-add.component.ts
Server: Add NSFW in user profile
[github/Chocobozzz/PeerTube.git] / client / src / app / videos / video-add / video-add.component.ts
index d12a7d572481365dc311818bde864f91426d7a05..8fae233d31b911559998b5ed53a8eb2eeec35427 100644 (file)
@@ -3,8 +3,18 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
-
-import { AuthService, FormReactive, VIDEO_NAME, VIDEO_DESCRIPTION, VIDEO_TAGS } from '../../shared';
+import { NotificationsService } from 'angular2-notifications';
+
+import { AuthService } from '../../core';
+import {
+  FormReactive,
+  VIDEO_NAME,
+  VIDEO_CATEGORY,
+  VIDEO_LICENCE,
+  VIDEO_DESCRIPTION,
+  VIDEO_TAGS
+} from '../../shared';
+import { VideoService } from '../shared';
 
 @Component({
   selector: 'my-videos-add',
@@ -15,25 +25,37 @@ import { AuthService, FormReactive, VIDEO_NAME, VIDEO_DESCRIPTION, VIDEO_TAGS }
 export class VideoAddComponent extends FormReactive implements OnInit {
   tags: string[] = [];
   uploader: FileUploader;
+  videoCategories = [];
+  videoLicences = [];
 
   error: string = null;
   form: FormGroup;
   formErrors = {
     name: '',
+    category: '',
+    licence: '',
     description: '',
     currentTag: ''
   };
   validationMessages = {
     name: VIDEO_NAME.MESSAGES,
+    category: VIDEO_CATEGORY.MESSAGES,
+    licence: VIDEO_LICENCE.MESSAGES,
     description: VIDEO_DESCRIPTION.MESSAGES,
     currentTag: VIDEO_TAGS.MESSAGES
   };
 
+  // Special error messages
+  tagsError = '';
+  fileError = '';
+
   constructor(
     private authService: AuthService,
     private elementRef: ElementRef,
     private formBuilder: FormBuilder,
-    private router: Router
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private videoService: VideoService
   ) {
     super();
   }
@@ -49,6 +71,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
   buildForm() {
     this.form = this.formBuilder.group({
       name: [ '', VIDEO_NAME.VALIDATORS ],
+      category: [ '', VIDEO_CATEGORY.VALIDATORS ],
+      licence: [ '', VIDEO_LICENCE.VALIDATORS ],
       description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
       currentTag: [ '', VIDEO_TAGS.VALIDATORS ]
     });
@@ -56,31 +80,10 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     this.form.valueChanges.subscribe(data => this.onValueChanged(data));
   }
 
-  getInvalidFieldsTitle() {
-    let title = '';
-    const nameControl = this.form.controls['name'];
-    const descriptionControl = this.form.controls['description'];
-
-    if (!nameControl.valid) {
-      title += 'A name is required\n';
-    }
-
-    if (this.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';
-    }
-
-    return title;
-  }
-
   ngOnInit() {
+    this.videoCategories = this.videoService.videoCategories;
+    this.videoLicences = this.videoService.videoLicences;
+
     this.uploader = new FileUploader({
       authToken: this.authService.getRequestHeaderValue(),
       queueLimit: 1,
@@ -90,9 +93,13 @@ export class VideoAddComponent extends FormReactive implements OnInit {
 
     this.uploader.onBuildItemForm = (item, form) => {
       const name = this.form.value['name'];
+      const category = this.form.value['category'];
+      const licence = this.form.value['licence'];
       const description = this.form.value['description'];
 
       form.append('name', name);
+      form.append('category', category);
+      form.append('licence', licence);
       form.append('description', description);
 
       for (let i = 0; i < this.tags.length; i++) {
@@ -103,24 +110,24 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     this.buildForm();
   }
 
-  onTagKeyPress(event: KeyboardEvent) {
-    const currentTag = this.form.value['currentTag'];
+  checkForm() {
+    this.forceCheck();
+
+    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) {
     // Enter press
     if (event.keyCode === 13) {
-      // Check if the tag is valid and does not already exist
-      if (
-        currentTag !== '' &&
-        this.form.controls['currentTag'].valid &&
-        this.tags.indexOf(currentTag) === -1
-      ) {
-        this.tags.push(currentTag);
-        this.form.patchValue({ currentTag: '' });
-
-        if (this.tags.length >= 3) {
-          this.form.get('currentTag').disable();
-        }
-      }
+      this.addTagIfPossible();
     }
   }
 
@@ -130,21 +137,39 @@ export class VideoAddComponent extends FormReactive implements OnInit {
 
   removeTag(tag: string) {
     this.tags.splice(this.tags.indexOf(tag), 1);
+    this.form.get('currentTag').enable();
   }
 
   upload() {
+    // Maybe the user forgot to press "enter" when he filled the field
+    this.addTagIfPossible();
+
+    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(['/videos/list']);
     };
 
     item.onError = (response: string, status: number) => {
+      clearInterval(interval);
+
       // We need to handle manually these cases beceause we use the FileUpload component
       if (status === 400) {
         this.error = response;
@@ -163,7 +188,27 @@ export class VideoAddComponent extends FormReactive implements OnInit {
       }
     };
 
-
     this.uploader.uploadAll();
   }
+
+  private addTagIfPossible() {
+    const currentTag = this.form.value['currentTag'];
+    if (currentTag === undefined) return;
+
+    // Check if the tag is valid and does not already exist
+    if (
+      currentTag.length >= 2 &&
+      this.form.controls['currentTag'].valid &&
+      this.tags.indexOf(currentTag) === -1
+    ) {
+      this.tags.push(currentTag);
+      this.form.patchValue({ currentTag: '' });
+
+      if (this.tags.length >= 3) {
+        this.form.get('currentTag').disable();
+      }
+
+      this.tagsError = '';
+    }
+  }
 }