samlich/peertube-plugin-chapters

Add chapters to videos on PeerTube

Chapters Plugin for PeerTube

This plugin will be obsoleted by the PeerTube 2023 roadmap.

Here is a demo.

This plugin adds support for listing chapters when uploading a video. They will then be shown in the chapter menu button when users play a video, and will be available to other plugins. Chapters are specified under the "Plugin settings" tab when editing a video.

Usage

Chapters can be specified in a format such as:

0:00 (Intro)
0:05 The first chapter
0:30 The second part

Any hyphens, colons, and spaces after the timestamp and before the text are ignored, so "0:05 - The first chapter" is equivalent to the above.

Tags can be added to chapters by prefixing them in parenthesis. The supported tags are similar to SponsorBlock and include "Sponsor", "Self-promotion", "Interaction reminder" (like, comment, subscribe), "Intro", "Intermission", "Outro", "Credits", or "Non-music" (segment of music). These tags are added to chapter data available to other plugins. The very cool and awesome Web Monetization plugin, for example, can be used to allow paying users to automatically skip sponsor spots.

An alternative format is using a markdown lists of links.

1. [(Intro)](#0:00)
2. [The first chapter](#0:05)
3. [The second part](#0m30s)

Where the timestamps can be of the form 1:02:30 or 1h02m30s.

The resulting WebVTT data can be previewed by hovering over the input box until the mouseover text appears.

Installation

To install or update the plugin, you must be logged in as the administrator of a PeerTube instance. Go to Administration > Plugins/Themes and use the search menu or click "Update" on the already installed plugin.

API

Chapters can be accessed by other plugins using the text track added to the video (player.remoteTextTracks()), and through video.pluginData['table-of-contents_parsed']. They can be accessed externally (or internally) at /plugins/chapters/router/api/v1/videos/<uuid>.json, or <uuid>.vtt for a WebVTT. For example:

• https://peertube-demo.samli.ch/plugins/chapters/router/api/v1/videos/2Sf37VnzwF9biJ9LTTmQbx.json
• https://peertube-demo.samli.ch/plugins/chapters/router/api/v1/videos/2Sf37VnzwF9biJ9LTTmQbx.vtt

The JavaScript and JSON objects are of the form:

export type Chapters = {
  chapters: Chapter[],
  description: string | null,
  end: null,
}
export type Chapter = {
  start: number,
  end?: number,
  name: string,
  tag: Tag,
}
export type Tag = null |
 'sponsor' |
 'self_promotion' |
 'interaction_reminder' |
 'intro' |
 'intermission' |
 'outro' |
 'credits' |
 'non_music'

Contributing

From the client directory run npx ts-standard --fix, likewise from the server and tests directories. And then from either run npx ts-standard ../shared/common.ts --fix. Correct any issues it doesn't fix automatically. Run yarn test.

For general PeerTube plugin development info, see the relevant documentation.

peertube-plugin-chapters's Issues

Chapter menu in Firefox not showing full width

I hope it goes well with inserting the image...
In Firefox (87.0) on Ubuntu the chapter menu is a bit narrowed (see image).
Chrome works well.
Is this a bug?

Error after reinstalling plugin

Hi!
Peertube version is 4.2.2
After uninstall (plugin stopped working) i tried to install it again and got an error -
error[18.10.2022, 10:22:41] Cannot install plugin peertube-plugin-chapters, removing it…
{
« err »: {
« stack »: « /var/www/peertube/storage/plugins/node_modules/marked/src/marked.js:1\n(function (exports, require, module, __filename, __dirname) { import { Lexer } from ‹ ./Lexer.js ›;\n ^^^^^^\n\nSyntaxError: Cannot use import statement outside a module\n at new Script (vm.js:102:7)\n at createScript (vm.js:262:10)\n at Object.runInThisContext (vm.js:310:10)\n at wrapSafe (internal/modules/cjs/loader.js:989:15)\n at Module._compile (internal/modules/cjs/loader.js:1049:27)\n at Object.Module._extensions…js (internal/modules/cjs/loader.js:1114:10)\n at Module.load (internal/modules/cjs/loader.js:950:32)\n at Function.Module._load (internal/modules/cjs/loader.js:790:12)\n at Module.require (internal/modules/cjs/loader.js:974:19)\n at require (internal/modules/cjs/helpers.js:101:18)\n at Object. (/var/www/peertube/storage/plugins/node_modules/peertube-plugin-chapters/dist/shared/common.js:13:18)\n at Module._compile (internal/modules/cjs/loader.js:1085:14)\n at Object.Module._extensions…js (internal/modules/cjs/loader.js:1114:10)\n at Module.load (internal/modules/cjs/loader.js:950:32)\n at Function.Module._load (internal/modules/cjs/loader.js:790:12)\n at Module.require (internal/modules/cjs/loader.js:974:19)\n at require (internal/modules/cjs/helpers.js:101:18)\n at Object. (/var/www/peertube/storage/plugins/node_modules/peertube-plugin-chapters/dist/server/main.js:17:18)\n at Module._compile (internal/modules/cjs/loader.js:1085:14)\n at Object.Module._extensions…js (internal/modules/cjs/loader.js:1114:10)\n at Module.load (internal/modules/cjs/loader.js:950:32)\n at Function.Module._load (internal/modules/cjs/loader.js:790:12)\n at Module.require (internal/modules/cjs/loader.js:974:19)\n at require (internal/modules/cjs/helpers.js:101:18)\n at PluginManager. (/var/www/peertube/versions/peertube-v4.2.2/dist/server/lib/plugins/plugin-manager.js:319:29)\n at Generator.next ()\n at /var/www/peertube/versions/peertube-v4.2.2/node_modules/tslib/tslib.js:117:75\n at new Promise () »,
« message »: « Cannot use import statement outside a module »
}
}
What can I do?
Thank you!

Does the plugin work in 6.0.2?

Hello, @samlich !
I have updated Peertube to version 6.0.2. It looks like your wonderful plugin doesn't work with this version. Is this the case? Will there be an update to the plugin that works in 6.0.2? All my users are used to your plugin and it is sorely missed.

Does it work in Peertube 5.1?

Hi,

I am not able to use the plugin in Peertube 5.1. Although it says that it is installed correctly, then there is no "Plugin settings" tab when editing a sample video. ¿Is it because of the version or I am doing something wrong?

Thank you!

Mikel

Example

Can you please provide a link to a video example?

Chapters can be accessed by other plugins using the text track added to the video (player.remoteTextTracks()), and through video.pluginData['table-of-contents_parsed'].

Can it be accessed by an API? I could not find pluginData in the PeerTube API documentation.

Thumbnails for chapters

It would be nice to have thumbnails for chapters so that users can preview.
Example with YouTube:

YouTube takes a screenshot of the starting time.

Design improvement

Hi,

This plugin is really useful, thanks for it.

I wanted to suggest you to improve its design / user interaction because it is a bit disturbing for lambda users.
In my usage, we have french (long) names for the chapters.

The list of chapters should preferably display bottom and not on the video.
The list of chapters could be larger so that long names display correctly. I think it should be twice larger.
With mouse over the chapter button, the list appears but we can not select a chapter as the list disappear when you move the mouse up. We have to click on the chapter button to be able to select a chapter.
I suspect there are technical reasons for it so I suggest this behavior : when mouse is over the chapter button, only the current chapter name could be displayed and when you clic the chapter bouton, you can choose another chapter.

Regards,

Non-Latin titles are always displayed in the lower case

For example, chapter titles written in Cyrillic are always displayed in the lower case, regardless of their true case. This happens in both plain text and Markdown.

The original chapters:

01:01 Немухин В.Н.
02:52 Зверев А.Т.
04:23 Шемякин М.М.
05:07 Яковлев В.И.
06:00 Сидур В.А.
06:46 Врубель Д. и Тимофеева В.
07:18 Зиновьева Т.А.
07:59 Кропивницкий Е.Л.
08:28 Чубаров Е.И.
09:07 Кузнецова В.Г.
09:36 Гинзбург Е.М.
10:16 Воронова Л.

And this is what is displayed:

Chapter menu not showing in embedded video

Wonderfull plugin, just what I needed! Thanks a lot!
The chapter menu is not showing in an embedded video.
Is this a bug, intentionally or am I doing something wrong?

Expose chapters through an API

Third-party applications such as NewPipe, but also yt-dlp and other PeerTube apps can’t access pluginData API:

{
  chapters: [
    // chapter
    {
      start: float,
      end: float,
      name: String,
      tags: {
        sponsor: bool,
        selfPromotion: bool,
        interactionReminder: bool,
        intro: bool,
        intermission: bool,
        outro: bool,
        credits: bool,
        nonMusic: bool,
      },
    }
  ],
}

As said in #5, we can access chapters via internal router and we get a WebVTT file.
But it’s not ideal:

• it has plugin version in the URL so it will break every update
• it requires parsing WebVTT whereas the pluginData API is close to perfect (e.g. maybe an enum instead of lots of booleans would be better)

An API would guarantee stability (i.e. same URL for across plugin version, no breaking changes if possible, a way to check version if not possible), remove the need to parse WebVTT, and also come with documentation so that it’s easy to implement.