Translate plugin settings

[github/Chocobozzz/PeerTube.git] / client / src / root-helpers / plugins-manager.ts

diff --git a/client/src/root-helpers/plugins-manager.ts b/client/src/root-helpers/plugins-manager.ts
index f919db8afb4ebb27c1a3164c72cd7a2fd5a97959..61731032ad7f8cbed25bddd558370b246fdc01f2 100644 (file)
--- a/client/src/root-helpers/plugins-manager.ts
+++ b/client/src/root-helpers/plugins-manager.ts
@@ -1,41 +1,52 @@
+/* eslint-disable @typescript-eslint/no-implied-eval */
 import * as debug from 'debug'
-import { ReplaySubject } from 'rxjs'
+import { firstValueFrom, ReplaySubject } from 'rxjs'
 import { first, shareReplay } from 'rxjs/operators'
 import { RegisterClientHelpers } from 'src/types/register-client-option.model'
 import { getHookType, internalRunHook } from '@shared/core-utils/plugins/hooks'
 import {
   ClientHookName,
   clientHookObject,
-  ClientScript,
+  ClientScriptJSON,
   HTMLServerConfig,
   PluginClientScope,
   PluginType,
   RegisterClientFormFieldOptions,
   RegisterClientHookOptions,
-  RegisterClientSettingsScript,
+  RegisterClientRouteOptions,
+  RegisterClientSettingsScriptOptions,
   RegisterClientVideoFieldOptions,
+  RegisteredExternalAuthConfig,
   ServerConfigPlugin
-} from '../../../shared/models'
+} from '@shared/models'
 import { environment } from '../environments/environment'
-import { ClientScript as ClientScriptModule } from '../types/client-script.model'
+import { ClientScript } from '../types'
 
 interface HookStructValue extends RegisterClientHookOptions {
   plugin: ServerConfigPlugin
-  clientScript: ClientScript
+  clientScript: ClientScriptJSON
 }
 
 type Hooks = { [ name: string ]: HookStructValue[] }
 
 type PluginInfo = {
   plugin: ServerConfigPlugin
-  clientScript: ClientScript
+  clientScript: ClientScriptJSON
   pluginType: PluginType
   isTheme: boolean
 }
 
 type PeertubeHelpersFactory = (pluginInfo: PluginInfo) => RegisterClientHelpers
-type OnFormFields = (options: RegisterClientFormFieldOptions, videoFormOptions: RegisterClientVideoFieldOptions) => void
-type OnSettingsScripts = (pluginInfo: PluginInfo, options: RegisterClientSettingsScript) => void
+
+type OnFormFields = (
+  pluginInfo: PluginInfo,
+  options: RegisterClientFormFieldOptions,
+  videoFormOptions: RegisterClientVideoFieldOptions
+) => void
+
+type OnSettingsScripts = (pluginInfo: PluginInfo, options: RegisterClientSettingsScriptOptions) => void
+
+type OnClientRoute = (options: RegisterClientRouteOptions) => void
 
 const logger = debug('peertube:plugins')
 
