Add ability to update thumbnail and preview on client

7 files changed, 176 insertions, 105 deletions

diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index d031825bd..899249778 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -1,109 +1,133 @@
 <div class="video-edit row" [formGroup]="form">
-
-  <div class="col-md-8">
-    <div class="form-group">
-      <label for="name">Title</label>
-      <input type="text" id="name" formControlName="name" />
-      <div *ngIf="formErrors.name" class="form-error">
-        {{ formErrors.name }}
-      </div>
-    </div>
-
-    <div class="form-group">
-      <label class="label-tags">Tags</label> <span>(press Enter to add)</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-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea>
-
-      <div *ngIf="formErrors.description" class="form-error">
-        {{ formErrors.description }}
-      </div>
-    </div>
-  </div>
-
-  <div class="col-md-4">
-    <div class="form-group">
-      <label>Channel</label>
-      <div class="peertube-select-disabled-container">
-        <select formControlName="channelId">
-          <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
-        </select>
-      </div>
-    </div>
-
-    <div class="form-group">
-      <label for="category">Category</label>
-      <div class="peertube-select-container">
-        <select id="category" formControlName="category">
-          <option></option>
-          <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
-        </select>
-      </div>
-
-      <div *ngIf="formErrors.category" class="form-error">
-        {{ formErrors.category }}
-      </div>
-    </div>
-
-    <div class="form-group">
-      <label for="licence">Licence</label>
-      <div class="peertube-select-container">
-        <select id="licence" formControlName="licence">
-          <option></option>
-          <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
-        </select>
+  <tabset class="root-tabset bootstrap">
+
+    <tab heading="Basic info">
+      <div class="col-md-8">
+        <div class="form-group">
+          <label for="name">Title</label>
+          <input type="text" id="name" formControlName="name" />
+          <div *ngIf="formErrors.name" class="form-error">
+            {{ formErrors.name }}
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label class="label-tags">Tags</label> <span>(press Enter to add)</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-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea>
+
+          <div *ngIf="formErrors.description" class="form-error">
+            {{ formErrors.description }}
+          </div>
+        </div>
       </div>
 
-      <div *ngIf="formErrors.licence" class="form-error">
-        {{ formErrors.licence }}
-      </div>
-    </div>
-
-    <div class="form-group">
-      <label for="language">Language</label>
-      <div class="peertube-select-container">
-        <select id="language" formControlName="language">
-          <option></option>
-          <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
-        </select>
-      </div>
+      <div class="col-md-4">
+        <div class="form-group">
+          <label>Channel</label>
+          <div class="peertube-select-disabled-container">
+            <select formControlName="channelId">
+              <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="category">Category</label>
+          <div class="peertube-select-container">
+            <select id="category" formControlName="category">
+              <option></option>
+              <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
+            </select>
+          </div>
+
+          <div *ngIf="formErrors.category" class="form-error">
+            {{ formErrors.category }}
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="licence">Licence</label>
+          <div class="peertube-select-container">
+            <select id="licence" formControlName="licence">
+              <option></option>
+              <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
+            </select>
+          </div>
+
+          <div *ngIf="formErrors.licence" class="form-error">
+            {{ formErrors.licence }}
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="language">Language</label>
+          <div class="peertube-select-container">
+            <select id="language" formControlName="language">
+              <option></option>
+              <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
+            </select>
+          </div>
+
+          <div *ngIf="formErrors.language" class="form-error">
+            {{ formErrors.language }}
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="privacy">Privacy</label>
+          <div class="peertube-select-container">
+            <select id="privacy" formControlName="privacy">
+              <option></option>
+              <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
+            </select>
+          </div>
+
+          <div *ngIf="formErrors.privacy" class="form-error">
+            {{ formErrors.privacy }}
+          </div>
+        </div>
+
+        <div class="form-group form-group-checkbox">
+          <input type="checkbox" id="nsfw" formControlName="nsfw" />
+          <label for="nsfw"></label>
+          <label for="nsfw">This video contains mature or explicit content</label>
+        </div>
+
+        <div class="form-group form-group-checkbox">
+          <input type="checkbox" id="commentsEnabled" formControlName="commentsEnabled" />
+          <label for="commentsEnabled"></label>
+          <label for="commentsEnabled">Enable video comments</label>
+        </div>
 
-      <div *ngIf="formErrors.language" class="form-error">
-        {{ formErrors.language }}
       </div>
-    </div>
-
-    <div class="form-group">
-      <label for="privacy">Privacy</label>
-      <div class="peertube-select-container">
-        <select id="privacy" formControlName="privacy">
-          <option></option>
-          <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-        </select>
+    </tab>
+
+    <tab heading="Advanced settings">
+      <div class="col-md-12">
+        <div class="form-group">
+          <my-video-image
+            inputLabel="Upload thumbnail" inputName="thumbnailfile" formControlName="thumbnailfile"
+            previewWidth="200px" previewHeight="110px"
+          ></my-video-image>
+        </div>
+
+        <div class="form-group">
+          <my-video-image
+            inputLabel="Upload preview" inputName="previewfile" formControlName="previewfile"
+            previewWidth="360px" previewHeight="200px"
+          ></my-video-image>
+        </div>
       </div>
+    </tab>
 
