1 files changed, 64 insertions, 0 deletions

diff --git a/client/src/assets/player/shared/control-bar/chapters-plugin.ts b/client/src/assets/player/shared/control-bar/chapters-plugin.ts
new file mode 100644
index 000000000..5be081694
--- /dev/null
+++ b/client/src/assets/player/shared/control-bar/chapters-plugin.ts
@@ -0,0 +1,64 @@
+import videojs from 'video.js'
+import { ChaptersOptions } from '../../types'
+import { VideoChapter } from '@peertube/peertube-models'
+import { ProgressBarMarkerComponent } from './progress-bar-marker-component'
+
+const Plugin = videojs.getPlugin('plugin')
+
+class ChaptersPlugin extends Plugin {
+  private chapters: VideoChapter[] = []
+  private markers: ProgressBarMarkerComponent[] = []
+
+  constructor (player: videojs.Player, options: videojs.ComponentOptions & ChaptersOptions) {
+    super(player, options)
+
+    this.chapters = options.chapters
+
+    this.player.ready(() => {
+      player.addClass('vjs-chapters')
+
+      this.player.one('durationchange', () => {
+        for (const chapter of this.chapters) {
+          if (chapter.timecode === 0) continue
+
+          const marker = new ProgressBarMarkerComponent(player, { timecode: chapter.timecode })
+
+          this.markers.push(marker)
+          this.getSeekBar().addChild(marker)
+        }
+      })
+    })
+  }
+
+  dispose () {
+    for (const marker of this.markers) {
+      this.getSeekBar().removeChild(marker)
+    }
+  }
+
+  getChapter (timecode: number) {
+    if (this.chapters.length !== 0) {
+      for (let i = this.chapters.length - 1; i >= 0; i--) {
+        const chapter = this.chapters[i]
+
+        if (chapter.timecode <= timecode) {
+          this.player.addClass('has-chapter')
+
+          return chapter.title
+        }
+      }
+    }
+
+    this.player.removeClass('has-chapter')
+
+    return ''
+  }
+
+  private getSeekBar () {
+    return this.player.getDescendant('ControlBar', 'ProgressControl', 'SeekBar')
+  }
+}
+
+videojs.registerPlugin('chapters', ChaptersPlugin)
+
+export { ChaptersPlugin }