client/src/app/shared/shared-user-settings/user-video-settings.component.ts

   1 import { pick } from 'lodash-es'
   2 import { forkJoin, Subject, Subscription } from 'rxjs'
   3 import { first } from 'rxjs/operators'
   4 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
   5 import { AuthService, Notifier, ServerService, User, UserService } from '@app/core'
   6 import { FormReactive, FormValidatorService, ItemSelectCheckboxValue, SelectOptionsItem } from '@app/shared/shared-forms'
   7 import { UserUpdateMe } from '@shared/models'
   8 import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
   9
  10 @Component({
  11   selector: 'my-user-video-settings',
  12   templateUrl: './user-video-settings.component.html',
  13   styleUrls: [ './user-video-settings.component.scss' ]
  14 })
  15 export class UserVideoSettingsComponent extends FormReactive implements OnInit, OnDestroy {
  16   @Input() user: User = null
  17   @Input() reactiveUpdate = false
  18   @Input() notifyOnUpdate = true
  19   @Input() userInformationLoaded: Subject<any>
  20
  21   languageItems: SelectOptionsItem[] = []
  22   defaultNSFWPolicy: NSFWPolicyType
  23   formValuesWatcher: Subscription
  24
  25   private allLanguagesGroup: string
  26
  27   constructor (
  28     protected formValidatorService: FormValidatorService,
  29     private authService: AuthService,
  30     private notifier: Notifier,
  31     private userService: UserService,
  32     private serverService: ServerService
  33   ) {
  34     super()
  35   }
  36
  37   ngOnInit () {
  38     this.allLanguagesGroup = $localize`All languages`
  39
  40     let oldForm: any
  41
  42     this.buildForm({
  43       nsfwPolicy: null,
  44       webTorrentEnabled: null,
  45       autoPlayVideo: null,
  46       autoPlayNextVideo: null,
  47       videoLanguages: null
  48     })
  49
  50     forkJoin([
  51       this.serverService.getVideoLanguages(),
  52       this.serverService.getConfig(),
  53       this.userInformationLoaded.pipe(first())
  54     ]).subscribe(([ languages, config ]) => {
  55       const group = this.allLanguagesGroup
  56
  57       this.languageItems = [ { label: $localize`Unknown language`, id: '_unknown', group } ]
  58       this.languageItems = this.languageItems
  59                                .concat(languages.map(l => ({ label: l.label, id: l.id, group })))
  60
  61       const videoLanguages: ItemSelectCheckboxValue[] = this.user.videoLanguages
  62         ? this.user.videoLanguages.map(l => ({ id: l }))
  63         : [ { group } ]
  64
  65       this.defaultNSFWPolicy = config.instance.defaultNSFWPolicy
  66
  67       this.form.patchValue({
  68         nsfwPolicy: this.user.nsfwPolicy || this.defaultNSFWPolicy,
  69         webTorrentEnabled: this.user.webTorrentEnabled,
  70         autoPlayVideo: this.user.autoPlayVideo === true,
  71         autoPlayNextVideo: this.user.autoPlayNextVideo,
  72         videoLanguages
  73       })
  74
  75       if (this.reactiveUpdate) {
  76         oldForm = { ...this.form.value }
  77
  78         this.formValuesWatcher = this.form.valueChanges.subscribe((formValue: any) => {
  79           const updatedKey = Object.keys(formValue).find(k => formValue[k] !== oldForm[k])
  80           oldForm = { ...this.form.value }
  81
  82           this.updateDetails([ updatedKey ])
  83         })
  84       }
  85     })
  86   }
  87
  88   ngOnDestroy () {
  89     this.formValuesWatcher?.unsubscribe()
  90   }
  91
  92   updateDetails (onlyKeys?: string[]) {
  93     const nsfwPolicy = this.form.value[ 'nsfwPolicy' ]
  94     const webTorrentEnabled = this.form.value['webTorrentEnabled']
  95     const autoPlayVideo = this.form.value['autoPlayVideo']
  96     const autoPlayNextVideo = this.form.value['autoPlayNextVideo']
  97
  98     let videoLanguages: string[] = this.form.value['videoLanguages']
  99
 100     if (Array.isArray(videoLanguages)) {
 101       if (videoLanguages.length > 20) {
 102         this.notifier.error($localize`Too many languages are enabled. Please enable them all or stay below 20 enabled languages.`)
 103         return
 104       }
 105
 106       if (videoLanguages.length === 0) {
 107         this.notifier.error($localize`You need to enable at least 1 video language.`)
 108         return
 109       }
 110
 111       if (
 112         videoLanguages.length === this.languageItems.length ||
 113         (videoLanguages.length === 1 && videoLanguages[0] === this.allLanguagesGroup)
 114       ) {
 115         videoLanguages = null // null means "All"
 116       }
 117     }
 118
 119     let details: UserUpdateMe = {
 120       nsfwPolicy,
 121       webTorrentEnabled,
 122       autoPlayVideo,
 123       autoPlayNextVideo,
 124       videoLanguages
 125     }
 126
 127     if (onlyKeys) details = pick(details, onlyKeys)
 128
 129     if (this.authService.isLoggedIn()) {
 130       this.userService.updateMyProfile(details).subscribe(
 131         () => {
 132           this.authService.refreshUserInformation()
 133
 134           if (this.notifyOnUpdate) this.notifier.success($localize`Video settings updated.`)
 135         },
 136
 137         err => this.notifier.error(err.message)
 138       )
 139     } else {
 140       this.userService.updateMyAnonymousProfile(details)
 141       if (this.notifyOnUpdate) this.notifier.success($localize`Display/Video settings updated.`)
 142     }
 143   }
 144 }