Add basic video editor support

7 files changed, 42 insertions, 8 deletions

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 ''
   }