1 import { ComponentRef, Injectable } from '@angular/core'
2 import { MarkdownService } from '@app/core'
4 ChannelMiniatureMarkupData,
6 PlaylistMiniatureMarkupData,
7 VideoMiniatureMarkupData,
9 } from '@shared/models'
10 import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
11 import { DynamicElementService } from './dynamic-element.service'
12 import { EmbedMarkupComponent } from './embed-markup.component'
13 import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component'
14 import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component'
15 import { VideosListMarkupComponent } from './videos-list-markup.component'
17 type BuilderFunction = (el: HTMLElement) => ComponentRef<any>
20 export class CustomMarkupService {
21 private builders: { [ selector: string ]: BuilderFunction } = {
22 'peertube-video-embed': el => this.embedBuilder(el, 'video'),
23 'peertube-playlist-embed': el => this.embedBuilder(el, 'playlist'),
24 'peertube-video-miniature': el => this.videoMiniatureBuilder(el),
25 'peertube-playlist-miniature': el => this.playlistMiniatureBuilder(el),
26 'peertube-channel-miniature': el => this.channelMiniatureBuilder(el),
27 'peertube-videos-list': el => this.videosListBuilder(el)
31 private dynamicElementService: DynamicElementService,
32 private markdown: MarkdownService
35 async buildElement (text: string) {
36 const html = await this.markdown.customPageMarkdownToHTML(text, this.getSupportedTags())
38 const rootElement = document.createElement('div')
39 rootElement.innerHTML = html
41 for (const selector of this.getSupportedTags()) {
42 rootElement.querySelectorAll(selector)
43 .forEach((e: HTMLElement) => {
45 const component = this.execBuilder(selector, e)
47 this.dynamicElementService.injectElement(e, component)
49 console.error('Cannot inject component %s.', selector, err)
57 private getSupportedTags () {
58 return Object.keys(this.builders)
61 private execBuilder (selector: string, el: HTMLElement) {
62 return this.builders[selector](el)
65 private embedBuilder (el: HTMLElement, type: 'video' | 'playlist') {
66 const data = el.dataset as EmbedMarkupData
67 const component = this.dynamicElementService.createElement(EmbedMarkupComponent)
69 this.dynamicElementService.setModel(component, { uuid: data.uuid, type })
74 private videoMiniatureBuilder (el: HTMLElement) {
75 const data = el.dataset as VideoMiniatureMarkupData
76 const component = this.dynamicElementService.createElement(VideoMiniatureMarkupComponent)
78 this.dynamicElementService.setModel(component, { uuid: data.uuid })
83 private playlistMiniatureBuilder (el: HTMLElement) {
84 const data = el.dataset as PlaylistMiniatureMarkupData
85 const component = this.dynamicElementService.createElement(PlaylistMiniatureMarkupComponent)
87 this.dynamicElementService.setModel(component, { uuid: data.uuid })
92 private channelMiniatureBuilder (el: HTMLElement) {
93 const data = el.dataset as ChannelMiniatureMarkupData
94 const component = this.dynamicElementService.createElement(ChannelMiniatureMarkupComponent)
96 this.dynamicElementService.setModel(component, { name: data.name })
101 private videosListBuilder (el: HTMLElement) {
102 const data = el.dataset as VideosListMarkupData
103 const component = this.dynamicElementService.createElement(VideosListMarkupComponent)
107 description: data.description,
109 categoryOneOf: this.buildArrayNumber(data.categoryOneOf),
110 languageOneOf: this.buildArrayString(data.languageOneOf),
111 count: this.buildNumber(data.count) || 10
114 this.dynamicElementService.setModel(component, model)
119 private buildNumber (value: string) {
120 if (!value) return undefined
122 return parseInt(value, 10)
125 private buildArrayNumber (value: string) {
126 if (!value) return undefined
128 return value.split(',').map(v => parseInt(v, 10))
131 private buildArrayString (value: string) {
132 if (!value) return undefined
134 return value.split(',')