Add video chapters support

14 files changed, 180 insertions, 25 deletions

diff --git a/client/src/app/shared/form-validators/video-chapter-validators.ts b/client/src/app/shared/form-validators/video-chapter-validators.ts
new file mode 100644
index 000000000..cbbd9291e
--- /dev/null
+++ b/client/src/app/shared/form-validators/video-chapter-validators.ts
@@ -0,0 +1,32 @@
+import { AbstractControl, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+
+export const VIDEO_CHAPTER_TITLE_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.minLength(2), Validators.maxLength(100) ], // Required is set dynamically
+  MESSAGES: {
+    required: $localize`A chapter title is required.`,
+    minlength: $localize`A chapter title should be more than 2 characters long.`,
+    maxlength: $localize`A chapter title should be less than 100 characters long.`
+  }
+}
+
+export const VIDEO_CHAPTERS_ARRAY_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ uniqueTimecodeValidator() ],
+  MESSAGES: {}
+}
+
+function uniqueTimecodeValidator (): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors => {
+    const array = control.value as { timecode: number, title: string }[]
+
+    for (const chapter of array) {
+      if (!chapter.title) continue
+
+      if (array.filter(c => c.title && c.timecode === chapter.timecode).length > 1) {
+        return { uniqueTimecode: $localize`Multiple chapters have the same timecode ${chapter.timecode}` }
+      }
+    }
+
+    return null
+  }
+}
diff --git a/client/src/app/shared/form-validators/video-validators.ts b/client/src/app/shared/form-validators/video-validators.ts
index 090a76e43..a434c777f 100644
--- a/client/src/app/shared/form-validators/video-validators.ts
+++ b/client/src/app/shared/form-validators/video-validators.ts
@@ -70,14 +70,6 @@ export const VIDEO_DESCRIPTION_VALIDATOR: BuildFormValidator = {
   }
 }
 
