Translate plugin options

client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html

@@ -7,7 +7,7 @@
 
   <form *ngIf="hasRegisteredSettings()" role="form" (ngSubmit)="formValidated()" [formGroup]="form">
     <div class="form-group" *ngFor="let setting of registeredSettings">
-      <my-dynamic-form-field [form]="form" [setting]="setting" [formErrors]="formErrors"></my-dynamic-form-field>
+      <my-dynamic-form-field [hidden]="isSettingHidden(setting)" [form]="form" [setting]="setting" [formErrors]="formErrors"></my-dynamic-form-field>
     </div>
 
     <input type="submit" i18n value="Update plugin settings" [disabled]="!form.valid">

client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts

@@ -2,7 +2,7 @@ import { Subscription } from 'rxjs'
 import { map, switchMap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { Notifier } from '@app/core'
+import { Notifier, PluginService } from '@app/core'
 import { BuildFormArgument } from '@app/shared/form-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { PeerTubePlugin, RegisterServerSettingOptions } from '@shared/models'
@@ -22,7 +22,8 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
 
   constructor (
     protected formValidatorService: FormValidatorService,
-    private pluginService: PluginApiService,
+    private pluginService: PluginService,
+    private pluginAPIService: PluginApiService,
     private notifier: Notifier,
     private route: ActivatedRoute
   ) {
@@ -46,7 +47,7 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
   formValidated () {
     const settings = this.form.value
 
-    this.pluginService.updatePluginSettings(this.plugin.name, this.plugin.type, settings)
+    this.pluginAPIService.updatePluginSettings(this.plugin.name, this.plugin.type, settings)
         .subscribe(
           () => {
             this.notifier.success($localize`Settings updated.`)
@@ -60,18 +61,22 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
     return Array.isArray(this.registeredSettings) && this.registeredSettings.length !== 0
   }
 
+  isSettingHidden (setting: RegisterServerSettingOptions) {
+    return false
+  }
+
   private loadPlugin (npmName: string) {
-    this.pluginService.getPlugin(npmName)
+    this.pluginAPIService.getPlugin(npmName)
         .pipe(switchMap(plugin => {
-          return this.pluginService.getPluginRegisteredSettings(plugin.name, plugin.type)
+          return this.pluginAPIService.getPluginRegisteredSettings(plugin.name, plugin.type)
             .pipe(map(data => ({ plugin, registeredSettings: data.registeredSettings })))
         }))
         .subscribe(
-          ({ plugin, registeredSettings }) => {
+          async ({ plugin, registeredSettings }) => {
             this.plugin = plugin
-            this.registeredSettings = registeredSettings
+            this.registeredSettings = await this.translateSettings(registeredSettings)
 
-            this.pluginTypeLabel = this.pluginService.getPluginTypeLabel(this.plugin.type)
+            this.pluginTypeLabel = this.pluginAPIService.getPluginTypeLabel(this.plugin.type)
 
             this.buildSettingsForm()
           },
@@ -104,4 +109,29 @@ export class PluginShowInstalledComponent extends FormReactive implements OnInit
     return registered.default
   }
 
+  private async translateSettings (settings: RegisterServerSettingOptions[]) {
+    const npmName = this.pluginService.nameToNpmName(this.plugin.name, this.plugin.type)
+
+    for (const setting of settings) {
+      for (const key of [ 'label', 'html', 'descriptionHTML' ]) {
+        if (setting[key]) setting[key] = await this.pluginService.translateBy(npmName, setting[key])
+      }
+
+      if (Array.isArray(setting.options)) {
+        const newOptions = []
+
+        for (const o of setting.options) {
+          newOptions.push({
+            value: o.value,
+            label: await this.pluginService.translateBy(npmName, o.label)
+          })
+        }
+
+        setting.options = newOptions
+      }
+    }
+
+    return settings
+  }
+
 }

client/src/app/+admin/plugins/shared/plugin-api.service.ts

@@ -94,7 +94,6 @@ export class PluginApiService {
 
     return this.authHttp.get<RegisteredServerSettings>(path)
                .pipe(
-                 switchMap(res => this.translateSettingsLabel(npmName, res)),
                  catchError(res => this.restExtractor.handleError(res))
                )
   }
@@ -141,19 +140,4 @@ export class PluginApiService {
 
     return `https://www.npmjs.com/package/peertube-${typeString}-${name}`
   }
-
-  private translateSettingsLabel (npmName: string, res: RegisteredServerSettings): Observable<RegisteredServerSettings> {
-    return this.pluginService.translationsObservable
-      .pipe(
-        map(allTranslations => allTranslations[npmName]),
-        map(translations => {
-          const registeredSettings = res.registeredSettings
-                                        .map(r => {
-                                          return Object.assign({}, r, { label: peertubeTranslate(r.label, translations) })
-                                        })
-
-          return { registeredSettings }
-        })
-      )
-  }
 }

client/src/app/core/plugins/plugin.service.ts

@@ -46,7 +46,10 @@ export class PluginService implements ClientHook {
   customModal: CustomModalComponent
 
   private plugins: ServerConfigPlugin[] = []
+  private helpers: { [ npmName: string ]: RegisterClientHelpers } = {}
+
   private scopes: { [ scopeName: string ]: PluginInfo[] } = {}
+
   private loadedScripts: { [ script: string ]: boolean } = {}
   private loadedScopes: PluginClientScope[] = []
   private loadingScopes: { [id in PluginClientScope]?: boolean } = {}
@@ -197,13 +200,28 @@ export class PluginService implements ClientHook {
     return this.formFields.video.filter(f => f.videoFormOptions.type === type)
   }
 
+  translateBy (npmName: string, toTranslate: string) {
+    const helpers = this.helpers[npmName]
+    if (!helpers) {
+      console.error('Unknown helpers to translate %s from %s.', toTranslate, npmName)
+      return toTranslate
+    }
+
+    return helpers.translate(toTranslate)
+  }
+
   private loadPlugin (pluginInfo: PluginInfo) {
     return this.zone.runOutsideAngular(() => {
+      const npmName = this.nameToNpmName(pluginInfo.plugin.name, pluginInfo.pluginType)
+
+      const helpers = this.buildPeerTubeHelpers(pluginInfo)
+      this.helpers[npmName] = helpers
+
       return loadPlugin({
         hooks: this.hooks,
         formFields: this.formFields,
         pluginInfo,
-        peertubeHelpersFactory: pluginInfo => this.buildPeerTubeHelpers(pluginInfo)
+        peertubeHelpersFactory: () => helpers
       })
     })
   }