1 import { ComponentRef, Injectable } from '@angular/core'
2 import { MarkdownService } from '@app/core'
5 ChannelMiniatureMarkupData,
8 PlaylistMiniatureMarkupData,
9 VideoMiniatureMarkupData,
11 } from '@shared/models'
12 import { DynamicElementService } from './dynamic-element.service'
14 ButtonMarkupComponent,
15 ChannelMiniatureMarkupComponent,
17 PlaylistMiniatureMarkupComponent,
18 VideoMiniatureMarkupComponent,
19 VideosListMarkupComponent
20 } from './peertube-custom-tags'
22 type AngularBuilderFunction = (el: HTMLElement) => ComponentRef<any>
23 type HTMLBuilderFunction = (el: HTMLElement) => HTMLElement
26 export class CustomMarkupService {
27 private angularBuilders: { [ selector: string ]: AngularBuilderFunction } = {
28 'peertube-button': el => this.buttonBuilder(el),
29 'peertube-video-embed': el => this.embedBuilder(el, 'video'),
30 'peertube-playlist-embed': el => this.embedBuilder(el, 'playlist'),
31 'peertube-video-miniature': el => this.videoMiniatureBuilder(el),
32 'peertube-playlist-miniature': el => this.playlistMiniatureBuilder(el),
33 'peertube-channel-miniature': el => this.channelMiniatureBuilder(el),
34 'peertube-videos-list': el => this.videosListBuilder(el)
37 private htmlBuilders: { [ selector: string ]: HTMLBuilderFunction } = {
38 'peertube-container': el => this.containerBuilder(el)
41 private customMarkdownRenderer: (text: string) => Promise<HTMLElement>
44 private dynamicElementService: DynamicElementService,
45 private markdown: MarkdownService
47 this.customMarkdownRenderer = async (text: string) => this.buildElement(text)
50 getCustomMarkdownRenderer () {
51 return this.customMarkdownRenderer
54 async buildElement (text: string) {
55 const html = await this.markdown.customPageMarkdownToHTML(text, this.getSupportedTags())
57 const rootElement = document.createElement('div')
58 rootElement.innerHTML = html
60 for (const selector of Object.keys(this.htmlBuilders)) {
61 rootElement.querySelectorAll(selector)
62 .forEach((e: HTMLElement) => {
64 const element = this.execHTMLBuilder(selector, e)
65 // Insert as first child
66 e.insertBefore(element, e.firstChild)
68 console.error('Cannot inject component %s.', selector, err)
73 for (const selector of Object.keys(this.angularBuilders)) {
74 rootElement.querySelectorAll(selector)
75 .forEach((e: HTMLElement) => {
77 const component = this.execAngularBuilder(selector, e)
79 this.dynamicElementService.injectElement(e, component)
81 console.error('Cannot inject component %s.', selector, err)
89 private getSupportedTags () {
90 return Object.keys(this.angularBuilders)
91 .concat(Object.keys(this.htmlBuilders))
94 private execHTMLBuilder (selector: string, el: HTMLElement) {
95 return this.htmlBuilders[selector](el)
98 private execAngularBuilder (selector: string, el: HTMLElement) {
99 return this.angularBuilders[selector](el)
102 private embedBuilder (el: HTMLElement, type: 'video' | 'playlist') {
103 const data = el.dataset as EmbedMarkupData
104 const component = this.dynamicElementService.createElement(EmbedMarkupComponent)
106 this.dynamicElementService.setModel(component, { uuid: data.uuid, type })
111 private videoMiniatureBuilder (el: HTMLElement) {
112 const data = el.dataset as VideoMiniatureMarkupData
113 const component = this.dynamicElementService.createElement(VideoMiniatureMarkupComponent)
115 this.dynamicElementService.setModel(component, { uuid: data.uuid })
120 private playlistMiniatureBuilder (el: HTMLElement) {
121 const data = el.dataset as PlaylistMiniatureMarkupData
122 const component = this.dynamicElementService.createElement(PlaylistMiniatureMarkupComponent)
124 this.dynamicElementService.setModel(component, { uuid: data.uuid })
129 private channelMiniatureBuilder (el: HTMLElement) {
130 const data = el.dataset as ChannelMiniatureMarkupData
131 const component = this.dynamicElementService.createElement(ChannelMiniatureMarkupComponent)
133 this.dynamicElementService.setModel(component, { name: data.name })
138 private buttonBuilder (el: HTMLElement) {
139 const data = el.dataset as ButtonMarkupData
140 const component = this.dynamicElementService.createElement(ButtonMarkupComponent)
146 blankTarget: this.buildBoolean(data.blankTarget)
148 this.dynamicElementService.setModel(component, model)
153 private videosListBuilder (el: HTMLElement) {
154 const data = el.dataset as VideosListMarkupData
155 const component = this.dynamicElementService.createElement(VideosListMarkupComponent)
159 categoryOneOf: this.buildArrayNumber(data.categoryOneOf),
160 languageOneOf: this.buildArrayString(data.languageOneOf),
161 count: this.buildNumber(data.count) || 10
164 this.dynamicElementService.setModel(component, model)
169 private containerBuilder (el: HTMLElement) {
170 const data = el.dataset as ContainerMarkupData
172 const root = document.createElement('div')
173 root.classList.add('peertube-container')
176 root.setAttribute('width', data.width)
180 const titleElement = document.createElement('h4')
181 titleElement.innerText = data.title
182 root.appendChild(titleElement)
185 if (data.description) {
186 const descriptionElement = document.createElement('div')
187 descriptionElement.innerText = data.description
188 root.appendChild(descriptionElement)
194 private buildNumber (value: string) {
195 if (!value) return undefined
197 return parseInt(value, 10)
200 private buildBoolean (value: string) {
201 if (value === 'true') return true
202 if (value === 'false') return false
207 private buildArrayNumber (value: string) {
208 if (!value) return undefined
210 return value.split(',').map(v => parseInt(v, 10))
213 private buildArrayString (value: string) {
214 if (!value) return undefined
216 return value.split(',')