Add video chapters support

29 files changed, 463 insertions, 93 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 f3c1f1634..8342562c3 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
@@ -230,6 +230,57 @@
       </ng-template>
     </ng-container>
 
+    <ng-container ngbNavItem *ngIf="!liveVideo">
+      <a ngbNavLink i18n>Chapters</a>
+
+      <ng-template ngbNavContent>
+        <div class="row mb-5">
+          <div class="chapters col-md-12 col-xl-6" formArrayName="chapters">
+            <ng-container *ngFor="let chapterControl of getChaptersFormArray().controls; let i = index">
+              <div class="chapter" [formGroupName]="i">
+                <!-- Row 1 -->
+                <div></div>
+
+                <label i18n [ngClass]="{ 'hide-chapter-label': i !== 0 }" [for]="'timecode[' + i + ']'">Timecode</label>
+
+                <label i18n [ngClass]="{ 'hide-chapter-label': i !== 0 }" [for]="'title[' + i + ']'">Chapter name</label>
+
+                <div></div>
+
+                <!-- Row 2 -->
+                <div class="position">{{ i + 1 }}</div>
+
+                <my-timestamp-input
+                  class="d-block" [disableBorder]="false" [inputName]="'timecode[' + i + ']'"
+                  [maxTimestamp]="videoToUpdate?.duration" formControlName="timecode"
+                ></my-timestamp-input>
+
+                <div>
+                  <input
+                    [ngClass]="{ 'input-error': formErrors.chapters[i].title }"
+                    type="text" [id]="'title[' + i + ']'" [name]="'title[' + i + ']'" formControlName="title"
+                  />
+
+                  <div [ngClass]="{ 'opacity-0': !formErrors.chapters[i].title }" class="form-error">
+                    <span class="opacity-0">t</span> <!-- Ensure we have reserve a correct height -->
+                    {{ formErrors.chapters[i].title }}
+                  </div>
+                </div>
+
+                <my-delete-button *ngIf="!isLastChapterControl(i)" (click)="deleteChapterControl(i)"></my-delete-button>
+              </div>
+            </ng-container>
+
+            <div *ngIf="getChapterArrayErrors()" class="form-error">
+              {{ getChapterArrayErrors() }}
+            </div>
+          </div>
+
+          <my-embed *ngIf="videoToUpdate" class="col-md-12 col-xl-6" [video]="videoToUpdate"></my-embed>
+        </div>
+      </ng-template>
+    </ng-container>
+
     <ng-container ngbNavItem *ngIf="liveVideo">
       <a ngbNavLink i18n>Live settings</a>
 
@@ -312,7 +363,6 @@
 
     </ng-container>
 
-
     <ng-container ngbNavItem>
       <a ngbNavLink i18n>Advanced settings</a>
 
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 b0c053019..a81d62dd1 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
@@ -117,6 +117,32 @@ p-calendar {
   @include orange-button;
 }
 
