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