3 files changed, 46 insertions, 2 deletions

diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html
index 52ad1999d..0aa707666 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.html
@@ -62,3 +62,10 @@
   <span i18n class="attribute-label">Duration</span>
   <span class="attribute-value">{{ video.duration | myDurationFormatter }}</span>
 </div>
+
+<div class="attribute attribute-plugin" *ngFor="let metadata of pluginMetadata">
+  <span class="attribute-label">{{ metadata.label }}</span>
+
+  <span *ngIf="metadata.value" class="attribute-value">{{ metadata.value }}</span>
+  <span *ngIf="metadata.safeHTML" class="attribute-value" [innerHTML]="metadata.safeHTML"></span>
+</div>
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.ts b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.ts
index b8f564c4c..ebfb42711 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-attributes.component.ts
@@ -1,14 +1,35 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnInit } from '@angular/core'
+import { HooksService } from '@app/core'
 import { VideoDetails } from '@app/shared/shared-main'
 
+type PluginMetadata = {
+  label: string
+
+  value?: string
+  safeHTML?: string
+}
+
 @Component({
   selector: 'my-video-attributes',
   templateUrl: './video-attributes.component.html',
   styleUrls: [ './video-attributes.component.scss' ]
 })
-export class VideoAttributesComponent {
+export class VideoAttributesComponent implements OnInit {
   @Input() video: VideoDetails
 
+  pluginMetadata: PluginMetadata[] = []
+
+  constructor (private hooks: HooksService) { }
+
+  async ngOnInit () {
+    this.pluginMetadata = await this.hooks.wrapFunResult(
+      this.buildPluginMetadata.bind(this),
+      { video: this.video },
+      'video-watch',
+      'filter:video-watch.video-plugin-metadata.result'
+    )
+  }
+
   getVideoHost () {
     return this.video.channel.host
   }
@@ -18,4 +39,11 @@ export class VideoAttributesComponent {
 
     return this.video.tags
   }
+
+  // Used for plugin hooks
+  private buildPluginMetadata (_options: {
+    video: VideoDetails
+  }): PluginMetadata[] {
+    return []
+  }
 }
diff --git a/client/src/app/core/plugins/hooks.service.ts b/client/src/app/core/plugins/hooks.service.ts
index 29db75d89..f325605e9 100644
--- a/client/src/app/core/plugins/hooks.service.ts
+++ b/client/src/app/core/plugins/hooks.service.ts
@@ -48,6 +48,15 @@ export class HooksService {
     return this.pluginService.runHook(hookResultName, result, params)
   }
 
+  async wrapFunResult <P, R, H extends ClientFilterHookName>
+  (fun: RawFunction<P, R>, params: P, scope: PluginClientScope, hookResultName: H) {
+    await this.pluginService.ensurePluginsAreLoaded(scope)
+
+    const result = fun(params)
+
+    return this.pluginService.runHook(hookResultName, result, params)
+  }
+
   runAction<T, U extends ClientActionHookName> (hookName: U, scope: PluginClientScope, params?: T) {
     // Use setTimeout to give priority to Angular change detector
     setTimeout(() => {