Fix setting theme in client

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-user-settings / user-interface-settings.component.ts

diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
index bd1cb0353b8c1e291778e522912c8b6fe08a0103..13e2e54248de6723592d28a3dc7f30bc4bba2cbc 100644 (file)
--- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
+++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.ts
@@ -1,8 +1,9 @@
 import { Subject, Subscription } from 'rxjs'
 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { AuthService, Notifier, ServerService, UserService } from '@app/core'
+import { AuthService, Notifier, ServerService, ThemeService, UserService } from '@app/core'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { HTMLServerConfig, User, UserUpdateMe } from '@shared/models'
+import { SelectOptionsItem } from 'src/types'
 
 @Component({
   selector: 'my-user-interface-settings',
@@ -15,6 +16,7 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
   @Input() notifyOnUpdate = true
   @Input() userInformationLoaded: Subject<any>
 
+  availableThemes: SelectOptionsItem[]
   formValuesWatcher: Subscription
 
   private serverConfig: HTMLServerConfig
@@ -24,19 +26,21 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
     private authService: AuthService,
     private notifier: Notifier,
     private userService: UserService,
+    private themeService: ThemeService,
     private serverService: ServerService
   ) {
     super()
   }
 
-  get availableThemes () {
-    return this.serverConfig.theme.registered
-               .map(t => t.name)
+  get instanceName () {
+    return this.serverConfig.instance.name
   }
 
   ngOnInit () {
     this.serverConfig = this.serverService.getHTMLConfig()
 
+    this.availableThemes = this.themeService.buildAvailableThemes()
+
     this.buildForm({
       theme: null
     })
@@ -48,7 +52,7 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
         })
 
         if (this.reactiveUpdate) {
-          this.formValuesWatcher = this.form.valueChanges.subscribe(val => this.updateInterfaceSettings())
+          this.formValuesWatcher = this.form.valueChanges.subscribe(() => this.updateInterfaceSettings())
         }
       })
   }
@@ -57,6 +61,20 @@ export class UserInterfaceSettingsComponent extends FormReactive implements OnIn
     this.formValuesWatcher?.unsubscribe()
   }
 
+  getDefaultThemeLabel () {
+    return this.themeService.getDefaultThemeLabel()
+  }
+
+  getDefaultInstanceThemeLabel () {
+    const theme = this.serverConfig.theme.default
+
+    if (theme === 'default') {
+      return this.getDefaultThemeLabel()
+    }
+
+    return theme
+  }
+
   updateInterfaceSettings () {
     const theme = this.form.value['theme']