Themes are exactly the same as plugins, except that:
peertube-theme-
instead of peertube-plugin-
A plugin registers functions in JavaScript to execute when PeerTube (server and client) fires events. There are 3 types of hooks:
filter
: used to filter functions parameters or return values.
For example to replace words in video comments, or change the videos list behaviouraction
: used to do something after a certain trigger. For example to send a hook every time a video is publishedstatic
: same than action
but PeerTube waits their executionOn server side, these hooks are registered by the library
file defined in package.json
.
{
...,
"library": "./main.js",
...,
}
And main.js
defines a register
function:
Example:
async function register ({
registerHook,
registerSetting,
settingsManager,
storageManager,
videoCategoryManager,
videoLicenceManager,
videoLanguageManager,
peertubeHelpers,
getRouter,
registerExternalAuth,
unregisterExternalAuth,
registerIdAndPassAuth,
unregisterIdAndPassAuth
}) {
registerHook({
target: 'action:application.listening',
handler: () => displayHelloWorld()
})
}
On client side, these hooks are registered by the clientScripts
files defined in package.json
.
All client scripts have scopes so PeerTube client only loads scripts it needs:
{
...,
"clientScripts": [
{
"script": "client/common-client-plugin.js",
"scopes": [ "common" ]
},
{
"script": "client/video-watch-client-plugin.js",
"scopes": [ "video-watch" ]
}
],
...
}
And these scripts also define a register
function:
function register ({ registerHook, peertubeHelpers }) {
registerHook({
target: 'action:application.init',
handler: () => onApplicationInit(peertubeHelpers)
})
}
Plugins can declare static directories that PeerTube will serve (images for example)
from /plugins/{plugin-name}/{plugin-version}/static/
or /themes/{theme-name}/{theme-version}/static/
routes.
Plugins can declare CSS files that PeerTube will automatically inject in the client.
If you need to override existing style, you can use the #custom-css
selector:
body#custom-css {
color: red;
}
#custom-css .header {
background-color: red;
}
Plugins can register settings, that PeerTube will inject in the administration interface.
Example:
registerSetting({
name: 'admin-name',
label: 'Admin name',
type: 'input',
// type: input | input-checkbox | input-password | input-textarea | markdown-text | markdown-enhanced
default: 'my super name'
})
const adminName = await settingsManager.getSetting('admin-name')
const result = await settingsManager.getSettings([ 'admin-name', 'admin-password' ])
result['admin-name]
settingsManager.onSettingsChange(settings => {
settings['admin-name])
})
Plugins can store/load JSON data, that PeerTube will store in its database (so don't put files in there).
Example:
const value = await storageManager.getData('mykey')
await storageManager.storeData('mykey', { subkey: 'value' })
You can add/delete video categories, licences or languages using the appropriate managers:
videoLanguageManager.addLanguage('al_bhed', 'Al Bhed')
videoLanguageManager.deleteLanguage('fr')
videoCategoryManager.addCategory(42, 'Best category')
videoCategoryManager.deleteCategory(1) // Music
videoLicenceManager.addLicence(42, 'Best licence')
videoLicenceManager.deleteLicence(7) // Public domain
videoPrivacyManager.deletePrivacy(2) // Remove Unlisted video privacy
playlistPrivacyManager.deletePlaylistPrivacy(3) // Remove Private video playlist privacy
You can create custom routes using an express Router for your plugin:
const router = getRouter()
router.get('/ping', (req, res) => res.json({ message: 'pong' }))
The ping
route can be accessed using:
/plugins/:pluginName/:pluginVersion/router/ping
/plugins/:pluginName/router/ping
If you want to add a classic username/email and password auth method (like LDAP for example):
registerIdAndPassAuth({
authName: 'my-auth-method',
// PeerTube will try all id and pass plugins in the weight DESC order
// Exposing this value in the plugin settings could be interesting
getWeight: () => 60,
// Optional function called by PeerTube when the user clicked on the logout button
onLogout: user => {
console.log('User %s logged out.', user.username')
},
// Optional function called by PeerTube when the access token or refresh token are generated/refreshed
hookTokenValidity: ({ token, type }) => {
if (type === 'access') return { valid: true }
if (type === 'refresh') return { valid: false }
},
// Used by PeerTube when the user tries to authenticate
login: ({ id, password }) => {
if (id === 'user' && password === 'super password') {
return {
username: 'user'
email: 'user@example.com'
role: 2
displayName: 'User display name'
}
}
// Auth failed
return null
}
})
// Unregister this auth method
unregisterIdAndPassAuth('my-auth-method')
You can also add an external auth method (like OpenID, SAML2 etc):
// result contains the userAuthenticated auth method you can call to authenticate a user
const result = registerExternalAuth({
authName: 'my-auth-method',
// Will be displayed in a button next to the login form
authDisplayName: () => 'Auth method'
// If the user click on the auth button, PeerTube will forward the request in this function
onAuthRequest: (req, res) => {
res.redirect('https://external-auth.example.com/auth')
},
// Same than registerIdAndPassAuth option
// onLogout: ...
// Same than registerIdAndPassAuth option
// hookTokenValidity: ...
})
router.use('/external-auth-callback', (req, res) => {
// Forward the request to PeerTube
result.userAuthenticated({
req,
res,
username: 'user'
email: 'user@example.com'
role: 2
displayName: 'User display name'
})
})
// Unregister this external auth method
unregisterExternalAuth('my-auth-method)
To get your plugin static route:
const baseStaticUrl = peertubeHelpers.getBaseStaticRoute()
const imageUrl = baseStaticUrl + '/images/chocobo.png'
To notify the user with the PeerTube ToastModule:
const { notifier } = peertubeHelpers
notifier.success('Success message content.')
notifier.error('Error message content.')
To render a formatted markdown text to HTML:
const { markdownRenderer } = peertubeHelpers
await markdownRenderer.textMarkdownToHTML('**My Bold Text**')
// return <strong>My Bold Text</strong>
await markdownRenderer.enhancedMarkdownToHTML('![alt-img](http://.../my-image.jpg)')
// return <img alt=alt-img src=http://.../my-image.jpg />
To show a custom modal:
peertubeHelpers.showModal({
title: 'My custom modal title',
content: '<p>My custom modal content</p>',
// Optionals parameters :
// show close icon
close: true,
// show cancel button and call action() after hiding modal
cancel: { value: 'cancel', action: () => {} },
// show confirm button and call action() after hiding modal
confirm: { value: 'confirm', action: () => {} },
})
You can translate some strings of your plugin (PeerTube will use your translations
object of your package.json
file):
peertubeHelpers.translate('User name')
.then(translation => console.log('Translated User name by ' + translation))
To get your public plugin settings:
peertubeHelpers.getSettings()
.then(s => {
if (!s || !s['site-id'] || !s['url']) {
console.error('Matomo settings are not set.')
return
}
// ...
})
To add custom fields in the video form (in Plugin settings tab):
async function register ({ registerVideoField, peertubeHelpers }) {
const descriptionHTML = await peertubeHelpers.translate(descriptionSource)
const commonOptions = {
name: 'my-field-name,
label: 'My added field',
descriptionHTML: 'Optional description',
type: 'input-textarea',
default: ''
}
for (const type of [ 'upload', 'import-url', 'import-torrent', 'update' ]) {
registerVideoField(commonOptions, { type })
}
}
PeerTube will send this field value in body.pluginData['my-field-name']
and fetch it from video.pluginData['my-field-name']
.
So for example, if you want to store an additional metadata for videos, register the following hooks in server:
async function register ({
registerHook,
storageManager
}) {
const fieldName = 'my-field-name'
// Store data associated to this video
registerHook({
target: 'action:api.video.updated',
handler: ({ video, body }) => {
if (!body.pluginData) return
const value = body.pluginData[fieldName]
if (!value) return
storageManager.storeData(fieldName + '-' + video.id, value)
}
})
// Add your custom value to the video, so the client autofill your field using the previously stored value
registerHook({
target: 'filter:api.video.get.result',
handler: async (video) => {
if (!video) return video
if (!video.pluginData) video.pluginData = {}
const result = await storageManager.getData(fieldName + '-' + video.id)
video.pluginData[fieldName] = result
return video
}
})
}
PeerTube plugins and themes should be published on NPM so that PeerTube indexes take into account your plugin (after ~ 1 day). An official PeerTube index is available on https://packages.joinpeertube.org/ (it's just a REST API, so don't expect a beautiful website).
Steps:
-
)peertube-plugin-
prefix to your plugin name (for example: peertube-plugin-mysupername
)peertube-theme-
prefix to your theme name (for example: peertube-theme-mysupertheme
)README.md
package.json
If you develop a plugin, clone the peertube-plugin-quickstart
repository:
$ git clone https://framagit.org/framasoft/peertube/peertube-plugin-quickstart.git peertube-plugin-mysupername
If you develop a theme, clone the peertube-theme-quickstart
repository:
$ git clone https://framagit.org/framasoft/peertube/peertube-theme-quickstart.git peertube-theme-mysupername
Set your repository URL:
$ cd peertube-plugin-mysupername # or cd peertube-theme-mysupername
$ git remote set-url origin https://your-git-repo
Update README.md
file:
$ $EDITOR README.md
Update the package.json
fields:
name
(should start with peertube-plugin-
or peertube-theme-
)description
homepage
author
bugs
engine.peertube
(the PeerTube version compatibility, must be >=x.y.z
and nothing else)Caution: Don't update or remove other keys, or PeerTube will not be able to index/install your plugin.
If you don't need static directories, use an empty object
:
{
...,
"staticDirs": {},
...
}
And if you don't need CSS or client script files, use an empty array
:
{
...,
"css": [],
"clientScripts": [],
...
}
Now you can register hooks or settings, write CSS and add static directories to your plugin or your theme :)
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.
If you want to translate strings of your plugin (like labels of your registered settings), create a file and add it to package.json
:
{
...,
"translations": {
"fr-FR": "./languages/fr.json",
"pt-BR": "./languages/pt-BR.json"
},
...
}
The key should be one of the locales defined in i18n.ts.
You must use the complete locales (fr-FR
instead of fr
).
Translation files are just objects, with the english sentence as the key and the translation as the value.
fr.json
could contain for example:
{
"Hello world": "Hello le monde"
}
If you added client scripts, you'll need to build them using webpack.
Install webpack:
$ npm install
Add/update your files in the clientFiles
array of webpack.config.js
:
$ $EDITOR ./webpack.config.js
Build your client files:
$ npm run build
You built files are in the dist/
directory. Check package.json
to correctly point to them.
You'll need to have a local PeerTube instance:
Build PeerTube (--light
to only build the english language):
$ npm run build -- --light
Build the CLI:
$ npm run setup:cli
Run PeerTube (you can access to your instance on http://localhost:9000):
$ NODE_ENV=test npm start
Register the instance via the CLI:
$ node ./dist/server/tools/peertube.js auth add -u 'http://localhost:9000' -U 'root' --password 'test'
Then, you can install or reinstall your local plugin/theme by running:
$ node ./dist/server/tools/peertube.js plugins install --path /your/absolute/plugin-or-theme/path
Go in your plugin/theme directory, and run:
$ npm publish
Every time you want to publish another version of your plugin/theme, just update the version
key from the package.json
and republish it on NPM. Remember that the PeerTube index will take into account your new plugin/theme version after ~24 hours.
See the dedicated documentation: https://docs.joinpeertube.org/api-plugins
Unfortunately, we don't have enough resources to provide hook compatibility between minor releases of PeerTube (for example between 1.2.x
and 1.3.x
).
So please:
Don't make assumptions and check every parameter you want to use. For example:
registerHook({
target: 'filter:api.video.get.result',
handler: video => {
// We check the parameter exists and the name field exists too, to avoid exceptions
if (video && video.name) video.name += ' <3'
return video
}
})
Don't try to require parent PeerTube modules, only use peertubeHelpers
. If you need another helper or a specific hook, please create an issue
Don't use PeerTube dependencies. Use your own :)
If your plugin is broken with a new PeerTube release, update your code and the peertubeEngine
field of your package.json
field.
This way, older PeerTube versions will still use your old plugin, and new PeerTube versions will use your updated plugin.
If you want to create an antispam/moderation plugin, you could use the following hooks:
filter:api.video.upload.accept.result
: to accept or not local uploadsfilter:api.video-thread.create.accept.result
: to accept or not local threadfilter:api.video-comment-reply.create.accept.result
: to accept or not local repliesfilter:api.video-threads.list.result
: to change/hide the text of threadsfilter:api.video-thread-comments.list.result
: to change/hide the text of repliesfilter:video.auto-blacklist.result
: to automatically blacklist local or remote videosYou can take a look to "official" PeerTube plugins if you want to take inspiration from them: https://framagit.org/framasoft/peertube/official-plugins