client/src/app/shared/shared-custom-markup/custom-markup.service.ts

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