<ng-container formGroupName="user">
<div class="form-group">
<label i18n for="userVideoQuota">Default video quota per user</label>
- <div class="peertube-select-container">
- <select id="userVideoQuota" formControlName="videoQuota" class="form-control">
- <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled">
- {{ videoQuotaOption.label }}
- </option>
- </select>
- </div>
+
+ <my-select-custom-value
+ id="userVideoQuota"
+ [items]="videoQuotaOptions"
+ formControlName="videoQuota"
+ i18n-inputSuffix inputSuffix="bytes" inputType="number"
+ [clearable]="false"
+ ></my-select-custom-value>
+
<div *ngIf="formErrors.user.videoQuota" class="form-error">{{ formErrors.user.videoQuota }}</div>
</div>
<div class="form-group">
<label i18n for="userVideoQuotaDaily">Default daily upload limit per user</label>
- <div class="peertube-select-container">
- <select id="userVideoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
- <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled">
- {{ videoQuotaDailyOption.label }}
- </option>
- </select>
- </div>
+
+ <my-select-custom-value
+ id="userVideoQuotaDaily"
+ [items]="videoQuotaDailyOptions"
+ formControlName="videoQuotaDaily"
+ i18n-inputSuffix inputSuffix="bytes" inputType="number"
+ [clearable]="false"
+ ></my-select-custom-value>
+
<div *ngIf="formErrors.user.videoQuotaDaily" class="form-error">{{ formErrors.user.videoQuotaDaily }}</div>
</div>
</ng-container>
TRANSCODING_THREADS_VALIDATOR
} from '@app/shared/form-validators/custom-config-validators'
import { USER_VIDEO_QUOTA_DAILY_VALIDATOR, USER_VIDEO_QUOTA_VALIDATOR } from '@app/shared/form-validators/user-validators'
-import { FormReactive, FormValidatorService, SelectOptionsItem } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
import { NgbNav } from '@ng-bootstrap/ng-bootstrap'
import { CustomConfig, ServerConfig } from '@shared/models'
+import { SelectOptionsItem } from 'src/types/select-options-item.model'
@Component({
selector: 'my-edit-custom-config',
import { Injectable } from '@angular/core'
import { RestExtractor } from '@app/core'
import { CustomConfig } from '@shared/models'
+import { SelectOptionsItem } from '../../../../types/select-options-item.model'
import { environment } from '../../../../environments/environment'
@Injectable()
export class ConfigService {
private static BASE_APPLICATION_URL = environment.apiUrl + '/api/v1/config'
- videoQuotaOptions: { value: number, label: string, disabled?: boolean }[] = []
- videoQuotaDailyOptions: { value: number, label: string, disabled?: boolean }[] = []
+ videoQuotaOptions: SelectOptionsItem[] = []
+ videoQuotaDailyOptions: SelectOptionsItem[] = []
constructor (
private authHttp: HttpClient,
private restExtractor: RestExtractor
) {
this.videoQuotaOptions = [
- { value: undefined, label: 'Default quota', disabled: true },
- { value: -1, label: $localize`Unlimited` },
- { value: undefined, label: '─────', disabled: true },
- { value: 0, label: $localize`None - no upload possible` },
- { value: 100 * 1024 * 1024, label: $localize`100MB` },
- { value: 500 * 1024 * 1024, label: $localize`500MB` },
- { value: 1024 * 1024 * 1024, label: $localize`1GB` },
- { value: 5 * 1024 * 1024 * 1024, label: $localize`5GB` },
- { value: 20 * 1024 * 1024 * 1024, label: $localize`20GB` },
- { value: 50 * 1024 * 1024 * 1024, label: $localize`50GB` }
+ { id: -1, label: $localize`Unlimited` },
+ { id: 0, label: $localize`None - no upload possible` },
+ { id: 100 * 1024 * 1024, label: $localize`100MB` },
+ { id: 500 * 1024 * 1024, label: $localize`500MB` },
+ { id: 1024 * 1024 * 1024, label: $localize`1GB` },
+ { id: 5 * 1024 * 1024 * 1024, label: $localize`5GB` },
+ { id: 20 * 1024 * 1024 * 1024, label: $localize`20GB` },
+ { id: 50 * 1024 * 1024 * 1024, label: $localize`50GB` },
+ { id: 100 * 1024 * 1024 * 1024, label: $localize`100GB` },
+ { id: 200 * 1024 * 1024 * 1024, label: $localize`200GB` },
+ { id: 500 * 1024 * 1024 * 1024, label: $localize`500GB` }
]
this.videoQuotaDailyOptions = [
- { value: undefined, label: 'Default daily upload limit', disabled: true },
- { value: -1, label: $localize`Unlimited` },
- { value: undefined, label: '─────', disabled: true },
- { value: 0, label: $localize`None - no upload possible` },
- { value: 10 * 1024 * 1024, label: $localize`10MB` },
- { value: 50 * 1024 * 1024, label: $localize`50MB` },
- { value: 100 * 1024 * 1024, label: $localize`100MB` },
- { value: 500 * 1024 * 1024, label: $localize`500MB` },
- { value: 2 * 1024 * 1024 * 1024, label: $localize`2GB` },
- { value: 5 * 1024 * 1024 * 1024, label: $localize`5GB` }
+ { id: -1, label: $localize`Unlimited` },
+ { id: 0, label: $localize`None - no upload possible` },
+ { id: 10 * 1024 * 1024, label: $localize`10MB` },
+ { id: 50 * 1024 * 1024, label: $localize`50MB` },
+ { id: 100 * 1024 * 1024, label: $localize`100MB` },
+ { id: 500 * 1024 * 1024, label: $localize`500MB` },
+ { id: 2 * 1024 * 1024 * 1024, label: $localize`2GB` },
+ { id: 5 * 1024 * 1024 * 1024, label: $localize`5GB` },
+ { id: 10 * 1024 * 1024 * 1024, label: $localize`10GB` },
+ { id: 20 * 1024 * 1024 * 1024, label: $localize`20GB` },
+ { id: 50 * 1024 * 1024 * 1024, label: $localize`50GB` }
]
}
const defaultValues = {
role: UserRole.USER.toString(),
- videoQuota: '-1',
- videoQuotaDaily: '-1'
+ videoQuota: -1,
+ videoQuotaDaily: -1
}
this.buildForm({
<div class="form-group">
<label i18n for="videoQuota">Video quota</label>
- <div class="peertube-select-container">
- <select id="videoQuota" formControlName="videoQuota" class="form-control">
- <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value" [disabled]="videoQuotaOption.disabled">
- {{ videoQuotaOption.label }}
- </option>
- </select>
- </div>
+
+ <my-select-custom-value
+ id="videoQuota"
+ [items]="videoQuotaOptions"
+ formControlName="videoQuota"
+ i18n-inputSuffix inputSuffix="bytes" inputType="number"
+ [clearable]="false"
+ ></my-select-custom-value>
<div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br />
At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
</div>
+
+ <div *ngIf="formErrors.videoQuota" class="form-error">
+ {{ formErrors.videoQuota }}
+ </div>
</div>
<div class="form-group">
<label i18n for="videoQuotaDaily">Daily video quota</label>
- <div class="peertube-select-container">
- <select id="videoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
- <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value" [disabled]="videoQuotaDailyOption.disabled">
- {{ videoQuotaDailyOption.label }}
- </option>
- </select>
+
+ <my-select-custom-value
+ id="videoQuotaDaily"
+ [items]="videoQuotaDailyOptions"
+ formControlName="videoQuotaDaily"
+ i18n-inputSuffix inputSuffix="bytes" inputType="number"
+ [clearable]="false"
+ ></my-select-custom-value>
+
+ <div *ngIf="formErrors.videoQuotaDaily" class="form-error">
+ {{ formErrors.videoQuotaDaily }}
</div>
</div>
@import '_variables';
@import '_mixins';
+$form-base-input-width: 340px;
+
label {
font-weight: $font-regular;
font-size: 100%;
}
input:not([type=submit]) {
- @include peertube-input-text(340px);
+ @include peertube-input-text($form-base-input-width);
display: block;
}
my-input-toggle-hidden {
- @include responsive-width(340px);
+ @include responsive-width($form-base-input-width);
display: block;
}
.peertube-select-container {
- @include peertube-select-container(340px);
+ @include peertube-select-container($form-base-input-width);
+}
+
+my-select-custom-value {
+ @include responsive-width($form-base-input-width);
+
+ display: block;
}
input[type=submit], button {
import { FormReactive } from '@app/shared/shared-forms'
import { USER_ROLE_LABELS } from '@shared/core-utils/users'
import { ServerConfig, UserAdminFlag, UserRole, VideoResolution } from '@shared/models'
+import { SelectOptionsItem } from '../../../../types/select-options-item.model'
@Directive()
// tslint:disable-next-line: directive-class-suffix
export abstract class UserEdit extends FormReactive implements OnInit {
- videoQuotaOptions: { value: string, label: string, disabled?: boolean }[] = []
- videoQuotaDailyOptions: { value: string, label: string, disabled?: boolean }[] = []
+ videoQuotaOptions: SelectOptionsItem[] = []
+ videoQuotaDailyOptions: SelectOptionsItem[] = []
username: string
user: User
}
protected buildQuotaOptions () {
- // These are used by a HTML select, so convert key into strings
- this.videoQuotaOptions = this.configService
- .videoQuotaOptions.map(q => ({
- value: q.value?.toString(),
- label: q.label,
- disabled: q.disabled
- }))
-
- this.videoQuotaDailyOptions = this.configService
- .videoQuotaDailyOptions.map(q => ({
- value: q.value?.toString(),
- label: q.label,
- disabled: q.disabled
- }))
+ this.videoQuotaOptions = this.configService.videoQuotaOptions
+ this.videoQuotaDailyOptions = this.configService.videoQuotaDailyOptions
}
}
-import { FormReactive, SelectChannelItem } from '@app/shared/shared-forms'
+import { FormReactive } from '@app/shared/shared-forms'
import { VideoConstant, VideoPlaylistPrivacy } from '@shared/models'
import { VideoPlaylist } from '@shared/models/videos/playlist/video-playlist.model'
+import { SelectChannelItem } from '../../../types/select-options-item.model'
export abstract class MyVideoPlaylistEdit extends FormReactive {
// Declare it here to avoid errors in create template
import { forkJoin } from 'rxjs'
import { map } from 'rxjs/operators'
+import { SelectChannelItem } from 'src/types/select-options-item.model'
import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
import { FormArray, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms'
import { HooksService, PluginService, ServerService } from '@app/core'
VIDEO_SUPPORT_VALIDATOR,
VIDEO_TAGS_ARRAY_VALIDATOR
} from '@app/shared/form-validators/video-validators'
-import { FormReactiveValidationMessages, FormValidatorService, SelectChannelItem } from '@app/shared/shared-forms'
+import { FormReactiveValidationMessages, FormValidatorService } from '@app/shared/shared-forms'
import { InstanceService } from '@app/shared/shared-instance'
import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
-import { ServerConfig, VideoConstant, LiveVideo, VideoPrivacy } from '@shared/models'
+import { LiveVideo, ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
import { RegisterClientFormFieldOptions, RegisterClientVideoFieldOptions } from '@shared/models/plugins/register-client-form-field.model'
import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
import { catchError, switchMap, tap } from 'rxjs/operators'
+import { SelectChannelItem } from 'src/types/select-options-item.model'
import { Directive, EventEmitter, OnInit } from '@angular/core'
import { AuthService, CanComponentDeactivateResult, Notifier, ServerService } from '@app/core'
import { populateAsyncUserVideoChannels } from '@app/helpers'
-import { FormReactive, SelectChannelItem } from '@app/shared/shared-forms'
+import { FormReactive } from '@app/shared/shared-forms'
import { VideoCaptionEdit, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
import { LoadingBarService } from '@ngx-loading-bar/core'
import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
import { of } from 'rxjs'
import { map, switchMap } from 'rxjs/operators'
+import { SelectChannelItem } from 'src/types/select-options-item.model'
import { Component, HostListener, OnInit } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'
import { Notifier } from '@app/core'
-import { FormReactive, FormValidatorService, SelectChannelItem } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
import { VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
import { LiveVideoService } from '@app/shared/shared-video-live'
import { LoadingBarService } from '@ngx-loading-bar/core'
+import { SelectChannelItem } from 'src/types/select-options-item.model'
import { DatePipe } from '@angular/common'
import { HttpErrorResponse } from '@angular/common/http'
import { Notifier } from '@app/core'
-import { SelectChannelItem } from '@app/shared/shared-forms'
+import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
import { environment } from '../../environments/environment'
import { AuthService } from '../core/auth'
-import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
// Thanks: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
function getParameterByName (name: string, url: string) {
}
export type BuildFormDefaultValues = {
- [ name: string ]: string | string[] | BuildFormDefaultValues
+ [ name: string ]: number | string | string[] | BuildFormDefaultValues
}
-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',
}
]
})
-export class SelectChannelComponent implements ControlValueAccessor {
+export class SelectChannelComponent implements ControlValueAccessor, OnChanges {
@Input() items: SelectChannelItem[] = []
+ channels: SelectChannelItem[] = []
selectedId: number
// ng-select options
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 */ }
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
(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>
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',
@Input() searchable = false
@Input() groupBy: string
@Input() labelForId: string
+ @Input() inputSuffix: string
+ @Input() inputType = 'text'
customValue: number | string = ''
selectedId: number | string
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',
.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;
+}
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',
--- /dev/null
+export interface SelectOptionsItem {
+ id: string | number
+ label: string
+ description?: string
+ group?: string
+ groupLabel?: string
+}
+
+export interface SelectChannelItem extends SelectOptionsItem {
+ id: number
+ support: string
+ avatarPath?: string
+}
projects / github / Chocobozzz / PeerTube.git / commitdiff
