Add basic video editor support

4 files changed, 38 insertions, 0 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;