1 import { ComponentRef, Injectable } from '@angular/core'
2 import { MarkdownService } from '@app/core'
5 ChannelMiniatureMarkupData,
7 PlaylistMiniatureMarkupData,
8 VideoMiniatureMarkupData,
10 } from '@shared/models'
11 import { ButtonMarkupComponent } from './button-markup.component'
12 import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
13 import { DynamicElementService } from './dynamic-element.service'
14 import { EmbedMarkupComponent } from './embed-markup.component'
15 import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component'
16 import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component'
17 import { VideosListMarkupComponent } from './videos-list-markup.component'
19 type BuilderFunction = (el: HTMLElement) => ComponentRef<any>
22 export class CustomMarkupService {
23 private builders: { [ selector: string ]: BuilderFunction } = {
24 'peertube-button': el => this.buttonBuilder(el),
25 'peertube-video-embed': el => this.embedBuilder(el, 'video'),
26 'peertube-playlist-embed': el => this.embedBuilder(el, 'playlist'),
27 'peertube-video-miniature': el => this.videoMiniatureBuilder(el),
28 'peertube-playlist-miniature': el => this.playlistMiniatureBuilder(el),
29 'peertube-channel-miniature': el => this.channelMiniatureBuilder(el),
30 'peertube-videos-list': el => this.videosListBuilder(el)
34 private dynamicElementService: DynamicElementService,
35 private markdown: MarkdownService
38 async buildElement (text: string) {
39 const html = await this.markdown.customPageMarkdownToHTML(text, this.getSupportedTags())
41 const rootElement = document.createElement('div')
42 rootElement.innerHTML = html
44 for (const selector of this.getSupportedTags()) {
45 rootElement.querySelectorAll(selector)
46 .forEach((e: HTMLElement) => {
48 const component = this.execBuilder(selector, e)
50 this.dynamicElementService.injectElement(e, component)
52 console.error('Cannot inject component %s.', selector, err)
60 private getSupportedTags () {
61 return Object.keys(this.builders)
64 private execBuilder (selector: string, el: HTMLElement) {
65 return this.builders[selector](el)
68 private embedBuilder (el: HTMLElement, type: 'video' | 'playlist') {
69 const data = el.dataset as EmbedMarkupData
70 const component = this.dynamicElementService.createElement(EmbedMarkupComponent)
72 this.dynamicElementService.setModel(component, { uuid: data.uuid, type })
77 private videoMiniatureBuilder (el: HTMLElement) {
78 const data = el.dataset as VideoMiniatureMarkupData
79 const component = this.dynamicElementService.createElement(VideoMiniatureMarkupComponent)
81 this.dynamicElementService.setModel(component, { uuid: data.uuid })
86 private playlistMiniatureBuilder (el: HTMLElement) {
87 const data = el.dataset as PlaylistMiniatureMarkupData
88 const component = this.dynamicElementService.createElement(PlaylistMiniatureMarkupComponent)
90 this.dynamicElementService.setModel(component, { uuid: data.uuid })
95 private channelMiniatureBuilder (el: HTMLElement) {
96 const data = el.dataset as ChannelMiniatureMarkupData
97 const component = this.dynamicElementService.createElement(ChannelMiniatureMarkupComponent)
99 this.dynamicElementService.setModel(component, { name: data.name })
104 private buttonBuilder (el: HTMLElement) {
105 const data = el.dataset as ButtonMarkupData
106 const component = this.dynamicElementService.createElement(ButtonMarkupComponent)
112 blankTarget: this.buildBoolean(data.blankTarget)
114 this.dynamicElementService.setModel(component, model)
119 private videosListBuilder (el: HTMLElement) {
120 const data = el.dataset as VideosListMarkupData
121 const component = this.dynamicElementService.createElement(VideosListMarkupComponent)
125 description: data.description,
127 categoryOneOf: this.buildArrayNumber(data.categoryOneOf),
128 languageOneOf: this.buildArrayString(data.languageOneOf),
129 count: this.buildNumber(data.count) || 10
132 this.dynamicElementService.setModel(component, model)
137 private buildNumber (value: string) {
138 if (!value) return undefined
140 return parseInt(value, 10)
143 private buildBoolean (value: string) {
144 if (value === 'true') return true
145 if (value === 'false') return false
150 private buildArrayNumber (value: string) {
151 if (!value) return undefined
153 return value.split(',').map(v => parseInt(v, 10))
156 private buildArrayString (value: string) {
157 if (!value) return undefined
159 return value.split(',')