10 files changed, 670 insertions, 0 deletions

diff --git a/client/src/app/videos/+video-edit/index.ts b/client/src/app/videos/+video-edit/index.ts
new file mode 100644
index 000000000..63e0414dd
--- /dev/null
+++ b/client/src/app/videos/+video-edit/index.ts
@@ -0,0 +1,2 @@
+export * from './video-add.module'
+export * from './video-update.module'
diff --git a/client/src/app/videos/+video-edit/video-add-routing.module.ts b/client/src/app/videos/+video-edit/video-add-routing.module.ts
new file mode 100644
index 000000000..9e8fa4acc
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-add-routing.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+
+import { MetaGuard } from '@ngx-meta/core'
+
+import { VideoAddComponent } from './video-add.component'
+
+const videoAddRoutes: Routes = [
+  {
+    path: '',
+    component: VideoAddComponent,
+    canActivateChild: [ MetaGuard ]
+  }
+]
+
+@NgModule({
+  imports: [ RouterModule.forChild(videoAddRoutes) ],
+  exports: [ RouterModule ]
+})
+export class VideoAddRoutingModule {}
diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html
new file mode 100644
index 000000000..698152ff9
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -0,0 +1,121 @@
+<div class="row">
+  <div class="content-padding">
+
+    <h3>Upload a video</h3>
+
+    <div *ngIf="error !== undefined" 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">
+        <label for="nsfw">NSFW</label>
+        <input
+          type="checkbox" id="nsfw"
+          formControlName="nsfw"
+        >
+      </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="3" modelAsStrings="true"
+        ></tag-input>
+      </div>
+
+      <div class="form-group">
+        <label for="videofile">File</label>
+        <div class="btn btn-default btn-file">
+          <span>Select the video...</span>
+          <input #videofileInput type="file" name="videofile" id="videofile" (change)="fileChange($event)" />
+          <input type="hidden" name="videofileHidden" formControlName="videofile"/>
+        </div>
+      </div>
+
+      <div class="file-to-upload">
+        <div class="file" *ngIf="filename">
+          <span class="filename">{{ filename }}</span>
+          <span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
+        </div>
+      </div>
+
+      <div *ngIf="formErrors.videofile" class="alert alert-danger">
+        {{ formErrors.videofile }}
+      </div>
+
+      <div class="form-group">
+        <label for="description">Description</label>
+        <textarea
+          id="description" class="form-control" placeholder="Description..."
+          formControlName="description"
+        >
+        </textarea>
+        <div *ngIf="formErrors.description" class="alert alert-danger">
+          {{ formErrors.description }}
+        </div>
+      </div>
+
+      <div class="progress">
+        <progressbar [value]="progressPercent" max="100">
+          <ng-template [ngIf]="progressPercent === 100">
+            <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
+            Server is processing the video
+          </ng-template>
+        </progressbar>
+      </div>
+
+      <div class="form-group">
+        <input
+          type="button" value="Upload" class="btn btn-default form-control"
+          (click)="upload()"
+        >
+      </div>
+    </form>
+  </div>
+</div>
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
new file mode 100644
index 000000000..21311b184
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -0,0 +1,165 @@
+import { Component, OnInit, ViewChild } from '@angular/core'
+import { FormBuilder, FormGroup } from '@angular/forms'
+import { Router } from '@angular/router'
+
+import { NotificationsService } from 'angular2-notifications'
+
+import {
+  FormReactive,
+  VIDEO_NAME,
+  VIDEO_CATEGORY,
+  VIDEO_LICENCE,
+  VIDEO_LANGUAGE,
+  VIDEO_DESCRIPTION,
+  VIDEO_TAGS
+} from '../../shared'
+import { VideoService } from '../shared'
+import { VideoCreate } from '../../../../../shared'
+import { HttpEventType, HttpResponse } from '@angular/common/http'
+import { VIDEO_FILE } from '../../shared/forms/form-validators/video'
+
+@Component({
+  selector: 'my-videos-add',
+  styleUrls: [ './video-edit.component.scss' ],
+  templateUrl: './video-add.component.html'
+})
+
+export class VideoAddComponent extends FormReactive implements OnInit {
+  @ViewChild('videofileInput') videofileInput
+
+  progressPercent = 0
+  tags: string[] = []
+  videoCategories = []
+  videoLicences = []
+  videoLanguages = []
+
+  tagValidators = VIDEO_TAGS.VALIDATORS
+  tagValidatorsMessages = VIDEO_TAGS.MESSAGES
+
+  error: string
+  form: FormGroup
+  formErrors = {
+    name: '',
+    category: '',
+    licence: '',
+    language: '',
+    description: '',
+    videofile: ''
+  }
+  validationMessages = {
+    name: VIDEO_NAME.MESSAGES,
+    category: VIDEO_CATEGORY.MESSAGES,
+    licence: VIDEO_LICENCE.MESSAGES,
+    language: VIDEO_LANGUAGE.MESSAGES,
+    description: VIDEO_DESCRIPTION.MESSAGES,
+    videofile: VIDEO_FILE.MESSAGES
+  }
+
+  constructor (
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private videoService: VideoService
+  ) {
+    super()
+  }
+
+  get filename () {
+    return this.form.value['videofile']
+  }
+
+  buildForm () {
+    this.form = this.formBuilder.group({
+      name: [ '', VIDEO_NAME.VALIDATORS ],
+      nsfw: [ false ],
+      category: [ '', VIDEO_CATEGORY.VALIDATORS ],
+      licence: [ '', VIDEO_LICENCE.VALIDATORS ],
+      language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
+      description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
+      videofile: [ '', VIDEO_FILE.VALIDATORS ],
+      tags: [ '' ]
+    })
+
+    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
+  }
+
+  ngOnInit () {
+    this.videoCategories = this.videoService.videoCategories
+    this.videoLicences = this.videoService.videoLicences
+    this.videoLanguages = this.videoService.videoLanguages
+
+    this.buildForm()
+  }
+
+  // The goal is to keep reactive form validation (required field)
+  // https://stackoverflow.com/a/44238894
+  fileChange ($event) {
+    this.form.controls['videofile'].setValue($event.target.files[0].name)
+  }
+
+  removeFile () {
+    this.videofileInput.nativeElement.value = ''
+    this.form.controls['videofile'].setValue('')
+  }
+
+  checkForm () {
+    this.forceCheck()
+
+    return this.form.valid
+  }
+
+  upload () {
+    if (this.checkForm() === false) {
+      return
+    }
+
+    const formValue: VideoCreate = this.form.value
+
+    const name = formValue.name
+    const nsfw = formValue.nsfw
+    const category = formValue.category
+    const licence = formValue.licence
+    const language = formValue.language
+    const description = formValue.description
+    const tags = formValue.tags
+    const videofile = this.videofileInput.nativeElement.files[0]
+
+    const formData = new FormData()
+    formData.append('name', name)
+    formData.append('category', '' + category)
+    formData.append('nsfw', '' + nsfw)
+    formData.append('licence', '' + licence)
+    formData.append('videofile', videofile)
+
+    // Language is optional
+    if (language) {
+      formData.append('language', '' + language)
+    }
+
+    formData.append('description', description)
+
+    for (let i = 0; i < tags.length; i++) {
+      formData.append(`tags[${i}]`, tags[i])
+    }
+
+    this.videoService.uploadVideo(formData).subscribe(
+      event => {
+        if (event.type === HttpEventType.UploadProgress) {
+          this.progressPercent = Math.round(100 * event.loaded / event.total)
+        } else if (event instanceof HttpResponse) {
+          console.log('Video uploaded.')
+          this.notificationsService.success('Success', 'Video uploaded.')
+
+          // Display all the videos once it's finished
+          this.router.navigate([ '/videos/list' ])
+        }
+      },
+
+      err => {
+        // Reset progress
+        this.progressPercent = 0
+        this.error = err.message
+      }
+    )
+  }
+}
diff --git a/client/src/app/videos/+video-edit/video-add.module.ts b/client/src/app/videos/+video-edit/video-add.module.ts
new file mode 100644
index 000000000..141d33ad2
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-add.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core'
+
+import { TagInputModule } from 'ngx-chips'
+
+import { VideoAddRoutingModule } from './video-add-routing.module'
+import { VideoAddComponent } from './video-add.component'
+import { VideoService } from '../shared'
+import { SharedModule } from '../../shared'
+
+@NgModule({
+  imports: [
+    TagInputModule,
+
+    VideoAddRoutingModule,
+    SharedModule
+  ],
+
+  declarations: [
+    VideoAddComponent
+  ],
+
+  exports: [
+    VideoAddComponent
+  ],
+
+  providers: [
+    VideoService
+  ]
+})
+export class VideoAddModule { }
diff --git a/client/src/app/videos/+video-edit/video-edit.component.scss b/client/src/app/videos/+video-edit/video-edit.component.scss
new file mode 100644
index 000000000..9ee0c520c
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-edit.component.scss
@@ -0,0 +1,56 @@
+.btn-file {
+  position: relative;
+  overflow: hidden;
+  display: block;
+}
+
+.btn-file input[type=file] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 100%;
+  min-height: 100%;
+  font-size: 100px;
+  text-align: right;
+  filter: alpha(opacity=0);
+  opacity: 0;
+  outline: none;
+  background: white;
+  cursor: inherit;
+  display: block;
+}
+
+.form-group {
+  margin-bottom: 10px;
+}
+
+div.tags {
+  height: 40px;
+  font-size: 20px;
+  margin-top: 20px;
+
+  .tag {
+    margin-right: 10px;
+
+    .remove {
+      cursor: pointer;
+    }
+  }
+}
+
+div.file-to-upload {
+  height: 40px;
+
+  .glyphicon-remove {
+    cursor: pointer;
+  }
+}
+
+.little-information {
+  font-size: 0.8em;
+  font-style: italic;
+}
+
+.label-tags {
+  margin-bottom: 0;
+}
diff --git a/client/src/app/videos/+video-edit/video-update-routing.module.ts b/client/src/app/videos/+video-edit/video-update-routing.module.ts
new file mode 100644
index 000000000..1d06a7ac3
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-update-routing.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+
+import { MetaGuard } from '@ngx-meta/core'
+
+import { VideoUpdateComponent } from './video-update.component'
+
+const videoUpdateRoutes: Routes = [
+  {
+    path: '',
+    component: VideoUpdateComponent,
+    canActivateChild: [ MetaGuard ]
+  }
+]
+
+@NgModule({
+  imports: [ RouterModule.forChild(videoUpdateRoutes) ],
+  exports: [ RouterModule ]
+})
+export class VideoUpdateRoutingModule {}
diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
new file mode 100644
index 000000000..7f4faf21b
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-update.component.html
@@ -0,0 +1,92 @@
+<div class="row">
+  <div class="content-padding">
+
+  <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">
+      <label for="nsfw">NSFW</label>
+      <input
+        type="checkbox" id="nsfw"
+        formControlName="nsfw"
+      >
+    </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 for="tags" 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="3" modelAsStrings="true"
+      ></tag-input>
+    </div>
+
+    <div class="form-group">
+      <label for="description">Description</label>
+      <textarea
+        id="description" class="form-control" placeholder="Description..."
+        formControlName="description"
+      >
+      </textarea>
+      <div *ngIf="formErrors.description" class="alert alert-danger">
+        {{ formErrors.description }}
+      </div>
+    </div>
+
+    <div class="form-group">
+      <input
+        type="button" value="Update" class="btn btn-default form-control"
+        (click)="update()"
+      >
+    </div>
+  </form>
+  </div>
+</div>
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
new file mode 100644
index 000000000..141ed3522
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -0,0 +1,134 @@
+import { Component, ElementRef, OnInit } from '@angular/core'
+import { FormBuilder, FormGroup } from '@angular/forms'
+import { ActivatedRoute, Router } from '@angular/router'
+
+import { NotificationsService } from 'angular2-notifications'
+
+import { AuthService } from '../../core'
+import {
+  FormReactive,
+  VIDEO_NAME,
+  VIDEO_CATEGORY,
+  VIDEO_LICENCE,
+  VIDEO_LANGUAGE,
+  VIDEO_DESCRIPTION,
+  VIDEO_TAGS
+} from '../../shared'
+import { Video, VideoService } from '../shared'
+
+@Component({
+  selector: 'my-videos-update',
+  styleUrls: [ './video-edit.component.scss' ],
+  templateUrl: './video-update.component.html'
+})
+
+export class VideoUpdateComponent extends FormReactive implements OnInit {
+  tags: string[] = []
+  videoCategories = []
+  videoLicences = []
+  videoLanguages = []
+  video: Video
+
+  tagValidators = VIDEO_TAGS.VALIDATORS
+  tagValidatorsMessages = VIDEO_TAGS.MESSAGES
+
+  error: string = null
+  form: FormGroup
+  formErrors = {
+    name: '',
+    category: '',
+    licence: '',
+    language: '',
+    description: ''
+  }
+  validationMessages = {
+    name: VIDEO_NAME.MESSAGES,
+    category: VIDEO_CATEGORY.MESSAGES,
+    licence: VIDEO_LICENCE.MESSAGES,
+    language: VIDEO_LANGUAGE.MESSAGES,
+    description: VIDEO_DESCRIPTION.MESSAGES
+  }
+
+  fileError = ''
+
+  constructor (
+    private authService: AuthService,
+    private elementRef: ElementRef,
+    private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private videoService: VideoService
+  ) {
+    super()
+  }
+
+  buildForm () {
+    this.form = this.formBuilder.group({
+      name: [ '', VIDEO_NAME.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.videoService.videoCategories
+    this.videoLicences = this.videoService.videoLicences
+    this.videoLanguages = this.videoService.videoLanguages
+
+    const uuid: string = this.route.snapshot.params['uuid']
+    this.videoService.getVideo(uuid)
+                     .subscribe(
+                       video => {
+                         this.video = video
+
+                         this.hydrateFormFromVideo()
+                       },
+
+                       err => {
+                         console.error(err)
+                         this.error = 'Cannot fetch video.'
+                       }
+                     )
+  }
+
+  checkForm () {
+    this.forceCheck()
+
+    return this.form.valid
+  }
+
+  update () {
+    if (this.checkForm() === false) {
+      return
+    }
+
+    this.video.patch(this.form.value)
+
+    this.videoService.updateVideo(this.video)
+                     .subscribe(
+                       () => {
+                         this.notificationsService.success('Success', 'Video updated.')
+                         this.router.navigate([ '/videos/watch', this.video.uuid ])
+                       },
+
+                       err => {
+                         this.error = 'Cannot update the video.'
+                         console.error(err)
+                       }
+                      )
+
+  }
+
+  private hydrateFormFromVideo () {
+    this.form.patchValue(this.video.toJSON())
+  }
+}
diff --git a/client/src/app/videos/+video-edit/video-update.module.ts b/client/src/app/videos/+video-edit/video-update.module.ts
new file mode 100644
index 000000000..eeb2e35e2
--- /dev/null
+++ b/client/src/app/videos/+video-edit/video-update.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core'
+
+import { TagInputModule } from 'ngx-chips'
+
+import { VideoUpdateRoutingModule } from './video-update-routing.module'
+import { VideoUpdateComponent } from './video-update.component'
+import { VideoService } from '../shared'
+import { SharedModule } from '../../shared'
+
+@NgModule({
+  imports: [
+    TagInputModule,
+
+    VideoUpdateRoutingModule,
+    SharedModule
+  ],
+
+  declarations: [
+    VideoUpdateComponent
+  ],
+
+  exports: [
+    VideoUpdateComponent
+  ],
+
+  providers: [
+    VideoService
+  ]
+})
+export class VideoUpdateModule { }