aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-11-26 17:36:44 +0100
committerChocobozzz <me@florianbigard.com>2021-11-26 17:36:55 +0100
commit8afade2607e072221a8ff8c108bd1787a3501a2d (patch)
treecb4b3724cf38076cfd5850be727535a92e85fab3
parent7137377d097a74087ed062c8071c1aa5c717c7f7 (diff)
downloadPeerTube-8afade2607e072221a8ff8c108bd1787a3501a2d.tar.gz
PeerTube-8afade2607e072221a8ff8c108bd1787a3501a2d.tar.zst
PeerTube-8afade2607e072221a8ff8c108bd1787a3501a2d.zip
Introduce plugin id selectors
-rw-r--r--client/src/app/+login/login.component.html2
-rw-r--r--client/src/app/shared/shared-main/plugins/index.ts1
-rw-r--r--client/src/app/shared/shared-main/plugins/plugin-selector.directive.ts21
-rw-r--r--client/src/app/shared/shared-main/shared-main.module.ts8
-rw-r--r--shared/models/plugins/client/index.ts1
-rw-r--r--shared/models/plugins/client/plugin-selector-id.type.ts1
-rw-r--r--support/doc/plugins/guide.md9
7 files changed, 38 insertions, 5 deletions
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 0be67368e..90eea1505 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -15,7 +15,7 @@
15 <div class="wrapper"> 15 <div class="wrapper">
16 <div class="login-form-and-externals"> 16 <div class="login-form-and-externals">
17 17
18 <form role="form" (ngSubmit)="login()" [formGroup]="form"> 18 <form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
19 <div class="form-group"> 19 <div class="form-group">
20 <div> 20 <div>
21 <label i18n for="username">User</label> 21 <label i18n for="username">User</label>
diff --git a/client/src/app/shared/shared-main/plugins/index.ts b/client/src/app/shared/shared-main/plugins/index.ts
index f36dab624..f45ed9b73 100644
--- a/client/src/app/shared/shared-main/plugins/index.ts
+++ b/client/src/app/shared/shared-main/plugins/index.ts
@@ -1 +1,2 @@
1export * from './plugin-placeholder.component' 1export * from './plugin-placeholder.component'
2export * from './plugin-selector.directive'
diff --git a/client/src/app/shared/shared-main/plugins/plugin-selector.directive.ts b/client/src/app/shared/shared-main/plugins/plugin-selector.directive.ts
new file mode 100644
index 000000000..576569f19
--- /dev/null
+++ b/client/src/app/shared/shared-main/plugins/plugin-selector.directive.ts
@@ -0,0 +1,21 @@
1import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core'
2import { PluginSelectorId } from '@shared/models'
3
4@Directive({ selector: '[myPluginSelector]' })
5export class PluginSelectorDirective implements OnInit {
6 @Input() pluginSelectorId: PluginSelectorId
7
8 constructor (
9 private renderer: Renderer2,
10 private hostElement: ElementRef<HTMLElement>
11 ) {
12
13 }
14
15 ngOnInit () {
16 const id = this.hostElement.nativeElement.getAttribute('id')
17 if (id) throw new Error('Cannot set id on element that already has an id')
18
19 this.renderer.setAttribute(this.hostElement.nativeElement, 'id', `plugin-selector-${this.pluginSelectorId}`)
20 }
21}
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index a90b59e41..10fc364b3 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -41,7 +41,7 @@ import {
41 SimpleSearchInputComponent, 41 SimpleSearchInputComponent,
42 TopMenuDropdownComponent 42 TopMenuDropdownComponent
43} from './misc' 43} from './misc'
44import { PluginPlaceholderComponent } from './plugins' 44import { PluginPlaceholderComponent, PluginSelectorDirective } from './plugins'
45import { ActorRedirectGuard } from './router' 45import { ActorRedirectGuard } from './router'
46import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users' 46import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
47import { EmbedComponent, RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video' 47import { EmbedComponent, RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
@@ -108,7 +108,8 @@ import { VideoChannelService } from './video-channel'
108 108
109 EmbedComponent, 109 EmbedComponent,
110 110
111 PluginPlaceholderComponent 111 PluginPlaceholderComponent,
112 PluginSelectorDirective
112 ], 113 ],
113 114
114 exports: [ 115 exports: [
@@ -166,7 +167,8 @@ import { VideoChannelService } from './video-channel'
166 167
167 EmbedComponent, 168 EmbedComponent,
168 169
169 PluginPlaceholderComponent 170 PluginPlaceholderComponent,
171 PluginSelectorDirective
170 ], 172 ],
171 173
172 providers: [ 174 providers: [
diff --git a/shared/models/plugins/client/index.ts b/shared/models/plugins/client/index.ts
index 6dfc6351f..c500185c9 100644
--- a/shared/models/plugins/client/index.ts
+++ b/shared/models/plugins/client/index.ts
@@ -1,6 +1,7 @@
1export * from './client-hook.model' 1export * from './client-hook.model'
2export * from './plugin-client-scope.type' 2export * from './plugin-client-scope.type'
3export * from './plugin-element-placeholder.type' 3export * from './plugin-element-placeholder.type'
4export * from './plugin-selector-id.type'
4export * from './register-client-form-field.model' 5export * from './register-client-form-field.model'
5export * from './register-client-hook.model' 6export * from './register-client-hook.model'
6export * from './register-client-settings-script.model' 7export * from './register-client-settings-script.model'
diff --git a/shared/models/plugins/client/plugin-selector-id.type.ts b/shared/models/plugins/client/plugin-selector-id.type.ts
new file mode 100644
index 000000000..b74dffbef
--- /dev/null
+++ b/shared/models/plugins/client/plugin-selector-id.type.ts
@@ -0,0 +1 @@
export type PluginSelectorId = 'login-form'
diff --git a/support/doc/plugins/guide.md b/support/doc/plugins/guide.md
index acf4718e4..3785246a7 100644
--- a/support/doc/plugins/guide.md
+++ b/support/doc/plugins/guide.md
@@ -3,7 +3,6 @@
3<!-- START doctoc generated TOC please keep comment here to allow auto update --> 3<!-- START doctoc generated TOC please keep comment here to allow auto update -->
4<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> 4<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
5 5
6
7- [Concepts](#concepts) 6- [Concepts](#concepts)
8 - [Hooks](#hooks) 7 - [Hooks](#hooks)
9 - [Static files](#static-files) 8 - [Static files](#static-files)
@@ -28,6 +27,7 @@
28 - [Get server config](#get-server-config) 27 - [Get server config](#get-server-config)
29 - [Add custom fields to video form](#add-custom-fields-to-video-form) 28 - [Add custom fields to video form](#add-custom-fields-to-video-form)
30 - [Register settings script](#register-settings-script) 29 - [Register settings script](#register-settings-script)
30 - [Plugin selector on HTML elements](#plugin-selector-on-html-elements)
31 - [HTML placeholder elements](#html-placeholder-elements) 31 - [HTML placeholder elements](#html-placeholder-elements)
32 - [Add/remove left menu links](#addremove-left-menu-links) 32 - [Add/remove left menu links](#addremove-left-menu-links)
33 - [Publishing](#publishing) 33 - [Publishing](#publishing)
@@ -759,6 +759,13 @@ async function register ({ registerSettingsScript }) {
759 }) 759 })
760} 760}
761``` 761```
762#### Plugin selector on HTML elements
763
764PeerTube provides some selectors (using `id` HTML attribute) on important blocks so plugins can easily change their style.
765
766For example `#plugin-selector-login-form` could be used to hide the login form.
767
768See the complete list on https://docs.joinpeertube.org/api-plugins
762 769
763#### HTML placeholder elements 770#### HTML placeholder elements
764 771