Merge branch 'release/5.0.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-custom-markup / custom-markup-container.component.ts

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 3d49c676875cd2048990fc21ca1bea8624325528..b2ee2d8f28de1c72ff3ab86faa79cce54b14ba13 100644 (file)
--- 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
+  }
 }