Add basic video editor support

26 files changed, 575 insertions, 9 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index f2eaa3033..e3b6f8305 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -197,6 +197,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
           resolutions: {}
         }
       },
+      videoEditor: {
+        enabled: null
+      },
       autoBlacklist: {
         videos: {
           ofUsers: {
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
index 1158f027b..2be855756 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
@@ -192,4 +192,29 @@
 
     </div>
   </div>
+
+  <div class="form-row mt-2"> <!-- video editor grid -->
+    <div class="form-group col-12 col-lg-4 col-xl-3">
+      <div i18n class="inner-form-title">VIDEO EDITOR</div>
+      <div i18n class="inner-form-description">
+        Allows your users to edit their video (cut, add intro/outro, add a watermark etc)
+      </div>
+    </div>
+
+    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+
+      <ng-container formGroupName="videoEditor">
+        <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
+          <my-peertube-checkbox
+            inputName="videoEditorEnabled" formControlName="enabled"
+            i18n-labelText labelText="Enable video editor"
+          >
+            <ng-container ngProjectAs="description" *ngIf="!isTranscodingEnabled()">
+              <span i18n>⚠️ You need to enable transcoding first to enable video editor</span>
+            </ng-container>
+          </my-peertube-checkbox>
+        </div>
+      </ng-container>
+    </div>
+  </div>
 </ng-container>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts
index 3397c3dbd..948c10b69 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts
@@ -71,6 +71,8 @@ export class EditVODTranscodingComponent implements OnInit, OnChanges {
   }
 
   private checkTranscodingFields () {
+    const transcodingControl = this.form.get('transcoding.enabled')
+    const videoEditorControl = this.form.get('videoEditor.enabled')
     const hlsControl = this.form.get('transcoding.hls.enabled')
     const webtorrentControl = this.form.get('transcoding.webtorrent.enabled')
 
@@ -95,5 +97,12 @@ export class EditVODTranscodingComponent implements OnInit, OnChanges {
                   webtorrentControl.enable()
                 }
               })
+
+    transcodingControl.valueChanges
+              .subscribe(newValue => {
+                if (newValue === false) {
+                  videoEditorControl.setValue(false)
+                }
+              })
   }
 }
