Client: update to new form api

[github/Chocobozzz/PeerTube.git] / client / src / app / videos / video-add / video-add.component.ts

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 7d8fbdc29ac57c1e4aa1e36816ed0b522927a8e2..900ef1da336f90687315bfd9322c6ce13e4a0c38 100644 (file)
--- a/client/src/app/videos/video-add/video-add.component.ts
+++ b/client/src/app/videos/video-add/video-add.component.ts
@@ -1,5 +1,6 @@
-import { Control, ControlGroup, Validators } from '@angular/common';
+import { Validators } from '@angular/common';
 import { Component, ElementRef, OnInit } from '@angular/core';
+import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
@@ -12,14 +13,14 @@ import { AuthService } from '../../shared';
   selector: 'my-videos-add',
   styles: [ require('./video-add.component.scss') ],
   template: require('./video-add.component.html'),
-  directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES ],
+  directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES, REACTIVE_FORM_DIRECTIVES ],
   pipes: [ BytesPipe ]
 })
 
 export class VideoAddComponent implements OnInit {
   currentTag: string; // Tag the user is writing in the input
   error: string = null;
-  videoForm: ControlGroup;
+  videoForm: FormGroup;
   uploader: FileUploader;
   video = {
     name: '',
@@ -70,10 +71,10 @@ export class VideoAddComponent implements OnInit {
   }
 
   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.videoForm = new FormGroup({
+      name: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(50) ]),
+      description: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(250) ]),
+      tags: new FormControl('', <any>Validators.pattern('^[a-zA-Z0-9]{2,10}$'))
     });
 
 
@@ -126,12 +127,26 @@ export class VideoAddComponent implements OnInit {
       console.log('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);
+      // 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);
+      }
     };