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