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 } from '@app/shared/shared-forms'
   7 import { UserUpdateMe } from '@shared/models'
   8 import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
   9 import { SelectOptionsItem } from '../../../types/select-options-item.model'
  10
  11 @Component({
  12   selector: 'my-user-video-settings',
  13   templateUrl: './user-video-settings.component.html',
  14   styleUrls: [ './user-video-settings.component.scss' ]
  15 })
  16 export class UserVideoSettingsComponent extends FormReactive implements OnInit, OnDestroy {
  17   @Input() user: User = null
  18   @Input() reactiveUpdate = false
  19   @Input() notifyOnUpdate = true
  20   @Input() userInformationLoaded: Subject<any>
  21
  22   languageItems: SelectOptionsItem[] = []
  23   defaultNSFWPolicy: NSFWPolicyType
  24   formValuesWatcher: Subscription
  25
  26   private allLanguagesGroup: string
  27
  28   constructor (
  29     protected formValidatorService: FormValidatorService,
  30     private authService: AuthService,
  31     private notifier: Notifier,
  32     private userService: UserService,
  33     private serverService: ServerService
  34   ) {
  35     super()
  36   }
  37
  38   ngOnInit () {
  39     this.allLanguagesGroup = $localize`All languages`
  40
  41     this.buildForm({
  42       nsfwPolicy: null,
  43       webTorrentEnabled: null,
  44       autoPlayVideo: null,
  45       autoPlayNextVideo: null,
  46       videoLanguages: null
  47     })
  48
  49     forkJoin([
  50       this.serverService.getVideoLanguages(),
  51       this.userInformationLoaded.pipe(first())
  52     ]).subscribe(([ languages ]) => {
  53       const group = this.allLanguagesGroup
  54
  55       this.languageItems = [ { label: $localize`Unknown language`, id: '_unknown', group } ]
  56       this.languageItems = this.languageItems
  57                                .concat(languages.map(l => ({ label: l.label, id: l.id, group })))
  58
  59       const videoLanguages: ItemSelectCheckboxValue[] = this.user.videoLanguages
  60         ? this.user.videoLanguages.map(l => ({ id: l }))
  61         : [ { group } ]
  62
  63       const serverConfig = this.serverService.getHTMLConfig()
  64       this.defaultNSFWPolicy = serverConfig.instance.defaultNSFWPolicy
  65
  66       this.form.patchValue({
  67         nsfwPolicy: this.user.nsfwPolicy || this.defaultNSFWPolicy,
  68         webTorrentEnabled: this.user.webTorrentEnabled,
  69         autoPlayVideo: this.user.autoPlayVideo === true,
  70         autoPlayNextVideo: this.user.autoPlayNextVideo,
  71         videoLanguages
  72       })
  73
  74       if (this.reactiveUpdate) this.handleReactiveUpdate()
  75     })
  76   }
  77
  78   ngOnDestroy () {
  79     this.formValuesWatcher?.unsubscribe()
  80   }
  81
  82   updateDetails (onlyKeys?: string[]) {
  83     const nsfwPolicy = this.form.value[ 'nsfwPolicy' ]
  84     const webTorrentEnabled = this.form.value['webTorrentEnabled']
  85     const autoPlayVideo = this.form.value['autoPlayVideo']
  86     const autoPlayNextVideo = this.form.value['autoPlayNextVideo']
  87
  88     let videoLanguagesForm = this.form.value['videoLanguages']
  89
  90     if (Array.isArray(videoLanguagesForm)) {
  91       if (videoLanguagesForm.length > 20) {
  92         this.notifier.error($localize`Too many languages are enabled. Please enable them all or stay below 20 enabled languages.`)
  93         return
  94       }
  95
  96       // Automatically use "All languages" if the user did not select any language
  97       if (videoLanguagesForm.length === 0) {
  98         videoLanguagesForm = [ this.allLanguagesGroup ]
  99         this.form.patchValue({ videoLanguages: [ { group: this.allLanguagesGroup } ] })
 100       }
 101     }
 102
 103     const videoLanguages = this.buildLanguagesFromForm(videoLanguagesForm)
 104
 105     let details: UserUpdateMe = {
 106       nsfwPolicy,
 107       webTorrentEnabled,
 108       autoPlayVideo,
 109       autoPlayNextVideo,
 110       videoLanguages
 111     }
 112
 113     if (videoLanguages) {
 114       details = Object.assign(details, videoLanguages)
 115     }
 116
 117     if (onlyKeys) details = pick(details, onlyKeys)
 118
 119     if (this.authService.isLoggedIn()) {
 120       return this.updateLoggedProfile(details)
 121     }
 122
 123     return this.updateAnonymousProfile(details)
 124   }
 125
 126   private buildLanguagesFromForm (videoLanguages: ItemSelectCheckboxValue[]) {
 127     if (!Array.isArray(videoLanguages)) return undefined
 128
 129     // null means "All"
 130     if (videoLanguages.length === this.languageItems.length) return null
 131
 132     if (videoLanguages.length === 1) {
 133       const videoLanguage = videoLanguages[0]
 134
 135       if (typeof videoLanguage === 'string') {
 136         if (videoLanguage === this.allLanguagesGroup) return null
 137       } else {
 138         if (videoLanguage.group === this.allLanguagesGroup) return null
 139       }
 140     }
 141
 142     return videoLanguages.map(l => {
 143       if (typeof l === 'string') return l
 144
 145       if (l.group) return l.group
 146
 147       return l.id + ''
 148     })
 149   }
 150
 151   private handleReactiveUpdate () {
 152     let oldForm = { ...this.form.value }
 153
 154     this.formValuesWatcher = this.form.valueChanges.subscribe((formValue: any) => {
 155       const updatedKey = Object.keys(formValue)
 156                                .find(k => formValue[k] !== oldForm[k])
 157
 158       oldForm = { ...this.form.value }
 159
 160       this.updateDetails([ updatedKey ])
 161     })
 162   }
 163
 164   private updateLoggedProfile (details: UserUpdateMe) {
 165     this.userService.updateMyProfile(details).subscribe(
 166       () => {
 167         this.authService.refreshUserInformation()
 168
 169         if (this.notifyOnUpdate) this.notifier.success($localize`Video settings updated.`)
 170       },
 171
 172       err => this.notifier.error(err.message)
 173     )
 174   }
 175
 176   private updateAnonymousProfile (details: UserUpdateMe) {
 177     this.userService.updateMyAnonymousProfile(details)
 178     if (this.notifyOnUpdate) this.notifier.success($localize`Display/Video settings updated.`)
 179   }
 180 }