2 files changed, 37 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 []
+  }
 }