From dbef40433f22e55ff321317b7dbe9e8e0dc616f2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 28 Apr 2021 09:41:50 +0200 Subject: Better video languages filter UX Don't throw if the user did not select any language, automatically select "all languages" instead --- .../user-video-settings.component.ts | 69 +++++++++++++--------- 1 file changed, 40 insertions(+), 29 deletions(-) (limited to 'client/src/app') 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, ngOnInit () { this.allLanguagesGroup = $localize`All languages` - let oldForm: any - this.buildForm({ nsfwPolicy: null, webTorrentEnabled: null, @@ -73,16 +71,7 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit, videoLanguages }) - if (this.reactiveUpdate) { - 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 ]) - }) - } + if (this.reactiveUpdate) this.handleReactiveUpdate() }) } @@ -96,7 +85,7 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit, const autoPlayVideo = this.form.value['autoPlayVideo'] const autoPlayNextVideo = this.form.value['autoPlayNextVideo'] - const videoLanguagesForm = this.form.value['videoLanguages'] + let videoLanguagesForm = this.form.value['videoLanguages'] if (Array.isArray(videoLanguagesForm)) { if (videoLanguagesForm.length > 20) { @@ -104,13 +93,14 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit, return } + // Automatically use "All languages" if the user did not select any language if (videoLanguagesForm.length === 0) { - this.notifier.error($localize`You need to enable at least 1 video language.`) - return + videoLanguagesForm = [ this.allLanguagesGroup ] + this.form.patchValue({ videoLanguages: [ { group: this.allLanguagesGroup } ] }) } } - const videoLanguages = this.getVideoLanguages(videoLanguagesForm) + const videoLanguages = this.buildLanguagesFromForm(videoLanguagesForm) let details: UserUpdateMe = { nsfwPolicy, @@ -127,22 +117,13 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit, if (onlyKeys) details = pick(details, onlyKeys) if (this.authService.isLoggedIn()) { - this.userService.updateMyProfile(details).subscribe( - () => { - 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.`) + return this.updateLoggedProfile(details) } + + return this.updateAnonymousProfile(details) } - private getVideoLanguages (videoLanguages: ItemSelectCheckboxValue[]) { + private buildLanguagesFromForm (videoLanguages: ItemSelectCheckboxValue[]) { if (!Array.isArray(videoLanguages)) return undefined // null means "All" @@ -166,4 +147,34 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit, 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.`) + } } -- cgit v1.2.3