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

   1 import { pick } from 'lodash-es'
   2 import { 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, FormReactiveService } 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   defaultNSFWPolicy: NSFWPolicyType
  22   formValuesWatcher: Subscription
  23
  24   constructor (
  25     protected formReactiveService: FormReactiveService,
  26     private authService: AuthService,
  27     private notifier: Notifier,
  28     private userService: UserService,
  29     private serverService: ServerService
  30   ) {
  31     super()
  32   }
  33
  34   ngOnInit () {
  35     this.buildForm({
  36       nsfwPolicy: null,
  37       p2pEnabled: null,
  38       autoPlayVideo: null,
  39       autoPlayNextVideo: null,
  40       videoLanguages: null
  41     })
  42
  43     this.userInformationLoaded.pipe(first())
  44       .subscribe(
  45         () => {
  46           const serverConfig = this.serverService.getHTMLConfig()
  47           this.defaultNSFWPolicy = serverConfig.instance.defaultNSFWPolicy
  48
  49           this.form.patchValue({
  50             nsfwPolicy: this.user.nsfwPolicy || this.defaultNSFWPolicy,
  51             p2pEnabled: this.user.p2pEnabled,
  52             autoPlayVideo: this.user.autoPlayVideo === true,
  53             autoPlayNextVideo: this.user.autoPlayNextVideo,
  54             videoLanguages: this.user.videoLanguages
  55           })
  56
  57           if (this.reactiveUpdate) this.handleReactiveUpdate()
  58         }
  59       )
  60   }
  61
  62   ngOnDestroy () {
  63     this.formValuesWatcher?.unsubscribe()
  64   }
  65
  66   updateDetails (onlyKeys?: string[]) {
  67     const nsfwPolicy = this.form.value['nsfwPolicy']
  68     const p2pEnabled = this.form.value['p2pEnabled']
  69     const autoPlayVideo = this.form.value['autoPlayVideo']
  70     const autoPlayNextVideo = this.form.value['autoPlayNextVideo']
  71
  72     const videoLanguages = this.form.value['videoLanguages']
  73
  74     if (Array.isArray(videoLanguages)) {
  75       if (videoLanguages.length > 20) {
  76         this.notifier.error($localize`Too many languages are enabled. Please enable them all or stay below 20 enabled languages.`)
  77         return
  78       }
  79     }
  80
  81     let details: UserUpdateMe = {
  82       nsfwPolicy,
  83       p2pEnabled,
  84       autoPlayVideo,
  85       autoPlayNextVideo,
  86       videoLanguages
  87     }
  88
  89     if (videoLanguages) {
  90       details = Object.assign(details, videoLanguages)
  91     }
  92
  93     if (onlyKeys) details = pick(details, onlyKeys)
  94
  95     if (this.authService.isLoggedIn()) {
  96       return this.updateLoggedProfile(details)
  97     }
  98
  99     return this.updateAnonymousProfile(details)
 100   }
 101
 102   private handleReactiveUpdate () {
 103     let oldForm = { ...this.form.value }
 104
 105     this.formValuesWatcher = this.form.valueChanges.subscribe((formValue: any) => {
 106       const updatedKey = Object.keys(formValue)
 107                                .find(k => formValue[k] !== oldForm[k])
 108
 109       oldForm = { ...this.form.value }
 110
 111       this.updateDetails([ updatedKey ])
 112     })
 113   }
 114
 115   private updateLoggedProfile (details: UserUpdateMe) {
 116     this.userService.updateMyProfile(details)
 117       .subscribe({
 118         next: () => {
 119           this.authService.refreshUserInformation()
 120
 121           if (this.notifyOnUpdate) this.notifier.success($localize`Video settings updated.`)
 122         },
 123
 124         error: err => this.notifier.error(err.message)
 125       })
 126   }
 127
 128   private updateAnonymousProfile (details: UserUpdateMe) {
 129     this.userService.updateMyAnonymousProfile(details)
 130
 131     if (this.notifyOnUpdate) {
 132       this.notifier.success($localize`Display/Video settings updated.`)
 133     }
 134   }
 135 }