Add video chapters support

5 files changed, 113 insertions, 1 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 }
diff --git a/client/src/assets/player/shared/control-bar/index.ts b/client/src/assets/player/shared/control-bar/index.ts
index 9307027f6..091e876e2 100644
--- a/client/src/assets/player/shared/control-bar/index.ts
+++ b/client/src/assets/player/shared/control-bar/index.ts
@@ -1,6 +1,8 @@
+export * from './chapters-plugin'
 export * from './next-previous-video-button'
 export * from './p2p-info-button'
 export * from './peertube-link-button'
 export * from './peertube-live-display'
 export * from './storyboard-plugin'
 export * from './theater-button'
+export * from './time-tooltip'
diff --git a/client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts b/client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts
new file mode 100644
index 000000000..50965ec71
--- /dev/null
+++ b/client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts
@@ -0,0 +1,24 @@
+import videojs from 'video.js'
+import { ProgressBarMarkerComponentOptions } from '../../types'
+
+const Component = videojs.getComponent('Component')
+
+export class ProgressBarMarkerComponent extends Component {
+  options_: ProgressBarMarkerComponentOptions & videojs.ComponentOptions
+
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  constructor (player: videojs.Player, options?: ProgressBarMarkerComponentOptions & videojs.ComponentOptions) {
+    super(player, options)
+  }
+
+  createEl () {
+    const left = (this.options_.timecode / this.player().duration()) * 100
+
+    return videojs.dom.createEl('span', {
+      className: 'vjs-marker',
+      style: `left: ${left}%`
+    }) as HTMLButtonElement
+  }
+}
+
+videojs.registerComponent('ProgressBarMarkerComponent', ProgressBarMarkerComponent)
diff --git a/client/src/assets/player/shared/control-bar/storyboard-plugin.ts b/client/src/assets/player/shared/control-bar/storyboard-plugin.ts
index 80c69b5f2..91d7f451e 100644
--- a/client/src/assets/player/shared/control-bar/storyboard-plugin.ts
+++ b/client/src/assets/player/shared/control-bar/storyboard-plugin.ts
@@ -141,7 +141,9 @@ class StoryboardPlugin extends Plugin {
       const ctop = Math.floor(position / columns) * -scaledHeight
 
       const bgSize = `${imgWidth * scaleFactor}px ${imgHeight * scaleFactor}px`
-      const topOffset = -scaledHeight - 60
+
+      const timeTooltip = this.player.el().querySelector('.vjs-time-tooltip')
+      const topOffset = -scaledHeight + parseInt(getComputedStyle(timeTooltip).top.replace('px', '')) - 20
 
       const previewHalfSize = Math.round(scaledWidth / 2)
       let left = seekBarRect.width * seekBarX - previewHalfSize
diff --git a/client/src/assets/player/shared/control-bar/time-tooltip.ts b/client/src/assets/player/shared/control-bar/time-tooltip.ts
new file mode 100644
index 000000000..2ed4f9acd
--- /dev/null
+++ b/client/src/assets/player/shared/control-bar/time-tooltip.ts
@@ -0,0 +1,20 @@
+import { timeToInt } from '@peertube/peertube-core-utils'
+import videojs, { VideoJsPlayer } from 'video.js'
+
+const TimeToolTip = videojs.getComponent('TimeTooltip') as any // FIXME: typings don't have write method
+
+class TimeTooltip extends TimeToolTip {
+
+  write (timecode: string) {
+    const player: VideoJsPlayer = this.player()
+
+    if (player.usingPlugin('chapters')) {
+      const chapterTitle = player.chapters().getChapter(timeToInt(timecode))
+      if (chapterTitle) return super.write(chapterTitle + '\r\n' + timecode)
+    }
+
+    return super.write(timecode)
+  }
+}
+
+videojs.registerComponent('TimeTooltip', TimeTooltip)