]>
Commit | Line | Data |
---|---|---|
1 | import { ComponentRef, Injectable } from '@angular/core' | |
2 | import { MarkdownService } from '@app/core' | |
3 | import { | |
4 | ButtonMarkupData, | |
5 | ChannelMiniatureMarkupData, | |
6 | EmbedMarkupData, | |
7 | PlaylistMiniatureMarkupData, | |
8 | VideoMiniatureMarkupData, | |
9 | VideosListMarkupData | |
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' | |
18 | ||
19 | type BuilderFunction = (el: HTMLElement) => ComponentRef<any> | |
20 | ||
21 | @Injectable() | |
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) | |
31 | } | |
32 | ||
33 | constructor ( | |
34 | private dynamicElementService: DynamicElementService, | |
35 | private markdown: MarkdownService | |
36 | ) { } | |
37 | ||
38 | async buildElement (text: string) { | |
39 | const html = await this.markdown.customPageMarkdownToHTML(text, this.getSupportedTags()) | |
40 | ||
41 | const rootElement = document.createElement('div') | |
42 | rootElement.innerHTML = html | |
43 | ||
44 | for (const selector of this.getSupportedTags()) { | |
45 | rootElement.querySelectorAll(selector) | |
46 | .forEach((e: HTMLElement) => { | |
47 | try { | |
48 | const component = this.execBuilder(selector, e) | |
49 | ||
50 | this.dynamicElementService.injectElement(e, component) | |
51 | } catch (err) { | |
52 | console.error('Cannot inject component %s.', selector, err) | |
53 | } | |
54 | }) | |
55 | } | |
56 | ||
57 | return rootElement | |
58 | } | |
59 | ||
60 | private getSupportedTags () { | |
61 | return Object.keys(this.builders) | |
62 | } | |
63 | ||
64 | private execBuilder (selector: string, el: HTMLElement) { | |
65 | return this.builders[selector](el) | |
66 | } | |
67 | ||
68 | private embedBuilder (el: HTMLElement, type: 'video' | 'playlist') { | |
69 | const data = el.dataset as EmbedMarkupData | |
70 | const component = this.dynamicElementService.createElement(EmbedMarkupComponent) | |
71 | ||
72 | this.dynamicElementService.setModel(component, { uuid: data.uuid, type }) | |
73 | ||
74 | return component | |
75 | } | |
76 | ||
77 | private videoMiniatureBuilder (el: HTMLElement) { | |
78 | const data = el.dataset as VideoMiniatureMarkupData | |
79 | const component = this.dynamicElementService.createElement(VideoMiniatureMarkupComponent) | |
80 | ||
81 | this.dynamicElementService.setModel(component, { uuid: data.uuid }) | |
82 | ||
83 | return component | |
84 | } | |
85 | ||
86 | private playlistMiniatureBuilder (el: HTMLElement) { | |
87 | const data = el.dataset as PlaylistMiniatureMarkupData | |
88 | const component = this.dynamicElementService.createElement(PlaylistMiniatureMarkupComponent) | |
89 | ||
90 | this.dynamicElementService.setModel(component, { uuid: data.uuid }) | |
91 | ||
92 | return component | |
93 | } | |
94 | ||
95 | private channelMiniatureBuilder (el: HTMLElement) { | |
96 | const data = el.dataset as ChannelMiniatureMarkupData | |
97 | const component = this.dynamicElementService.createElement(ChannelMiniatureMarkupComponent) | |
98 | ||
99 | this.dynamicElementService.setModel(component, { name: data.name }) | |
100 | ||
101 | return component | |
102 | } | |
103 | ||
104 | private buttonBuilder (el: HTMLElement) { | |
105 | const data = el.dataset as ButtonMarkupData | |
106 | const component = this.dynamicElementService.createElement(ButtonMarkupComponent) | |
107 | ||
108 | const model = { | |
109 | theme: data.theme, | |
110 | href: data.href, | |
111 | label: data.label, | |
112 | blankTarget: this.buildBoolean(data.blankTarget) | |
113 | } | |
114 | this.dynamicElementService.setModel(component, model) | |
115 | ||
116 | return component | |
117 | } | |
118 | ||
119 | private videosListBuilder (el: HTMLElement) { | |
120 | const data = el.dataset as VideosListMarkupData | |
121 | const component = this.dynamicElementService.createElement(VideosListMarkupComponent) | |
122 | ||
123 | const model = { | |
124 | title: data.title, | |
125 | description: data.description, | |
126 | sort: data.sort, | |
127 | categoryOneOf: this.buildArrayNumber(data.categoryOneOf), | |
128 | languageOneOf: this.buildArrayString(data.languageOneOf), | |
129 | count: this.buildNumber(data.count) || 10 | |
130 | } | |
131 | ||
132 | this.dynamicElementService.setModel(component, model) | |
133 | ||
134 | return component | |
135 | } | |
136 | ||
137 | private buildNumber (value: string) { | |
138 | if (!value) return undefined | |
139 | ||
140 | return parseInt(value, 10) | |
141 | } | |
142 | ||
143 | private buildBoolean (value: string) { | |
144 | if (value === 'true') return true | |
145 | if (value === 'false') return false | |
146 | ||
147 | return undefined | |
148 | } | |
149 | ||
150 | private buildArrayNumber (value: string) { | |
151 | if (!value) return undefined | |
152 | ||
153 | return value.split(',').map(v => parseInt(v, 10)) | |
154 | } | |
155 | ||
156 | private buildArrayString (value: string) { | |
157 | if (!value) return undefined | |
158 | ||
159 | return value.split(',') | |
160 | } | |
161 | } |