1 files changed, 109 insertions, 27 deletions

diff --git a/support/doc/plugins/guide.md b/support/doc/plugins/guide.md
index 3785246a7..52e3b6052 100644
--- a/support/doc/plugins/guide.md
+++ b/support/doc/plugins/guide.md
@@ -16,11 +16,10 @@
     - [Add new transcoding profiles](#add-new-transcoding-profiles)
     - [Server helpers](#server-helpers)
   - [Client API (themes & plugins)](#client-api-themes--plugins)
-    - [Plugin static route](#plugin-static-route)
+    - [Get plugin static and router routes](#get-plugin-static-and-router-routes)
     - [Notifier](#notifier)
     - [Markdown Renderer](#markdown-renderer)
     - [Auth header](#auth-header)
-    - [Plugin router route](#plugin-router-route)
     - [Custom Modal](#custom-modal)
     - [Translate](#translate)
     - [Get public settings](#get-public-settings)
@@ -30,6 +29,7 @@
     - [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)
+    - [Create client page](#create-client-page)
   - [Publishing](#publishing)
 - [Write a plugin/theme](#write-a-plugintheme)
   - [Clone the quickstart repository](#clone-the-quickstart-repository)
@@ -531,7 +531,7 @@ See the [plugin API reference](https://docs.joinpeertube.org/api-plugins) to see
 
 ### Client API (themes & plugins)
 
-#### Plugin static route
+#### Get plugin static and router routes
 
 To get your plugin static route:
 
@@ -542,6 +542,24 @@ function register (...) {
 }
 ```
 
+And to get your plugin router route, use `peertubeHelpers.getBaseRouterRoute()`:
+
+```js
+function register (...) {
+  registerHook({
+    target: 'action:video-watch.video.loaded',
+    handler: ({ video }) => {
+      fetch(peertubeHelpers.getBaseRouterRoute() + '/my/plugin/api', {
+        method: 'GET',
+        headers: peertubeHelpers.getAuthHeader()
+      }).then(res => res.json())
+        .then(data => console.log('Hi %s.', data))
+    }
+  })
+}
+```
+
+
 #### Notifier
 
 To notify the user with the PeerTube ToastModule:
@@ -594,27 +612,6 @@ function register (...) {
 }
 ```
 
-#### Plugin router route
-
-**PeerTube >= 3.3**
-
-To get your plugin router route, you can use `peertubeHelpers.getBaseRouterRoute()`:
-
-```js
-function register (...) {
-  registerHook({
-    target: 'action:video-watch.video.loaded',
-    handler: ({ video }) => {
-      fetch(peertubeHelpers.getBaseRouterRoute() + '/my/plugin/api', {
-        method: 'GET',
-        headers: peertubeHelpers.getAuthHeader()
-      }).then(res => res.json())
-        .then(data => console.log('Hi %s.', data))
-    }
-  })
-}
-```
-
 #### Custom Modal
 
 To show a custom modal:
@@ -686,18 +683,37 @@ async function register ({ registerVideoField, peertubeHelpers }) {
     name: 'my-field-name,
     label: 'My added field',
     descriptionHTML: 'Optional description',
+
+    // type: 'input' | 'input-checkbox' | 'input-password' | 'input-textarea' | 'markdown-text' | 'markdown-enhanced' | 'select' | 'html'
+    // /!\ 'input-checkbox' could send "false" and "true" strings instead of boolean
     type: 'input-textarea',
+
     default: '',
+
     // Optional, to hide a field depending on the current form state
     // liveVideo is in the options object when the user is creating/updating a live
     // videoToUpdate is in the options object when the user is updating a video
     hidden: ({ formValues, videoToUpdate, liveVideo }) => {
       return formValues.pluginData['other-field'] === 'toto'
+    },
+
+    // Optional, to display an error depending on the form state
+    error: ({ formValues, value }) => {
+      if (formValues['privacy'] !== 1 && formValues['privacy'] !== 2) return { error: false }
+      if (value === true) return { error: false }
+
+      return { error: true, text: 'Should be enabled' }
     }
   }
 
+  const videoFormOptions = {
+    // Optional, to choose to put your setting in a specific tab in video form
+    // type: 'main' | 'plugin-settings'
+    tab: 'main'
+  }
+
   for (const type of [ 'upload', 'import-url', 'import-torrent', 'update', 'go-live' ]) {
-    registerVideoField(commonOptions, { type })
+    registerVideoField(commonOptions, { type, ...videoFormOptions  })
   }
 }
 ```
@@ -787,6 +803,21 @@ See the complete list on https://docs.joinpeertube.org/api-plugins
 
 Left menu links can be filtered (add/remove a section or add/remove links) using the `filter:left-menu.links.create.result` client hook.
 
+#### Create client page
+
+To create a client page, register a new client route:
+
+```js
+function register ({ registerClientRoute }) {
+  registerClientRoute({
+    route: 'my-super/route',
+    onMount: ({ rootEl }) => {
+      rootEl.innerHTML = 'hello'
+    }
+  })
+}
+```
+
 
 ### Publishing
 
@@ -875,11 +906,62 @@ And if you don't need CSS or client script files, use an empty `array`:
 ### Write code
 
 Now you can register hooks or settings, write CSS and add static directories to your plugin or your theme :)
+It's up to you to check the code you write will be compatible with the PeerTube NodeJS version, and will be supported by web browsers.
+
+**JavaScript**
 
-**Caution:** It's up to you to check the code you write will be compatible with the PeerTube NodeJS version,
-and will be supported by web browsers.
 If you want to write modern JavaScript, please use a transpiler like [Babel](https://babeljs.io/).
 
+**Typescript**
+
+If you want to use __Typescript__, you can add __PeerTube__ types as dev dependencies:
+
+```
+npm install --save-dev @peertube/peertube-types
+```
+
+This package exposes *server* definition files by default:
+```ts
+import { RegisterServerOptions } from '@peertube/peertube-types'
+
+export async function register ({ registerHook }: RegisterServerOptions) {
+  registerHook({
+    target: 'action:application.listening',
+    handler: () => displayHelloWorld()
+  })
+}
+```
+
+But it also exposes client types and various models used in __PeerTube__:
+```ts
+import { Video } from '@peertube/peertube-types';
+import { RegisterClientOptions } from '@peertube/peertube-types/client';
+
+function register({ registerHook, peertubeHelpers }: RegisterClientOptions) {
+  registerHook({
+    target: 'action:admin-plugin-settings.init',
+    handler: ({ npmName }: { npmName: string }) => {
+      if ('peertube-plugin-transcription' !== npmName) {
+        return;
+      }
+    },
+  });
+
+  registerHook({
+    target: 'action:video-watch.video.loaded',
+    handler: ({ video }: { video: Video }) => {
+      fetch(`${peertubeHelpers.getBaseRouterRoute()}/videos/${video.uuid}/captions`, {
+        method: 'PUT',
+        headers: peertubeHelpers.getAuthHeader(),
+      }).then((res) => res.json())
+        .then((data) => console.log('Hi %s.', data));
+    },
+  });
+}
+
+export { register };
+```
+
 ### Add translations
 
 If you want to translate strings of your plugin (like labels of your registered settings), create a file and add it to `package.json`: