Implement runner in client side

3 files changed, 35 insertions, 1 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 0526ed8f1..335aedb67 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
@@ -190,6 +190,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
         },
         webtorrent: {
           enabled: null
+        },
+        remoteRunners: {
+          enabled: null
         }
       },
       live: {
@@ -208,7 +211,10 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
           threads: TRANSCODING_THREADS_VALIDATOR,
           profile: null,
           resolutions: {},
-          alwaysTranscodeOriginalResolution: null
+          alwaysTranscodeOriginalResolution: null,
+          remoteRunners: {
+            enabled: null
+          }
         }
       },
       videoStudio: {
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
index c90c34c80..34ce8efa6 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
@@ -110,6 +110,20 @@
             </my-peertube-checkbox>
           </div>
 
+          <div class="form-group" formGroupName="remoteRunners" [ngClass]="getDisabledLiveTranscodingClass()">
+            <my-peertube-checkbox
+              inputName="transcodingRemoteRunnersEnabled" formControlName="enabled"
+              i18n-labelText labelText="Enable remote runners"
+            >
+              <ng-container ngProjectAs="description">
+                <span i18n>
+                  Use <a routerLink="/admin/system/runners/runners-list">remote runners</a> to process live transcoding.
+                  Remote runners has to register on your instance first.
+                </span>
+              </ng-container>
+            </my-peertube-checkbox>
+          </div>
+
           <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
             <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
 
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 de9e7253e..c11f560dd 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
@@ -37,6 +37,20 @@
 
             <ng-container ngProjectAs="extra">
 
+              <div class="form-group" formGroupName="remoteRunners" [ngClass]="getTranscodingDisabledClass()">
+                <my-peertube-checkbox
+                  inputName="transcodingRemoteRunnersEnabled" formControlName="enabled"
+                  i18n-labelText labelText="Enable remote runners"
+                >
+                  <ng-container ngProjectAs="description">
+                    <span i18n>
+                      Use <a routerLink="/admin/system/runners/runners-list">remote runners</a> to process VOD transcoding.
+                      Remote runners has to register on your instance first.
+                    </span>
+                  </ng-container>
+                </my-peertube-checkbox>
+              </div>
+
               <div class="callout callout-light pt-2 pb-0">
                 <label i18n>Input formats</label>