Implement captions/subtitles

14 files changed, 242 insertions, 7 deletions

diff --git a/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts b/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
index 1b36bbc6b..0c2489a9d 100644
--- a/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
@@ -9,6 +9,7 @@ export class CustomConfigValidatorsService {
   readonly INSTANCE_SHORT_DESCRIPTION: BuildFormValidator
   readonly SERVICES_TWITTER_USERNAME: BuildFormValidator
   readonly CACHE_PREVIEWS_SIZE: BuildFormValidator
+  readonly CACHE_CAPTIONS_SIZE: BuildFormValidator
   readonly SIGNUP_LIMIT: BuildFormValidator
   readonly ADMIN_EMAIL: BuildFormValidator
   readonly TRANSCODING_THREADS: BuildFormValidator
@@ -44,6 +45,15 @@ export class CustomConfigValidatorsService {
       }
     }
 
+    this.CACHE_CAPTIONS_SIZE = {
+      VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
+      MESSAGES: {
+        'required': this.i18n('Captions cache size is required.'),
+        'min': this.i18n('Captions cache size must be greater than 1.'),
+        'pattern': this.i18n('Captions cache size must be a number.')
+      }
+    }
+
     this.SIGNUP_LIMIT = {
       VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
       MESSAGES: {
diff --git a/client/src/app/shared/forms/form-validators/index.ts b/client/src/app/shared/forms/form-validators/index.ts
index 487683088..60d735ef7 100644
--- a/client/src/app/shared/forms/form-validators/index.ts
+++ b/client/src/app/shared/forms/form-validators/index.ts
@@ -8,3 +8,4 @@ export * from './video-abuse-validators.service'
 export * from './video-channel-validators.service'
 export * from './video-comment-validators.service'
 export * from './video-validators.service'
+export * from './video-captions-validators.service'
diff --git a/client/src/app/shared/forms/form-validators/video-captions-validators.service.ts b/client/src/app/shared/forms/form-validators/video-captions-validators.service.ts
new file mode 100644
index 000000000..d1b4667bb
--- /dev/null
+++ b/client/src/app/shared/forms/form-validators/video-captions-validators.service.ts
@@ -0,0 +1,27 @@
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Validators } from '@angular/forms'
+import { Injectable } from '@angular/core'
+import { BuildFormValidator } from '@app/shared'
+
+@Injectable()
+export class VideoCaptionsValidatorsService {
+  readonly VIDEO_CAPTION_LANGUAGE: BuildFormValidator
+  readonly VIDEO_CAPTION_FILE: BuildFormValidator
+
+  constructor (private i18n: I18n) {
+
+    this.VIDEO_CAPTION_LANGUAGE = {
+      VALIDATORS: [ Validators.required ],
+      MESSAGES: {
+        'required': this.i18n('Video caption language is required.')
+      }
+    }
+
+    this.VIDEO_CAPTION_FILE = {
+      VALIDATORS: [ Validators.required ],
+      MESSAGES: {
+        'required': this.i18n('Video caption file is required.')
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/forms/index.ts b/client/src/app/shared/forms/index.ts
index 7464bb022..41c321c4c 100644
--- a/client/src/app/shared/forms/index.ts
+++ b/client/src/app/shared/forms/index.ts
@@ -1,2 +1,3 @@
 export * from './form-validators'
 export * from './form-reactive'
+export * from './reactive-file.component'
diff --git a/client/src/app/shared/forms/reactive-file.component.html b/client/src/app/shared/forms/reactive-file.component.html
new file mode 100644
index 000000000..9fb1c9e3e
--- /dev/null
+++ b/client/src/app/shared/forms/reactive-file.component.html
@@ -0,0 +1,14 @@
+<div class="root">
+  <div class="button-file">
+    <span>{{ inputLabel }}</span>
+    <input
+      type="file"
+      [name]="inputName" [id]="inputName" [accept]="extensions"
+      (change)="fileChange($event)"
+    />
+  </div>
+
+  <div i18n class="file-constraints">(extensions: {{ allowedExtensionsMessage }}, max size: {{ maxFileSize | bytes }})</div>
+
+  <div class="filename" *ngIf="displayFilename === true && filename">{{ filename }}</div>
+</div>
diff --git a/client/src/app/shared/forms/reactive-file.component.scss b/client/src/app/shared/forms/reactive-file.component.scss
new file mode 100644
index 000000000..d89844264
--- /dev/null
+++ b/client/src/app/shared/forms/reactive-file.component.scss
@@ -0,0 +1,24 @@
+@import '_variables';
+@import '_mixins';
+
+.root {
+  height: auto;
+  display: flex;
+  align-items: center;
+
+  .button-file {
+    @include peertube-button-file(auto);
+
+    min-width: 190px;
+  }
+
+  .file-constraints {
+    margin-left: 5px;
+    font-size: 13px;
+  }
+
+  .filename {
+    font-weight: $font-semibold;
+    margin-left: 5px;
+  }
+}
diff --git a/client/src/app/shared/forms/reactive-file.component.ts b/client/src/app/shared/forms/reactive-file.component.ts
new file mode 100644
index 000000000..f5758b643
--- /dev/null
+++ b/client/src/app/shared/forms/reactive-file.component.ts
@@ -0,0 +1,75 @@
+import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+import { NotificationsService } from 'angular2-notifications'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+@Component({
+  selector: 'my-reactive-file',
+  styleUrls: [ './reactive-file.component.scss' ],
+  templateUrl: './reactive-file.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ReactiveFileComponent),
+      multi: true
+    }
+  ]
+})
+export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
+  @Input() inputLabel: string
+  @Input() inputName: string
+  @Input() extensions: string[] = []
+  @Input() maxFileSize: number
+  @Input() displayFilename = false
+
+  @Output() fileChanged = new EventEmitter<Blob>()
+
+  allowedExtensionsMessage = ''
+
+  private file: File
+
+  constructor (
+    private notificationsService: NotificationsService,
+    private i18n: I18n
+  ) {}
+
+  get filename () {
+    if (!this.file) return ''
+
+    return this.file.name
+  }
+
+  ngOnInit () {
+    this.allowedExtensionsMessage = this.extensions.join(', ')
+  }
+
+  fileChange (event: any) {
+    if (event.target.files && event.target.files.length) {
+      const [ file ] = event.target.files
+
+      if (file.size > this.maxFileSize) {
+        this.notificationsService.error(this.i18n('Error'), this.i18n('This file is too large.'))
+        return
+      }
+
+      this.file = file
+
+      this.propagateChange(this.file)
+      this.fileChanged.emit(this.file)
+    }
+  }
+
+  propagateChange = (_: any) => { /* empty */ }
+
+  writeValue (file: any) {
+    this.file = file
+  }
+
+  registerOnChange (fn: (_: any) => void) {
+    this.propagateChange = fn
+  }
+
+  registerOnTouched () {
+    // Unused
+  }
+}
diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 53aff1b24..8381745f5 100644
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -81,7 +81,7 @@ function objectToFormData (obj: any, form?: FormData, namespace?: string) {
     }
 
     if (obj[key] !== null && typeof obj[ key ] === 'object' && !(obj[ key ] instanceof File)) {
-      objectToFormData(obj[ key ], fd, key)
+      objectToFormData(obj[ key ], fd, formKey)
     } else {
       fd.append(formKey, obj[ key ])
     }
@@ -96,6 +96,11 @@ function lineFeedToHtml (obj: object, keyToNormalize: string) {
   })
 }
 
