8 files changed, 31 insertions, 27 deletions

diff --git a/client/src/app/shared/form-validators/form-validator.model.ts b/client/src/app/shared/form-validators/form-validator.model.ts
index 248a3b1d3..07b1ea075 100644
--- a/client/src/app/shared/form-validators/form-validator.model.ts
+++ b/client/src/app/shared/form-validators/form-validator.model.ts
@@ -10,5 +10,5 @@ export type BuildFormArgument = {
 }
 
 export type BuildFormDefaultValues = {
-  [ name: string ]: string | string[] | BuildFormDefaultValues
+  [ name: string ]: number | string | string[] | BuildFormDefaultValues
 }
diff --git a/client/src/app/shared/shared-forms/select/select-channel.component.ts b/client/src/app/shared/shared-forms/select/select-channel.component.ts
index 1d91d59bc..40a7c53bb 100644
--- a/client/src/app/shared/shared-forms/select/select-channel.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-channel.component.ts
@@ -1,13 +1,7 @@
-import { Component, forwardRef, Input } from '@angular/core'
+import { Component, forwardRef, Input, OnChanges } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { VideoChannel } from '@app/shared/shared-main'
-
-export type SelectChannelItem = {
-  id: number
-  label: string
-  support: string
-  avatarPath?: string
-}
+import { SelectChannelItem } from '../../../../types/select-options-item.model'
 
 @Component({
   selector: 'my-select-channel',
@@ -21,9 +15,10 @@ export type SelectChannelItem = {
     }
   ]
 })
-export class SelectChannelComponent implements ControlValueAccessor {
+export class SelectChannelComponent implements ControlValueAccessor, OnChanges {
   @Input() items: SelectChannelItem[] = []
 
+  channels: SelectChannelItem[] = []
   selectedId: number
 
   // ng-select options
@@ -32,10 +27,14 @@ export class SelectChannelComponent implements ControlValueAccessor {
   clearable = false
   searchable = false
 
-  get channels () {
-    return this.items.map(c => Object.assign(c, {
-      avatarPath: c.avatarPath ? c.avatarPath : VideoChannel.GET_DEFAULT_AVATAR_URL()
-    }))
+  ngOnChanges () {
+    this.channels = this.items.map(c => {
+      const avatarPath = c.avatarPath
+        ? c.avatarPath
+        : VideoChannel.GET_DEFAULT_AVATAR_URL()
+
+      return Object.assign({}, c, { avatarPath })
+    })
   }
 
   propagateChange = (_: any) => { /* empty */ }
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.ts b/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
index eb0c49034..c2523f15c 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.ts
@@ -1,6 +1,6 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { SelectOptionsItem } from './select-options.component'
+import { SelectOptionsItem } from '../../../../types/select-options-item.model'
 
 export type ItemSelectCheckboxValue = { id?: string | number, group?: string } | string
 
diff --git a/client/src/app/shared/shared-forms/select/select-custom-value.component.html b/client/src/app/shared/shared-forms/select/select-custom-value.component.html
index 5fdf432ff..9dc8c2ec2 100644
--- a/client/src/app/shared/shared-forms/select/select-custom-value.component.html
+++ b/client/src/app/shared/shared-forms/select/select-custom-value.component.html
@@ -10,5 +10,9 @@
     (ngModelChange)="onModelChange()"
   ></my-select-options>
 
-  <input *ngIf="isCustomValue()" [(ngModel)]="customValue" (ngModelChange)="onModelChange()" type="text" class="form-control" />
+  <ng-container *ngIf="isCustomValue()">
+    <input [(ngModel)]="customValue" (ngModelChange)="onModelChange()" [type]="inputType" class="form-control" />
+
+    <span *ngIf="inputSuffix" class="input-suffix">{{ inputSuffix }}</span>
+  </ng-container>
 </div>
diff --git a/client/src/app/shared/shared-forms/select/select-custom-value.component.ts b/client/src/app/shared/shared-forms/select/select-custom-value.component.ts
index a8e5ad0d3..bc6b863c7 100644
--- a/client/src/app/shared/shared-forms/select/select-custom-value.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-custom-value.component.ts
@@ -1,6 +1,6 @@
 import { Component, forwardRef, Input, OnChanges } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { SelectOptionsItem } from './select-options.component'
+import { SelectOptionsItem } from '../../../../types/select-options-item.model'
 
 @Component({
   selector: 'my-select-custom-value',
@@ -20,6 +20,8 @@ export class SelectCustomValueComponent implements ControlValueAccessor, OnChang
   @Input() searchable = false
   @Input() groupBy: string
   @Input() labelForId: string
+  @Input() inputSuffix: string
+  @Input() inputType = 'text'
 
   customValue: number | string = ''
   selectedId: number | string
diff --git a/client/src/app/shared/shared-forms/select/select-options.component.ts b/client/src/app/shared/shared-forms/select/select-options.component.ts
index 51a3f515d..2890670e5 100644
--- a/client/src/app/shared/shared-forms/select/select-options.component.ts
+++ b/client/src/app/shared/shared-forms/select/select-options.component.ts
@@ -1,13 +1,6 @@
 import { Component, forwardRef, Input } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-
-export type SelectOptionsItem = {
-  id: string | number
-  label: string
-  description?: string
-  group?: string
-  groupLabel?: string
-}
+import { SelectOptionsItem } from '../../../../types/select-options-item.model'
 
 @Component({
   selector: 'my-select-options',
diff --git a/client/src/app/shared/shared-forms/select/select-shared.component.scss b/client/src/app/shared/shared-forms/select/select-shared.component.scss
index 1a4192b55..80196b8df 100644
--- a/client/src/app/shared/shared-forms/select/select-shared.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-shared.component.scss
@@ -33,15 +33,20 @@ ng-select ::ng-deep {
 
 .root {
   display:flex;
+  align-items: center;
 
   > my-select-options {
     flex-grow: 1;
   }
 }
 
-input[type=text] {
+my-select-options + input {
   margin-left: 5px;
 
   @include peertube-input-text($form-base-input-width);
   display: block;
 }
+
+.input-suffix {
+  margin-left: 5px;
+}
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
index 2497e001c..d74c2b2d8 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
@@ -3,9 +3,10 @@ import { forkJoin, Subject, Subscription } from 'rxjs'
 import { first } from 'rxjs/operators'
 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
 import { AuthService, Notifier, ServerService, User, UserService } from '@app/core'
-import { FormReactive, FormValidatorService, ItemSelectCheckboxValue, SelectOptionsItem } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService, ItemSelectCheckboxValue } from '@app/shared/shared-forms'
 import { UserUpdateMe } from '@shared/models'
 import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
+import { SelectOptionsItem } from '../../../types/select-options-item.model'
 
 @Component({
   selector: 'my-user-video-settings',