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