-export const VIDEO_TAG_VALIDATOR: BuildFormValidator = {
-  VALIDATORS: [ Validators.minLength(2), Validators.maxLength(30) ],
-  MESSAGES: {
-    minlength: $localize`A tag should be more than 2 characters long.`,
-    maxlength: $localize`A tag should be less than 30 characters long.`
-  }
-}
-
 export const VIDEO_TAGS_ARRAY_VALIDATOR: BuildFormValidator = {
   VALIDATORS: [ Validators.maxLength(5), arrayTagLengthValidator() ],
   MESSAGES: {
diff --git a/client/src/app/shared/shared-forms/form-reactive.service.ts b/client/src/app/shared/shared-forms/form-reactive.service.ts
index f1b7e0ef2..b960c310e 100644
--- a/client/src/app/shared/shared-forms/form-reactive.service.ts
+++ b/client/src/app/shared/shared-forms/form-reactive.service.ts
@@ -4,9 +4,9 @@ import { wait } from '@root-helpers/utils'
 import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model'
 import { FormValidatorService } from './form-validator.service'
 
-export type FormReactiveErrors = { [ id: string ]: string | FormReactiveErrors }
+export type FormReactiveErrors = { [ id: string | number ]: string | FormReactiveErrors | FormReactiveErrors[] }
 export type FormReactiveValidationMessages = {
-  [ id: string ]: { [ name: string ]: string } | FormReactiveValidationMessages
+  [ id: string | number ]: { [ name: string ]: string } | FormReactiveValidationMessages | FormReactiveValidationMessages[]
 }
 
 @Injectable()
@@ -86,7 +86,7 @@ export class FormReactiveService {
 
       if (!control || (onlyDirty && !control.dirty) || !control.enabled || !control.errors) continue
 
-      const staticMessages = validationMessages[field]
+      const staticMessages = validationMessages[field] as FormReactiveValidationMessages
       for (const key of Object.keys(control.errors)) {
         const formErrorValue = control.errors[key]
 
diff --git a/client/src/app/shared/shared-forms/form-validator.service.ts b/client/src/app/shared/shared-forms/form-validator.service.ts
index e7dedf52a..d810285bb 100644
--- a/client/src/app/shared/shared-forms/form-validator.service.ts
+++ b/client/src/app/shared/shared-forms/form-validator.service.ts
@@ -45,20 +45,20 @@ export class FormValidatorService {
     form: FormGroup,
     formErrors: FormReactiveErrors,
     validationMessages: FormReactiveValidationMessages,
-    obj: BuildFormArgument,
+    formToBuild: BuildFormArgument,
     defaultValues: BuildFormDefaultValues = {}
   ) {
-    for (const name of objectKeysTyped(obj)) {
+    for (const name of objectKeysTyped(formToBuild)) {
       formErrors[name] = ''
 
-      const field = obj[name]
+      const field = formToBuild[name]
       if (this.isRecursiveField(field)) {
         this.updateFormGroup(
           // FIXME: typings
           (form as any)[name],
           formErrors[name] as FormReactiveErrors,
           validationMessages[name] as FormReactiveValidationMessages,
-          obj[name] as BuildFormArgument,
+          formToBuild[name] as BuildFormArgument,
           defaultValues[name] as BuildFormDefaultValues
         )
         continue
@@ -66,7 +66,7 @@ export class FormValidatorService {
 
       if (field?.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string }
 
-      const defaultValue = defaultValues[name] || ''
+      const defaultValue = defaultValues[name] ?? ''
 
       form.addControl(
         name + '',
@@ -75,6 +75,55 @@ export class FormValidatorService {
     }
   }
 
+  addControlInFormArray (options: {
+    formErrors: FormReactiveErrors
+    validationMessages: FormReactiveValidationMessages
+    formArray: FormArray
+    controlName: string
+    formToBuild: BuildFormArgument
+    defaultValues?: BuildFormDefaultValues
+  }) {
+    const { formArray, formErrors, validationMessages, controlName, formToBuild, defaultValues = {} } = options
+
+    const formGroup = new FormGroup({})
+    if (!formErrors[controlName]) formErrors[controlName] = [] as FormReactiveErrors[]
+    if (!validationMessages[controlName]) validationMessages[controlName] = []
+
+    const formArrayErrors = formErrors[controlName] as FormReactiveErrors[]
+    const formArrayValidationMessages = validationMessages[controlName] as FormReactiveValidationMessages[]
+
+    const totalControls = formArray.controls.length
+    formArrayErrors.push({})
+    formArrayValidationMessages.push({})
+
+    this.updateFormGroup(
+      formGroup,
+      formArrayErrors[totalControls],
+      formArrayValidationMessages[totalControls],
+      formToBuild,
+      defaultValues
+    )
+
+    formArray.push(formGroup)
+  }
+
+  removeControlFromFormArray (options: {
+    formErrors: FormReactiveErrors
+    validationMessages: FormReactiveValidationMessages
+    index: number
+    formArray: FormArray
+    controlName: string
+  }) {
+    const { formArray, formErrors, validationMessages, index, controlName } = options
+
+    const formArrayErrors = formErrors[controlName] as FormReactiveErrors[]
+    const formArrayValidationMessages = validationMessages[controlName] as FormReactiveValidationMessages[]
+
+    formArrayErrors.splice(index, 1)
+    formArrayValidationMessages.splice(index, 1)
+    formArray.removeAt(index)
+  }
+
   updateTreeValidity (group: FormGroup | FormArray): void {
     for (const key of Object.keys(group.controls)) {
       // FIXME: typings
diff --git a/client/src/app/shared/shared-forms/input-text.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index be03f25b9..2f3c8f603 100644
--- a/client/src/app/shared/shared-forms/input-text.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -1,6 +1,6 @@
 import { Component, ElementRef, forwardRef, Input, ViewChild } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { Notifier } from '@app/core'
+import { FormReactiveErrors } from './form-reactive.service'
 
 @Component({
   selector: 'my-input-text',
@@ -26,9 +26,7 @@ export class InputTextComponent implements ControlValueAccessor {
   @Input() withCopy = false
   @Input() readonly = false
   @Input() show = false
-  @Input() formError: string
-
-  constructor (private notifier: Notifier) { }
+  @Input() formError: string | FormReactiveErrors | FormReactiveErrors[]
 
   get inputType () {
     return this.show
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html
index ac2dfd17c..7f8bd2f62 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.html
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html
@@ -25,7 +25,7 @@
       </ng-template>
     </ng-container>
 
-    <button (click)="onMaximizeClick()" class="maximize-button border-0 m-3" [disabled]="disabled">
+    <button type="button" (click)="onMaximizeClick()" class="maximize-button border-0 m-3" [disabled]="disabled">
       <my-global-icon *ngIf="!isMaximized" [ngbTooltip]="maximizeInText" iconName="fullscreen"></my-global-icon>
 
       <my-global-icon *ngIf="isMaximized" [ngbTooltip]="maximizeOutText" iconName="exit-fullscreen"></my-global-icon>
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.ts b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
index 169be39d1..77e6cbd8c 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
@@ -6,6 +6,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { SafeHtml } from '@angular/platform-browser'
 import { MarkdownService, ScreenService } from '@app/core'
 import { Video } from '@peertube/peertube-models'
+import { FormReactiveErrors } from './form-reactive.service'
 
 @Component({
   selector: 'my-markdown-textarea',
@@ -23,7 +24,7 @@ import { Video } from '@peertube/peertube-models'
 export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   @Input() content = ''
 
-  @Input() formError: string
+  @Input() formError: string | FormReactiveErrors | FormReactiveErrors[]
 
   @Input() truncateTo3Lines: boolean
 
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss
index e69a06947..df19240b4 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -4,6 +4,7 @@
 p-inputmask {
   ::ng-deep input {
     width: 80px;
+    text-align: center;
 
     &:focus-within,
     &:focus {
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index d87e35876..9270c0925 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -1,4 +1,4 @@
-<button *ngIf="!ptRouterLink" class="action-button" [ngClass]="classes" [ngbTooltip]="title">
+<button *ngIf="!ptRouterLink" type="button" class="action-button" [ngClass]="classes" [ngbTooltip]="title">
   <ng-container *ngTemplateOutlet="content"></ng-container>
 </button>
 
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 243394bda..30c6cabf5 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -49,6 +49,7 @@ import { UserHistoryService, UserNotificationsComponent, UserNotificationService
 import {
   EmbedComponent,
   RedundancyService,
+  VideoChapterService,
   VideoFileTokenService,
   VideoImportService,
   VideoOwnershipService,
@@ -215,6 +216,8 @@ import { VideoChannelService } from './video-channel'
 
     VideoPasswordService,
 
+    VideoChapterService,
+
     CustomPageService,
 
     ActorRedirectGuard
diff --git a/client/src/app/shared/shared-main/video-caption/video-caption.service.ts b/client/src/app/shared/shared-main/video-caption/video-caption.service.ts
index 59c0969a9..5e4a27d4e 100644
--- a/client/src/app/shared/shared-main/video-caption/video-caption.service.ts
+++ b/client/src/app/shared/shared-main/video-caption/video-caption.service.ts
@@ -3,9 +3,9 @@ import { catchError, map, switchMap } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { RestExtractor, ServerService } from '@app/core'
-import { objectToFormData, sortBy } from '@app/helpers'
+import { objectToFormData } from '@app/helpers'
 import { VideoPasswordService, VideoService } from '@app/shared/shared-main/video'
-import { peertubeTranslate } from '@peertube/peertube-core-utils'
+import { peertubeTranslate, sortBy } from '@peertube/peertube-core-utils'
 import { ResultList, VideoCaption } from '@peertube/peertube-models'
 import { environment } from '../../../../environments/environment'
 import { VideoCaptionEdit } from './video-caption-edit.model'
diff --git a/client/src/app/shared/shared-main/video/index.ts b/client/src/app/shared/shared-main/video/index.ts
index 07d40b117..7414ded23 100644
--- a/client/src/app/shared/shared-main/video/index.ts
+++ b/client/src/app/shared/shared-main/video/index.ts
@@ -1,5 +1,7 @@
 export * from './embed.component'
 export * from './redundancy.service'
+export * from './video-chapter.service'
+export * from './video-chapters-edit.model'
 export * from './video-details.model'
 export * from './video-edit.model'
 export * from './video-file-token.service'
diff --git a/client/src/app/shared/shared-main/video/video-chapter.service.ts b/client/src/app/shared/shared-main/video/video-chapter.service.ts
new file mode 100644
index 000000000..6d221c9e9
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/video-chapter.service.ts
@@ -0,0 +1,34 @@
+import { catchError } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor } from '@app/core'
+import { VideoChapter, VideoChapterUpdate } from '@peertube/peertube-models'
+import { VideoPasswordService } from './video-password.service'
+import { VideoService } from './video.service'
+import { VideoChaptersEdit } from './video-chapters-edit.model'
+import { of } from 'rxjs'
+
+@Injectable()
+export class VideoChapterService {
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor
+  ) {}
+
+  getChapters (options: { videoId: string, videoPassword?: string }) {
+    const headers = VideoPasswordService.buildVideoPasswordHeader(options.videoPassword)
+
+    return this.authHttp.get<{ chapters: VideoChapter[] }>(`${VideoService.BASE_VIDEO_URL}/${options.videoId}/chapters`, { headers })
+      .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  updateChapters (videoId: string, chaptersEdit: VideoChaptersEdit) {
+    if (chaptersEdit.shouldUpdateAPI() !== true) return of(true)
+
+    const body = { chapters: chaptersEdit.getChaptersForUpdate() } as VideoChapterUpdate
+
+    return this.authHttp.put(`${VideoService.BASE_VIDEO_URL}/${videoId}/chapters`, body)
+      .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+}
diff --git a/client/src/app/shared/shared-main/video/video-chapters-edit.model.ts b/client/src/app/shared/shared-main/video/video-chapters-edit.model.ts
new file mode 100644
index 000000000..6d7496ed6
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/video-chapters-edit.model.ts
@@ -0,0 +1,43 @@
+import { simpleObjectsDeepEqual, sortBy } from '@peertube/peertube-core-utils'
+import { VideoChapter } from '@peertube/peertube-models'
+
+export class VideoChaptersEdit {
+  private chaptersFromAPI: VideoChapter[] = []
+
+  private chapters: VideoChapter[]
+
+  loadFromAPI (chapters: VideoChapter[]) {
+    this.chapters = chapters || []
+
+    this.chaptersFromAPI = chapters
+  }
+
+  patch (values: { [ id: string ]: any }) {
+    const chapters = values.chapters || []
+
+    this.chapters = chapters.map((c: any) => {
+      return {
+        timecode: c.timecode || 0,
+        title: c.title
+      }
+    })
+  }
+
+  toFormPatch () {
+    return { chapters: this.chapters }
+  }
+
+  getChaptersForUpdate (): VideoChapter[] {
+    return this.chapters.filter(c => !!c.title)
+  }
+
+  hasDuplicateValues () {
+    const timecodes = this.chapters.map(c => c.timecode)
+
+    return new Set(timecodes).size !== this.chapters.length
+  }
+
+  shouldUpdateAPI () {
+    return simpleObjectsDeepEqual(sortBy(this.getChaptersForUpdate(), 'timecode'), this.chaptersFromAPI) !== true
+  }
+}