4 files changed, 40 insertions, 12 deletions

diff --git a/client/src/app/core/plugins/hooks.service.ts b/client/src/app/core/plugins/hooks.service.ts
index 93dac1167..242741831 100644
--- a/client/src/app/core/plugins/hooks.service.ts
+++ b/client/src/app/core/plugins/hooks.service.ts
@@ -16,13 +16,10 @@ export class HooksService {
     private pluginService: PluginService
   ) { }
 
-  wrapObject<T, U extends ClientFilterHookName> (result: T, hookName: U) {
-    return this.pluginService.runHook(hookName, result)
-  }
-
   wrapObsFun
     <P, R, H1 extends ClientFilterHookName, H2 extends ClientFilterHookName>
-    (fun: ObservableFunction<P, R>, params: P, scope: PluginClientScope, hookParamName: H1, hookResultName: H2) {
+    (fun: ObservableFunction<P, R>, params: P, scope: PluginClientScope, hookParamName: H1, hookResultName: H2)
+  {
     return from(this.pluginService.ensurePluginsAreLoaded(scope))
       .pipe(
         mergeMap(() => this.wrapObject(params, hookParamName)),
@@ -31,10 +28,16 @@ export class HooksService {
       )
   }
 
-  async wrapFun<U, T, V extends ClientFilterHookName> (fun: RawFunction<U, T>, params: U, hookName: V) {
-    const result = fun(params)
+  async wrapFun
+    <P, R, H1 extends ClientFilterHookName, H2 extends ClientFilterHookName>
+    (fun: RawFunction<P, R>, params: P, scope: PluginClientScope, hookParamName: H1, hookResultName: H2)
+  {
+    await this.pluginService.ensurePluginsAreLoaded(scope)
+
+    const newParams = await this.wrapObject(params, hookParamName)
+    const result = fun(newParams)
 
-    return this.pluginService.runHook(hookName, result, params)
+    return this.pluginService.runHook(hookResultName, result, params)
   }
 
   runAction<T, U extends ClientActionHookName> (hookName: U, scope: PluginClientScope, params?: T) {
@@ -42,4 +45,8 @@ export class HooksService {
         .then(() => this.pluginService.runHook(hookName, undefined, params))
         .catch((err: any) => console.error('Fatal hook error.', { err }))
   }
+
+  private wrapObject<T, U extends ClientFilterHookName> (result: T, hookName: U) {
+    return this.pluginService.runHook(hookName, result)
+  }
 }
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index a13b7d8e0..eb723db94 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core'
+import { HooksService } from '@app/core/plugins/hooks.service'
 
 const icons = {
   'add': require('!!raw-loader?!../../../assets/images/global/add.svg'),
@@ -60,11 +61,24 @@ export type GlobalIconName = keyof typeof icons
 export class GlobalIconComponent implements OnInit {
   @Input() iconName: GlobalIconName
 
-  constructor (private el: ElementRef) {}
+  constructor (
+    private el: ElementRef,
+    private hooks: HooksService
+  ) { }
 
-  ngOnInit () {
+  async ngOnInit () {
     const nativeElement = this.el.nativeElement
 
-    nativeElement.innerHTML = icons[this.iconName]
+    nativeElement.innerHTML = await this.hooks.wrapFun(
+      this.getSVGContent.bind(this),
+      { name: this.iconName },
+      'common',
+      'filter:internal.common.svg-icons.get-content.params',
+      'filter:internal.common.svg-icons.get-content.result'
+    )
+  }
+
+  private getSVGContent (options: { name: string }) {
+    return icons[options.name]
   }
 }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 523865fef..adf6dc12f 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -418,6 +418,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     const { playerMode, playerOptions } = await this.hooks.wrapFun(
       this.buildPlayerManagerOptions.bind(this),
       params,
+      'video-watch',
+      'filter:internal.video-watch.player.build-options.params',
       'filter:internal.video-watch.player.build-options.result'
     )
 
diff --git a/shared/models/plugins/client-hook.model.ts b/shared/models/plugins/client-hook.model.ts
index f0cdb8b19..ecbe8bd3c 100644
--- a/shared/models/plugins/client-hook.model.ts
+++ b/shared/models/plugins/client-hook.model.ts
@@ -45,7 +45,12 @@ export const clientFilterHookObject = {
   'filter:api.signup.registration.create.params': true,
 
   // Filter the options to create our player
-  'filter:internal.video-watch.player.build-options.result': true
+  'filter:internal.video-watch.player.build-options.params': true,
+  'filter:internal.video-watch.player.build-options.result': true,
+
+  // Filter our SVG icons content
+  'filter:internal.common.svg-icons.get-content.params': true,
+  'filter:internal.common.svg-icons.get-content.result': true
 }
 
 export type ClientFilterHookName = keyof typeof clientFilterHookObject