aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html155
-rw-r--r--client/src/app/shared/shared-forms/select/select-custom-input.component.html14
-rw-r--r--client/src/app/shared/shared-forms/select/select-custom-input.component.scss0
-rw-r--r--client/src/app/shared/shared-forms/select/select-custom-input.component.ts44
-rw-r--r--client/src/sass/bootstrap.scss4
5 files changed, 131 insertions, 86 deletions
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index f041101bf..e2f3a196e 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -841,72 +841,12 @@
841 </my-peertube-checkbox> 841 </my-peertube-checkbox>
842 </div> 842 </div>
843 843
844 </ng-container> 844 <div class="form-group mt-4" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
845
846 </div>
847 </div>
848
849 <div class="form-row mt-5"> <!-- transcoding live streams grid -->
850 <div class="form-group col-12 col-lg-4 col-xl-3">
851 <div i18n class="inner-form-title">TRANSCODING LIVE STREAMS</div>
852 <div i18n class="inner-form-description">
853 Same as above, transcoding live streams so that they are in a streamable form that any device can play. Requires a beefy CPU, and then some.
854 </div>
855 </div>
856
857 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
858
859 <ng-container formGroupName="live">
860 <ng-container formGroupName="transcoding">
861
862 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
863 <my-peertube-checkbox
864 inputName="liveTranscodingEnabled" formControlName="enabled"
865 >
866 <ng-template ptTemplate="label">
867 <ng-container i18n>Transcoding enabled for live streams</ng-container>
868 </ng-template>
869 </my-peertube-checkbox>
870 </div>
871
872 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
873 <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
874
875 <div class="ml-2 mt-2 d-flex flex-column">
876 <ng-container formGroupName="resolutions">
877 <div class="form-group" *ngFor="let resolution of liveResolutions">
878 <my-peertube-checkbox
879 [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
880 labelText="{{resolution.label}}"
881 >
882 <ng-template *ngIf="resolution.description" ptTemplate="help">
883 <div [innerHTML]="resolution.description"></div>
884 </ng-template>
885 </my-peertube-checkbox>
886 </div>
887 </ng-container>
888 </div>
889 </div>
890 </ng-container>
891 </ng-container>
892
893 </div>
894 </div>
895
896 <div class="form-row mt-5"> <!-- load repartition grid -->
897
898 <div class="form-group col-12 col-lg-4 col-xl-3">
899 <div i18n class="inner-form-title">LOAD REPARTITION</div>
900 <div i18n class="inner-form-description">
901 Share CPU power to prioritize one or the other. The total should not be above the number of available threads.
902 </div>
903 </div>
904
905 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
906
907 <ng-container formGroupName="transcoding">
908 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
909 <label i18n for="transcodingThreads">Transcoding threads</label> 845 <label i18n for="transcodingThreads">Transcoding threads</label>
846 <span class="text-muted ml-1">
847 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding</ng-container>
848 <ng-container *ngIf="!getTotalTranscodingThreads().atMost" i18n>will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding</ng-container>
849 </span>
910 850
911 <div class="peertube-select-container"> 851 <div class="peertube-select-container">
912 <select id="transcodingThreads" formControlName="threads" class="form-control"> 852 <select id="transcodingThreads" formControlName="threads" class="form-control">
@@ -917,29 +857,10 @@
917 </div> 857 </div>
918 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div> 858 <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
919 </div> 859 </div>
920 </ng-container>
921 860
922 <ng-container formGroupName="live">
923 <ng-container formGroupName="transcoding">
924 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
925 <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
926 <div class="peertube-select-container">
927 <select id="liveTranscodingThreads" formControlName="threads" class="form-control">
928 <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
929 {{ transcodingThreadOption.label }} {transcodingThreadOption.value, plural, =0 {} =1 {thread} other {threads}}
930 </option>
931 </select>
932 </div>
933 <div *ngIf="formErrors.live.transcoding.threads" class="form-error">{{ formErrors.live.transcoding.threads }}</div>
934 </div>
935 </ng-container>
936 </ng-container> 861 </ng-container>
937 862
938 <div *ngIf="getTotalTranscodingThreads().atMost" i18n>Transcoding will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }}.</div>
939 <div *ngIf="!getTotalTranscodingThreads().atMost" i18n>Transcoding will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }}.</div>
940
941 </div> 863 </div>
942
943 </div> 864 </div>
944 865
945 </ng-template> 866 </ng-template>
@@ -1012,6 +933,7 @@
1012 ></ng-select> 933 ></ng-select>
1013 </div> 934 </div>
1014 </div> 935 </div>
936
1015 </ng-container> 937 </ng-container>
1016 </my-peertube-checkbox> 938 </my-peertube-checkbox>
1017 </div> 939 </div>
@@ -1019,6 +941,71 @@
1019 </div> 941 </div>
1020 </div> 942 </div>
1021 943
944 <div class="form-row"> <!-- transcoding live streams grid -->
945 <div class="form-group col-12 col-lg-4 col-xl-3">
946 <div i18n class="inner-form-title">TRANSCODING</div>
947 <div i18n class="inner-form-description">
948 Same as VOD transcoding, transcoding live streams so that they are in a streamable form that any device can play. Requires a beefy CPU, and then some.
949 </div>
950 </div>
951
952 <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
953
954 <ng-container formGroupName="live">
955 <ng-container formGroupName="transcoding">
956
957 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() }">
958 <my-peertube-checkbox
959 inputName="liveTranscodingEnabled" formControlName="enabled"
960 >
961 <ng-template ptTemplate="label">
962 <ng-container i18n>Transcoding enabled for live streams</ng-container>
963 </ng-template>
964 </my-peertube-checkbox>
965 </div>
966
967 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
968 <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
969
970 <div class="ml-2 mt-2 d-flex flex-column">
971 <ng-container formGroupName="resolutions">
972 <div class="form-group" *ngFor="let resolution of liveResolutions">
973 <my-peertube-checkbox
974 [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
975 labelText="{{resolution.label}}"
976 >
977 <ng-template *ngIf="resolution.description" ptTemplate="help">
978 <div [innerHTML]="resolution.description"></div>
979 </ng-template>
980 </my-peertube-checkbox>
981 </div>
982 </ng-container>
983 </div>
984 </div>
985
986 <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isLiveEnabled() || !isLiveTranscodingEnabled() }">
987 <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
988 <span class="text-muted ml-1">
989 <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding</ng-container>
990 <ng-container *ngIf="!getTotalTranscodingThreads().atMost" i18n>will claim at least {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding</ng-container>
991 </span>
992
993 <div class="peertube-select-container">
994 <select id="liveTranscodingThreads" formControlName="threads" class="form-control">
995 <option *ngFor="let transcodingThreadOption of transcodingThreadOptions" [value]="transcodingThreadOption.value">
996 {{ transcodingThreadOption.label }} {transcodingThreadOption.value, plural, =0 {} =1 {thread} other {threads}}
997 </option>
998 </select>
999 </div>
1000 <div *ngIf="formErrors.live.transcoding.threads" class="form-error">{{ formErrors.live.transcoding.threads }}</div>
1001 </div>
1002
1003 </ng-container>
1004 </ng-container>
1005
1006 </div>
1007 </div>
1008
1022 </ng-template> 1009 </ng-template>
1023 </ng-container> 1010 </ng-container>
1024 1011
diff --git a/client/src/app/shared/shared-forms/select/select-custom-input.component.html b/client/src/app/shared/shared-forms/select/select-custom-input.component.html
new file mode 100644
index 000000000..84fa15c3d
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-custom-input.component.html
@@ -0,0 +1,14 @@
1<ng-select
2 [(ngModel)]="selectedId"
3 (ngModelChange)="onModelChange()"
4 [bindLabel]="bindLabel"
5 [bindValue]="bindValue"
6 [clearable]="clearable"
7 [searchable]="searchable"
8>
9 <ng-option *ngFor="let item of items" [value]="item.id">
10 {{ channel.label }}
11 </ng-option>
12
13 <ng-content></ng-content>
14</ng-select>
diff --git a/client/src/app/shared/shared-forms/select/select-custom-input.component.scss b/client/src/app/shared/shared-forms/select/select-custom-input.component.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-custom-input.component.scss
diff --git a/client/src/app/shared/shared-forms/select/select-custom-input.component.ts b/client/src/app/shared/shared-forms/select/select-custom-input.component.ts
new file mode 100644
index 000000000..ba6fef8ad
--- /dev/null
+++ b/client/src/app/shared/shared-forms/select/select-custom-input.component.ts
@@ -0,0 +1,44 @@
1import { Component, forwardRef, Input } from '@angular/core'
2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
3
4@Component({
5 selector: 'my-select-custom-input',
6 styleUrls: [ './select-custom-input.component.scss' ],
7 templateUrl: './select-custom-input.component.html',
8 providers: [
9 {
10 provide: NG_VALUE_ACCESSOR,
11 useExisting: forwardRef(() => SelectCustomInputComponent),
12 multi: true
13 }
14 ]
15})
16export class SelectCustomInputComponent implements ControlValueAccessor {
17 @Input() items: any[] = []
18
19 selectedId: number
20
21 // ng-select options
22 bindLabel = 'label'
23 bindValue = 'id'
24 clearable = false
25 searchable = false
26
27 propagateChange = (_: any) => { /* empty */ }
28
29 writeValue (id: number) {
30 this.selectedId = id
31 }
32
33 registerOnChange (fn: (_: any) => void) {
34 this.propagateChange = fn
35 }
36
37 registerOnTouched () {
38 // Unused
39 }
40
41 onModelChange () {
42 this.propagateChange(this.selectedId)
43 }
44}
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 0bb349a45..ac53ae7a5 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -363,8 +363,8 @@ ngb-tooltip-window {
363} 363}
364 364
365.callout { 365.callout {
366 padding: 1.25rem; 366 padding: 1.25rem;
367 border: 1px solid #eee; 367 border: 1px solid #eee;
368 border-radius: .25rem; 368 border-radius: .25rem;
369 369
370 & > label { 370 & > label {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-27 04:50:53 +0000