client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts

   1 import { Component, OnInit, AfterViewChecked, ViewChild } from '@angular/core'
   2 import { ConfigService } from '@app/+admin/config/shared/config.service'
   3 import { ServerService } from '@app/core/server/server.service'
   4 import { CustomConfigValidatorsService, FormReactive, UserValidatorsService } from '@app/shared'
   5 import { Notifier } from '@app/core'
   6 import { CustomConfig } from '../../../../../../shared/models/server/custom-config.model'
   7 import { I18n } from '@ngx-translate/i18n-polyfill'
   8 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
   9 import { SelectItem } from 'primeng/api'
  10 import { forkJoin } from 'rxjs'
  11 import { ServerConfig } from '@shared/models'
  12 import { ViewportScroller } from '@angular/common'
  13 import { NgbTabset } from '@ng-bootstrap/ng-bootstrap'
  14
  15 @Component({
  16   selector: 'my-edit-custom-config',
  17   templateUrl: './edit-custom-config.component.html',
  18   styleUrls: [ './edit-custom-config.component.scss' ]
  19 })
  20 export class EditCustomConfigComponent extends FormReactive implements OnInit, AfterViewChecked {
  21   @ViewChild('tabs') private tabs: NgbTabset
  22
  23   initDone = false
  24   customConfig: CustomConfig
  25
  26   resolutions: { id: string, label: string, description?: string }[] = []
  27   transcodingThreadOptions: { label: string, value: number }[] = []
  28
  29   languageItems: SelectItem[] = []
  30   categoryItems: SelectItem[] = []
  31
  32   private serverConfig: ServerConfig
  33
  34   constructor (
  35     private viewportScroller: ViewportScroller,
  36     protected formValidatorService: FormValidatorService,
  37     private customConfigValidatorsService: CustomConfigValidatorsService,
  38     private userValidatorsService: UserValidatorsService,
  39     private notifier: Notifier,
  40     private configService: ConfigService,
  41     private serverService: ServerService,
  42     private i18n: I18n
  43   ) {
  44     super()
  45
  46     this.resolutions = [
  47       {
  48         id: '0p',
  49         label: this.i18n('Audio-only'),
  50         description: this.i18n('A <code>.mp4</code> that keeps the original audio track, with no video')
  51       },
  52       {
  53         id: '240p',
  54         label: this.i18n('240p')
  55       },
  56       {
  57         id: '360p',
  58         label: this.i18n('360p')
  59       },
  60       {
  61         id: '480p',
  62         label: this.i18n('480p')
  63       },
  64       {
  65         id: '720p',
  66         label: this.i18n('720p')
  67       },
  68       {
  69         id: '1080p',
  70         label: this.i18n('1080p')
  71       },
  72       {
  73         id: '2160p',
  74         label: this.i18n('2160p')
  75       }
  76     ]
  77
  78     this.transcodingThreadOptions = [
  79       { value: 0, label: this.i18n('Auto (via ffmpeg)') },
  80       { value: 1, label: '1' },
  81       { value: 2, label: '2' },
  82       { value: 4, label: '4' },
  83       { value: 8, label: '8' }
  84     ]
  85   }
  86
  87   get videoQuotaOptions () {
  88     return this.configService.videoQuotaOptions
  89   }
  90
  91   get videoQuotaDailyOptions () {
  92     return this.configService.videoQuotaDailyOptions
  93   }
  94
  95   get availableThemes () {
  96     return this.serverConfig.theme.registered
  97       .map(t => t.name)
  98   }
  99
 100   getResolutionKey (resolution: string) {
 101     return 'transcoding.resolutions.' + resolution
 102   }
 103
 104   ngOnInit () {
 105     this.serverConfig = this.serverService.getTmpConfig()
 106     this.serverService.getConfig()
 107         .subscribe(config => this.serverConfig = config)
 108
 109     const formGroupData: { [key in keyof CustomConfig ]: any } = {
 110       instance: {
 111         name: this.customConfigValidatorsService.INSTANCE_NAME,
 112         shortDescription: this.customConfigValidatorsService.INSTANCE_SHORT_DESCRIPTION,
 113         description: null,
 114
 115         isNSFW: false,
 116         defaultNSFWPolicy: null,
 117
 118         terms: null,
 119         codeOfConduct: null,
 120
 121         creationReason: null,
 122         moderationInformation: null,
 123         administrator: null,
 124         maintenanceLifetime: null,
 125         businessModel: null,
 126
 127         hardwareInformation: null,
 128
 129         categories: null,
 130         languages: null,
 131
 132         defaultClientRoute: null,
 133
 134         customizations: {
 135           javascript: null,
 136           css: null
 137         }
 138       },
 139       theme: {
 140         default: null
 141       },
 142       services: {
 143         twitter: {
 144           username: this.customConfigValidatorsService.SERVICES_TWITTER_USERNAME,
 145           whitelisted: null
 146         }
 147       },
 148       cache: {
 149         previews: {
 150           size: this.customConfigValidatorsService.CACHE_PREVIEWS_SIZE
 151         },
 152         captions: {
 153           size: this.customConfigValidatorsService.CACHE_CAPTIONS_SIZE
 154         }
 155       },
 156       signup: {
 157         enabled: null,
 158         limit: this.customConfigValidatorsService.SIGNUP_LIMIT,
 159         requiresEmailVerification: null
 160       },
 161       import: {
 162         videos: {
 163           http: {
 164             enabled: null
 165           },
 166           torrent: {
 167             enabled: null
 168           }
 169         }
 170       },
 171       admin: {
 172         email: this.customConfigValidatorsService.ADMIN_EMAIL
 173       },
 174       contactForm: {
 175         enabled: null
 176       },
 177       user: {
 178         videoQuota: this.userValidatorsService.USER_VIDEO_QUOTA,
 179         videoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY
 180       },
 181       transcoding: {
 182         enabled: null,
 183         threads: this.customConfigValidatorsService.TRANSCODING_THREADS,
 184         allowAdditionalExtensions: null,
 185         allowAudioFiles: null,
 186         resolutions: {},
 187         hls: {
 188           enabled: null
 189         },
 190         webtorrent: {
 191           enabled: null
 192         }
 193       },
 194       autoBlacklist: {
 195         videos: {
 196           ofUsers: {
 197             enabled: null
 198           }
 199         }
 200       },
 201       followers: {
 202         instance: {
 203           enabled: null,
 204           manualApproval: null
 205         }
 206       },
 207       followings: {
 208         instance: {
 209           autoFollowBack: {
 210             enabled: null
 211           },
 212           autoFollowIndex: {
 213             enabled: null,
 214             indexUrl: this.customConfigValidatorsService.INDEX_URL
 215           }
 216         }
 217       }
 218     }
 219
 220     const defaultValues = {
 221       transcoding: {
 222         resolutions: {}
 223       }
 224     }
 225     for (const resolution of this.resolutions) {
 226       defaultValues.transcoding.resolutions[resolution.id] = 'false'
 227       formGroupData.transcoding.resolutions[resolution.id] = null
 228     }
 229
 230     this.buildForm(formGroupData)
 231     this.loadForm()
 232     this.checkTranscodingFields()
 233   }
 234
 235   ngAfterViewChecked () {
 236     if (!this.initDone) {
 237       this.initDone = true
 238       this.gotoAnchor()
 239     }
 240   }
 241
 242   isTranscodingEnabled () {
 243     return this.form.value['transcoding']['enabled'] === true
 244   }
 245
 246   isSignupEnabled () {
 247     return this.form.value['signup']['enabled'] === true
 248   }
 249
 250   isAutoFollowIndexEnabled () {
 251     return this.form.value['followings']['instance']['autoFollowIndex']['enabled'] === true
 252   }
 253
 254   async formValidated () {
 255     this.configService.updateCustomConfig(this.form.getRawValue())
 256       .subscribe(
 257         res => {
 258           this.customConfig = res
 259
 260           // Reload general configuration
 261           this.serverService.resetConfig()
 262
 263           this.updateForm()
 264
 265           this.notifier.success(this.i18n('Configuration updated.'))
 266         },
 267
 268         err => this.notifier.error(err.message)
 269       )
 270   }
 271
 272   getSelectedLanguageLabel () {
 273     return this.i18n('{{\'{0} languages selected')
 274   }
 275
 276   getDefaultLanguageLabel () {
 277     return this.i18n('No language')
 278   }
 279
 280   getSelectedCategoryLabel () {
 281     return this.i18n('{{\'{0} categories selected')
 282   }
 283
 284   getDefaultCategoryLabel () {
 285     return this.i18n('No category')
 286   }
 287
 288   gotoAnchor () {
 289     const hashToTab = {
 290       'customizations': 'advanced-configuration'
 291     }
 292     const hash = window.location.hash.replace('#', '')
 293
 294     if (hash && Object.keys(hashToTab).includes(hash)) {
 295       this.tabs.select(hashToTab[hash])
 296       setTimeout(() => this.viewportScroller.scrollToAnchor(hash), 100)
 297     }
 298   }
 299
 300   private updateForm () {
 301     this.form.patchValue(this.customConfig)
 302   }
 303
 304   private loadForm () {
 305     forkJoin([
 306       this.configService.getCustomConfig(),
 307       this.serverService.getVideoLanguages(),
 308       this.serverService.getVideoCategories()
 309     ]).subscribe(
 310       ([ config, languages, categories ]) => {
 311         this.customConfig = config
 312
 313         this.languageItems = languages.map(l => ({ label: l.label, value: l.id }))
 314         this.categoryItems = categories.map(l => ({ label: l.label, value: l.id }))
 315
 316         this.updateForm()
 317         // Force form validation
 318         this.forceCheck()
 319       },
 320
 321       err => this.notifier.error(err.message)
 322     )
 323   }
 324
 325   private checkTranscodingFields () {
 326     const hlsControl = this.form.get('transcoding.hls.enabled')
 327     const webtorrentControl = this.form.get('transcoding.webtorrent.enabled')
 328
 329     webtorrentControl.valueChanges
 330                      .subscribe(newValue => {
 331                        if (newValue === false && !hlsControl.disabled) {
 332                          hlsControl.disable()
 333                        }
 334
 335                        if (newValue === true && !hlsControl.enabled) {
 336                          hlsControl.enable()
 337                        }
 338                      })
 339
 340     hlsControl.valueChanges
 341               .subscribe(newValue => {
 342                 if (newValue === false && !webtorrentControl.disabled) {
 343                   webtorrentControl.disable()
 344                 }
 345
 346                 if (newValue === true && !webtorrentControl.enabled) {
 347                   webtorrentControl.enable()
 348                 }
 349               })
 350   }
 351 }