X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;ds=sidebyside;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-custom-markup%2Fcustom-markup-container.component.ts;h=b2ee2d8f28de1c72ff3ab86faa79cce54b14ba13;hb=a2be43f5700460d3afdc194abc788690b79e66cd;hp=3d49c676875cd2048990fc21ca1bea8624325528;hpb=24893b524c47b8f89090192aa38126352a952808;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts
index 3d49c6768..b2ee2d8f2 100644
--- a/client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts
+++ b/client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts
@@ -6,21 +6,34 @@ import { CustomMarkupService } from './custom-markup.service'
   templateUrl: './custom-markup-container.component.html'
 })
 export class CustomMarkupContainerComponent implements OnChanges {
-  @ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement>
+  @ViewChild('contentWrapper', { static: true }) contentWrapper: ElementRef<HTMLInputElement>
 
-  @Input() content: string
+  @Input() content: string | HTMLDivElement
+
+  displayed = false
 
   constructor (
     private customMarkupService: CustomMarkupService
   ) { }
 
   async ngOnChanges () {
-    await this.buildElement()
+    await this.rebuild()
   }
 
-  private async buildElement () {
-    const element = await this.customMarkupService.buildElement(this.content)
-    this.contentWrapper.nativeElement.appendChild(element)
+  private async rebuild () {
+    if (this.content instanceof HTMLDivElement) {
+      return this.loadElement(this.content)
+    }
+
+    const { rootElement, componentsLoaded } = await this.customMarkupService.buildElement(this.content)
+    await componentsLoaded
+
+    return this.loadElement(rootElement)
   }
 
+  private loadElement (el: HTMLDivElement) {
+    this.contentWrapper.nativeElement.appendChild(el)
+
+    this.displayed = true
+  }
 }