Verified Commit 63042139 authored by Chocobozzz's avatar Chocobozzz
Browse files

Support peertube button in custom markup

parent 5351a058
<a [href]="href" [ngClass]="getClasses()" [target]="getTarget()">{{ label }}</a>
import { Component, Input } from '@angular/core'
import { VideoChannel } from '../shared-main'
/*
* Markup component that creates a button
*/
@Component({
selector: 'my-button-markup',
templateUrl: 'button-markup.component.html',
styleUrls: [ 'button-markup.component.scss' ]
})
export class ButtonMarkupComponent {
@Input() theme: 'primary' | 'secondary'
@Input() href: string
@Input() label: string
@Input() blankTarget?: boolean
channel: VideoChannel
getTarget () {
if (this.blankTarget === true) return '_blank'
return ''
}
getClasses () {
const additionalClass = this.theme === 'primary'
? 'orange-button'
: 'grey-button'
return [ 'peertube-button-link', additionalClass ]
}
}
import { ComponentRef, Injectable } from '@angular/core'
import { MarkdownService } from '@app/core'
import {
ButtonMarkupData,
ChannelMiniatureMarkupData,
EmbedMarkupData,
PlaylistMiniatureMarkupData,
VideoMiniatureMarkupData,
VideosListMarkupData
} from '@shared/models'
import { ButtonMarkupComponent } from './button-markup.component'
import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
import { DynamicElementService } from './dynamic-element.service'
import { EmbedMarkupComponent } from './embed-markup.component'
......@@ -19,6 +21,7 @@ type BuilderFunction = (el: HTMLElement) => ComponentRef<any>
@Injectable()
export class CustomMarkupService {
private builders: { [ selector: string ]: BuilderFunction } = {
'peertube-button': el => this.buttonBuilder(el),
'peertube-video-embed': el => this.embedBuilder(el, 'video'),
'peertube-playlist-embed': el => this.embedBuilder(el, 'playlist'),
'peertube-video-miniature': el => this.videoMiniatureBuilder(el),
......@@ -98,6 +101,21 @@ export class CustomMarkupService {
return component
}
private buttonBuilder (el: HTMLElement) {
const data = el.dataset as ButtonMarkupData
const component = this.dynamicElementService.createElement(ButtonMarkupComponent)
const model = {
theme: data.theme,
href: data.href,
label: data.label,
blankTarget: this.buildBoolean(data.blankTarget)
}
this.dynamicElementService.setModel(component, model)
return component
}
private videosListBuilder (el: HTMLElement) {
const data = el.dataset as VideosListMarkupData
const component = this.dynamicElementService.createElement(VideosListMarkupComponent)
......@@ -122,6 +140,13 @@ export class CustomMarkupService {
return parseInt(value, 10)
}
private buildBoolean (value: string) {
if (value === 'true') return true
if (value === 'false') return false
return undefined
}
private buildArrayNumber (value: string) {
if (!value) return undefined
......
......@@ -6,6 +6,7 @@ import { SharedGlobalIconModule } from '../shared-icons'
import { SharedMainModule } from '../shared-main'
import { SharedVideoMiniatureModule } from '../shared-video-miniature'
import { SharedVideoPlaylistModule } from '../shared-video-playlist'
import { ButtonMarkupComponent } from './button-markup.component'
import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
import { CustomMarkupService } from './custom-markup.service'
import { DynamicElementService } from './dynamic-element.service'
......@@ -30,7 +31,8 @@ import { VideosListMarkupComponent } from './videos-list-markup.component'
PlaylistMiniatureMarkupComponent,
ChannelMiniatureMarkupComponent,
EmbedMarkupComponent,
VideosListMarkupComponent
VideosListMarkupComponent,
ButtonMarkupComponent
],
exports: [
......@@ -38,7 +40,8 @@ import { VideosListMarkupComponent } from './videos-list-markup.component'
PlaylistMiniatureMarkupComponent,
ChannelMiniatureMarkupComponent,
VideosListMarkupComponent,
EmbedMarkupComponent
EmbedMarkupComponent,
ButtonMarkupComponent
],
providers: [
......
......@@ -26,3 +26,10 @@ export type VideosListMarkupData = {
languageOneOf: string // coma separated values
count: string
}
export type ButtonMarkupData = {
theme: 'primary' | 'secondary'
href: string
label: string
blankTarget?: string
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment