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     const videoLanguagesForm = this.form.value['videoLanguages']
  99
 100     if (Array.isArray(videoLanguagesForm)) {
 101       if (videoLanguagesForm.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 (videoLanguagesForm.length === 0) {
 107         this.notifier.error($localize`You need to enable at least 1 video language.`)
 108         return
 109       }
 110     }
 111
 112     const videoLanguages = this.getVideoLanguages(videoLanguagesForm)
 113
 114     let details: UserUpdateMe = {
 115       nsfwPolicy,
 116       webTorrentEnabled,
 117       autoPlayVideo,
 118       autoPlayNextVideo,
 119       videoLanguages
 120     }
 121
 122     if (videoLanguages) {
 123       details = Object.assign(details, videoLanguages)
 124     }
 125
 126     if (onlyKeys) details = pick(details, onlyKeys)
 127
 128     if (this.authService.isLoggedIn()) {
 129       this.userService.updateMyProfile(details).subscribe(
 130         () => {
 131           this.authService.refreshUserInformation()
 132
 133           if (this.notifyOnUpdate) this.notifier.success($localize`Video settings updated.`)
 134         },
 135
 136         err => this.notifier.error(err.message)
 137       )
 138     } else {
 139       this.userService.updateMyAnonymousProfile(details)
 140       if (this.notifyOnUpdate) this.notifier.success($localize`Display/Video settings updated.`)
 141     }
 142   }
 143
 144   private getVideoLanguages (videoLanguages: ItemSelectCheckboxValue[]) {
 145     if (!Array.isArray(videoLanguages)) return undefined
 146
 147     // null means "All"
 148     if (videoLanguages.length === this.languageItems.length) return null
 149
 150     if (videoLanguages.length === 1) {
 151       const videoLanguage = videoLanguages[0]
 152
 153       if (typeof videoLanguage === 'string') {
 154         if (videoLanguage === this.allLanguagesGroup) return null
 155       } else {
 156         if (videoLanguage.group === this.allLanguagesGroup) return null
 157       }
 158     }
 159
 160     return videoLanguages.map(l => {
 161       if (typeof l === 'string') return l
 162
 163       if (l.group) return l.group
 164
 165       return l.id + ''
 166     })
 167   }
 168 }