Introduce plugin id selectors

diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 0be67368ebbe1c6c96cd7a90ff210168aa937e8f..90eea1505e4959a7a0d1c6c8752bb9c3a423ba21 100644 (file)
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -15,7 +15,7 @@
     <div class="wrapper">
       <div class="login-form-and-externals">
 
-        <form role="form" (ngSubmit)="login()" [formGroup]="form">
+        <form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
           <div class="form-group">
             <div>
               <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 f36dab6245b1e45ba3689cb9e8270147e1ed5ea7..f45ed9b73c02e38f1c26b3303bcd6c49b81251d3 100644 (file)
--- a/client/src/app/shared/shared-main/plugins/index.ts
+++ b/client/src/app/shared/shared-main/plugins/index.ts
@@ -1 +1,2 @@
 export * from './plugin-placeholder.component'
+export * 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 (file)
index 0000000..576569f
--- /dev/null
+++ b/client/src/app/shared/shared-main/plugins/plugin-selector.directive.ts
@@ -0,0 +1,21 @@
+import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core'
+import { PluginSelectorId } from '@shared/models'
+
+@Directive({ selector: '[myPluginSelector]' })
+export class PluginSelectorDirective implements OnInit {
+  @Input() pluginSelectorId: PluginSelectorId
+
+  constructor (
+    private renderer: Renderer2,
+    private hostElement: ElementRef<HTMLElement>
+  ) {
+
+  }
+
+  ngOnInit () {
+    const id = this.hostElement.nativeElement.getAttribute('id')
+    if (id) throw new Error('Cannot set id on element that already has an id')
+
+    this.renderer.setAttribute(this.hostElement.nativeElement, 'id', `plugin-selector-${this.pluginSelectorId}`)
+  }
+}

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 a90b59e417647da86c1bbbfe01b18b1301499081..10fc364b309dce10bf82501ae54ce84eca53ac2c 100644 (file)
--- 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 {
   SimpleSearchInputComponent,
   TopMenuDropdownComponent
 } from './misc'
-import { PluginPlaceholderComponent } from './plugins'
+import { PluginPlaceholderComponent, PluginSelectorDirective } from './plugins'
 import { ActorRedirectGuard } from './router'
 import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
 import { EmbedComponent, RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
@@ -108,7 +108,8 @@ import { VideoChannelService } from './video-channel'
 
     EmbedComponent,
 
-    PluginPlaceholderComponent
+    PluginPlaceholderComponent,
+    PluginSelectorDirective
   ],
 
   exports: [
@@ -166,7 +167,8 @@ import { VideoChannelService } from './video-channel'
 
     EmbedComponent,
 
-    PluginPlaceholderComponent
+    PluginPlaceholderComponent,
+    PluginSelectorDirective
   ],
 
   providers: [

diff --git a/shared/models/plugins/client/index.ts b/shared/models/plugins/client/index.ts
index 6dfc6351ff2502a0c4424ca0f07dd17cf3717096..c500185c91c3a67e24824988a63b7a74df8203aa 100644 (file)
--- a/shared/models/plugins/client/index.ts
+++ b/shared/models/plugins/client/index.ts
@@ -1,6 +1,7 @@
 export * from './client-hook.model'
 export * from './plugin-client-scope.type'
 export * from './plugin-element-placeholder.type'
+export * from './plugin-selector-id.type'
 export * from './register-client-form-field.model'
 export * from './register-client-hook.model'
 export * 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 (file)
index 0000000..b74dffb
--- /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 acf4718e4ef54211d8ed273fe4af43425bccb0fb..3785246a7abacc08dcc4bd741d5366b39f5c11e6 100644 (file)
--- a/support/doc/plugins/guide.md
+++ b/support/doc/plugins/guide.md
@@ -3,7 +3,6 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [Concepts](#concepts)
   - [Hooks](#hooks)
   - [Static files](#static-files)
@@ -28,6 +27,7 @@
     - [Get server config](#get-server-config)
     - [Add custom fields to video form](#add-custom-fields-to-video-form)
     - [Register settings script](#register-settings-script)
+    - [Plugin selector on HTML elements](#plugin-selector-on-html-elements)
     - [HTML placeholder elements](#html-placeholder-elements)
     - [Add/remove left menu links](#addremove-left-menu-links)
   - [Publishing](#publishing)
@@ -759,6 +759,13 @@ async function register ({ registerSettingsScript }) {
   })
 }
 ```
+#### Plugin selector on HTML elements
+
+PeerTube provides some selectors (using `id` HTML attribute) on important blocks so plugins can easily change their style.
+
+For example `#plugin-selector-login-form` could be used to hide the login form.
+
+See the complete list on https://docs.joinpeertube.org/api-plugins
 
 #### HTML placeholder elements