+import { first } from 'rxjs/operators'
import { ComponentRef, Injectable } from '@angular/core'
import { MarkdownService } from '@app/core'
import {
VideoMiniatureMarkupComponent,
VideosListMarkupComponent
} from './peertube-custom-tags'
+import { CustomMarkupComponent } from './peertube-custom-tags/shared'
-type AngularBuilderFunction = (el: HTMLElement) => ComponentRef<any>
+type AngularBuilderFunction = (el: HTMLElement) => ComponentRef<CustomMarkupComponent>
type HTMLBuilderFunction = (el: HTMLElement) => HTMLElement
@Injectable()
private dynamicElementService: DynamicElementService,
private markdown: MarkdownService
) {
- this.customMarkdownRenderer = async (text: string) => this.buildElement(text)
+ this.customMarkdownRenderer = (text: string) => {
+ return this.buildElement(text)
+ .then(({ rootElement }) => rootElement)
+ }
}
getCustomMarkdownRenderer () {
for (const selector of Object.keys(this.htmlBuilders)) {
rootElement.querySelectorAll(selector)
- .forEach((e: HTMLElement) => {
- try {
- const element = this.execHTMLBuilder(selector, e)
- // Insert as first child
- e.insertBefore(element, e.firstChild)
- } catch (err) {
- console.error('Cannot inject component %s.', selector, err)
- }
- })
+ .forEach((e: HTMLElement) => {
+ try {
+ const element = this.execHTMLBuilder(selector, e)
+ // Insert as first child
+ e.insertBefore(element, e.firstChild)
+ } catch (err) {
+ console.error('Cannot inject component %s.', selector, err)
+ }
+ })
}
+ const loadedPromises: Promise<boolean>[] = []
+
for (const selector of Object.keys(this.angularBuilders)) {
rootElement.querySelectorAll(selector)
.forEach((e: HTMLElement) => {
try {
const component = this.execAngularBuilder(selector, e)
+ if (component.instance.loaded) {
+ const p = component.instance.loaded.pipe(first()).toPromise()
+ loadedPromises.push(p)
+ }
+
this.dynamicElementService.injectElement(e, component)
} catch (err) {
console.error('Cannot inject component %s.', selector, err)
})
}
- return rootElement
+ return { rootElement, componentsLoaded: Promise.all(loadedPromises) }
}
private getSupportedTags () {
const component = this.dynamicElementService.createElement(ButtonMarkupComponent)
const model = {
- theme: data.theme,
+ theme: data.theme ?? 'primary',
href: data.href,
label: data.label,
- blankTarget: this.buildBoolean(data.blankTarget)
+ blankTarget: this.buildBoolean(data.blankTarget) ?? false
}
this.dynamicElementService.setModel(component, model)
const model = {
onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false,
+ maxRows: this.buildNumber(data.maxRows) ?? -1,
+
sort: data.sort || '-publishedAt',
+ count: this.buildNumber(data.count) || 10,
+
categoryOneOf: this.buildArrayNumber(data.categoryOneOf) ?? [],
languageOneOf: this.buildArrayString(data.languageOneOf) ?? [],
- filter: this.buildBoolean(data.onlyLocal) ? 'local' as VideoFilter : undefined,
- count: this.buildNumber(data.count) || 10
+
+ filter: this.buildBoolean(data.onlyLocal) ? 'local' as VideoFilter : undefined
}
this.dynamicElementService.setModel(component, model)
private containerBuilder (el: HTMLElement) {
const data = el.dataset as ContainerMarkupData
+ // Move inner HTML in the new element we'll create
+ const content = el.innerHTML
+ el.innerHTML = ''
+
const root = document.createElement('div')
+ root.innerHTML = content
const layoutClass = data.layout
? 'layout-' + data.layout
- : 'layout-row'
+ : 'layout-column'
root.classList.add('peertube-container', layoutClass)
root.setAttribute('width', data.width)
}
- if (data.title) {
- const titleElement = document.createElement('h4')
- titleElement.innerText = data.title
- root.appendChild(titleElement)
- }
+ if (data.title || data.description) {
+ const headerElement = document.createElement('div')
+ headerElement.classList.add('header')
+
+ if (data.title) {
+ const titleElement = document.createElement('h4')
+ titleElement.innerText = data.title
+ headerElement.appendChild(titleElement)
+ }
+
+ if (data.description) {
+ const descriptionElement = document.createElement('div')
+ descriptionElement.innerText = data.description
+ headerElement.append(descriptionElement)
+ }
- if (data.description) {
- const descriptionElement = document.createElement('div')
- descriptionElement.innerText = data.description
- root.appendChild(descriptionElement)
+ root.insertBefore(headerElement, root.firstChild)
}
return root