Add ability to update thumbnail and preview on client

7 files changed, 50 insertions, 11 deletions

diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts
index 500b5bc5f..34a237a12 100644
--- a/client/src/app/shared/forms/form-validators/video.ts
+++ b/client/src/app/shared/forms/form-validators/video.ts
@@ -31,6 +31,11 @@ export const VIDEO_LANGUAGE = {
   MESSAGES: {}
 }
 
+export const VIDEO_IMAGE = {
+  VALIDATORS: [ ],
+  MESSAGES: {}
+}
+
 export const VIDEO_CHANNEL = {
   VALIDATORS: [ Validators.required ],
   MESSAGES: {
diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html
index d2d4cf95c..e8c5ded5b 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.html
+++ b/client/src/app/shared/forms/markdown-textarea.component.html
@@ -5,7 +5,7 @@
     id="description" name="description">
   </textarea>
 
-  <tabset *ngIf="arePreviewsDisplayed()" #staticTabs class="previews">
+  <tabset *ngIf="arePreviewsDisplayed()" class="previews">
     <tab *ngIf="truncate !== undefined" heading="Truncated description preview" [innerHTML]="truncatedDescriptionHTML"></tab>
     <tab heading="Complete description preview" [innerHTML]="descriptionHTML"></tab>
   </tabset>
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index e6a697098..e2e4c5b36 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -67,6 +67,27 @@ function isInMobileView () {
   return window.innerWidth < 500
 }
 
+// Thanks: https://gist.github.com/ghinda/8442a57f22099bdb2e34
+function objectToFormData (obj: any, form?: FormData, namespace?: string) {
+  let fd = form || new FormData()
+  let formKey
+
+  for (let key of Object.keys(obj)) {
+    if (namespace) formKey = `${namespace}[${key}]`
+    else formKey = key
+
+    if (obj[key] === undefined) continue
+
+    if (typeof obj[ key ] === 'object' && !(obj[ key ] instanceof File)) {
+      objectToFormData(obj[ key ], fd, key)
+    } else {
+      fd.append(formKey, obj[ key ])
+    }
+  }
+
+  return fd
+}
+
 export {
   viewportHeight,
   getParameterByName,
@@ -75,5 +96,6 @@ export {
   dateToHuman,
   isInSmallView,
   isInMobileView,
-  immutableAssign
+  immutableAssign,
+  objectToFormData
 }
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 330a0ba84..2a9426479 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -40,10 +40,10 @@ import { VideoService } from './video/video.service'
 
     BsDropdownModule.forRoot(),
     ModalModule.forRoot(),
+    TabsModule.forRoot(),
 
     PrimeSharedModule,
-    NgPipesModule,
-    TabsModule.forRoot()
+    NgPipesModule
   ],
 
   declarations: [
@@ -69,6 +69,7 @@ import { VideoService } from './video/video.service'
 
     BsDropdownModule,
     ModalModule,
+    TabsModule,
     PrimeSharedModule,
     BytesPipe,
     KeysPipe,
diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts
index b1c772217..c39252f46 100644
--- a/client/src/app/shared/video/video-edit.model.ts
+++ b/client/src/app/shared/video/video-edit.model.ts
@@ -12,6 +12,10 @@ export class VideoEdit {
   commentsEnabled: boolean
   channel: number
   privacy: VideoPrivacy
+  thumbnailfile?: any
+  previewfile?: any
+  thumbnailUrl: string
+  previewUrl: string
   uuid?: string
   id?: number
 
@@ -29,6 +33,8 @@ export class VideoEdit {
       this.commentsEnabled = videoDetails.commentsEnabled
       this.channel = videoDetails.channel.id
       this.privacy = videoDetails.privacy
+      this.thumbnailUrl = videoDetails.thumbnailUrl
+      this.previewUrl = videoDetails.previewUrl
     }
   }
 
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index 8acfb3c41..4604d10e2 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -2,7 +2,7 @@
   [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name"
 class="video-thumbnail"
 >
-<img [attr.src]="getImageUrl()" alt="video thumbnail" [ngClass]="{ 'blur-filter': nsfw }" />
+<img [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
 
 <div class="video-thumbnail-overlay">
   {{ video.durationLabel }}
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 01d32176b..2e7138cd1 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -18,6 +18,7 @@ import { SortField } from './sort-field.type'
 import { VideoDetails } from './video-details.model'
 import { VideoEdit } from './video-edit.model'
 import { Video } from './video.model'
+import { objectToFormData } from '@app/shared/misc/utils'
 
 @Injectable()
 export class VideoService {
@@ -46,10 +47,10 @@ export class VideoService {
   }
 
   updateVideo (video: VideoEdit) {
-    const language = video.language || null
-    const licence = video.licence || null
-    const category = video.category || null
-    const description = video.description || null
+    const language = video.language || undefined
+    const licence = video.licence || undefined
+    const category = video.category || undefined
+    const description = video.description || undefined
 
     const body: VideoUpdate = {
       name: video.name,
@@ -60,10 +61,14 @@ export class VideoService {
       privacy: video.privacy,
       tags: video.tags,
       nsfw: video.nsfw,
-      commentsEnabled: video.commentsEnabled
+      commentsEnabled: video.commentsEnabled,
+      thumbnailfile: video.thumbnailfile,
+      previewfile: video.previewfile
     }
 
-    return this.authHttp.put(VideoService.BASE_VIDEO_URL + video.id, body)
+    const data = objectToFormData(body)
+
+    return this.authHttp.put(VideoService.BASE_VIDEO_URL + video.id, data)
                         .map(this.restExtractor.extractDataBool)
                         .catch(this.restExtractor.handleError)
   }