-      <div *ngIf="formErrors.privacy" class="form-error">
-        {{ formErrors.privacy }}
-      </div>
-    </div>
-
-    <div class="form-group form-group-checkbox">
-      <input type="checkbox" id="nsfw" formControlName="nsfw" />
-      <label for="nsfw"></label>
-      <label for="nsfw">This video contains mature or explicit content</label>
-    </div>
-
-    <div class="form-group form-group-checkbox">
-      <input type="checkbox" id="commentsEnabled" formControlName="commentsEnabled" />
-      <label for="commentsEnabled"></label>
-      <label for="commentsEnabled">Enable video comments</label>
-    </div>
+  </tabset>
 
-  </div>
 </div>
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 1df9d4006..f78336fa8 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -47,6 +47,18 @@
   .label-tags + span {
     font-size: 15px;
   }
+
+  .root-tabset /deep/ > .nav {
+    margin-left: 15px;
+    margin-bottom: 15px;
+
+    .nav-link {
+      display: flex !important;
+      align-items: center;
+      height: 30px !important;
+      padding: 0 15px !important;
+    }
+  }
 }
 
 .submit-container {
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.ts b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
index 2b307d5fa..85e5cc3f5 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
+import { VIDEO_IMAGE } from '@app/shared'
 import { NotificationsService } from 'angular2-notifications'
 import 'rxjs/add/observable/forkJoin'
 import { ServerService } from '../../../core/server'
@@ -57,6 +58,8 @@ export class VideoEditComponent implements OnInit {
     this.formErrors['licence'] = ''
     this.formErrors['language'] = ''
     this.formErrors['description'] = ''
+    this.formErrors['thumbnailfile'] = ''
+    this.formErrors['previewfile'] = ''
 
     this.validationMessages['name'] = VIDEO_NAME.MESSAGES
     this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES
@@ -65,6 +68,8 @@ export class VideoEditComponent implements OnInit {
     this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES
     this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES
     this.validationMessages['description'] = VIDEO_DESCRIPTION.MESSAGES
+    this.validationMessages['thumbnailfile'] = VIDEO_IMAGE.MESSAGES
+    this.validationMessages['previewfile'] = VIDEO_IMAGE.MESSAGES
 
     this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS))
     this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS))
@@ -76,6 +81,8 @@ export class VideoEditComponent implements OnInit {
     this.form.addControl('language', new FormControl('', VIDEO_LANGUAGE.VALIDATORS))
     this.form.addControl('description', new FormControl('', VIDEO_DESCRIPTION.VALIDATORS))
     this.form.addControl('tags', new FormControl(''))
+    this.form.addControl('thumbnailfile', new FormControl(''))
+    this.form.addControl('previewfile', new FormControl(''))
   }
 
   ngOnInit () {
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
index 098a71ae6..1b82281bf 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core'
+import { VideoImageComponent } from '@app/videos/+video-edit/shared/video-image.component'
 import { TabsModule } from 'ngx-bootstrap/tabs'
 import { TagInputModule } from 'ngx-chips'
 import { SharedModule } from '../../../shared'
@@ -12,7 +13,8 @@ import { VideoEditComponent } from './video-edit.component'
   ],
 
   declarations: [
-    VideoEditComponent
+    VideoEditComponent,
+    VideoImageComponent
   ],
 
   exports: [
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
index 7f41b56d8..ad6452835 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -48,11 +48,10 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
     this.buildForm()
 
     this.serverService.videoPrivaciesLoaded
-      .subscribe(
-        () => this.videoPrivacies = this.serverService.getVideoPrivacies()
-      )
+      .subscribe(() => this.videoPrivacies = this.serverService.getVideoPrivacies())
 
     populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
+      .catch(err => console.error('Cannot populate async user video channels.', err))
 
     const uuid: string = this.route.snapshot.params['uuid']
     this.videoService.getVideo(uuid)
@@ -116,5 +115,26 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
 
   private hydrateFormFromVideo () {
     this.form.patchValue(this.video.toJSON())
+
+    const objects = [
+      {
+        url: 'thumbnailUrl',
+        name: 'thumbnailfile'
+      },
+      {
+        url: 'previewUrl',
+        name: 'previewfile'
+      }
+    ]
+
+    for (const obj of objects) {
+      fetch(this.video[obj.url])
+        .then(response => response.blob())
+        .then(data => {
+          this.form.patchValue({
+            [ obj.name ]: data
+          })
+        })
+    }
   }
 }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index af90e22a1..8c173d6b3 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -1,7 +1,7 @@
 <div class="row">
   <!-- We need the video container for videojs so we just hide it -->
   <div [hidden]="videoNotFound" id="video-container">
-     <video id="video-element" class="video-js vjs-peertube-skin"></video>
+     <video [poster]="getVideoPoster()" id="video-element" class="video-js vjs-peertube-skin"></video>
   </div>
 
   <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 7a64406e6..7c97f0964 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -211,6 +211,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return Account.GET_ACCOUNT_AVATAR_URL(this.video.account)
   }
 
+  getVideoPoster () {
+    if (!this.video) return ''
+
+    return this.video.previewUrl
+  }
+
   getVideoTags () {
     if (!this.video || Array.isArray(this.video.tags) === false) return []