+.hide-chapter-label {
+  height: 0;
+  opacity: 0;
+}
+
+.chapter {
+  display: grid;
+  grid-template-columns: auto auto minmax(150px, 350px) 1fr;
+  grid-template-rows: auto auto;
+  column-gap: 1rem;
+
+  .position {
+    height: 31px;
+    display: flex;
+    align-items: center;
+  }
+
+  my-delete-button {
+    width: fit-content;
+  }
+
+  .form-error {
+    margin-top: 0;
+  }
+}
+
 @include on-small-main-col {
   .form-columns {
     grid-template-columns: 1fr;
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 898d3b0a6..35beba5b1 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
@@ -2,10 +2,10 @@ import { forkJoin } from 'rxjs'
 import { map } from 'rxjs/operators'
 import { SelectChannelItem, SelectOptionsItem } from 'src/types/select-options-item.model'
 import { ChangeDetectorRef, Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
-import { AbstractControl, FormArray, FormControl, FormGroup, Validators } from '@angular/forms'
+import { AbstractControl, FormArray, FormGroup, Validators } from '@angular/forms'
 import { HooksService, PluginService, ServerService } from '@app/core'
 import { removeElementFromArray } from '@app/helpers'
-import { BuildFormValidator } from '@app/shared/form-validators'
+import { BuildFormArgument, BuildFormValidator } from '@app/shared/form-validators'
 import {
   VIDEO_CATEGORY_VALIDATOR,
   VIDEO_CHANNEL_VALIDATOR,
@@ -20,9 +20,10 @@ import {
   VIDEO_SUPPORT_VALIDATOR,
   VIDEO_TAGS_ARRAY_VALIDATOR
 } from '@app/shared/form-validators/video-validators'
-import { FormReactiveValidationMessages, FormValidatorService } from '@app/shared/shared-forms'
+import { VIDEO_CHAPTERS_ARRAY_VALIDATOR, VIDEO_CHAPTER_TITLE_VALIDATOR } from '@app/shared/form-validators/video-chapter-validators'
+import { FormReactiveErrors, FormReactiveValidationMessages, FormValidatorService } from '@app/shared/shared-forms'
 import { InstanceService } from '@app/shared/shared-instance'
-import { VideoCaptionEdit, VideoCaptionWithPathEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
+import { VideoCaptionEdit, VideoCaptionWithPathEdit, VideoChaptersEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import {
   HTMLServerConfig,
@@ -30,6 +31,7 @@ import {
   LiveVideoLatencyMode,
   RegisterClientFormFieldOptions,
   RegisterClientVideoFieldOptions,
+  VideoChapter,
   VideoConstant,
   VideoDetails,
   VideoPrivacy,
@@ -57,7 +59,7 @@ type PluginField = {
 })
 export class VideoEditComponent implements OnInit, OnDestroy {
   @Input() form: FormGroup
-  @Input() formErrors: { [ id: string ]: string } = {}
+  @Input() formErrors: FormReactiveErrors & { chapters?: { title: string }[] } = {}
   @Input() validationMessages: FormReactiveValidationMessages = {}
 
   @Input() videoToUpdate: VideoDetails
@@ -68,6 +70,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
   @Input() videoCaptions: VideoCaptionWithPathEdit[] = []
   @Input() videoSource: VideoSource
 
+  @Input() videoChapters: VideoChapter[] = []
+
   @Input() hideWaitTranscoding = false
   @Input() updateVideoFileEnabled = false
 
@@ -150,7 +154,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
       licence: this.serverConfig.defaults.publish.licence,
       tags: []
     }
-    const obj: { [ id: string ]: BuildFormValidator } = {
+    const obj: BuildFormArgument = {
       name: VIDEO_NAME_VALIDATOR,
       privacy: VIDEO_PRIVACY_VALIDATOR,
       videoPassword: VIDEO_PASSWORD_VALIDATOR,
@@ -183,12 +187,16 @@ export class VideoEditComponent implements OnInit, OnDestroy {
       defaultValues
     )
 
-    this.form.addControl('captions', new FormArray([
-      new FormGroup({
-        language: new FormControl(),
-        captionfile: new FormControl()
-      })
-    ]))
+    this.form.addControl('chapters', new FormArray([], VIDEO_CHAPTERS_ARRAY_VALIDATOR.VALIDATORS))
+    this.addNewChapterControl()
+
+    this.form.get('chapters').valueChanges.subscribe((chapters: { title: string, timecode: string }[]) => {
+      const lastChapter = chapters[chapters.length - 1]
+
+      if (lastChapter.title || lastChapter.timecode) {
+        this.addNewChapterControl()
+      }
+    })
 
     this.trackChannelChange()
     this.trackPrivacyChange()
@@ -426,6 +434,70 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     this.form.valueChanges.subscribe(() => this.formValidatorService.updateTreeValidity(this.pluginDataFormGroup))
   }
 
+  // ---------------------------------------------------------------------------
+
+  addNewChapterControl () {
+    const chaptersFormArray = this.getChaptersFormArray()
+    const controls = chaptersFormArray.controls
+
+    if (controls.length !== 0) {
+      const lastControl = chaptersFormArray.controls[controls.length - 1]
+      lastControl.get('title').addValidators(Validators.required)
+    }
+
+    this.formValidatorService.addControlInFormArray({
+      controlName: 'chapters',
+      formArray: chaptersFormArray,
+      formErrors: this.formErrors,
+      validationMessages: this.validationMessages,
+      formToBuild: {
+        timecode: null,
+        title: VIDEO_CHAPTER_TITLE_VALIDATOR
+      },
+      defaultValues: {
+        timecode: 0
+      }
+    })
+  }
+
+  getChaptersFormArray () {
+    return this.form.controls['chapters'] as FormArray
+  }
+
+  deleteChapterControl (index: number) {
+    this.formValidatorService.removeControlFromFormArray({
+      controlName: 'chapters',
+      formArray: this.getChaptersFormArray(),
+      formErrors: this.formErrors,
+      validationMessages: this.validationMessages,
+      index
+    })
+  }
+
+  isLastChapterControl (index: number) {
+    return this.getChaptersFormArray().length - 1 === index
+  }
+
+  patchChapters (chaptersEdit: VideoChaptersEdit) {
+    const totalChapters = chaptersEdit.getChaptersForUpdate().length
+    const totalControls = this.getChaptersFormArray().length
+
+    // Add missing controls. We use <= because we need the "empty control" to add another chapter
+    for (let i = 0; i <= totalChapters - totalControls; i++) {
+      this.addNewChapterControl()
+    }
+
+    this.form.patchValue(chaptersEdit.toFormPatch())
+  }
+
+  getChapterArrayErrors () {
+    if (!this.getChaptersFormArray().errors) return ''
+
+    return Object.values(this.getChaptersFormArray().errors).join('. ')
+  }
+
+  // ---------------------------------------------------------------------------
+
   private trackPrivacyChange () {
     // We will update the schedule input and the wait transcoding checkbox validators
     this.form.controls['privacy']
@@ -469,8 +541,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
           } else {
             videoPasswordControl.clearValidators()
           }
-          videoPasswordControl.updateValueAndValidity()
 
+          videoPasswordControl.updateValueAndValidity()
         }
       )
   }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
index f7a570ed3..69d12b85f 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.ts
@@ -4,7 +4,7 @@ import { Router } from '@angular/router'
 import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService } from '@app/core'
 import { scrollToTop } from '@app/helpers'
 import { FormReactiveService } from '@app/shared/shared-forms'
-import { Video, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
+import { Video, VideoCaptionService, VideoChapterService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { logger } from '@root-helpers/logger'
@@ -54,6 +54,7 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
     protected serverService: ServerService,
     protected videoService: VideoService,
     protected videoCaptionService: VideoCaptionService,
+    protected videoChapterService: VideoChapterService,
     private liveVideoService: LiveVideoService,
     private router: Router,
     private hooks: HooksService
@@ -137,6 +138,8 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
     video.uuid = this.videoUUID
     video.shortUUID = this.videoShortUUID
 
+    this.chaptersEdit.patch(this.form.value)
+
     const saveReplay = this.form.value.saveReplay
     const replaySettings = saveReplay
       ? { privacy: this.form.value.replayPrivacy }
@@ -151,7 +154,7 @@ export class VideoGoLiveComponent extends VideoSend implements OnInit, AfterView
 
     // Update the video
     forkJoin([
-      this.updateVideoAndCaptions(video),
+      this.updateVideoAndCaptionsAndChapters({ video, captions: this.videoCaptions }),
 
       this.liveVideoService.updateLive(this.videoId, liveVideoUpdate)
     ]).subscribe({
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
index 97517e1c7..50eb14c6e 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.ts
@@ -4,7 +4,7 @@ import { Router } from '@angular/router'
 import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService } from '@app/core'
 import { scrollToTop } from '@app/helpers'
 import { FormReactiveService } from '@app/shared/shared-forms'
-import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
+import { VideoCaptionService, VideoChapterService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { logger } from '@root-helpers/logger'
 import { PeerTubeProblemDocument, ServerErrorCode, VideoUpdate } from '@peertube/peertube-models'
@@ -42,6 +42,7 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Af
     protected serverService: ServerService,
     protected videoService: VideoService,
     protected videoCaptionService: VideoCaptionService,
+    protected videoChapterService: VideoChapterService,
     private router: Router,
     private videoImportService: VideoImportService,
     private hooks: HooksService
@@ -124,24 +125,25 @@ export class VideoImportTorrentComponent extends VideoSend implements OnInit, Af
     if (!await this.isFormValid()) return
 
     this.video.patch(this.form.value)
+    this.chaptersEdit.patch(this.form.value)
 
     this.isUpdatingVideo = true
 
     // Update the video
-    this.updateVideoAndCaptions(this.video)
-        .subscribe({
-          next: () => {
-            this.isUpdatingVideo = false
-            this.notifier.success($localize`Video to import updated.`)
-
-            this.router.navigate([ '/my-library', 'video-imports' ])
-          },
-
-          error: err => {
-            this.error = err.message
-            scrollToTop()
-            logger.error(err)
-          }
-        })
+    this.updateVideoAndCaptionsAndChapters({ video: this.video, captions: this.videoCaptions, chapters: this.chaptersEdit })
+      .subscribe({
+        next: () => {
+          this.isUpdatingVideo = false
+          this.notifier.success($localize`Video to import updated.`)
+
+          this.router.navigate([ '/my-library', 'video-imports' ])
+        },
+
+        error: err => {
+          this.error = err.message
+          scrollToTop()
+          logger.error(err)
+        }
+      })
   }
 }
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html
index a80d31aaf..30eeca704 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html
@@ -56,6 +56,7 @@
 <!-- Hidden because we want to load the component -->
 <form [hidden]="!hasImportedVideo" novalidate [formGroup]="form">
   <my-video-edit
+    #videoEdit
     [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions" [forbidScheduledPublication]="true"
     [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
     type="import-url"
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
index 634bd9914..4dc04b83e 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.ts
@@ -1,16 +1,17 @@
 import { forkJoin } from 'rxjs'
 import { map, switchMap } from 'rxjs/operators'
-import { AfterViewInit, Component, EventEmitter, OnInit, Output } from '@angular/core'
+import { AfterViewInit, Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, CanComponentDeactivate, HooksService, Notifier, ServerService } from '@app/core'
 import { scrollToTop } from '@app/helpers'
 import { FormReactiveService } from '@app/shared/shared-forms'
-import { VideoCaptionService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
+import { VideoCaptionService, VideoChapterService, VideoEdit, VideoImportService, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { logger } from '@root-helpers/logger'
 import { VideoUpdate } from '@peertube/peertube-models'
 import { hydrateFormFromVideo } from '../shared/video-edit-utils'
 import { VideoSend } from './video-send'
+import { VideoEditComponent } from '../shared/video-edit.component'
 
 @Component({
   selector: 'my-video-import-url',
@@ -21,6 +22,8 @@ import { VideoSend } from './video-send'
   ]
 })
 export class VideoImportUrlComponent extends VideoSend implements OnInit, AfterViewInit, CanComponentDeactivate {
+  @ViewChild('videoEdit', { static: false }) videoEditComponent: VideoEditComponent
+
   @Output() firstStepDone = new EventEmitter<string>()
   @Output() firstStepError = new EventEmitter<void>()
 
@@ -41,6 +44,7 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, AfterV
     protected serverService: ServerService,
     protected videoService: VideoService,
     protected videoCaptionService: VideoCaptionService,
+    protected videoChapterService: VideoChapterService,
     private router: Router,
     private videoImportService: VideoImportService,
     private hooks: HooksService
@@ -85,12 +89,13 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, AfterV
           switchMap(previous => {
             return forkJoin([
               this.videoCaptionService.listCaptions(previous.video.uuid),
+              this.videoChapterService.getChapters({ videoId: previous.video.uuid }),
               this.videoService.getVideo({ videoId: previous.video.uuid })
-            ]).pipe(map(([ videoCaptionsResult, video ]) => ({ videoCaptions: videoCaptionsResult.data, video })))
+            ]).pipe(map(([ videoCaptionsResult, { chapters }, video ]) => ({ videoCaptions: videoCaptionsResult.data, chapters, video })))
           })
         )
         .subscribe({
-          next: ({ video, videoCaptions }) => {
+          next: ({ video, videoCaptions, chapters }) => {
             this.loadingBar.useRef().complete()
             this.firstStepDone.emit(video.name)
             this.isImportingVideo = false
@@ -99,9 +104,12 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, AfterV
             this.video = new VideoEdit(video)
             this.video.patch({ privacy: this.firstStepPrivacyId })
 
+            this.chaptersEdit.loadFromAPI(chapters)
+
             this.videoCaptions = videoCaptions
 
             hydrateFormFromVideo(this.form, this.video, true)
+            setTimeout(() => this.videoEditComponent.patchChapters(this.chaptersEdit))
           },
 
           error: err => {
@@ -117,11 +125,12 @@ export class VideoImportUrlComponent extends VideoSend implements OnInit, AfterV
     if (!await this.isFormValid()) return
 
     this.video.patch(this.form.value)
+    this.chaptersEdit.patch(this.form.value)
 
     this.isUpdatingVideo = true
 
     // Update the video
-    this.updateVideoAndCaptions(this.video)
+    this.updateVideoAndCaptionsAndChapters({ video: this.video, captions: this.videoCaptions, chapters: this.chaptersEdit })
         .subscribe({
           next: () => {
             this.isUpdatingVideo = false
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
index 56dcfa0e6..2c38e11a3 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
@@ -4,9 +4,17 @@ import { Directive, EventEmitter, OnInit } from '@angular/core'
 import { AuthService, CanComponentDeactivateResult, Notifier, ServerService } from '@app/core'
 import { listUserChannelsForSelect } from '@app/helpers'
 import { FormReactive } from '@app/shared/shared-forms'
-import { VideoCaptionEdit, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
+import {
+  VideoCaptionEdit,
+  VideoCaptionService,
+  VideoChapterService,
+  VideoChaptersEdit,
+  VideoEdit,
+  VideoService
+} from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { HTMLServerConfig, VideoConstant, VideoPrivacyType } from '@peertube/peertube-models'
+import { of } from 'rxjs'
 
 @Directive()
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
@@ -14,6 +22,7 @@ export abstract class VideoSend extends FormReactive implements OnInit {
   userVideoChannels: SelectChannelItem[] = []
   videoPrivacies: VideoConstant<VideoPrivacyType>[] = []
   videoCaptions: VideoCaptionEdit[] = []
+  chaptersEdit = new VideoChaptersEdit()
 
   firstStepPrivacyId: VideoPrivacyType
   firstStepChannelId: number
@@ -28,6 +37,7 @@ export abstract class VideoSend extends FormReactive implements OnInit {
   protected serverService: ServerService
   protected videoService: VideoService
   protected videoCaptionService: VideoCaptionService
+  protected videoChapterService: VideoChapterService
 
   protected serverConfig: HTMLServerConfig
 
@@ -60,13 +70,23 @@ export abstract class VideoSend extends FormReactive implements OnInit {
           })
   }
 
-  protected updateVideoAndCaptions (video: VideoEdit) {
+  protected updateVideoAndCaptionsAndChapters (options: {
+    video: VideoEdit
+    captions: VideoCaptionEdit[]
+    chapters?: VideoChaptersEdit
+  }) {
+    const { video, captions, chapters } = options
+
     this.loadingBar.useRef().start()
 
     return this.videoService.updateVideo(video)
         .pipe(
-          // Then update captions
-          switchMap(() => this.videoCaptionService.updateCaptions(video.id, this.videoCaptions)),
+          switchMap(() => this.videoCaptionService.updateCaptions(video.uuid, captions)),
+          switchMap(() => {
+            return chapters
+              ? this.videoChapterService.updateChapters(video.uuid, chapters)
+              : of(true)
+          }),
           tap(() => this.loadingBar.useRef().complete()),
           catchError(err => {
             this.loadingBar.useRef().complete()
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
index cbf43ee5f..cc0dcc1ae 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
@@ -7,7 +7,7 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, CanComponentDeactivate, HooksService, MetaService, Notifier, ServerService, UserService } from '@app/core'
 import { genericUploadErrorHandler, scrollToTop } from '@app/helpers'
 import { FormReactiveService } from '@app/shared/shared-forms'
-import { Video, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
+import { Video, VideoCaptionService, VideoChapterService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { logger } from '@root-helpers/logger'
 import { HttpStatusCode, VideoCreateResult } from '@peertube/peertube-models'
@@ -63,6 +63,7 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     protected serverService: ServerService,
     protected videoService: VideoService,
     protected videoCaptionService: VideoCaptionService,
+    protected videoChapterService: VideoChapterService,
     private userService: UserService,
     private router: Router,
     private hooks: HooksService,
@@ -241,9 +242,11 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     video.uuid = this.videoUploadedIds.uuid
     video.shortUUID = this.videoUploadedIds.shortUUID
 
+    this.chaptersEdit.patch(this.form.value)
+
     this.isUpdatingVideo = true
 
-    this.updateVideoAndCaptions(video)
+    this.updateVideoAndCaptionsAndChapters({ video, captions: this.videoCaptions, chapters: this.chaptersEdit })
         .subscribe({
           next: () => {
             this.isUpdatingVideo = false
diff --git a/client/src/app/+videos/+video-edit/video-update.component.html b/client/src/app/+videos/+video-edit/video-update.component.html
index 9a99c0c3d..2f667658c 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.html
+++ b/client/src/app/+videos/+video-edit/video-update.component.html
@@ -13,6 +13,7 @@
   <form novalidate [formGroup]="form">
 
     <my-video-edit
+      #videoEdit
       [form]="form" [formErrors]="formErrors" [forbidScheduledPublication]="forbidScheduledPublication"
       [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
       [videoCaptions]="videoCaptions" [hideWaitTranscoding]="isWaitTranscodingHidden()"
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 ea2f76d71..82f45f73d 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.ts
+++ b/client/src/app/+videos/+video-edit/video-update.component.ts
@@ -4,18 +4,28 @@ import { of, Subject, Subscription } from 'rxjs'
 import { catchError, map, switchMap } from 'rxjs/operators'
 import { SelectChannelItem } from 'src/types/select-options-item.model'
 import { HttpErrorResponse } from '@angular/common/http'
-import { Component, HostListener, OnDestroy, OnInit } from '@angular/core'
+import { Component, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, CanComponentDeactivate, ConfirmService, Notifier, ServerService, UserService } from '@app/core'
 import { genericUploadErrorHandler } from '@app/helpers'
 import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
-import { Video, VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
+import {
+  Video,
+  VideoCaptionEdit,
+  VideoCaptionService,
+  VideoChapterService,
+  VideoChaptersEdit,
+  VideoDetails,
+  VideoEdit,
+  VideoService
+} from '@app/shared/shared-main'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { pick, simpleObjectsDeepEqual } from '@peertube/peertube-core-utils'
 import { HttpStatusCode, LiveVideo, LiveVideoUpdate, VideoPrivacy, VideoSource, VideoState } from '@peertube/peertube-models'
 import { hydrateFormFromVideo } from './shared/video-edit-utils'
 import { VideoUploadService } from './shared/video-upload.service'
+import { VideoEditComponent } from './shared/video-edit.component'
 
 const debugLogger = debug('peertube:video-update')
 
@@ -25,6 +35,8 @@ const debugLogger = debug('peertube:video-update')
   templateUrl: './video-update.component.html'
 })
 export class VideoUpdateComponent extends FormReactive implements OnInit, OnDestroy, CanComponentDeactivate {
+  @ViewChild('videoEdit', { static: false }) videoEditComponent: VideoEditComponent
+
   videoEdit: VideoEdit
   videoDetails: VideoDetails
   videoSource: VideoSource
@@ -50,6 +62,8 @@ export class VideoUpdateComponent extends FormReactive implements OnInit, OnDest
   private uploadServiceSubscription: Subscription
   private updateSubcription: Subscription
 
+  private chaptersEdit = new VideoChaptersEdit()
+
   constructor (
     protected formReactiveService: FormReactiveService,
     private route: ActivatedRoute,
@@ -58,6 +72,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit, OnDest
     private videoService: VideoService,
     private loadingBar: LoadingBarService,
     private videoCaptionService: VideoCaptionService,
+    private videoChapterService: VideoChapterService,
     private server: ServerService,
     private liveVideoService: LiveVideoService,
     private videoUploadService: VideoUploadService,
@@ -84,10 +99,11 @@ export class VideoUpdateComponent extends FormReactive implements OnInit, OnDest
       .subscribe(state => this.onUploadVideoOngoing(state))
 
     const { videoData } = this.route.snapshot.data
-    const { video, videoChannels, videoCaptions, videoSource, liveVideo, videoPassword } = videoData
+    const { video, videoChannels, videoCaptions, videoChapters, videoSource, liveVideo, videoPassword } = videoData
 
     this.videoDetails = video
     this.videoEdit = new VideoEdit(this.videoDetails, videoPassword)
+    this.chaptersEdit.loadFromAPI(videoChapters)
 
     this.userVideoChannels = videoChannels
     this.videoCaptions = videoCaptions
@@ -106,6 +122,8 @@ export class VideoUpdateComponent extends FormReactive implements OnInit, OnDest
   onFormBuilt () {
     hydrateFormFromVideo(this.form, this.videoEdit, true)
 
+    setTimeout(() => this.videoEditComponent.patchChapters(this.chaptersEdit))
+
     if (this.liveVideo) {
       this.form.patchValue({
         saveReplay: this.liveVideo.saveReplay,
@@ -172,6 +190,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit, OnDest
     if (!await this.checkAndConfirmVideoFileReplacement()) return
 
     this.videoEdit.patch(this.form.value)
+    this.chaptersEdit.patch(this.form.value)
 
     this.abortUpdateIfNeeded()
 
@@ -180,10 +199,12 @@ export class VideoUpdateComponent extends FormReactive implements OnInit, OnDest
 
     this.updateSubcription = this.videoReplacementUploadedSubject.pipe(
       switchMap(() => this.videoService.updateVideo(this.videoEdit)),
+      switchMap(() => this.videoCaptionService.updateCaptions(this.videoEdit.uuid, this.videoCaptions)),
+      switchMap(() => {
+        if (this.liveVideo) return of(true)
 
-      // Then update captions
-      switchMap(() => this.videoCaptionService.updateCaptions(this.videoEdit.id, this.videoCaptions)),
-
+        return this.videoChapterService.updateChapters(this.videoEdit.uuid, this.chaptersEdit)
+      }),
       switchMap(() => {
         if (!this.liveVideo) return of(undefined)
 
diff --git a/client/src/app/+videos/+video-edit/video-update.resolver.ts b/client/src/app/+videos/+video-edit/video-update.resolver.ts
index d114bfb2d..0293f3c71 100644
--- a/client/src/app/+videos/+video-edit/video-update.resolver.ts
+++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts
@@ -4,7 +4,7 @@ import { Injectable } from '@angular/core'
 import { ActivatedRouteSnapshot } from '@angular/router'
 import { AuthService } from '@app/core'
 import { listUserChannelsForSelect } from '@app/helpers'
-import { VideoCaptionService, VideoDetails, VideoPasswordService, VideoService } from '@app/shared/shared-main'
+import { VideoCaptionService, VideoChapterService, VideoDetails, VideoPasswordService, VideoService } from '@app/shared/shared-main'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 import { VideoPrivacy } from '@peertube/peertube-models'
 
@@ -15,6 +15,7 @@ export class VideoUpdateResolver {
     private liveVideoService: LiveVideoService,
     private authService: AuthService,
     private videoCaptionService: VideoCaptionService,
+    private videoChapterService: VideoChapterService,
     private videoPasswordService: VideoPasswordService
   ) {
   }
@@ -25,8 +26,8 @@ export class VideoUpdateResolver {
     return this.videoService.getVideo({ videoId: uuid })
                 .pipe(
                   switchMap(video => forkJoin(this.buildVideoObservables(video))),
-                  map(([ video, videoSource, videoChannels, videoCaptions, liveVideo, videoPassword ]) =>
-                    ({ video, videoChannels, videoCaptions, videoSource, liveVideo, videoPassword }))
+                  map(([ video, videoSource, videoChannels, videoCaptions, videoChapters, liveVideo, videoPassword ]) =>
+                    ({ video, videoChannels, videoCaptions, videoChapters, videoSource, liveVideo, videoPassword }))
                 )
   }
 
@@ -46,6 +47,12 @@ export class VideoUpdateResolver {
           map(result => result.data)
         ),
 
+      this.videoChapterService
+        .getChapters({ videoId: video.uuid })
+        .pipe(
+          map(({ chapters }) => chapters)
+        ),
+
       video.isLive
         ? this.liveVideoService.getVideoLive(video.id)
         : of(undefined),
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 febb3c828..39c9c7986 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -18,7 +18,7 @@ import {
 } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { isXPercentInViewport, scrollToTop, toBoolean } from '@app/helpers'
-import { Video, VideoCaptionService, VideoDetails, VideoFileTokenService, VideoService } from '@app/shared/shared-main'
+import { Video, VideoCaptionService, VideoChapterService, VideoDetails, VideoFileTokenService, VideoService } from '@app/shared/shared-main'
 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
@@ -31,6 +31,7 @@ import {
   ServerErrorCode,
   Storyboard,
   VideoCaption,
+  VideoChapter,
   VideoPrivacy,
   VideoState,
   VideoStateType
@@ -83,6 +84,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
   video: VideoDetails = null
   videoCaptions: VideoCaption[] = []
+  videoChapters: VideoChapter[] = []
   liveVideo: LiveVideo
   videoPassword: string
   storyboards: Storyboard[] = []
@@ -125,6 +127,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private notifier: Notifier,
     private zone: NgZone,
     private videoCaptionService: VideoCaptionService,
+    private videoChapterService: VideoChapterService,
     private hotkeysService: HotkeysService,
     private hooks: HooksService,
     private pluginService: PluginService,
@@ -306,14 +309,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     forkJoin([
       videoAndLiveObs,
       this.videoCaptionService.listCaptions(videoId, videoPassword),
+      this.videoChapterService.getChapters({ videoId, videoPassword }),
       this.videoService.getStoryboards(videoId, videoPassword),
       this.userService.getAnonymousOrLoggedUser()
     ]).subscribe({
-      next: ([ { video, live, videoFileToken }, captionsResult, storyboards, loggedInOrAnonymousUser ]) => {
+      next: ([ { video, live, videoFileToken }, captionsResult, chaptersResult, storyboards, loggedInOrAnonymousUser ]) => {
         this.onVideoFetched({
           video,
           live,
           videoCaptions: captionsResult.data,
+          videoChapters: chaptersResult.chapters,
           storyboards,
           videoFileToken,
           videoPassword,
@@ -411,6 +416,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     video: VideoDetails
     live: LiveVideo
     videoCaptions: VideoCaption[]
+    videoChapters: VideoChapter[]
     storyboards: Storyboard[]
     videoFileToken: string
     videoPassword: string
@@ -422,6 +428,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       video,
       live,
       videoCaptions,
+      videoChapters,
       storyboards,
       videoFileToken,
       videoPassword,
@@ -433,6 +440,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     this.video = video
     this.videoCaptions = videoCaptions
+    this.videoChapters = videoChapters
     this.liveVideo = live
     this.videoFileToken = videoFileToken
     this.videoPassword = videoPassword
@@ -480,6 +488,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     const params = {
       video: this.video,
       videoCaptions: this.videoCaptions,
+      videoChapters: this.videoChapters,
       storyboards: this.storyboards,
       liveVideo: this.liveVideo,
       videoFileToken: this.videoFileToken,
@@ -636,6 +645,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     video: VideoDetails
     liveVideo: LiveVideo
     videoCaptions: VideoCaption[]
+    videoChapters: VideoChapter[]
     storyboards: Storyboard[]
 
     videoFileToken: string
@@ -651,6 +661,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       video,
       liveVideo,
       videoCaptions,
+      videoChapters,
       storyboards,
       videoFileToken,
       videoPassword,
@@ -750,6 +761,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       videoPassword: () => videoPassword,
 
       videoCaptions: playerCaptions,
+      videoChapters,
       storyboard,
 
       videoShortUUID: video.shortUUID,
diff --git a/client/src/app/helpers/utils/object.ts b/client/src/app/helpers/utils/object.ts
index b69e31edf..ef1acd298 100644
--- a/client/src/app/helpers/utils/object.ts
+++ b/client/src/app/helpers/utils/object.ts
@@ -7,17 +7,6 @@ function removeElementFromArray <T> (arr: T[], elem: T) {
   if (index !== -1) arr.splice(index, 1)
 }
 
-function sortBy (obj: any[], key1: string, key2?: string) {
-  return obj.sort((a, b) => {
-    const elem1 = key2 ? a[key1][key2] : a[key1]
-    const elem2 = key2 ? b[key1][key2] : b[key1]
-
-    if (elem1 < elem2) return -1
-    if (elem1 === elem2) return 0
-    return 1
-  })
-}
-
 function splitIntoArray (value: any) {
   if (!value) return undefined
   if (Array.isArray(value)) return value
@@ -41,7 +30,6 @@ function toBoolean (value: any) {
 }
 
 export {
-  sortBy,
   immutableAssign,
   removeElementFromArray,
   splitIntoArray,
diff --git a/client/src/app/menu/language-chooser.component.ts b/client/src/app/menu/language-chooser.component.ts
index 1ec5987c2..978a4af39 100644
--- a/client/src/app/menu/language-chooser.component.ts
+++ b/client/src/app/menu/language-chooser.component.ts
@@ -1,7 +1,7 @@
 import { Component, ElementRef, Inject, LOCALE_ID, ViewChild } from '@angular/core'
-import { getDevLocale, isOnDevLocale, sortBy } from '@app/helpers'
+import { getDevLocale, isOnDevLocale } from '@app/helpers'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { getCompleteLocale, getShortLocale, I18N_LOCALES, objectKeysTyped } from '@peertube/peertube-core-utils'
+import { getCompleteLocale, getShortLocale, I18N_LOCALES, objectKeysTyped, sortBy } from '@peertube/peertube-core-utils'
 
 @Component({
   selector: 'my-language-chooser',
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
+  }
+}