2 files changed, 152 insertions, 0 deletions

diff --git a/client/src/root-helpers/plugins.ts b/client/src/root-helpers/plugins.ts
new file mode 100644
index 000000000..4bc2c8eb2
--- /dev/null
+++ b/client/src/root-helpers/plugins.ts
@@ -0,0 +1,114 @@
+import { RegisterClientHelpers } from 'src/types/register-client-option.model'
+import { getHookType, internalRunHook } from '@shared/core-utils/plugins/hooks'
+import { RegisterClientFormFieldOptions, RegisterClientVideoFieldOptions } from '@shared/models/plugins/register-client-form-field.model'
+import {
+  ClientHookName,
+  clientHookObject,
+  ClientScript,
+  PluginType,
+  RegisterClientHookOptions,
+  ServerConfigPlugin
+} from '../../../shared/models'
+import { ClientScript as ClientScriptModule } from '../types/client-script.model'
+import { importModule } from './utils'
+
+interface HookStructValue extends RegisterClientHookOptions {
+  plugin: ServerConfigPlugin
+  clientScript: ClientScript
+}
+
+type Hooks = { [ name: string ]: HookStructValue[] }
+
+type PluginInfo = {
+  plugin: ServerConfigPlugin
+  clientScript: ClientScript
+  pluginType: PluginType
+  isTheme: boolean
+}
+
+type FormFields = {
+  video: {
+    commonOptions: RegisterClientFormFieldOptions
+    videoFormOptions: RegisterClientVideoFieldOptions
+  }[]
+}
+
+async function runHook<T> (hooks: Hooks, hookName: ClientHookName, result?: T, params?: any) {
+  if (!hooks[hookName]) return result
+
+  const hookType = getHookType(hookName)
+
+  for (const hook of hooks[hookName]) {
+    console.log('Running hook %s of plugin %s.', hookName, hook.plugin.name)
+
+    result = await internalRunHook(hook.handler, hookType, result, params, err => {
+      console.error('Cannot run hook %s of script %s of plugin %s.', hookName, hook.clientScript.script, hook.plugin.name, err)
+    })
+  }
+
+  return result
+}
+
+function loadPlugin (options: {
+  hooks: Hooks
+  pluginInfo: PluginInfo
+  peertubeHelpersFactory: (pluginInfo: PluginInfo) => RegisterClientHelpers
+  formFields?: FormFields
+}) {
+  const { hooks, pluginInfo, peertubeHelpersFactory, formFields } = options
+  const { plugin, clientScript } = pluginInfo
+
+  const registerHook = (options: RegisterClientHookOptions) => {
+    if (clientHookObject[options.target] !== true) {
+      console.error('Unknown hook %s of plugin %s. Skipping.', options.target, plugin.name)
+      return
+    }
+
+    if (!hooks[options.target]) hooks[options.target] = []
+
+    hooks[options.target].push({
+      plugin,
+      clientScript,
+      target: options.target,
+      handler: options.handler,
+      priority: options.priority || 0
+    })
+  }
+
+  const registerVideoField = (commonOptions: RegisterClientFormFieldOptions, videoFormOptions: RegisterClientVideoFieldOptions) => {
+    if (!formFields) {
+      throw new Error('Video field registration is not supported')
+    }
+
+    formFields.video.push({
+      commonOptions,
+      videoFormOptions
+    })
+  }
+
+  const peertubeHelpers = peertubeHelpersFactory(pluginInfo)
+
+  console.log('Loading script %s of plugin %s.', clientScript.script, plugin.name)
+
+  return importModule(clientScript.script)
+    .then((script: ClientScriptModule) => script.register({ registerHook, registerVideoField, peertubeHelpers }))
+    .then(() => sortHooksByPriority(hooks))
+    .catch(err => console.error('Cannot import or register plugin %s.', pluginInfo.plugin.name, err))
+}
+
+export {
+  HookStructValue,
+  Hooks,
+  PluginInfo,
+  FormFields,
+  loadPlugin,
+  runHook
+}
+
+function sortHooksByPriority (hooks: Hooks) {
+  for (const hookName of Object.keys(hooks)) {
+    hooks[hookName].sort((a, b) => {
+      return b.priority - a.priority
+    })
+  }
+}
diff --git a/client/src/root-helpers/utils.ts b/client/src/root-helpers/utils.ts
index acfb565a3..6df151ad9 100644
--- a/client/src/root-helpers/utils.ts
+++ b/client/src/root-helpers/utils.ts
@@ -1,3 +1,5 @@
+import { environment } from '../environments/environment'
+
 function objectToUrlEncoded (obj: any) {
   const str: string[] = []
   for (const key of Object.keys(obj)) {
@@ -7,6 +9,42 @@ function objectToUrlEncoded (obj: any) {
   return str.join('&')
 }
 
+// Thanks: https://github.com/uupaa/dynamic-import-polyfill
+function importModule (path: string) {
+  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: ${path}`))
+      destructor()
+    }
+    script.onload = () => {
+      resolve(window[ vector ])
+      destructor()
+    }
+    const absURL = (environment.apiUrl || window.location.origin) + path
+    const loader = `import * as m from "${absURL}"; window.${vector} = m;` // export Module
+    const blob = new Blob([ loader ], { type: 'text/javascript' })
+    script.src = URL.createObjectURL(blob)
+
+    document.head.appendChild(script)
+  })
+}
+
 export {
+  importModule,
   objectToUrlEncoded
 }