aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2023-05-19 14:05:14 +0200
committerChocobozzz <me@florianbigard.com>2023-05-19 14:11:22 +0200
commit01283e2066314aaa167a2b0b55952b2ae26e650a (patch)
tree6ba58d8c0c6b42d72e0edebbce2edfa03fdabbbe /client/src/app
parentbe6162706703c2b2a715eaf7759c0f513a3fe765 (diff)
downloadPeerTube-01283e2066314aaa167a2b0b55952b2ae26e650a.tar.gz
PeerTube-01283e2066314aaa167a2b0b55952b2ae26e650a.tar.zst
PeerTube-01283e2066314aaa167a2b0b55952b2ae26e650a.zip
Improve remote runner config UX
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts8
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html74
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.ts8
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html36
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.ts8
5 files changed, 81 insertions, 53 deletions
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts b/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts
index 6c431ce64..628c2d102 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-configuration.service.ts
@@ -61,6 +61,14 @@ export class EditConfigurationService {
61 return form.value['transcoding']['enabled'] === true 61 return form.value['transcoding']['enabled'] === true
62 } 62 }
63 63
64 isRemoteRunnerVODEnabled (form: FormGroup) {
65 return form.value['transcoding']['remoteRunners']['enabled'] === true
66 }
67
68 isRemoteRunnerLiveEnabled (form: FormGroup) {
69 return form.value['live']['transcoding']['remoteRunners']['enabled'] === true
70 }
71
64 isStudioEnabled (form: FormGroup) { 72 isStudioEnabled (form: FormGroup) {
65 return form.value['videoStudio']['enabled'] === true 73 return form.value['videoStudio']['enabled'] === true
66 } 74 }
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 34ce8efa6..e9919741f 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,10 +110,45 @@
110 </my-peertube-checkbox> 110 </my-peertube-checkbox>
111 </div> 111 </div>
112 112
113 <div class="form-group" formGroupName="remoteRunners" [ngClass]="getDisabledLiveTranscodingClass()"> 113 <div class="callout callout-light pt-2 mt-2 pb-0">
114 <label i18n>Output formats</label>
115
116 <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
117 <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
118
119 <div class="ms-2 mt-2 d-flex flex-column">
120
121 <ng-container formGroupName="resolutions">
122 <div class="form-group" *ngFor="let resolution of liveResolutions">
123 <my-peertube-checkbox
124 [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
125 labelText="{{resolution.label}}"
126 >
127 <ng-template *ngIf="resolution.description" ptTemplate="help">
128 <div [innerHTML]="resolution.description"></div>
129 </ng-template>
130 </my-peertube-checkbox>
131 </div>
132 </ng-container>
133
134 <div class="form-group">
135 <my-peertube-checkbox
136 inputName="transcodingAlwaysTranscodeOriginalResolution" formControlName="alwaysTranscodeOriginalResolution"
137 i18n-labelText labelText="Also transcode original resolution"
138 >
139 <ng-container i18n ngProjectAs="description">
140 Even if it's above your maximum enabled resolution
141 </ng-container>
142 </my-peertube-checkbox>
143 </div>
144 </div>
145 </div>
146 </div>
147
148 <div class="form-group mt-4" formGroupName="remoteRunners" [ngClass]="getDisabledLiveTranscodingClass()">
114 <my-peertube-checkbox 149 <my-peertube-checkbox
115 inputName="transcodingRemoteRunnersEnabled" formControlName="enabled" 150 inputName="transcodingRemoteRunnersEnabled" formControlName="enabled"
116 i18n-labelText labelText="Enable remote runners" 151 i18n-labelText labelText="Enable remote runners for lives"
117 > 152 >
118 <ng-container ngProjectAs="description"> 153 <ng-container ngProjectAs="description">
119 <span i18n> 154 <span i18n>
@@ -124,38 +159,7 @@
124 </my-peertube-checkbox> 159 </my-peertube-checkbox>
125 </div> 160 </div>
126 161
127 <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()"> 162 <div class="form-group" [ngClass]="getDisabledLiveLocalTranscodingClass()">
128 <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
129
130 <div class="ms-2 mt-2 d-flex flex-column">
131
132 <ng-container formGroupName="resolutions">
133 <div class="form-group" *ngFor="let resolution of liveResolutions">
134 <my-peertube-checkbox
135 [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
136 labelText="{{resolution.label}}"
137 >
138 <ng-template *ngIf="resolution.description" ptTemplate="help">
139 <div [innerHTML]="resolution.description"></div>
140 </ng-template>
141 </my-peertube-checkbox>
142 </div>
143 </ng-container>
144
145 <div class="form-group">
146 <my-peertube-checkbox
147 inputName="transcodingAlwaysTranscodeOriginalResolution" formControlName="alwaysTranscodeOriginalResolution"
148 i18n-labelText labelText="Also transcode original resolution"
149 >
150 <ng-container i18n ngProjectAs="description">
151 Even if it's above your maximum enabled resolution
152 </ng-container>
153 </my-peertube-checkbox>
154 </div>
155 </div>
156 </div>
157
158 <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
159 <label i18n for="liveTranscodingThreads">Live transcoding threads</label> 163 <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
160 164
161 <span class="small muted ms-1"> 165 <span class="small muted ms-1">
@@ -177,7 +181,7 @@
177 <div *ngIf="formErrors.live.transcoding.threads" class="form-error">{{ formErrors.live.transcoding.threads }}</div> 181 <div *ngIf="formErrors.live.transcoding.threads" class="form-error">{{ formErrors.live.transcoding.threads }}</div>
178 </div> 182 </div>
179 183
180 <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()"> 184 <div class="form-group mt-4" [ngClass]="getDisabledLiveLocalTranscodingClass()">
181 <label i18n for="liveTranscodingProfile">Live transcoding profile</label> 185 <label i18n for="liveTranscodingProfile">Live transcoding profile</label>
182 <span class="small muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span> 186 <span class="small muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
183 187
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.ts
index d4892a571..50b882cb8 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.ts
@@ -71,6 +71,10 @@ export class EditLiveConfigurationComponent implements OnInit, OnChanges {
71 return this.editConfigurationService.isLiveEnabled(this.form) 71 return this.editConfigurationService.isLiveEnabled(this.form)
72 } 72 }
73 73
74 isRemoteRunnerLiveEnabled () {
75 return this.editConfigurationService.isRemoteRunnerLiveEnabled(this.form)
76 }
77
74 getDisabledLiveClass () { 78 getDisabledLiveClass () {
75 return { 'disabled-checkbox-extra': !this.isLiveEnabled() } 79 return { 'disabled-checkbox-extra': !this.isLiveEnabled() }
76 } 80 }
@@ -79,6 +83,10 @@ export class EditLiveConfigurationComponent implements OnInit, OnChanges {
79 return { 'disabled-checkbox-extra': !this.isLiveEnabled() || !this.isLiveTranscodingEnabled() } 83 return { 'disabled-checkbox-extra': !this.isLiveEnabled() || !this.isLiveTranscodingEnabled() }
80 } 84 }
81 85
86 getDisabledLiveLocalTranscodingClass () {
87 return { 'disabled-checkbox-extra': !this.isLiveEnabled() || !this.isLiveTranscodingEnabled() || this.isRemoteRunnerLiveEnabled() }
88 }
89
82 isLiveTranscodingEnabled () { 90 isLiveTranscodingEnabled () {
83 return this.editConfigurationService.isLiveTranscodingEnabled(this.form) 91 return this.editConfigurationService.isLiveTranscodingEnabled(this.form)
84 } 92 }
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 b17c51532..d3fc2e481 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,20 +37,6 @@
37 37
38 <ng-container ngProjectAs="extra"> 38 <ng-container ngProjectAs="extra">
39 39
40 <div class="form-group" formGroupName="remoteRunners" [ngClass]="getTranscodingDisabledClass()">
41 <my-peertube-checkbox
42 inputName="transcodingRemoteRunnersEnabled" formControlName="enabled"
43 i18n-labelText labelText="Enable remote runners"
44 >
45 <ng-container ngProjectAs="description">
46 <span i18n>
47 Use <a routerLink="/admin/system/runners/runners-list">remote runners</a> to process VOD transcoding.
48 Remote runners has to register on your instance first.
49 </span>
50 </ng-container>
51 </my-peertube-checkbox>
52 </div>
53
54 <div class="callout callout-light pt-2 pb-0"> 40 <div class="callout callout-light pt-2 pb-0">
55 <label i18n>Input formats</label> 41 <label i18n>Input formats</label>
56 42
@@ -155,7 +141,21 @@
155 </my-peertube-checkbox> 141 </my-peertube-checkbox>
156 </div> 142 </div>
157 143
158 <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()"> 144 <div class="form-group mt-4" formGroupName="remoteRunners" [ngClass]="getTranscodingDisabledClass()">
145 <my-peertube-checkbox
146 inputName="transcodingRemoteRunnersEnabled" formControlName="enabled"
147 i18n-labelText labelText="Enable remote runners for VOD"
148 >
149 <ng-container ngProjectAs="description">
150 <span i18n>
151 Use <a routerLink="/admin/system/runners/runners-list">remote runners</a> to process VOD transcoding.
152 Remote runners has to register on your instance first.
153 </span>
154 </ng-container>
155 </my-peertube-checkbox>
156 </div>
157
158 <div class="form-group mt-4" [ngClass]="getLocalTranscodingDisabledClass()">
159 <label i18n for="transcodingThreads">Transcoding threads</label> 159 <label i18n for="transcodingThreads">Transcoding threads</label>
160 160
161 <span class="small muted ms-1"> 161 <span class="small muted ms-1">
@@ -178,7 +178,7 @@
178 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div> 178 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
179 </div> 179 </div>
180 180
181 <div class="form-group" [ngClass]="getTranscodingDisabledClass()"> 181 <div class="form-group" [ngClass]="getLocalTranscodingDisabledClass()">
182 <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label> 182 <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
183 <span class="small muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span> 183 <span class="small muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
184 184
@@ -190,7 +190,7 @@
190 <div *ngIf="formErrors.transcoding.concurrency" class="form-error">{{ formErrors.transcoding.concurrency }}</div> 190 <div *ngIf="formErrors.transcoding.concurrency" class="form-error">{{ formErrors.transcoding.concurrency }}</div>
191 </div> 191 </div>
192 192
193 <div class="form-group" [ngClass]="getTranscodingDisabledClass()"> 193 <div class="form-group" [ngClass]="getLocalTranscodingDisabledClass()">
194 <label i18n for="transcodingProfile">Transcoding profile</label> 194 <label i18n for="transcodingProfile">Transcoding profile</label>
195 <span class="small muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span> 195 <span class="small muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
196 196
@@ -234,7 +234,7 @@
234 <div class="form-group" formGroupName="remoteRunners" [ngClass]="getStudioDisabledClass()"> 234 <div class="form-group" formGroupName="remoteRunners" [ngClass]="getStudioDisabledClass()">
235 <my-peertube-checkbox 235 <my-peertube-checkbox
236 inputName="videoStudioRemoteRunnersEnabled" formControlName="enabled" 236 inputName="videoStudioRemoteRunnersEnabled" formControlName="enabled"
237 i18n-labelText labelText="Enable remote runners" 237 i18n-labelText labelText="Enable remote runners for studio"
238 > 238 >
239 <ng-container ngProjectAs="description"> 239 <ng-container ngProjectAs="description">
240 <span i18n> 240 <span i18n>
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 e960533f9..0a1ebe8e2 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
@@ -58,6 +58,10 @@ export class EditVODTranscodingComponent implements OnInit, OnChanges {
58 return 'transcoding.resolutions.' + resolution 58 return 'transcoding.resolutions.' + resolution
59 } 59 }
60 60
61 isRemoteRunnerVODEnabled () {
62 return this.editConfigurationService.isRemoteRunnerVODEnabled(this.form)
63 }
64
61 isTranscodingEnabled () { 65 isTranscodingEnabled () {
62 return this.editConfigurationService.isTranscodingEnabled(this.form) 66 return this.editConfigurationService.isTranscodingEnabled(this.form)
63 } 67 }
@@ -70,6 +74,10 @@ export class EditVODTranscodingComponent implements OnInit, OnChanges {
70 return { 'disabled-checkbox-extra': !this.isTranscodingEnabled() } 74 return { 'disabled-checkbox-extra': !this.isTranscodingEnabled() }
71 } 75 }
72 76
77 getLocalTranscodingDisabledClass () {
78 return { 'disabled-checkbox-extra': !this.isTranscodingEnabled() || this.isRemoteRunnerVODEnabled() }
79 }
80
73 getStudioDisabledClass () { 81 getStudioDisabledClass () {
74 return { 'disabled-checkbox-extra': !this.isStudioEnabled() } 82 return { 'disabled-checkbox-extra': !this.isStudioEnabled() }
75 } 83 }