aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-05-28 15:23:17 +0200
committerChocobozzz <me@florianbigard.com>2021-05-28 15:23:17 +0200
commit630421392314a4d78506f060055c754dfddf220b (patch)
tree7365327d5a95350c6cc1f78f6adede70793e053f
parent5351a0584f528e4ddb9c3c99329ba88e0ca8288e (diff)
downloadPeerTube-630421392314a4d78506f060055c754dfddf220b.tar.gz
PeerTube-630421392314a4d78506f060055c754dfddf220b.tar.zst
PeerTube-630421392314a4d78506f060055c754dfddf220b.zip
Support peertube button in custom markup
-rw-r--r--client/src/app/shared/shared-custom-markup/button-markup.component.html1
-rw-r--r--client/src/app/shared/shared-custom-markup/button-markup.component.scss3
-rw-r--r--client/src/app/shared/shared-custom-markup/button-markup.component.ts34
-rw-r--r--client/src/app/shared/shared-custom-markup/custom-markup.service.ts25
-rw-r--r--client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts7
-rw-r--r--shared/models/custom-markup/custom-markup-data.model.ts7
6 files changed, 75 insertions, 2 deletions
diff --git a/client/src/app/shared/shared-custom-markup/button-markup.component.html b/client/src/app/shared/shared-custom-markup/button-markup.component.html
new file mode 100644
index 000000000..619bb9d8c
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/button-markup.component.html
@@ -0,0 +1 @@
<a [href]="href" [ngClass]="getClasses()" [target]="getTarget()">{{ label }}</a>
diff --git a/client/src/app/shared/shared-custom-markup/button-markup.component.scss b/client/src/app/shared/shared-custom-markup/button-markup.component.scss
new file mode 100644
index 000000000..f43d6b400
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/button-markup.component.scss
@@ -0,0 +1,3 @@
1@import '_variables';
2@import '_mixins';
3
diff --git a/client/src/app/shared/shared-custom-markup/button-markup.component.ts b/client/src/app/shared/shared-custom-markup/button-markup.component.ts
new file mode 100644
index 000000000..c0aab2edd
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/button-markup.component.ts
@@ -0,0 +1,34 @@
1import { Component, Input } from '@angular/core'
2import { VideoChannel } from '../shared-main'
3
4/*
5 * Markup component that creates a button
6*/
7
8@Component({
9 selector: 'my-button-markup',
10 templateUrl: 'button-markup.component.html',
11 styleUrls: [ 'button-markup.component.scss' ]
12})
13export class ButtonMarkupComponent {
14 @Input() theme: 'primary' | 'secondary'
15 @Input() href: string
16 @Input() label: string
17 @Input() blankTarget?: boolean
18
19 channel: VideoChannel
20
21 getTarget () {
22 if (this.blankTarget === true) return '_blank'
23
24 return ''
25 }
26
27 getClasses () {
28 const additionalClass = this.theme === 'primary'
29 ? 'orange-button'
30 : 'grey-button'
31
32 return [ 'peertube-button-link', additionalClass ]
33 }
34}
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
index ffaf15710..09414da95 100644
--- a/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
+++ b/client/src/app/shared/shared-custom-markup/custom-markup.service.ts
@@ -1,12 +1,14 @@
1import { ComponentRef, Injectable } from '@angular/core' 1import { ComponentRef, Injectable } from '@angular/core'
2import { MarkdownService } from '@app/core' 2import { MarkdownService } from '@app/core'
3import { 3import {
4 ButtonMarkupData,
4 ChannelMiniatureMarkupData, 5 ChannelMiniatureMarkupData,
5 EmbedMarkupData, 6 EmbedMarkupData,
6 PlaylistMiniatureMarkupData, 7 PlaylistMiniatureMarkupData,
7 VideoMiniatureMarkupData, 8 VideoMiniatureMarkupData,
8 VideosListMarkupData 9 VideosListMarkupData
9} from '@shared/models' 10} from '@shared/models'
11import { ButtonMarkupComponent } from './button-markup.component'
10import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component' 12import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
11import { DynamicElementService } from './dynamic-element.service' 13import { DynamicElementService } from './dynamic-element.service'
12import { EmbedMarkupComponent } from './embed-markup.component' 14import { EmbedMarkupComponent } from './embed-markup.component'
@@ -19,6 +21,7 @@ type BuilderFunction = (el: HTMLElement) => ComponentRef<any>
19@Injectable() 21@Injectable()
20export class CustomMarkupService { 22export class CustomMarkupService {
21 private builders: { [ selector: string ]: BuilderFunction } = { 23 private builders: { [ selector: string ]: BuilderFunction } = {
24 'peertube-button': el => this.buttonBuilder(el),
22 'peertube-video-embed': el => this.embedBuilder(el, 'video'), 25 'peertube-video-embed': el => this.embedBuilder(el, 'video'),
23 'peertube-playlist-embed': el => this.embedBuilder(el, 'playlist'), 26 'peertube-playlist-embed': el => this.embedBuilder(el, 'playlist'),
24 'peertube-video-miniature': el => this.videoMiniatureBuilder(el), 27 'peertube-video-miniature': el => this.videoMiniatureBuilder(el),
@@ -98,6 +101,21 @@ export class CustomMarkupService {
98 return component 101 return component
99 } 102 }
100 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
101 private videosListBuilder (el: HTMLElement) { 119 private videosListBuilder (el: HTMLElement) {
102 const data = el.dataset as VideosListMarkupData 120 const data = el.dataset as VideosListMarkupData
103 const component = this.dynamicElementService.createElement(VideosListMarkupComponent) 121 const component = this.dynamicElementService.createElement(VideosListMarkupComponent)
@@ -122,6 +140,13 @@ export class CustomMarkupService {
122 return parseInt(value, 10) 140 return parseInt(value, 10)
123 } 141 }
124 142
143 private buildBoolean (value: string) {
144 if (value === 'true') return true
145 if (value === 'false') return false
146
147 return undefined
148 }
149
125 private buildArrayNumber (value: string) { 150 private buildArrayNumber (value: string) {
126 if (!value) return undefined 151 if (!value) return undefined
127 152
diff --git a/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts b/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
index 4bbb71588..d03aa856f 100644
--- a/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
+++ b/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
@@ -6,6 +6,7 @@ import { SharedGlobalIconModule } from '../shared-icons'
6import { SharedMainModule } from '../shared-main' 6import { SharedMainModule } from '../shared-main'
7import { SharedVideoMiniatureModule } from '../shared-video-miniature' 7import { SharedVideoMiniatureModule } from '../shared-video-miniature'
8import { SharedVideoPlaylistModule } from '../shared-video-playlist' 8import { SharedVideoPlaylistModule } from '../shared-video-playlist'
9import { ButtonMarkupComponent } from './button-markup.component'
9import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component' 10import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
10import { CustomMarkupService } from './custom-markup.service' 11import { CustomMarkupService } from './custom-markup.service'
11import { DynamicElementService } from './dynamic-element.service' 12import { DynamicElementService } from './dynamic-element.service'
@@ -30,7 +31,8 @@ import { VideosListMarkupComponent } from './videos-list-markup.component'
30 PlaylistMiniatureMarkupComponent, 31 PlaylistMiniatureMarkupComponent,
31 ChannelMiniatureMarkupComponent, 32 ChannelMiniatureMarkupComponent,
32 EmbedMarkupComponent, 33 EmbedMarkupComponent,
33 VideosListMarkupComponent 34 VideosListMarkupComponent,
35 ButtonMarkupComponent
34 ], 36 ],
35 37
36 exports: [ 38 exports: [
@@ -38,7 +40,8 @@ import { VideosListMarkupComponent } from './videos-list-markup.component'
38 PlaylistMiniatureMarkupComponent, 40 PlaylistMiniatureMarkupComponent,
39 ChannelMiniatureMarkupComponent, 41 ChannelMiniatureMarkupComponent,
40 VideosListMarkupComponent, 42 VideosListMarkupComponent,
41 EmbedMarkupComponent 43 EmbedMarkupComponent,
44 ButtonMarkupComponent
42 ], 45 ],
43 46
44 providers: [ 47 providers: [
diff --git a/shared/models/custom-markup/custom-markup-data.model.ts b/shared/models/custom-markup/custom-markup-data.model.ts
index af697428e..24ac3706c 100644
--- a/shared/models/custom-markup/custom-markup-data.model.ts
+++ b/shared/models/custom-markup/custom-markup-data.model.ts
@@ -26,3 +26,10 @@ export type VideosListMarkupData = {
26 languageOneOf: string // coma separated values 26 languageOneOf: string // coma separated values
27 count: string 27 count: string
28} 28}
29
30export type ButtonMarkupData = {
31 theme: 'primary' | 'secondary'
32 href: string
33 label: string
34 blankTarget?: string
35}