X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Badmin%2Fconfig%2Fedit-custom-config%2Fedit-custom-config.component.ts;h=3a47ba25e3f2ecf4286df5b46d21e69f3275da8d;hb=5fb2e2888ce032c638e4b75d07458642f0833e52;hp=4983b0425d4280ef0d5459c3f527a08725c2b703;hpb=3827c3b3488845f4235714e92eea439423df2909;p=github%2FChocobozzz%2FPeerTube.git 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 4983b0425..3a47ba25e 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 @@ -1,45 +1,79 @@ -import { Component, OnInit } from '@angular/core' +import { AfterViewChecked, Component, OnInit, ViewChild } from '@angular/core' import { ConfigService } from '@app/+admin/config/shared/config.service' -import { ConfirmService } from '@app/core' import { ServerService } from '@app/core/server/server.service' import { CustomConfigValidatorsService, FormReactive, UserValidatorsService } from '@app/shared' -import { NotificationsService } from 'angular2-notifications' +import { Notifier } from '@app/core' import { CustomConfig } from '../../../../../../shared/models/server/custom-config.model' import { I18n } from '@ngx-translate/i18n-polyfill' -import { BuildFormDefaultValues, FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' +import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' +import { SelectItem } from 'primeng/api' +import { forkJoin } from 'rxjs' +import { ServerConfig } from '@shared/models' +import { ViewportScroller } from '@angular/common' +import { NgbNav } from '@ng-bootstrap/ng-bootstrap' @Component({ selector: 'my-edit-custom-config', templateUrl: './edit-custom-config.component.html', styleUrls: [ './edit-custom-config.component.scss' ] }) -export class EditCustomConfigComponent extends FormReactive implements OnInit { +export class EditCustomConfigComponent extends FormReactive implements OnInit, AfterViewChecked { + // FIXME: use built-in router + @ViewChild('nav') nav: NgbNav + + initDone = false customConfig: CustomConfig - resolutions: string[] = [] + resolutions: { id: string, label: string, description?: string }[] = [] transcodingThreadOptions: { label: string, value: number }[] = [] - private oldCustomJavascript: string - private oldCustomCSS: string + languageItems: SelectItem[] = [] + categoryItems: SelectItem[] = [] + + private serverConfig: ServerConfig constructor ( + private viewportScroller: ViewportScroller, protected formValidatorService: FormValidatorService, private customConfigValidatorsService: CustomConfigValidatorsService, private userValidatorsService: UserValidatorsService, - private notificationsService: NotificationsService, + private notifier: Notifier, private configService: ConfigService, private serverService: ServerService, - private confirmService: ConfirmService, private i18n: I18n ) { super() this.resolutions = [ - this.i18n('240p'), - this.i18n('360p'), - this.i18n('480p'), - this.i18n('720p'), - this.i18n('1080p') + { + id: '0p', + label: this.i18n('Audio-only'), + description: this.i18n('A .mp4 that keeps the original audio track, with no video') + }, + { + id: '240p', + label: this.i18n('240p') + }, + { + id: '360p', + label: this.i18n('360p') + }, + { + id: '480p', + label: this.i18n('480p') + }, + { + id: '720p', + label: this.i18n('720p') + }, + { + id: '1080p', + label: this.i18n('1080p') + }, + { + id: '2160p', + label: this.i18n('2160p') + } ] this.transcodingThreadOptions = [ @@ -59,204 +93,282 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit { return this.configService.videoQuotaDailyOptions } - getResolutionKey (resolution: string) { - return 'transcodingResolution' + resolution + get availableThemes () { + return this.serverConfig.theme.registered + .map(t => t.name) } - ngOnInit () { - const formGroupData = { - instanceName: this.customConfigValidatorsService.INSTANCE_NAME, - instanceShortDescription: this.customConfigValidatorsService.INSTANCE_SHORT_DESCRIPTION, - instanceDescription: null, - instanceTerms: null, - instanceDefaultClientRoute: null, - instanceDefaultNSFWPolicy: null, - servicesTwitterUsername: this.customConfigValidatorsService.SERVICES_TWITTER_USERNAME, - servicesTwitterWhitelisted: null, - cachePreviewsSize: this.customConfigValidatorsService.CACHE_PREVIEWS_SIZE, - cacheCaptionsSize: this.customConfigValidatorsService.CACHE_CAPTIONS_SIZE, - signupEnabled: null, - signupLimit: this.customConfigValidatorsService.SIGNUP_LIMIT, - signupRequiresEmailVerification: null, - importVideosHttpEnabled: null, - importVideosTorrentEnabled: null, - adminEmail: this.customConfigValidatorsService.ADMIN_EMAIL, - userVideoQuota: this.userValidatorsService.USER_VIDEO_QUOTA, - userVideoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY, - transcodingThreads: this.customConfigValidatorsService.TRANSCODING_THREADS, - transcodingEnabled: null, - customizationJavascript: null, - customizationCSS: null - } - - const defaultValues: BuildFormDefaultValues = {} - for (const resolution of this.resolutions) { - const key = this.getResolutionKey(resolution) - defaultValues[key] = 'false' - formGroupData[key] = null - } - - this.buildForm(formGroupData) - - this.configService.getCustomConfig() - .subscribe( - res => { - this.customConfig = res - - this.oldCustomCSS = this.customConfig.instance.customizations.css - this.oldCustomJavascript = this.customConfig.instance.customizations.javascript - - this.updateForm() - // Force form validation - this.forceCheck() - }, - - err => this.notificationsService.error(this.i18n('Error'), err.message) - ) + getResolutionKey (resolution: string) { + return 'transcoding.resolutions.' + resolution } - isTranscodingEnabled () { - return this.form.value['transcodingEnabled'] === true - } + ngOnInit () { + this.serverConfig = this.serverService.getTmpConfig() + this.serverService.getConfig() + .subscribe(config => this.serverConfig = config) - isSignupEnabled () { - return this.form.value['signupEnabled'] === true - } + const formGroupData: { [key in keyof CustomConfig ]: any } = { + instance: { + name: this.customConfigValidatorsService.INSTANCE_NAME, + shortDescription: this.customConfigValidatorsService.INSTANCE_SHORT_DESCRIPTION, + description: null, - async formValidated () { - const newCustomizationJavascript = this.form.value['customizationJavascript'] - const newCustomizationCSS = this.form.value['customizationCSS'] + isNSFW: false, + defaultNSFWPolicy: null, - const customizations = [] - if (newCustomizationJavascript && newCustomizationJavascript !== this.oldCustomJavascript) customizations.push('JavaScript') - if (newCustomizationCSS && newCustomizationCSS !== this.oldCustomCSS) customizations.push('CSS') + terms: null, + codeOfConduct: null, - if (customizations.length !== 0) { - const customizationsText = customizations.join('/') + creationReason: null, + moderationInformation: null, + administrator: null, + maintenanceLifetime: null, + businessModel: null, - // FIXME: i18n service does not support string concatenation - const message = this.i18n('You set custom {{customizationsText}}. ', { customizationsText }) + - this.i18n('This could lead to security issues or bugs if you do not understand it. ') + - this.i18n('Are you sure you want to update the configuration?') + hardwareInformation: null, - const label = this.i18n('Please type') + ` "I understand the ${customizationsText} I set" ` + this.i18n('to confirm.') - const expectedInputValue = `I understand the ${customizationsText} I set` + categories: null, + languages: null, - const confirmRes = await this.confirmService.confirmWithInput(message, label, expectedInputValue) - if (confirmRes === false) return - } + defaultClientRoute: null, - const data: CustomConfig = { - instance: { - name: this.form.value['instanceName'], - shortDescription: this.form.value['instanceShortDescription'], - description: this.form.value['instanceDescription'], - terms: this.form.value['instanceTerms'], - defaultClientRoute: this.form.value['instanceDefaultClientRoute'], - defaultNSFWPolicy: this.form.value['instanceDefaultNSFWPolicy'], customizations: { - javascript: this.form.value['customizationJavascript'], - css: this.form.value['customizationCSS'] + javascript: null, + css: null } }, + theme: { + default: null + }, services: { twitter: { - username: this.form.value['servicesTwitterUsername'], - whitelisted: this.form.value['servicesTwitterWhitelisted'] + username: this.customConfigValidatorsService.SERVICES_TWITTER_USERNAME, + whitelisted: null } }, cache: { previews: { - size: this.form.value['cachePreviewsSize'] + size: this.customConfigValidatorsService.CACHE_PREVIEWS_SIZE }, captions: { - size: this.form.value['cacheCaptionsSize'] + size: this.customConfigValidatorsService.CACHE_CAPTIONS_SIZE } }, signup: { - enabled: this.form.value['signupEnabled'], - limit: this.form.value['signupLimit'], - requiresEmailVerification: this.form.value['signupRequiresEmailVerification'] + enabled: null, + limit: this.customConfigValidatorsService.SIGNUP_LIMIT, + requiresEmailVerification: null + }, + import: { + videos: { + http: { + enabled: null + }, + torrent: { + enabled: null + } + } }, admin: { - email: this.form.value['adminEmail'] + email: this.customConfigValidatorsService.ADMIN_EMAIL + }, + contactForm: { + enabled: null }, user: { - videoQuota: this.form.value['userVideoQuota'], - videoQuotaDaily: this.form.value['userVideoQuotaDaily'] + videoQuota: this.userValidatorsService.USER_VIDEO_QUOTA, + videoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY }, transcoding: { - enabled: this.form.value['transcodingEnabled'], - threads: this.form.value['transcodingThreads'], - resolutions: { - '240p': this.form.value[this.getResolutionKey('240p')], - '360p': this.form.value[this.getResolutionKey('360p')], - '480p': this.form.value[this.getResolutionKey('480p')], - '720p': this.form.value[this.getResolutionKey('720p')], - '1080p': this.form.value[this.getResolutionKey('1080p')] + enabled: null, + threads: this.customConfigValidatorsService.TRANSCODING_THREADS, + allowAdditionalExtensions: null, + allowAudioFiles: null, + resolutions: {}, + hls: { + enabled: null + }, + webtorrent: { + enabled: null } }, - import: { + autoBlacklist: { videos: { - http: { - enabled: this.form.value['importVideosHttpEnabled'] + ofUsers: { + enabled: null + } + } + }, + followers: { + instance: { + enabled: null, + manualApproval: null + } + }, + followings: { + instance: { + autoFollowBack: { + enabled: null }, - torrent: { - enabled: this.form.value['importVideosTorrentEnabled'] + autoFollowIndex: { + enabled: null, + indexUrl: this.customConfigValidatorsService.INDEX_URL } } + }, + broadcastMessage: { + enabled: null, + level: null, + dismissable: null, + message: null + }, + search: { + remoteUri: { + users: null, + anonymous: null + }, + searchIndex: { + enabled: null, + url: this.customConfigValidatorsService.SEARCH_INDEX_URL, + disableLocalSearch: null, + isDefaultSearch: null + } } } - this.configService.updateCustomConfig(data) + const defaultValues = { + transcoding: { + resolutions: {} + } + } + for (const resolution of this.resolutions) { + defaultValues.transcoding.resolutions[resolution.id] = 'false' + formGroupData.transcoding.resolutions[resolution.id] = null + } + + this.buildForm(formGroupData) + this.loadForm() + this.checkTranscodingFields() + } + + ngAfterViewChecked () { + if (!this.initDone) { + this.initDone = true + this.gotoAnchor() + } + } + + isTranscodingEnabled () { + return this.form.value['transcoding']['enabled'] === true + } + + isSignupEnabled () { + return this.form.value['signup']['enabled'] === true + } + + isSearchIndexEnabled () { + return this.form.value['search']['searchIndex']['enabled'] === true + } + + isAutoFollowIndexEnabled () { + return this.form.value['followings']['instance']['autoFollowIndex']['enabled'] === true + } + + async formValidated () { + this.configService.updateCustomConfig(this.form.getRawValue()) .subscribe( res => { this.customConfig = res // Reload general configuration - this.serverService.loadConfig() + this.serverService.resetConfig() this.updateForm() - this.notificationsService.success(this.i18n('Success'), this.i18n('Configuration updated.')) + this.notifier.success(this.i18n('Configuration updated.')) }, - err => this.notificationsService.error(this.i18n('Error'), err.message) + err => this.notifier.error(err.message) ) } - private updateForm () { - const data = { - instanceName: this.customConfig.instance.name, - instanceShortDescription: this.customConfig.instance.shortDescription, - instanceDescription: this.customConfig.instance.description, - instanceTerms: this.customConfig.instance.terms, - instanceDefaultClientRoute: this.customConfig.instance.defaultClientRoute, - instanceDefaultNSFWPolicy: this.customConfig.instance.defaultNSFWPolicy, - servicesTwitterUsername: this.customConfig.services.twitter.username, - servicesTwitterWhitelisted: this.customConfig.services.twitter.whitelisted, - cachePreviewsSize: this.customConfig.cache.previews.size, - cacheCaptionsSize: this.customConfig.cache.captions.size, - signupEnabled: this.customConfig.signup.enabled, - signupLimit: this.customConfig.signup.limit, - signupRequiresEmailVerification: this.customConfig.signup.requiresEmailVerification, - adminEmail: this.customConfig.admin.email, - userVideoQuota: this.customConfig.user.videoQuota, - userVideoQuotaDaily: this.customConfig.user.videoQuotaDaily, - transcodingThreads: this.customConfig.transcoding.threads, - transcodingEnabled: this.customConfig.transcoding.enabled, - customizationJavascript: this.customConfig.instance.customizations.javascript, - customizationCSS: this.customConfig.instance.customizations.css, - importVideosHttpEnabled: this.customConfig.import.videos.http.enabled, - importVideosTorrentEnabled: this.customConfig.import.videos.torrent.enabled + getSelectedLanguageLabel () { + return this.i18n('{{\'{0} languages selected') + } + + getDefaultLanguageLabel () { + return this.i18n('No language') + } + + getSelectedCategoryLabel () { + return this.i18n('{{\'{0} categories selected') + } + + getDefaultCategoryLabel () { + return this.i18n('No category') + } + + gotoAnchor () { + const hashToNav = { + 'customizations': 'advanced-configuration' } + const hash = window.location.hash.replace('#', '') - for (const resolution of this.resolutions) { - const key = this.getResolutionKey(resolution) - data[key] = this.customConfig.transcoding.resolutions[resolution] + if (hash && Object.keys(hashToNav).includes(hash)) { + this.nav.select(hashToNav[hash]) + setTimeout(() => this.viewportScroller.scrollToAnchor(hash), 100) } + } - this.form.patchValue(data) + private updateForm () { + this.form.patchValue(this.customConfig) + } + + private loadForm () { + forkJoin([ + this.configService.getCustomConfig(), + this.serverService.getVideoLanguages(), + this.serverService.getVideoCategories() + ]).subscribe( + ([ config, languages, categories ]) => { + this.customConfig = config + + this.languageItems = languages.map(l => ({ label: l.label, value: l.id })) + this.categoryItems = categories.map(l => ({ label: l.label, value: l.id })) + + this.updateForm() + // Force form validation + this.forceCheck() + }, + + err => this.notifier.error(err.message) + ) } + private checkTranscodingFields () { + const hlsControl = this.form.get('transcoding.hls.enabled') + const webtorrentControl = this.form.get('transcoding.webtorrent.enabled') + + webtorrentControl.valueChanges + .subscribe(newValue => { + if (newValue === false && !hlsControl.disabled) { + hlsControl.disable() + } + + if (newValue === true && !hlsControl.enabled) { + hlsControl.enable() + } + }) + + hlsControl.valueChanges + .subscribe(newValue => { + if (newValue === false && !webtorrentControl.disabled) { + webtorrentControl.disable() + } + + if (newValue === true && !webtorrentControl.enabled) { + webtorrentControl.enable() + } + }) + } }