diff --git a/client/src/app/+admin/overview/videos/video-list.component.scss b/client/src/app/+admin/overview/videos/video-list.component.scss
index 543cb433c..616b9bc6b 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.scss
+++ b/client/src/app/+admin/overview/videos/video-list.component.scss
@@ -1,5 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
+
 my-embed {
   display: block;
   max-width: 500px;
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index 261e87f99..c998b7c49 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -9,7 +9,7 @@ import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
 import { MiniatureDisplayOptions, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
-import { VideoChannel, VideoSortField } from '@shared/models'
+import { VideoChannel, VideoSortField, VideoState } from '@shared/models'
 import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component'
 
 @Component({
@@ -205,6 +205,12 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
   private buildActions () {
     this.videoActions = [
       {
+        label: $localize`Editor`,
+        linkBuilder: ({ video }) => [ '/video-editor/edit', video.uuid ],
+        isDisplayed: ({ video }) => video.state.id === VideoState.PUBLISHED,
+        iconName: 'film'
+      },
+      {
         label: $localize`Display live information`,
         handler: ({ video }) => this.displayLiveInformation(video),
         isDisplayed: ({ video }) => video.isLive,
diff --git a/client/src/app/+video-editor/edit/index.ts b/client/src/app/+video-editor/edit/index.ts
new file mode 100644
index 000000000..390ca80fc
--- /dev/null
+++ b/client/src/app/+video-editor/edit/index.ts
@@ -0,0 +1,2 @@
+export * from './video-editor-edit.component'
+export * from './video-editor-edit.resolver'
diff --git a/client/src/app/+video-editor/edit/video-editor-edit.component.html b/client/src/app/+video-editor/edit/video-editor-edit.component.html
new file mode 100644
index 000000000..d33dfaf18
--- /dev/null
+++ b/client/src/app/+video-editor/edit/video-editor-edit.component.html
@@ -0,0 +1,88 @@
+<div class="margin-content">
+  <h1 class="title-page title-page-single" i18n>Edit {{ video.name }}</h1>
+
+  <div class="columns">
+    <form role="form" [formGroup]="form">
+
+      <div class="section cut" formGroupName="cut">
+        <h2 i18n>CUT VIDEO</h2>
+
+        <div i18n class="description">Set a new start/end.</div>
+
+        <div class="form-group">
+          <label i18n for="cutStart">New start</label>
+          <my-timestamp-input inputName="cutStart" [disableBorder]="false" [maxTimestamp]="video.duration" formControlName="start"></my-timestamp-input>
+        </div>
+
+        <div class="form-group">
+          <label i18n for="cutEnd">New end</label>
+          <my-timestamp-input inputName="cutEnd" [disableBorder]="false" [maxTimestamp]="video.duration" formControlName="end"></my-timestamp-input>
+        </div>
+      </div>
+
+      <div class="section" formGroupName="add-intro">
+        <h2 i18n>ADD INTRO</h2>
+
+        <div i18n class="description">Concatenate a file at the beginning of the video.</div>
+
+        <div class="form-group">
+          <my-reactive-file
+            formControlName="file" inputName="addIntroFile" i18n-inputLabel inputLabel="Select the intro video file"
+            [extensions]="videoExtensions" [displayFilename]="true"
+            [ngbTooltip]="getIntroOutroTooltip()"
+          ></my-reactive-file>
+        </div>
+      </div>
+
+      <div class="section" formGroupName="add-outro">
+        <h2 i18n>ADD OUTRO</h2>
+
+        <div i18n class="description">Concatenate a file at the end of the video.</div>
+
+        <div class="form-group">
+          <my-reactive-file
+            formControlName="file" inputName="addOutroFile" i18n-inputLabel inputLabel="Select the outro video file"
+            [extensions]="videoExtensions" [displayFilename]="true"
+            [ngbTooltip]="getIntroOutroTooltip()"
+          ></my-reactive-file>
+        </div>
+      </div>
+
+      <div class="section" formGroupName="add-watermark">
+        <h2 i18n>ADD WATERMARK</h2>
+
+        <div i18n class="description">Add a watermark image to the video.</div>
+
+        <div class="form-group">
+          <my-reactive-file
+            formControlName="file" inputName="addWatermarkFile" i18n-inputLabel inputLabel="Select watermark image file"
+            [extensions]="imageExtensions" [displayFilename]="true"
+            [ngbTooltip]="getWatermarkTooltip()"
+          ></my-reactive-file>
+        </div>
+      </div>
+
+      <my-button
+        className="orange-button" i18n-label label="Run video edition" icon="circle-tick"
+        (click)="runEdition()" (keydown.enter)="runEdition()"
+        [disabled]="!form.valid || isRunningEdition || noEdition()"
+      ></my-button>
+    </form>
+
+
+    <div class="information">
+      <div>
+        <label i18n>Video before edition</label>
+        <my-embed [video]="video"></my-embed>
+      </div>
+
+      <div *ngIf="!noEdition()">
+        <label i18n>Edition tasks:</label>
+
+        <ol>
+          <li *ngFor="let task of getTasksSummary()">{{ task }}</li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/+video-editor/edit/video-editor-edit.component.scss b/client/src/app/+video-editor/edit/video-editor-edit.component.scss
new file mode 100644
index 000000000..43f336f59
--- /dev/null
+++ b/client/src/app/+video-editor/edit/video-editor-edit.component.scss
@@ -0,0 +1,76 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.columns {
+  display: flex;
+
+  .information {
+    width: 100%;
+    margin-left: 50px;
+
+    > div {
+      margin-bottom: 30px;
+    }
+
+    @media screen and (max-width: $small-view) {
+      display: none;
+    }
+  }
+}
+
+h1 {
+  font-size: 20px;
+}
+
+h2 {
+  font-weight: $font-bold;
+  font-size: 16px;
+  color: pvar(--mainColor);
+  background-color: pvar(--mainBackgroundColor);
+  padding: 0 5px;
+  width: fit-content;
+  margin: -8px 0 0;
+}
+
+.section {
+  $min-width: 600px;
+
+  @include padding-left(10px);
+
+  min-width: $min-width;
+
+  margin-bottom: 50px;
+  border: 1px solid $separator-border-color;
+  border-radius: 5px;
+  width: fit-content;
+
+  .form-group,
+  .description {
+    @include margin-left(5px);
+  }
+
+  .description {
+    color: pvar(--greyForegroundColor);
+    margin-top: 5px;
+    margin-bottom: 15px;
+  }
+
+  @media screen and (max-width: $min-width) {
+    min-width: none;
+  }
+}
+
+my-timestamp-input {
+  display: block;
+}
+
+my-embed {
+  display: block;
+  max-width: 500px;
+  width: 100%;
+}
+
+my-reactive-file {
+  display: block;
+  width: fit-content;
+}
diff --git a/client/src/app/+video-editor/edit/video-editor-edit.component.ts b/client/src/app/+video-editor/edit/video-editor-edit.component.ts
new file mode 100644
index 000000000..93d7ffcec
--- /dev/null
+++ b/client/src/app/+video-editor/edit/video-editor-edit.component.ts
@@ -0,0 +1,202 @@
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { ConfirmService, Notifier, ServerService } from '@app/core'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { Video, VideoDetails } from '@app/shared/shared-main'
+import { LoadingBarService } from '@ngx-loading-bar/core'
+import { secondsToTime } from '@shared/core-utils'
+import { VideoEditorTask, VideoEditorTaskCut } from '@shared/models'
+import { VideoEditorService } from '../shared'
+
+@Component({
+  selector: 'my-video-editor-edit',
+  templateUrl: './video-editor-edit.component.html',
+  styleUrls: [ './video-editor-edit.component.scss' ]
+})
+export class VideoEditorEditComponent extends FormReactive implements OnInit {
+  isRunningEdition = false
+
+  video: VideoDetails
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private serverService: ServerService,
+    private notifier: Notifier,
+    private router: Router,
+    private route: ActivatedRoute,
+    private videoEditorService: VideoEditorService,
+    private loadingBar: LoadingBarService,
+    private confirmService: ConfirmService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.video = this.route.snapshot.data.video
+
+    const defaultValues = {
+      cut: {
+        start: 0,
+        end: this.video.duration
+      }
+    }
+
+    this.buildForm({
+      cut: {
+        start: null,
+        end: null
+      },
+      'add-intro': {
+        file: null
+      },
+      'add-outro': {
+        file: null
+      },
+      'add-watermark': {
+        file: null
+      }
+    }, defaultValues)
+  }
+
+  get videoExtensions () {
+    return this.serverService.getHTMLConfig().video.file.extensions
+  }
+
+  get imageExtensions () {
+    return this.serverService.getHTMLConfig().video.image.extensions
+  }
+
+  async runEdition () {
+    if (this.isRunningEdition) return
+
+    const title = $localize`Are you sure you want to edit "${this.video.name}"?`
+    const listHTML = this.getTasksSummary().map(t => `<li>${t}</li>`).join('')
+
+    // eslint-disable-next-line max-len
+    const confirmHTML = $localize`The current video will be overwritten by this edited video and <strong>you won't be able to recover it</strong>.<br /><br />` +
+      $localize`As a reminder, the following tasks will be executed: <ol>${listHTML}</ol>`
+
+    if (await this.confirmService.confirm(confirmHTML, title) !== true) return
+
+    this.isRunningEdition = true
+
+    const tasks = this.buildTasks()
+
+    this.loadingBar.useRef().start()
+
+    return this.videoEditorService.editVideo(this.video.uuid, tasks)
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`Video updated.`)
+          this.router.navigateByUrl(Video.buildWatchUrl(this.video))
+        },
+
+        error: err => {
+          this.loadingBar.useRef().complete()
+          this.isRunningEdition = false
+          this.notifier.error(err.message)
+          console.error(err)
+        }
+      })
+  }
+
+  getIntroOutroTooltip () {
+    return $localize`(extensions: ${this.videoExtensions.join(', ')})`
+  }
+
+  getWatermarkTooltip () {
+    return $localize`(extensions: ${this.imageExtensions.join(', ')})`
+  }
+
+  noEdition () {
+    return this.buildTasks().length === 0
+  }
+
+  getTasksSummary () {
+    const tasks = this.buildTasks()
+
+    return tasks.map(t => {
+      if (t.name === 'add-intro') {
+        return $localize`"${this.getFilename(t.options.file)}" will be added at the beggining of the video`
+      }
+
+      if (t.name === 'add-outro') {
+        return $localize`"${this.getFilename(t.options.file)}" will be added at the end of the video`
+      }
+
+      if (t.name === 'add-watermark') {
+        return $localize`"${this.getFilename(t.options.file)}" image watermark will be added to the video`
+      }
+
+      if (t.name === 'cut') {
+        const { start, end } = t.options
+
+        if (start !== undefined && end !== undefined) {
+          return $localize`Video will begin at ${secondsToTime(start)} and stop at ${secondsToTime(end)}`
+        }
+
+        if (start !== undefined) {
+          return $localize`Video will begin at ${secondsToTime(start)}`
+        }
+
+        if (end !== undefined) {
+          return $localize`Video will stop at ${secondsToTime(end)}`
+        }
+      }
+
+      return ''
+    })
+  }
+
+  private getFilename (obj: any) {
+    return obj.name
+  }
+
+  private buildTasks () {
+    const tasks: VideoEditorTask[] = []
+    const value = this.form.value
+
+    const cut = value['cut']
+    if (cut['start'] !== 0 || cut['end'] !== this.video.duration) {
+
+      const options: VideoEditorTaskCut['options'] = {}
+      if (cut['start'] !== 0) options.start = cut['start']
+      if (cut['end'] !== this.video.duration) options.end = cut['end']
+
+      tasks.push({
+        name: 'cut',
+        options
+      })
+    }
+
+    if (value['add-intro']?.['file']) {
+      tasks.push({
+        name: 'add-intro',
+        options: {
+          file: value['add-intro']['file']
+        }
+      })
+    }
+
+    if (value['add-outro']?.['file']) {
+      tasks.push({
+        name: 'add-outro',
+        options: {
+          file: value['add-outro']['file']
+        }
+      })
+    }
+
+    if (value['add-watermark']?.['file']) {
+      tasks.push({
+        name: 'add-watermark',
+        options: {
+          file: value['add-watermark']['file']
+        }
+      })
+    }
+
+    return tasks
+  }
+
+}
diff --git a/client/src/app/+video-editor/edit/video-editor-edit.resolver.ts b/client/src/app/+video-editor/edit/video-editor-edit.resolver.ts
new file mode 100644
index 000000000..7b95ae834
--- /dev/null
+++ b/client/src/app/+video-editor/edit/video-editor-edit.resolver.ts
@@ -0,0 +1,18 @@
+
+import { Injectable } from '@angular/core'
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router'
+import { VideoService } from '@app/shared/shared-main'
+
+@Injectable()
+export class VideoEditorEditResolver implements Resolve<any> {
+  constructor (
+    private videoService: VideoService
+  ) {
+  }
+
+  resolve (route: ActivatedRouteSnapshot) {
+    const videoId: string = route.params['videoId']
+
+    return this.videoService.getVideo({ videoId })
+  }
+}
diff --git a/client/src/app/+video-editor/index.ts b/client/src/app/+video-editor/index.ts
new file mode 100644
index 000000000..5a9e9fdd0
--- /dev/null
+++ b/client/src/app/+video-editor/index.ts
@@ -0,0 +1 @@
+export * from './video-editor.module'
diff --git a/client/src/app/+video-editor/shared/index.ts b/client/src/app/+video-editor/shared/index.ts
new file mode 100644
index 000000000..eaf88b6f4
--- /dev/null
+++ b/client/src/app/+video-editor/shared/index.ts
@@ -0,0 +1 @@
+export * from './video-editor.service'
diff --git a/client/src/app/+video-editor/shared/video-editor.service.ts b/client/src/app/+video-editor/shared/video-editor.service.ts
new file mode 100644
index 000000000..5b7053039
--- /dev/null
+++ b/client/src/app/+video-editor/shared/video-editor.service.ts
@@ -0,0 +1,28 @@
+import { catchError } from 'rxjs'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor } from '@app/core'
+import { objectToFormData } from '@app/helpers'
+import { VideoService } from '@app/shared/shared-main'
+import { VideoEditorCreateEdition, VideoEditorTask } from '@shared/models'
+
+@Injectable()
+export class VideoEditorService {
+
+  constructor (
+    private authHttp: HttpClient,
+    private restExtractor: RestExtractor
+  ) {}
+
+  editVideo (videoId: number | string, tasks: VideoEditorTask[]) {
+    const url = VideoService.BASE_VIDEO_URL + '/' + videoId + '/editor/edit'
+    const body: VideoEditorCreateEdition = {
+      tasks
+    }
+
+    const data = objectToFormData(body)
+
+    return this.authHttp.post(url, data)
+      .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+}
diff --git a/client/src/app/+video-editor/video-editor-routing.module.ts b/client/src/app/+video-editor/video-editor-routing.module.ts
new file mode 100644
index 000000000..9f37a0dae
--- /dev/null
+++ b/client/src/app/+video-editor/video-editor-routing.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { VideoEditorEditResolver } from './edit'
+import { VideoEditorEditComponent } from './edit/video-editor-edit.component'
+
+const videoEditorRoutes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: 'edit/:videoId',
+        component: VideoEditorEditComponent,
+        data: {
+          meta: {
+            title: $localize`Edit video`
+          }
+        },
+        resolve: {
+          video: VideoEditorEditResolver
+        }
+      }
+    ]
+  }
+]
+
+@NgModule({
+  imports: [ RouterModule.forChild(videoEditorRoutes) ],
+  exports: [ RouterModule ]
+})
+export class VideoEditorRoutingModule {}
diff --git a/client/src/app/+video-editor/video-editor.module.ts b/client/src/app/+video-editor/video-editor.module.ts
new file mode 100644
index 000000000..7bbebc17b
--- /dev/null
+++ b/client/src/app/+video-editor/video-editor.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core'
+import { SharedFormModule } from '@app/shared/shared-forms'
+import { SharedMainModule } from '@app/shared/shared-main'
+import { VideoEditorEditComponent, VideoEditorEditResolver } from './edit'
+import { VideoEditorService } from './shared'
+import { VideoEditorRoutingModule } from './video-editor-routing.module'
+
+@NgModule({
+  imports: [
+    VideoEditorRoutingModule,
+
+    SharedMainModule,
+    SharedFormModule
+  ],
+
+  declarations: [
+    VideoEditorEditComponent
+  ],
+
+  exports: [],
+
+  providers: [
+    VideoEditorService,
+    VideoEditorEditResolver
+  ]
+})
+export class VideoEditorModule { }
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
index e59238ffe..6e8a64f46 100644
--- a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.ts
@@ -35,6 +35,7 @@ export class ActionButtonsComponent implements OnInit, OnChanges {
     playlist: false,
     download: true,
     update: true,
+    editor: true,
     blacklist: true,
     delete: true,
     report: true,
diff --git a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
index 0c4d46714..c6ffb1abd 100644
--- a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
+++ b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.html
@@ -14,6 +14,10 @@
   The video is being transcoded, it may not work properly.
 </div>
 
+<div i18n class="alert alert-warning" *ngIf="isVideoToEdit()">
+  The video is being edited, it may not work properly.
+</div>
+
 <div i18n class="alert alert-warning" *ngIf="isVideoToMoveToExternalStorage()">
   The video is being moved to an external server, it may not work properly.
 </div>
diff --git a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
index a3d3fa6fb..79b56705f 100644
--- a/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/information/video-alert.component.ts
@@ -14,6 +14,10 @@ export class VideoAlertComponent {
     return this.video && this.video.state.id === VideoState.TO_TRANSCODE
   }
 
+  isVideoToEdit () {
+    return this.video && this.video.state.id === VideoState.TO_EDIT
+  }
+
   isVideoTranscodingFailed () {
     return this.video && this.video.state.id === VideoState.TRANSCODING_FAILED
   }
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index b5afc9c92..cd499845b 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -143,6 +143,12 @@ const routes: Routes = [
     canActivateChild: [ MetaGuard ]
   },
 
+  {
+    path: 'video-editor',
+    loadChildren: () => import('./+video-editor/video-editor.module').then(m => m.VideoEditorModule),
+    canActivateChild: [ MetaGuard ]
+  },
+
   // Matches /@:actorName
   {
     matcher: (url): UrlMatchResult => {
diff --git a/client/src/app/shared/shared-forms/form-reactive.ts b/client/src/app/shared/shared-forms/form-reactive.ts
index 07a12c6f6..6b3a6c773 100644
--- a/client/src/app/shared/shared-forms/form-reactive.ts
+++ b/client/src/app/shared/shared-forms/form-reactive.ts
@@ -24,7 +24,7 @@ export abstract class FormReactive {
     this.formErrors = formErrors
     this.validationMessages = validationMessages
 
-    this.form.statusChanges.subscribe(async status => {
+    this.form.statusChanges.subscribe(async () => {
       // FIXME: remove when https://github.com/angular/angular/issues/41519 is fixed
       await this.waitPendingCheck()
 
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 0fe50ac9b..f67d5bb33 100644
--- a/client/src/app/shared/shared-forms/form-validator.service.ts
+++ b/client/src/app/shared/shared-forms/form-validator.service.ts
@@ -30,7 +30,7 @@ export class FormValidatorService {
 
       if (field?.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string }
 
-      const defaultValue = defaultValues[name] || ''
+      const defaultValue = defaultValues[name] ?? ''
 
       if (field?.VALIDATORS) group[name] = [ defaultValue, field.VALIDATORS ]
       else group[name] = [ defaultValue ]
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.html b/client/src/app/shared/shared-forms/timestamp-input.component.html
index c57a4b32c..c89a7b019 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.html
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.html
@@ -1,4 +1,5 @@
 <p-inputMask
   [disabled]="disabled" [(ngModel)]="timestampString" (onBlur)="onBlur()"
-  mask="9:99:99" slotChar="0" (ngModelChange)="onModelChange()"
+  [ngClass]="{ 'border-disabled': disableBorder }"
+  mask="9:99:99" slotChar="0" (ngModelChange)="onModelChange()" [inputId]="inputName"
 ></p-inputMask>
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 d2358c027..27d6fa173 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -1,10 +1,10 @@
 @use '_variables' as *;
+@use '_mixins' as *;
 
 p-inputmask {
   ::ng-deep input {
     width: 80px;
     font-size: 15px;
-    border: 0;
 
     &:focus-within,
     &:focus {
@@ -16,4 +16,16 @@ p-inputmask {
       opacity: 0.5;
     }
   }
+
+  &.border-disabled {
+    ::ng-deep input {
+      border: 0;
+    }
+  }
+
+  &:not(.border-disabled) {
+    ::ng-deep input {
+      @include peertube-input-text(80px);
+    }
+  }
 }
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.ts b/client/src/app/shared/shared-forms/timestamp-input.component.ts
index 3fc705905..79ca63673 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.ts
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.ts
@@ -18,6 +18,8 @@ export class TimestampInputComponent implements ControlValueAccessor, OnInit {
   @Input() maxTimestamp: number
   @Input() timestamp: number
   @Input() disabled = false
+  @Input() inputName: string
+  @Input() disableBorder = true
 
   @Output() inputBlur = new EventEmitter()
 
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
index c2a318285..abbfc63f8 100644
--- a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
@@ -1,8 +1,8 @@
 import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
-import { AuthService, ConfirmService, Notifier, ScreenService } from '@app/core'
+import { AuthService, ConfirmService, Notifier, ScreenService, ServerService } from '@app/core'
 import { BlocklistService, VideoBlockComponent, VideoBlockService, VideoReportComponent } from '@app/shared/shared-moderation'
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
-import { VideoCaption } from '@shared/models'
+import { VideoCaption, VideoState } from '@shared/models'
 import {
   Actor,
   DropdownAction,
@@ -29,6 +29,7 @@ export type VideoActionsDisplayType = {
   liveInfo?: boolean
   removeFiles?: boolean
   transcoding?: boolean
+  editor?: boolean
 }
 
 @Component({
@@ -59,7 +60,8 @@ export class VideoActionsDropdownComponent implements OnChanges {
     mute: true,
     liveInfo: false,
     removeFiles: false,
-    transcoding: false
+    transcoding: false,
+    editor: true
   }
   @Input() placement = 'left'
 
@@ -89,7 +91,8 @@ export class VideoActionsDropdownComponent implements OnChanges {
     private videoBlocklistService: VideoBlockService,
     private screenService: ScreenService,
     private videoService: VideoService,
-    private redundancyService: RedundancyService
+    private redundancyService: RedundancyService,
+    private serverService: ServerService
   ) { }
 
   get user () {
@@ -149,6 +152,12 @@ export class VideoActionsDropdownComponent implements OnChanges {
     return this.video.isUpdatableBy(this.user)
   }
 
+  isVideoEditable () {
+    return this.serverService.getHTMLConfig().videoEditor.enabled &&
+      this.video.state?.id === VideoState.PUBLISHED &&
+      this.video.isUpdatableBy(this.user)
+  }
+
   isVideoRemovable () {
     return this.video.isRemovableBy(this.user)
   }
@@ -330,6 +339,12 @@ export class VideoActionsDropdownComponent implements OnChanges {
           isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.update && this.isVideoUpdatable()
         },
         {
+          label: $localize`Editor`,
+          linkBuilder: ({ video }) => [ '/video-editor/edit', video.uuid ],
+          iconName: 'film',
+          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.editor && this.isVideoEditable()
+        },
+        {
           label: $localize`Block`,
           handler: () => this.showBlockModal(),
           iconName: 'no',
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index 847e401ed..7de9fc8e2 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -195,6 +195,10 @@ export class VideoMiniatureComponent implements OnInit {
       return $localize`To import`
     }
 
+    if (video.state.id === VideoState.TO_EDIT) {
+      return $localize`To edit`
+    }
+
     return ''
   }