+function removeElementFromArray <T> (arr: T[], elem: T) {
+  const index = arr.indexOf(elem)
+  if (index !== -1) arr.splice(index, 1)
+}
+
 export {
   objectToUrlEncoded,
   getParameterByName,
@@ -104,5 +109,6 @@ export {
   dateToHuman,
   immutableAssign,
   objectToFormData,
-  lineFeedToHtml
+  lineFeedToHtml,
+  removeElementFromArray
 }
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 97e49e7ab..c3f4bf88b 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -37,12 +37,14 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import {
   CustomConfigValidatorsService,
-  LoginValidatorsService,
+  LoginValidatorsService, ReactiveFileComponent,
   ResetPasswordValidatorsService,
   UserValidatorsService, VideoAbuseValidatorsService, VideoChannelValidatorsService, VideoCommentValidatorsService, VideoValidatorsService
 } from '@app/shared/forms'
 import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar'
 import { ScreenService } from '@app/shared/misc/screen.service'
+import { VideoCaptionsValidatorsService } from '@app/shared/forms/form-validators/video-captions-validators.service'
+import { VideoCaptionService } from '@app/shared/video-caption'
 
 @NgModule({
   imports: [
@@ -74,7 +76,8 @@ import { ScreenService } from '@app/shared/misc/screen.service'
     FromNowPipe,
     MarkdownTextareaComponent,
     InfiniteScrollerDirective,
-    HelpComponent
+    HelpComponent,
+    ReactiveFileComponent
   ],
 
   exports: [
@@ -102,6 +105,7 @@ import { ScreenService } from '@app/shared/misc/screen.service'
     MarkdownTextareaComponent,
     InfiniteScrollerDirective,
     HelpComponent,
+    ReactiveFileComponent,
 
     NumberFormatterPipe,
     ObjectLengthPipe,
@@ -119,6 +123,7 @@ import { ScreenService } from '@app/shared/misc/screen.service'
     AccountService,
     MarkdownService,
     VideoChannelService,
+    VideoCaptionService,
 
     FormValidatorService,
     CustomConfigValidatorsService,
@@ -129,6 +134,7 @@ import { ScreenService } from '@app/shared/misc/screen.service'
     VideoChannelValidatorsService,
     VideoCommentValidatorsService,
     VideoValidatorsService,
+    VideoCaptionsValidatorsService,
 
     I18nPrimengCalendarService,
     ScreenService,
diff --git a/client/src/app/shared/video-caption/index.ts b/client/src/app/shared/video-caption/index.ts
new file mode 100644
index 000000000..c48a70558
--- /dev/null
+++ b/client/src/app/shared/video-caption/index.ts
@@ -0,0 +1 @@
+export * from './video-caption.service'
diff --git a/client/src/app/shared/video-caption/video-caption-edit.model.ts b/client/src/app/shared/video-caption/video-caption-edit.model.ts
new file mode 100644
index 000000000..732f20158
--- /dev/null
+++ b/client/src/app/shared/video-caption/video-caption-edit.model.ts
@@ -0,0 +1,9 @@
+export interface VideoCaptionEdit {
+  language: {
+    id: string
+    label?: string
+  }
+
+  action?: 'CREATE' | 'REMOVE'
+  captionfile?: any
+}
diff --git a/client/src/app/shared/video-caption/video-caption.service.ts b/client/src/app/shared/video-caption/video-caption.service.ts
new file mode 100644
index 000000000..4ae8ebd0a
--- /dev/null
+++ b/client/src/app/shared/video-caption/video-caption.service.ts
@@ -0,0 +1,61 @@
+import { catchError, map } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { forkJoin, Observable } from 'rxjs'
+import { ResultList } from '../../../../../shared'
+import { RestExtractor, RestService } from '../rest'
+import { VideoCaption } from '../../../../../shared/models/videos/video-caption.model'
+import { VideoService } from '@app/shared/video/video.service'
+import { objectToFormData } from '@app/shared/misc/utils'
+import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model'
+
+@Injectable()
+export class VideoCaptionService {
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) {}
+
+  listCaptions (videoId: number | string): Observable<ResultList<VideoCaption>> {
+    return this.authHttp.get<ResultList<VideoCaption>>(VideoService.BASE_VIDEO_URL + videoId + '/captions')
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+
+  removeCaption (videoId: number | string, language: string) {
+    return this.authHttp.delete(VideoService.BASE_VIDEO_URL + videoId + '/captions/' + language)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  addCaption (videoId: number | string, language: string, captionfile: File) {
+    const body = { captionfile }
+    const data = objectToFormData(body)
+
+    return this.authHttp.put(VideoService.BASE_VIDEO_URL + videoId + '/captions/' + language, data)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+
+  updateCaptions (videoId: number | string, videoCaptions: VideoCaptionEdit[]) {
+    const observables: Observable<any>[] = []
+
+    for (const videoCaption of videoCaptions) {
+      if (videoCaption.action === 'CREATE') {
+        observables.push(
+          this.addCaption(videoId, videoCaption.language.id, videoCaption.captionfile)
+        )
+      } else if (videoCaption.action === 'REMOVE') {
+        observables.push(
+          this.removeCaption(videoId, videoCaption.language.id)
+        )
+      }
+    }
+
+    return forkJoin(observables)
+  }
+}
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index 5c820a227..6b1a299ea 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -1,7 +1,7 @@
 import { User } from '../'
 import { Video as VideoServerModel, VideoPrivacy, VideoState } from '../../../../../shared'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
-import { VideoConstant } from '../../../../../shared/models/videos/video.model'
+import { VideoConstant } from '../../../../../shared/models/videos/video-constant.model'
 import { getAbsoluteAPIUrl } from '../misc/utils'
 import { ServerConfig } from '../../../../../shared/models'
 import { Actor } from '@app/shared/actor/actor.model'
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 9498a06fe..b4c1f10f9 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -28,8 +28,8 @@ import { ServerService } from '@app/core'
 
 @Injectable()
 export class VideoService {
-  private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
-  private static BASE_FEEDS_URL = environment.apiUrl + '/feeds/videos.'
+  static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
+  static BASE_FEEDS_URL = environment.apiUrl + '/feeds/videos.'
 
   constructor (
     private authHttp: HttpClient,