Move video form inside a component

client/src/app/shared/forms/form-validators/video.ts

@@ -1,5 +1,11 @@
 import { Validators } from '@angular/forms'
 
+export type ValidatorMessage = {
+  [ id: string ]: {
+    [ error: string ]: string
+  }
+}
+
 export const VIDEO_NAME = {
   VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(120) ],
   MESSAGES: {

client/src/app/videos/+video-edit/shared/video-edit.component.html

@@ -0,0 +1,85 @@
+<div [formGroup]="form">
+  <div class="form-group">
+    <label for="name">Name</label>
+    <input
+      type="text" class="form-control" id="name"
+      formControlName="name"
+    >
+    <div *ngIf="formErrors.name" class="alert alert-danger">
+      {{ formErrors.name }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="privacy">Privacy</label>
+    <select class="form-control" id="privacy" formControlName="privacy">
+      <option></option>
+      <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
+    </select>
+
+    <div *ngIf="formErrors.privacy" class="alert alert-danger">
+      {{ formErrors.privacy }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <input
+      type="checkbox" id="nsfw"
+      formControlName="nsfw"
+    >
+    <label for="nsfw">This video contains mature or explicit content</label>
+  </div>
+
+  <div class="form-group">
+    <label for="category">Category</label>
+    <select class="form-control" id="category" formControlName="category">
+      <option></option>
+      <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
+    </select>
+
+    <div *ngIf="formErrors.category" class="alert alert-danger">
+      {{ formErrors.category }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="licence">Licence</label>
+    <select class="form-control" id="licence" formControlName="licence">
+      <option></option>
+      <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
+    </select>
+
+    <div *ngIf="formErrors.licence" class="alert alert-danger">
+      {{ formErrors.licence }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="language">Language</label>
+    <select class="form-control" id="language" formControlName="language">
+      <option></option>
+      <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
+    </select>
+
+    <div *ngIf="formErrors.language" class="alert alert-danger">
+      {{ formErrors.language }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
+    <tag-input
+      [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
+      formControlName="tags" maxItems="5" modelAsStrings="true"
+    ></tag-input>
+  </div>
+
+  <div class="form-group">
+    <label for="description">Description</label>
+    <my-video-description formControlName="description"></my-video-description>
+
+    <div *ngIf="formErrors.description" class="alert alert-danger">
+      {{ formErrors.description }}
+    </div>
+  </div>
+</div>

client/src/app/videos/+video-edit/shared/video-edit.component.ts

@@ -0,0 +1,83 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms'
+import { ActivatedRoute, Router } from '@angular/router'
+import { NotificationsService } from 'angular2-notifications'
+import { ServerService } from 'app/core'
+import { VideoEdit } from 'app/shared/video/video-edit.model'
+import 'rxjs/add/observable/forkJoin'
+import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
+import {
+  ValidatorMessage,
+  VIDEO_CATEGORY,
+  VIDEO_DESCRIPTION,
+  VIDEO_LANGUAGE,
+  VIDEO_LICENCE,
+  VIDEO_NAME,
+  VIDEO_PRIVACY,
+  VIDEO_TAGS
+} from '../../../shared/forms/form-validators'
+
+@Component({
+  selector: 'my-video-edit',
+  styleUrls: [ './video-edit.component.scss' ],
+  templateUrl: './video-edit.component.html'
+})
+
+export class VideoEditComponent implements OnInit {
+  @Input() form: FormGroup
+  @Input() formErrors: { [ id: string ]: string } = {}
+  @Input() validationMessages: ValidatorMessage = {}
+  @Input() videoPrivacies = []
+
+  tags: string[] = []
+  videoCategories = []
+  videoLicences = []
+  videoLanguages = []
+  video: VideoEdit
+
+  tagValidators = VIDEO_TAGS.VALIDATORS
+  tagValidatorsMessages = VIDEO_TAGS.MESSAGES
+
+  error: string = null
+
+  constructor (
+    private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private serverService: ServerService
+  ) { }
+
+  updateForm () {
+    this.formErrors['name'] = ''
+    this.formErrors['privacy'] = ''
+    this.formErrors['category'] = ''
+    this.formErrors['licence'] = ''
+    this.formErrors['language'] = ''
+    this.formErrors['description'] = ''
+
+    this.validationMessages['name'] = VIDEO_NAME.MESSAGES
+    this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES
+    this.validationMessages['category'] = VIDEO_CATEGORY.MESSAGES
+    this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES
+    this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES
+    this.validationMessages['description'] = VIDEO_DESCRIPTION.MESSAGES
+
+    this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS))
+    this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS))
+    this.form.addControl('nsfw', new FormControl(false))
+    this.form.addControl('category', new FormControl('', VIDEO_CATEGORY.VALIDATORS))
+    this.form.addControl('licence', new FormControl('', VIDEO_LICENCE.VALIDATORS))
+    this.form.addControl('language', new FormControl('', VIDEO_LANGUAGE.VALIDATORS))
+    this.form.addControl('description', new FormControl('', VIDEO_DESCRIPTION.VALIDATORS))
+    this.form.addControl('tags', new FormControl(''))
+  }
+
+  ngOnInit () {
+    this.updateForm()
+
+    this.videoCategories = this.serverService.getVideoCategories()
+    this.videoLicences = this.serverService.getVideoLicences()
+    this.videoLanguages = this.serverService.getVideoLanguages()
+  }
+}

client/src/app/videos/+video-edit/shared/video-edit.module.ts

@@ -5,6 +5,7 @@ import { TabsModule } from 'ngx-bootstrap/tabs'
 
 import { MarkdownService, VideoDescriptionComponent } from '../../shared'
 import { SharedModule } from '../../../shared'
+import { VideoEditComponent } from './video-edit.component'
 
 @NgModule({
   imports: [
@@ -15,14 +16,16 @@ import { SharedModule } from '../../../shared'
   ],
 
   declarations: [
-    VideoDescriptionComponent
+    VideoDescriptionComponent,
+    VideoEditComponent
   ],
 
   exports: [
     TagInputModule,
     TabsModule,
 
-    VideoDescriptionComponent
+    VideoDescriptionComponent,
+    VideoEditComponent
   ],
 
   providers: [

client/src/app/videos/+video-edit/video-update.component.html

@@ -3,92 +3,12 @@
 
   <h3>Update {{ video?.name }}</h3>
 
-  <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-
   <form novalidate [formGroup]="form">
-    <div class="form-group">
-      <label for="name">Name</label>
-      <input
-        type="text" class="form-control" id="name"
-        formControlName="name"
-      >
-      <div *ngIf="formErrors.name" class="alert alert-danger">
-        {{ formErrors.name }}
-      </div>
-    </div>
 
-    <div class="form-group">
+    <my-video-edit
-      <label for="privacy">Privacy</label>
+      [form]="form" [formErrors]="formErrors"
-      <select class="form-control" id="privacy" formControlName="privacy">
+      [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies"
-        <option></option>
+    ></my-video-edit>
-        <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-      </select>
-
-      <div *ngIf="formErrors.privacy" class="alert alert-danger">
-        {{ formErrors.privacy }}
-      </div>
-    </div>
-
-    <div class="form-group">
-      <input
-        type="checkbox" id="nsfw"
-        formControlName="nsfw"
-      >
-      <label for="nsfw">This video contains mature or explicit content</label>
-    </div>
-
-    <div class="form-group">
-      <label for="category">Category</label>
-      <select class="form-control" id="category" formControlName="category">
-        <option></option>
-        <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
-      </select>
-
-      <div *ngIf="formErrors.category" class="alert alert-danger">
-        {{ formErrors.category }}
-      </div>
-    </div>
-
-    <div class="form-group">
-      <label for="licence">Licence</label>
-      <select class="form-control" id="licence" formControlName="licence">
-        <option></option>
-        <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
-      </select>
-
-      <div *ngIf="formErrors.licence" class="alert alert-danger">
-        {{ formErrors.licence }}
-      </div>
-    </div>
-
-    <div class="form-group">
-      <label for="language">Language</label>
-      <select class="form-control" id="language" formControlName="language">
-        <option></option>
-        <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
-      </select>
-
-      <div *ngIf="formErrors.language" class="alert alert-danger">
-        {{ formErrors.language }}
-      </div>
-    </div>
-
-    <div class="form-group">
-      <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
-      <tag-input
-        [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
-        formControlName="tags" maxItems="5" modelAsStrings="true"
-      ></tag-input>
-    </div>
-
-    <div class="form-group">
-      <label for="description">Description</label>
-      <my-video-description formControlName="description"></my-video-description>
-
-      <div *ngIf="formErrors.description" class="alert alert-danger">
-        {{ formErrors.description }}
-      </div>
-    </div>
 
     <div class="form-group">
       <input

client/src/app/videos/+video-edit/video-update.component.ts

@@ -15,6 +15,7 @@ import {
   VIDEO_PRIVACY,
   VIDEO_TAGS
 } from '../../shared'
+import { ValidatorMessage } from '../../shared/forms/form-validators'
 import { VideoService } from '../../shared/video/video.service'
 import { VideoEdit } from '../../shared/video/video-edit.model'
 
@@ -25,34 +26,13 @@ import { VideoEdit } from '../../shared/video/video-edit.model'
 })
 
 export class VideoUpdateComponent extends FormReactive implements OnInit {
-  tags: string[] = []
-  videoCategories = []
-  videoLicences = []
-  videoLanguages = []
-  videoPrivacies = []
   video: VideoEdit
 
-  tagValidators = VIDEO_TAGS.VALIDATORS
-  tagValidatorsMessages = VIDEO_TAGS.MESSAGES
-
   error: string = null
   form: FormGroup
-  formErrors = {
+  formErrors: { [ id: string ]: string } = {}
-    name: '',
+  validationMessages: ValidatorMessage = {}
-    privacy: '',
+  videoPrivacies = []
-    category: '',
-    licence: '',
-    language: '',
-    description: ''
-  }
-  validationMessages = {
-    name: VIDEO_NAME.MESSAGES,
-    privacy: VIDEO_PRIVACY.MESSAGES,
-    category: VIDEO_CATEGORY.MESSAGES,
-    licence: VIDEO_LICENCE.MESSAGES,
-    language: VIDEO_LANGUAGE.MESSAGES,
-    description: VIDEO_DESCRIPTION.MESSAGES
-  }
 
   fileError = ''
 
@@ -68,30 +48,16 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
   }
 
   buildForm () {
-    this.form = this.formBuilder.group({
+    this.form = this.formBuilder.group({})
-      name: [ '', VIDEO_NAME.VALIDATORS ],
-      privacy: [ '', VIDEO_PRIVACY.VALIDATORS ],
-      nsfw: [ false ],
-      category: [ '', VIDEO_CATEGORY.VALIDATORS ],
-      licence: [ '', VIDEO_LICENCE.VALIDATORS ],
-      language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
-      description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
-      tags: [ '' ]
-    })
-
     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
   }
 
   ngOnInit () {
     this.buildForm()
 
-    this.videoCategories = this.serverService.getVideoCategories()
-    this.videoLicences = this.serverService.getVideoLicences()
-    this.videoLanguages = this.serverService.getVideoLanguages()
     this.videoPrivacies = this.serverService.getVideoPrivacies()
 
     const uuid: string = this.route.snapshot.params['uuid']
-
     this.videoService.getVideo(uuid)
       .switchMap(video => {
         return this.videoService
@@ -103,7 +69,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
         video => {
           this.video = new VideoEdit(video)
 
-          // We cannot set private a video that was not private anymore
+          // We cannot set private a video that was not private
           if (video.privacy !== VideoPrivacy.PRIVATE) {
             const newVideoPrivacies = []
             for (const p of this.videoPrivacies) {

client/src/app/videos/+video-watch/video-watch.component.ts

@@ -11,12 +11,12 @@ import '../../../assets/player/peertube-videojs-plugin'
 import { AuthService, ConfirmService } from '../../core'
 import { VideoBlacklistService } from '../../shared'
 import { Account } from '../../shared/account/account.model'
+import { VideoDetails } from '../../shared/video/video-details.model'
 import { Video } from '../../shared/video/video.model'
 import { MarkdownService } from '../shared'
 import { VideoDownloadComponent } from './video-download.component'
 import { VideoReportComponent } from './video-report.component'
 import { VideoShareComponent } from './video-share.component'
-import { VideoDetails } from '../../shared/video/video-details.model'
 
 @Component({
   selector: 'my-video-watch',
@@ -199,14 +199,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.authService.isLoggedIn()
   }
 
-  canUserUpdateVideo () {
-    return this.video.isUpdatableBy(this.authService.getUser())
-  }
-
-  isVideoRemovable () {
-    return this.video.isRemovableBy(this.authService.getUser())
-  }
-
   isVideoBlacklistable () {
     return this.video.isBlackistableBy(this.authService.getUser())
   }