Better video languages filter UX

Don't throw if the user did not select any language, automatically
select "all languages" instead

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,
   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.`)
+  }
 }