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

   1 import { forkJoin } from 'rxjs'
   2 import { pairwise } from 'rxjs/operators'
   3 import { ViewportScroller } from '@angular/common'
   4 import { AfterViewChecked, Component, OnInit, ViewChild } from '@angular/core'
   5 import { ConfigService } from '@app/+admin/config/shared/config.service'
   6 import { Notifier } from '@app/core'
   7 import { ServerService } from '@app/core/server/server.service'
   8 import {
   9   ADMIN_EMAIL_VALIDATOR,
  10   CACHE_CAPTIONS_SIZE_VALIDATOR,
  11   CACHE_PREVIEWS_SIZE_VALIDATOR,
  12   CONCURRENCY_VALIDATOR,
  13   INDEX_URL_VALIDATOR,
  14   INSTANCE_NAME_VALIDATOR,
  15   INSTANCE_SHORT_DESCRIPTION_VALIDATOR,
  16   SEARCH_INDEX_URL_VALIDATOR,
  17   SERVICES_TWITTER_USERNAME_VALIDATOR,
  18   SIGNUP_LIMIT_VALIDATOR,
  19   TRANSCODING_THREADS_VALIDATOR
  20 } from '@app/shared/form-validators/custom-config-validators'
  21 import { USER_VIDEO_QUOTA_DAILY_VALIDATOR, USER_VIDEO_QUOTA_VALIDATOR } from '@app/shared/form-validators/user-validators'
  22 import { FormReactive, FormValidatorService, SelectOptionsItem } from '@app/shared/shared-forms'
  23 import { NgbNav } from '@ng-bootstrap/ng-bootstrap'
  24 import { CustomConfig, ServerConfig } from '@shared/models'
  25
  26 @Component({
  27   selector: 'my-edit-custom-config',
  28   templateUrl: './edit-custom-config.component.html',
  29   styleUrls: [ './edit-custom-config.component.scss' ]
  30 })
  31 export class EditCustomConfigComponent extends FormReactive implements OnInit, AfterViewChecked {
  32   // FIXME: use built-in router
  33   @ViewChild('nav') nav: NgbNav
  34
  35   initDone = false
  36   customConfig: CustomConfig
  37
  38   resolutions: { id: string, label: string, description?: string }[] = []
  39   liveResolutions: { id: string, label: string, description?: string }[] = []
  40   concurrencyOptions: number[] = []
  41   transcodingThreadOptions: { label: string, value: number }[] = []
  42   liveMaxDurationOptions: { label: string, value: number }[] = []
  43
  44   vodTranscodingProfileOptions: string[] = []
  45   liveTranscodingProfileOptions: string[] = []
  46
  47   languageItems: SelectOptionsItem[] = []
  48   categoryItems: SelectOptionsItem[] = []
  49
  50   signupAlertMessage: string
  51
  52   private serverConfig: ServerConfig
  53
  54   constructor (
  55     private viewportScroller: ViewportScroller,
  56     protected formValidatorService: FormValidatorService,
  57     private notifier: Notifier,
  58     private configService: ConfigService,
  59     private serverService: ServerService
  60   ) {
  61     super()
  62
  63     this.resolutions = [
  64       {
  65         id: '0p',
  66         label: $localize`Audio-only`,
  67         description: $localize`A <code>.mp4</code> that keeps the original audio track, with no video`
  68       },
  69       {
  70         id: '240p',
  71         label: $localize`240p`
  72       },
  73       {
  74         id: '360p',
  75         label: $localize`360p`
  76       },
  77       {
  78         id: '480p',
  79         label: $localize`480p`
  80       },
  81       {
  82         id: '720p',
  83         label: $localize`720p`
  84       },
  85       {
  86         id: '1080p',
  87         label: $localize`1080p`
  88       },
  89       {
  90         id: '1440p',
  91         label: $localize`1440p`
  92       },
  93       {
  94         id: '2160p',
  95         label: $localize`2160p`
  96       }
  97     ]
  98
  99     this.liveResolutions = this.resolutions.filter(r => r.id !== '0p')
 100
 101     this.transcodingThreadOptions = [
 102       { value: 0, label: $localize`Auto (via ffmpeg)` },
 103       { value: 1, label: '1' },
 104       { value: 2, label: '2' },
 105       { value: 4, label: '4' },
 106       { value: 8, label: '8' }
 107     ]
 108     this.concurrencyOptions = [ 1, 2, 3, 4, 5, 6 ]
 109
 110     this.vodTranscodingProfileOptions = [ 'default' ]
 111     this.liveTranscodingProfileOptions = [ 'default' ]
 112
 113     this.liveMaxDurationOptions = [
 114       { value: -1, label: $localize`No limit` },
 115       { value: 1000 * 3600, label: $localize`1 hour` },
 116       { value: 1000 * 3600 * 3, label: $localize`3 hours` },
 117       { value: 1000 * 3600 * 5, label: $localize`5 hours` },
 118       { value: 1000 * 3600 * 10, label: $localize`10 hours` }
 119     ]
 120   }
 121
 122   get videoQuotaOptions () {
 123     return this.configService.videoQuotaOptions
 124   }
 125
 126   get videoQuotaDailyOptions () {
 127     return this.configService.videoQuotaDailyOptions
 128   }
 129
 130   get availableThemes () {
 131     return this.serverConfig.theme.registered
 132       .map(t => t.name)
 133   }
 134
 135   get liveRTMPPort () {
 136     return this.serverConfig.live.rtmp.port
 137   }
 138
 139   getAvailableTranscodingProfile (type: 'live' | 'vod') {
 140     if (type === 'live') {
 141       return this.serverConfig.live.transcoding.availableProfiles
 142     }
 143
 144     return this.serverConfig.transcoding.availableProfiles
 145   }
 146
 147   getTotalTranscodingThreads () {
 148     const transcodingEnabled = this.form.value['transcoding']['enabled']
 149     const transcodingThreads = this.form.value['transcoding']['threads']
 150     const liveTranscodingEnabled = this.form.value['live']['transcoding']['enabled']
 151     const liveTranscodingThreads = this.form.value['live']['transcoding']['threads']
 152
 153     // checks whether all enabled method are on fixed values and not on auto (= 0)
 154     let noneOnAuto = !transcodingEnabled || +transcodingThreads > 0
 155     noneOnAuto &&= !liveTranscodingEnabled || +liveTranscodingThreads > 0
 156
 157     // count total of fixed value, repalcing auto by a single thread (knowing it will display "at least")
 158     let value = 0
 159     if (transcodingEnabled) value += +transcodingThreads || 1
 160     if (liveTranscodingEnabled) value += +liveTranscodingThreads || 1
 161
 162     return {
 163       value,
 164       atMost: noneOnAuto, // auto switches everything to a least estimation since ffmpeg will take as many threads as possible
 165       unit: value > 1
 166         ? $localize`threads`
 167         : $localize`thread`
 168     }
 169   }
 170
 171   getResolutionKey (resolution: string) {
 172     return 'transcoding.resolutions.' + resolution
 173   }
 174
 175   ngOnInit () {
 176     this.serverConfig = this.serverService.getTmpConfig()
 177     this.serverService.getConfig()
 178         .subscribe(config => {
 179           this.serverConfig = config
 180         })
 181
 182     const formGroupData: { [key in keyof CustomConfig ]: any } = {
 183       instance: {
 184         name: INSTANCE_NAME_VALIDATOR,
 185         shortDescription: INSTANCE_SHORT_DESCRIPTION_VALIDATOR,
 186         description: null,
 187
 188         isNSFW: false,
 189         defaultNSFWPolicy: null,
 190
 191         terms: null,
 192         codeOfConduct: null,
 193
 194         creationReason: null,
 195         moderationInformation: null,
 196         administrator: null,
 197         maintenanceLifetime: null,
 198         businessModel: null,
 199
 200         hardwareInformation: null,
 201
 202         categories: null,
 203         languages: null,
 204
 205         defaultClientRoute: null,
 206
 207         customizations: {
 208           javascript: null,
 209           css: null
 210         }
 211       },
 212       theme: {
 213         default: null
 214       },
 215       services: {
 216         twitter: {
 217           username: SERVICES_TWITTER_USERNAME_VALIDATOR,
 218           whitelisted: null
 219         }
 220       },
 221       cache: {
 222         previews: {
 223           size: CACHE_PREVIEWS_SIZE_VALIDATOR
 224         },
 225         captions: {
 226           size: CACHE_CAPTIONS_SIZE_VALIDATOR
 227         }
 228       },
 229       signup: {
 230         enabled: null,
 231         limit: SIGNUP_LIMIT_VALIDATOR,
 232         requiresEmailVerification: null
 233       },
 234       import: {
 235         videos: {
 236           concurrency: CONCURRENCY_VALIDATOR,
 237           http: {
 238             enabled: null
 239           },
 240           torrent: {
 241             enabled: null
 242           }
 243         }
 244       },
 245       trending: {
 246         videos: {
 247           algorithms: {
 248             enabled: null,
 249             default: null
 250           }
 251         }
 252       },
 253       admin: {
 254         email: ADMIN_EMAIL_VALIDATOR
 255       },
 256       contactForm: {
 257         enabled: null
 258       },
 259       user: {
 260         videoQuota: USER_VIDEO_QUOTA_VALIDATOR,
 261         videoQuotaDaily: USER_VIDEO_QUOTA_DAILY_VALIDATOR
 262       },
 263       transcoding: {
 264         enabled: null,
 265         threads: TRANSCODING_THREADS_VALIDATOR,
 266         allowAdditionalExtensions: null,
 267         allowAudioFiles: null,
 268         profile: null,
 269         concurrency: CONCURRENCY_VALIDATOR,
 270         resolutions: {},
 271         hls: {
 272           enabled: null
 273         },
 274         webtorrent: {
 275           enabled: null
 276         }
 277       },
 278       live: {
 279         enabled: null,
 280
 281         maxDuration: null,
 282         maxInstanceLives: null,
 283         maxUserLives: null,
 284         allowReplay: null,
 285
 286         transcoding: {
 287           enabled: null,
 288           threads: TRANSCODING_THREADS_VALIDATOR,
 289           profile: null,
 290           resolutions: {}
 291         }
 292       },
 293       autoBlacklist: {
 294         videos: {
 295           ofUsers: {
 296             enabled: null
 297           }
 298         }
 299       },
 300       followers: {
 301         instance: {
 302           enabled: null,
 303           manualApproval: null
 304         }
 305       },
 306       followings: {
 307         instance: {
 308           autoFollowBack: {
 309             enabled: null
 310           },
 311           autoFollowIndex: {
 312             enabled: null,
 313             indexUrl: INDEX_URL_VALIDATOR
 314           }
 315         }
 316       },
 317       broadcastMessage: {
 318         enabled: null,
 319         level: null,
 320         dismissable: null,
 321         message: null
 322       },
 323       search: {
 324         remoteUri: {
 325           users: null,
 326           anonymous: null
 327         },
 328         searchIndex: {
 329           enabled: null,
 330           url: SEARCH_INDEX_URL_VALIDATOR,
 331           disableLocalSearch: null,
 332           isDefaultSearch: null
 333         }
 334       }
 335     }
 336
 337     const defaultValues = {
 338       transcoding: {
 339         resolutions: {}
 340       },
 341       live: {
 342         transcoding: {
 343           resolutions: {}
 344         }
 345       }
 346     }
 347
 348     for (const resolution of this.resolutions) {
 349       defaultValues.transcoding.resolutions[resolution.id] = 'false'
 350       formGroupData.transcoding.resolutions[resolution.id] = null
 351     }
 352
 353     for (const resolution of this.liveResolutions) {
 354       defaultValues.live.transcoding.resolutions[resolution.id] = 'false'
 355       formGroupData.live.transcoding.resolutions[resolution.id] = null
 356     }
 357
 358     this.buildForm(formGroupData)
 359     this.loadForm()
 360
 361     this.checkTranscodingFields()
 362     this.checkSignupField()
 363   }
 364
 365   ngAfterViewChecked () {
 366     if (!this.initDone) {
 367       this.initDone = true
 368       this.gotoAnchor()
 369     }
 370   }
 371
 372   isTranscodingEnabled () {
 373     return this.form.value['transcoding']['enabled'] === true
 374   }
 375
 376   isLiveEnabled () {
 377     return this.form.value['live']['enabled'] === true
 378   }
 379
 380   isLiveTranscodingEnabled () {
 381     return this.form.value['live']['transcoding']['enabled'] === true
 382   }
 383
 384   isSignupEnabled () {
 385     return this.form.value['signup']['enabled'] === true
 386   }
 387
 388   isSearchIndexEnabled () {
 389     return this.form.value['search']['searchIndex']['enabled'] === true
 390   }
 391
 392   isAutoFollowIndexEnabled () {
 393     return this.form.value['followings']['instance']['autoFollowIndex']['enabled'] === true
 394   }
 395
 396   trendingVideosAlgorithmsEnabledIncludes (algorithm: string) {
 397     return this.form.value['trending']['videos']['algorithms']['enabled'].find((e: string) => e === algorithm)
 398   }
 399
 400   async formValidated () {
 401     const value: CustomConfig = this.form.getRawValue()
 402
 403     this.configService.updateCustomConfig(value)
 404       .subscribe(
 405         res => {
 406           this.customConfig = res
 407
 408           // Reload general configuration
 409           this.serverService.resetConfig()
 410
 411           this.updateForm()
 412
 413           this.notifier.success($localize`Configuration updated.`)
 414         },
 415
 416         err => this.notifier.error(err.message)
 417       )
 418   }
 419
 420   gotoAnchor () {
 421     const hashToNav = {
 422       'customizations': 'advanced-configuration'
 423     }
 424     const hash = window.location.hash.replace('#', '')
 425
 426     if (hash && Object.keys(hashToNav).includes(hash)) {
 427       this.nav.select(hashToNav[hash])
 428       setTimeout(() => this.viewportScroller.scrollToAnchor(hash), 100)
 429     }
 430   }
 431
 432   hasConsistentOptions () {
 433     if (this.hasLiveAllowReplayConsistentOptions()) return true
 434
 435     return false
 436   }
 437
 438   hasLiveAllowReplayConsistentOptions () {
 439     if (this.isTranscodingEnabled() === false && this.isLiveEnabled() && this.form.value['live']['allowReplay'] === true) {
 440       return false
 441     }
 442
 443     return true
 444   }
 445
 446   private updateForm () {
 447     this.form.patchValue(this.customConfig)
 448   }
 449
 450   private loadForm () {
 451     forkJoin([
 452       this.configService.getCustomConfig(),
 453       this.serverService.getVideoLanguages(),
 454       this.serverService.getVideoCategories()
 455     ]).subscribe(
 456       ([ config, languages, categories ]) => {
 457         this.customConfig = config
 458
 459         this.languageItems = languages.map(l => ({ label: l.label, id: l.id }))
 460         this.categoryItems = categories.map(l => ({ label: l.label, id: l.id + '' }))
 461
 462         this.updateForm()
 463         // Force form validation
 464         this.forceCheck()
 465       },
 466
 467       err => this.notifier.error(err.message)
 468     )
 469   }
 470
 471   private checkTranscodingFields () {
 472     const hlsControl = this.form.get('transcoding.hls.enabled')
 473     const webtorrentControl = this.form.get('transcoding.webtorrent.enabled')
 474
 475     webtorrentControl.valueChanges
 476                      .subscribe(newValue => {
 477                        if (newValue === false && !hlsControl.disabled) {
 478                          hlsControl.disable()
 479                        }
 480
 481                        if (newValue === true && !hlsControl.enabled) {
 482                          hlsControl.enable()
 483                        }
 484                      })
 485
 486     hlsControl.valueChanges
 487               .subscribe(newValue => {
 488                 if (newValue === false && !webtorrentControl.disabled) {
 489                   webtorrentControl.disable()
 490                 }
 491
 492                 if (newValue === true && !webtorrentControl.enabled) {
 493                   webtorrentControl.enable()
 494                 }
 495               })
 496   }
 497
 498   private checkSignupField () {
 499     const signupControl = this.form.get('signup.enabled')
 500
 501     signupControl.valueChanges
 502       .pipe(pairwise())
 503       .subscribe(([ oldValue, newValue ]) => {
 504         if (oldValue !== true && newValue === true) {
 505           // tslint:disable:max-line-length
 506           this.signupAlertMessage = $localize`You enabled signup: we automatically enabled the "Block new videos automatically" checkbox of the "Videos" section just below.`
 507
 508           this.form.patchValue({
 509             autoBlacklist: {
 510               videos: {
 511                 ofUsers: {
 512                   enabled: true
 513                 }
 514               }
 515             }
 516           })
 517         }
 518       })
 519   }
 520 }