aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-28 09:41:50 +0200
committerChocobozzz <me@florianbigard.com>2021-04-28 09:41:50 +0200
commitdbef40433f22e55ff321317b7dbe9e8e0dc616f2 (patch)
treefc1ce677abc6750e8f1289d00c336a1bebd4ce82
parent9e1409713dc5a5a73707a0c9f7cef780e1a82dcd (diff)
downloadPeerTube-dbef40433f22e55ff321317b7dbe9e8e0dc616f2.tar.gz
PeerTube-dbef40433f22e55ff321317b7dbe9e8e0dc616f2.tar.zst
PeerTube-dbef40433f22e55ff321317b7dbe9e8e0dc616f2.zip
Better video languages filter UX
Don't throw if the user did not select any language, automatically select "all languages" instead
-rw-r--r--client/src/app/shared/shared-user-settings/user-video-settings.component.ts69
1 files changed, 40 insertions, 29 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
index d74c2b2d8..ae95030c7 100644
--- 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
@@ -38,8 +38,6 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
38 ngOnInit () { 38 ngOnInit () {
39 this.allLanguagesGroup = $localize`All languages` 39 this.allLanguagesGroup = $localize`All languages`
40 40
41 let oldForm: any
42
43 this.buildForm({ 41 this.buildForm({
44 nsfwPolicy: null, 42 nsfwPolicy: null,
45 webTorrentEnabled: null, 43 webTorrentEnabled: null,
@@ -73,16 +71,7 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
73 videoLanguages 71 videoLanguages
74 }) 72 })
75 73
76 if (this.reactiveUpdate) { 74 if (this.reactiveUpdate) this.handleReactiveUpdate()
77 oldForm = { ...this.form.value }
78
79 this.formValuesWatcher = this.form.valueChanges.subscribe((formValue: any) => {
80 const updatedKey = Object.keys(formValue).find(k => formValue[k] !== oldForm[k])
81 oldForm = { ...this.form.value }
82
83 this.updateDetails([ updatedKey ])
84 })
85 }
86 }) 75 })
87 } 76 }
88 77
@@ -96,7 +85,7 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
96 const autoPlayVideo = this.form.value['autoPlayVideo'] 85 const autoPlayVideo = this.form.value['autoPlayVideo']
97 const autoPlayNextVideo = this.form.value['autoPlayNextVideo'] 86 const autoPlayNextVideo = this.form.value['autoPlayNextVideo']
98 87
99 const videoLanguagesForm = this.form.value['videoLanguages'] 88 let videoLanguagesForm = this.form.value['videoLanguages']
100 89
101 if (Array.isArray(videoLanguagesForm)) { 90 if (Array.isArray(videoLanguagesForm)) {
102 if (videoLanguagesForm.length > 20) { 91 if (videoLanguagesForm.length > 20) {
@@ -104,13 +93,14 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
104 return 93 return
105 } 94 }
106 95
96 // Automatically use "All languages" if the user did not select any language
107 if (videoLanguagesForm.length === 0) { 97 if (videoLanguagesForm.length === 0) {
108 this.notifier.error($localize`You need to enable at least 1 video language.`) 98 videoLanguagesForm = [ this.allLanguagesGroup ]
109 return 99 this.form.patchValue({ videoLanguages: [ { group: this.allLanguagesGroup } ] })
110 } 100 }
111 } 101 }
112 102
113 const videoLanguages = this.getVideoLanguages(videoLanguagesForm) 103 const videoLanguages = this.buildLanguagesFromForm(videoLanguagesForm)
114 104
115 let details: UserUpdateMe = { 105 let details: UserUpdateMe = {
116 nsfwPolicy, 106 nsfwPolicy,
@@ -127,22 +117,13 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
127 if (onlyKeys) details = pick(details, onlyKeys) 117 if (onlyKeys) details = pick(details, onlyKeys)
128 118
129 if (this.authService.isLoggedIn()) { 119 if (this.authService.isLoggedIn()) {
130 this.userService.updateMyProfile(details).subscribe( 120 return this.updateLoggedProfile(details)
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 } 121 }
122
123 return this.updateAnonymousProfile(details)
143 } 124 }
144 125
145 private getVideoLanguages (videoLanguages: ItemSelectCheckboxValue[]) { 126 private buildLanguagesFromForm (videoLanguages: ItemSelectCheckboxValue[]) {
146 if (!Array.isArray(videoLanguages)) return undefined 127 if (!Array.isArray(videoLanguages)) return undefined
147 128
148 // null means "All" 129 // null means "All"
@@ -166,4 +147,34 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
166 return l.id + '' 147 return l.id + ''
167 }) 148 })
168 } 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 }
169} 180}