@@ -62,21 +73,29 @@ class PluginsManager {
   private readonly peertubeHelpersFactory: PeertubeHelpersFactory
   private readonly onFormFields: OnFormFields
   private readonly onSettingsScripts: OnSettingsScripts
+  private readonly onClientRoute: OnClientRoute
 
   constructor (options: {
     peertubeHelpersFactory: PeertubeHelpersFactory
     onFormFields?: OnFormFields
     onSettingsScripts?: OnSettingsScripts
+    onClientRoute?: OnClientRoute
   }) {
     this.peertubeHelpersFactory = options.peertubeHelpersFactory
     this.onFormFields = options.onFormFields
     this.onSettingsScripts = options.onSettingsScripts
+    this.onClientRoute = options.onClientRoute
   }
 
   static getPluginPathPrefix (isTheme: boolean) {
     return isTheme ? '/themes' : '/plugins'
   }
 
+  static getExternalAuthHref (auth: RegisteredExternalAuthConfig) {
+    return environment.apiUrl + `/plugins/${auth.name}/${auth.version}/auth/${auth.authName}`
+
+  }
+
   loadPluginsList (config: HTMLServerConfig) {
     for (const plugin of config.plugin.registered) {
       this.addPlugin(plugin)
@@ -102,9 +121,10 @@ class PluginsManager {
   ensurePluginsAreLoaded (scope: PluginClientScope) {
     this.loadPluginsByScope(scope)
 
-    return this.pluginsLoaded[scope].asObservable()
+    const obs = this.pluginsLoaded[scope].asObservable()
                .pipe(first(), shareReplay())
-               .toPromise()
+
+    return firstValueFrom(obs)
   }
 
   async reloadLoadedScopes () {
@@ -154,7 +174,7 @@ class PluginsManager {
     try {
       if (!isReload) this.loadedScopes.push(scope)
 
-      const toLoad = this.scopes[ scope ]
+      const toLoad = this.scopes[scope]
       if (!Array.isArray(toLoad)) {
         this.loadingScopes[scope] = false
         this.pluginsLoaded[scope].next(true)
@@ -167,11 +187,11 @@ class PluginsManager {
       for (const pluginInfo of toLoad) {
         const clientScript = pluginInfo.clientScript
 
-        if (this.loadedScripts[ clientScript.script ]) continue
+        if (this.loadedScripts[clientScript.script]) continue
 
         promises.push(this.loadPlugin(pluginInfo))
 
-        this.loadedScripts[ clientScript.script ] = true
+        this.loadedScripts[clientScript.script] = true
       }
 
       await Promise.all(promises)
@@ -210,10 +230,10 @@ class PluginsManager {
         throw new Error('Video field registration is not supported')
       }
 
-      return this.onFormFields(commonOptions, videoFormOptions)
+      return this.onFormFields(pluginInfo, commonOptions, videoFormOptions)
     }
 
-    const registerSettingsScript = (options: RegisterClientSettingsScript) => {
+    const registerSettingsScript = (options: RegisterClientSettingsScriptOptions) => {
       if (!this.onSettingsScripts) {
         throw new Error('Registering settings script is not supported')
       }
@@ -221,13 +241,29 @@ class PluginsManager {
       return this.onSettingsScripts(pluginInfo, options)
     }
 
+    const registerClientRoute = (options: RegisterClientRouteOptions) => {
+      if (!this.onClientRoute) {
+        throw new Error('Registering client route is not supported')
+      }
+
+      return this.onClientRoute(options)
+    }
+
     const peertubeHelpers = this.peertubeHelpersFactory(pluginInfo)
 
     console.log('Loading script %s of plugin %s.', clientScript.script, plugin.name)
 
     const absURL = (environment.apiUrl || window.location.origin) + clientScript.script
-    return import(/* webpackIgnore: true */ absURL)
-      .then((script: ClientScriptModule) => script.register({ registerHook, registerVideoField, registerSettingsScript, peertubeHelpers }))
+    return dynamicImport(absURL)
+      .then((script: ClientScript) => {
+        return script.register({
+          registerHook,
+          registerVideoField,
+          registerSettingsScript,
+          registerClientRoute,
+          peertubeHelpers
+        })
+      })
       .then(() => this.sortHooksByPriority())
       .catch(err => console.error('Cannot import or register plugin %s.', pluginInfo.plugin.name, err))
   }
@@ -249,3 +285,45 @@ export {
   OnFormFields,
   OnSettingsScripts
 }
+
+// ---------------------------------------------------------------------------
+
+async function dynamicImport (url: string) {
+  try {
+    // eslint-disable-next-line no-new-func
+    return new Function(`return import('${url}')`)()
+  } catch {
+    console.log('Fallback to import polyfill')
+
+    return new Promise((resolve, reject) => {
+      const vector = '$importModule$' + Math.random().toString(32).slice(2)
+      const script = document.createElement('script')
+
+      const destructor = () => {
+        delete window[vector]
+        script.onerror = null
+        script.onload = null
+        script.remove()
+        URL.revokeObjectURL(script.src)
+        script.src = ''
+      }
+
+      script.defer = true
+      script.type = 'module'
+
+      script.onerror = () => {
+        reject(new Error(`Failed to import: ${url}`))
+        destructor()
+      }
+      script.onload = () => {
+        resolve(window[vector])
+        destructor()
+      }
+      const loader = `import * as m from "${url}"; window.${vector} = m;` // export Module
+      const blob = new Blob([ loader ], { type: 'text/javascript' })
+      script.src = URL.createObjectURL(blob)
+
+      document.head.appendChild(script)
+    })
+  }
+}