forks/peertube
1
0
Fork 0
Code Releases Activity

Better video languages filter UX

Browse source 
Don't throw if the user did not select any language, automatically
select "all languages" instead
This commit is contained in:
Chocobozzz 2021-04-28 09:41:50 +02:00
parent 9e1409713d
commit dbef40433f
No known key found for this signature in database
GPG key ID: 583A612D890159BE
1 changed files with 40 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -38,8 +38,6 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
ngOnInit () { ngOnInit () {
this.allLanguagesGroup = $localize`All languages` this.allLanguagesGroup = $localize`All languages`
let oldForm: any
this.buildForm({ this.buildForm({
nsfwPolicy: null, nsfwPolicy: null,
webTorrentEnabled: null, webTorrentEnabled: null,
@ -73,16 +71,7 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
videoLanguages videoLanguages
}) })
if (this.reactiveUpdate) { if (this.reactiveUpdate) this.handleReactiveUpdate()
oldForm = { ...this.form.value }
this.formValuesWatcher = this.form.valueChanges.subscribe((formValue: any) => {
const updatedKey = Object.keys(formValue).find(k => formValue[k] !== oldForm[k])
oldForm = { ...this.form.value }
this.updateDetails([ updatedKey ])
})
}
}) })
} }
@ -96,7 +85,7 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
const autoPlayVideo = this.form.value['autoPlayVideo'] const autoPlayVideo = this.form.value['autoPlayVideo']
const autoPlayNextVideo = this.form.value['autoPlayNextVideo'] const autoPlayNextVideo = this.form.value['autoPlayNextVideo']
const videoLanguagesForm = this.form.value['videoLanguages'] let videoLanguagesForm = this.form.value['videoLanguages']
if (Array.isArray(videoLanguagesForm)) { if (Array.isArray(videoLanguagesForm)) {
if (videoLanguagesForm.length > 20) { if (videoLanguagesForm.length > 20) {
@ -104,13 +93,14 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
return return
} }
// Automatically use "All languages" if the user did not select any language
if (videoLanguagesForm.length === 0) { if (videoLanguagesForm.length === 0) {
this.notifier.error($localize`You need to enable at least 1 video language.`) videoLanguagesForm = [ this.allLanguagesGroup ]
return this.form.patchValue({ videoLanguages: [ { group: this.allLanguagesGroup } ] })
} }
} }
const videoLanguages = this.getVideoLanguages(videoLanguagesForm) const videoLanguages = this.buildLanguagesFromForm(videoLanguagesForm)
let details: UserUpdateMe = { let details: UserUpdateMe = {
nsfwPolicy, nsfwPolicy,
@ -127,22 +117,13 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
if (onlyKeys) details = pick(details, onlyKeys) if (onlyKeys) details = pick(details, onlyKeys)
if (this.authService.isLoggedIn()) { if (this.authService.isLoggedIn()) {
this.userService.updateMyProfile(details).subscribe( return this.updateLoggedProfile(details)
() => {
this.authService.refreshUserInformation()
if (this.notifyOnUpdate) this.notifier.success($localize`Video settings updated.`)
},
err => this.notifier.error(err.message)
)
} else {
this.userService.updateMyAnonymousProfile(details)
if (this.notifyOnUpdate) this.notifier.success($localize`Display/Video settings updated.`)
}
} }
private getVideoLanguages (videoLanguages: ItemSelectCheckboxValue[]) { return this.updateAnonymousProfile(details)
}
private buildLanguagesFromForm (videoLanguages: ItemSelectCheckboxValue[]) {
if (!Array.isArray(videoLanguages)) return undefined if (!Array.isArray(videoLanguages)) return undefined
// null means "All" // null means "All"
@ -166,4 +147,34 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
return l.id + '' return l.id + ''
}) })
} }
private handleReactiveUpdate () {
let oldForm = { ...this.form.value }
this.formValuesWatcher = this.form.valueChanges.subscribe((formValue: any) => {
const updatedKey = Object.keys(formValue)
.find(k => formValue[k] !== oldForm[k])
oldForm = { ...this.form.value }
this.updateDetails([ updatedKey ])
})
}
private updateLoggedProfile (details: UserUpdateMe) {
this.userService.updateMyProfile(details).subscribe(
() => {
this.authService.refreshUserInformation()
if (this.notifyOnUpdate) this.notifier.success($localize`Video settings updated.`)
},
err => this.notifier.error(err.message)
)
}
private updateAnonymousProfile (details: UserUpdateMe) {
this.userService.updateMyAnonymousProfile(details)
if (this.notifyOnUpdate) this.notifier.success($localize`Display/Video settings updated.`)
}
} }