1 import { firstValueFrom } from 'rxjs'
2 import { ComponentRef, Injectable } from '@angular/core'
3 import { MarkdownService } from '@app/core'
6 ChannelMiniatureMarkupData,
9 PlaylistMiniatureMarkupData,
10 VideoMiniatureMarkupData,
12 } from '@shared/models'
13 import { DynamicElementService } from './dynamic-element.service'
15 ButtonMarkupComponent,
16 ChannelMiniatureMarkupComponent,
18 PlaylistMiniatureMarkupComponent,
19 VideoMiniatureMarkupComponent,
20 VideosListMarkupComponent
21 } from './peertube-custom-tags'
22 import { CustomMarkupComponent } from './peertube-custom-tags/shared'
24 type AngularBuilderFunction = (el: HTMLElement) => ComponentRef<CustomMarkupComponent>
25 type HTMLBuilderFunction = (el: HTMLElement) => HTMLElement
28 export class CustomMarkupService {
29 private angularBuilders: { [ selector: string ]: AngularBuilderFunction } = {
30 'peertube-button': el => this.buttonBuilder(el),
31 'peertube-video-embed': el => this.embedBuilder(el, 'video'),
32 'peertube-playlist-embed': el => this.embedBuilder(el, 'playlist'),
33 'peertube-video-miniature': el => this.videoMiniatureBuilder(el),
34 'peertube-playlist-miniature': el => this.playlistMiniatureBuilder(el),
35 'peertube-channel-miniature': el => this.channelMiniatureBuilder(el),
36 'peertube-videos-list': el => this.videosListBuilder(el)
39 private htmlBuilders: { [ selector: string ]: HTMLBuilderFunction } = {
40 'peertube-container': el => this.containerBuilder(el)
43 private customMarkdownRenderer: (text: string) => Promise<HTMLElement>
46 private dynamicElementService: DynamicElementService,
47 private markdown: MarkdownService
49 this.customMarkdownRenderer = (text: string) => {
50 return this.buildElement(text)
51 .then(({ rootElement }) => rootElement)
55 getCustomMarkdownRenderer () {
56 return this.customMarkdownRenderer
59 async buildElement (text: string) {
60 const html = await this.markdown.customPageMarkdownToHTML(text, this.getSupportedTags())
62 const rootElement = document.createElement('div')
63 rootElement.innerHTML = html
65 for (const selector of Object.keys(this.htmlBuilders)) {
66 rootElement.querySelectorAll(selector)
67 .forEach((e: HTMLElement) => {
69 const element = this.execHTMLBuilder(selector, e)
70 // Insert as first child
71 e.insertBefore(element, e.firstChild)
73 console.error('Cannot inject component %s.', selector, err)
78 const loadedPromises: Promise<boolean>[] = []
80 for (const selector of Object.keys(this.angularBuilders)) {
81 rootElement.querySelectorAll(selector)
82 .forEach((e: HTMLElement) => {
84 const component = this.execAngularBuilder(selector, e)
86 if (component.instance.loaded) {
87 const p = firstValueFrom(component.instance.loaded)
88 loadedPromises.push(p)
91 this.dynamicElementService.injectElement(e, component)
93 console.error('Cannot inject component %s.', selector, err)
98 return { rootElement, componentsLoaded: Promise.all(loadedPromises) }
101 private getSupportedTags () {
102 return Object.keys(this.angularBuilders)
103 .concat(Object.keys(this.htmlBuilders))
106 private execHTMLBuilder (selector: string, el: HTMLElement) {
107 return this.htmlBuilders[selector](el)
110 private execAngularBuilder (selector: string, el: HTMLElement) {
111 return this.angularBuilders[selector](el)
114 private embedBuilder (el: HTMLElement, type: 'video' | 'playlist') {
115 const data = el.dataset as EmbedMarkupData
116 const component = this.dynamicElementService.createElement(EmbedMarkupComponent)
118 this.dynamicElementService.setModel(component, { uuid: data.uuid, type })
123 private playlistMiniatureBuilder (el: HTMLElement) {
124 const data = el.dataset as PlaylistMiniatureMarkupData
125 const component = this.dynamicElementService.createElement(PlaylistMiniatureMarkupComponent)
127 this.dynamicElementService.setModel(component, { uuid: data.uuid })
132 private channelMiniatureBuilder (el: HTMLElement) {
133 const data = el.dataset as ChannelMiniatureMarkupData
134 const component = this.dynamicElementService.createElement(ChannelMiniatureMarkupComponent)
138 displayLatestVideo: this.buildBoolean(data.displayLatestVideo) ?? true,
139 displayDescription: this.buildBoolean(data.displayDescription) ?? true
142 this.dynamicElementService.setModel(component, model)
147 private buttonBuilder (el: HTMLElement) {
148 const data = el.dataset as ButtonMarkupData
149 const component = this.dynamicElementService.createElement(ButtonMarkupComponent)
152 theme: data.theme ?? 'primary',
155 blankTarget: this.buildBoolean(data.blankTarget) ?? false
157 this.dynamicElementService.setModel(component, model)
162 private videoMiniatureBuilder (el: HTMLElement) {
163 const data = el.dataset as VideoMiniatureMarkupData
164 const component = this.dynamicElementService.createElement(VideoMiniatureMarkupComponent)
168 onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false
171 this.dynamicElementService.setModel(component, model)
176 private videosListBuilder (el: HTMLElement) {
177 const data = el.dataset as VideosListMarkupData
178 const component = this.dynamicElementService.createElement(VideosListMarkupComponent)
181 onlyDisplayTitle: this.buildBoolean(data.onlyDisplayTitle) ?? false,
182 maxRows: this.buildNumber(data.maxRows) ?? -1,
184 sort: data.sort || '-publishedAt',
185 count: this.buildNumber(data.count) || 10,
187 categoryOneOf: this.buildArrayNumber(data.categoryOneOf) ?? [],
188 languageOneOf: this.buildArrayString(data.languageOneOf) ?? [],
190 accountHandle: data.accountHandle || undefined,
191 channelHandle: data.channelHandle || undefined,
193 isLive: this.buildBoolean(data.isLive),
195 isLocal: this.buildBoolean(data.onlyLocal) ? true : undefined
198 this.dynamicElementService.setModel(component, model)
203 private containerBuilder (el: HTMLElement) {
204 const data = el.dataset as ContainerMarkupData
206 // Move inner HTML in the new element we'll create
207 const content = el.innerHTML
210 const root = document.createElement('div')
211 root.innerHTML = content
213 const layoutClass = data.layout
214 ? 'layout-' + data.layout
217 root.classList.add('peertube-container', layoutClass)
219 root.style.justifyContent = data.justifyContent || 'space-between'
222 root.setAttribute('width', data.width)
225 if (data.title || data.description) {
226 const headerElement = document.createElement('div')
227 headerElement.classList.add('header')
230 const titleElement = document.createElement('h4')
231 titleElement.innerText = data.title
232 headerElement.appendChild(titleElement)
235 if (data.description) {
236 const descriptionElement = document.createElement('div')
237 descriptionElement.innerText = data.description
238 headerElement.append(descriptionElement)
241 root.insertBefore(headerElement, root.firstChild)
247 private buildNumber (value: string) {
248 if (!value) return undefined
250 return parseInt(value, 10)
253 private buildBoolean (value: string) {
254 if (value === 'true') return true
255 if (value === 'false') return false
260 private buildArrayNumber (value: string) {
261 if (!value) return undefined
263 return value.split(',').map(v => parseInt(v, 10))
266 private buildArrayString (value: string) {
267 if (!value) return undefined
269 return value.split(',')