Handle subtitles in player

4 files changed, 49 insertions, 10 deletions

diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
index baae740fe..bf02ce91c 100644
--- a/client/src/assets/player/peertube-player.ts
+++ b/client/src/assets/player/peertube-player.ts
@@ -11,12 +11,16 @@ import './webtorrent-info-button'
 import './peertube-videojs-plugin'
 import './peertube-load-progress-bar'
 import './theater-button'
-import { videojsUntyped } from './peertube-videojs-typings'
+import { VideoJSCaption, videojsUntyped } from './peertube-videojs-typings'
 import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
 import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
 videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
+// Change Captions to Subtitles/CC
+videojsUntyped.getComponent('CaptionsButton').prototype.controlText_ = 'Subtitles/CC'
+// We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
+videojsUntyped.getComponent('CaptionsButton').prototype.label_ = ' '
 
 function getVideojsOptions (options: {
   autoplay: boolean,
@@ -30,11 +34,14 @@ function getVideojsOptions (options: {
   poster: string,
   startTime: number
   theaterMode: boolean,
+  videoCaptions: VideoJSCaption[],
   controls?: boolean,
   muted?: boolean,
   loop?: boolean
 }) {
   const videojsOptions = {
+    // We don't use text track settings for now
+    textTrackSettings: false,
     controls: options.controls !== undefined ? options.controls : true,
     muted: options.controls !== undefined ? options.muted : false,
     loop: options.loop !== undefined ? options.loop : false,
@@ -45,6 +52,7 @@ function getVideojsOptions (options: {
     plugins: {
       peertube: {
         autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
+        videoCaptions: options.videoCaptions,
         videoFiles: options.videoFiles,
         playerElement: options.playerElement,
         videoViewUrl: options.videoViewUrl,
@@ -71,8 +79,16 @@ function getVideojsOptions (options: {
 
 function getControlBarChildren (options: {
   peertubeLink: boolean
-  theaterMode: boolean
+  theaterMode: boolean,
+  videoCaptions: VideoJSCaption[]
 }) {
+  const settingEntries = []
+
+  // Keep an order
+  settingEntries.push('playbackRateMenuButton')
+  if (options.videoCaptions.length !== 0) settingEntries.push('captionsButton')
+  settingEntries.push('resolutionMenuButton')
+
   const children = {
     'playToggle': {},
     'currentTimeDisplay': {},
@@ -102,10 +118,7 @@ function getControlBarChildren (options: {
       setup: {
         maxHeightOffset: 40
       },
-      entries: [
-        'resolutionMenuButton',
-        'playbackRateMenuButton'
-      ]
+      entries: settingEntries
     }
   }
 
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 57c894ee6..3f6fc4cc6 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -3,7 +3,7 @@ import * as WebTorrent from 'webtorrent'
 import { VideoFile } from '../../../../shared/models/videos/video.model'
 import { renderVideo } from './video-renderer'
 import './settings-menu-button'
-import { PeertubePluginOptions, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import { PeertubePluginOptions, VideoJSCaption, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
 import { isMobile, videoFileMaxByResolution, videoFileMinByResolution } from './utils'
 import * as CacheChunkStore from 'cache-chunk-store'
 import { PeertubeChunkStore } from './peertube-chunk-store'
@@ -54,6 +54,7 @@ class PeerTubePlugin extends Plugin {
   private player: any
   private currentVideoFile: VideoFile
   private torrent: WebTorrent.Torrent
+  private videoCaptions: VideoJSCaption[]
   private renderer
   private fakeRenderer
   private autoResolution = true
@@ -79,6 +80,7 @@ class PeerTubePlugin extends Plugin {
     this.videoFiles = options.videoFiles
     this.videoViewUrl = options.videoViewUrl
     this.videoDuration = options.videoDuration
+    this.videoCaptions = options.videoCaptions
 
     this.savePlayerSrcFunction = this.player.src
     // Hack to "simulate" src link in video.js >= 6
@@ -421,6 +423,8 @@ class PeerTubePlugin extends Plugin {
 
     this.initSmoothProgressBar()
 
+    this.initCaptions()
+
     this.alterInactivity()
 
     if (this.autoplay === true) {
@@ -581,7 +585,7 @@ class PeerTubePlugin extends Plugin {
       this.player.options_.inactivityTimeout = 0
     }
     const enableInactivity = () => {
-      this.player.options_.inactivityTimeout = saveInactivityTimeout
+      // this.player.options_.inactivityTimeout = saveInactivityTimeout
     }
 
     const settingsDialog = this.player.children_.find(c => c.name_ === 'SettingsDialog')
@@ -611,6 +615,18 @@ class PeerTubePlugin extends Plugin {
     }
   }
 
+  private initCaptions () {
+    for (const caption of this.videoCaptions) {
+      this.player.addRemoteTextTrack({
+        kind: 'captions',
+        label: caption.label,
+        language: caption.language,
+        id: caption.language,
+        src: caption.src
+      }, false)
+    }
+  }
+
   // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
   private initSmoothProgressBar () {
     const SeekBar = videojsUntyped.getComponent('SeekBar')
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index 50d6039ea..9c0299237 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -16,13 +16,20 @@ interface VideoJSComponentInterface {
   registerComponent (name: string, obj: any)
 }
 
+type VideoJSCaption = {
+  label: string
+  language: string
+  src: string
+}
+
 type PeertubePluginOptions = {
   videoFiles: VideoFile[]
   playerElement: HTMLVideoElement
   videoViewUrl: string
   videoDuration: number
   startTime: number
-  autoplay: boolean
+  autoplay: boolean,
+  videoCaptions: VideoJSCaption[]
 }
 
 // videojs typings don't have some method we need
@@ -31,5 +38,6 @@ const videojsUntyped = videojs as any
 export {
   VideoJSComponentInterface,
   PeertubePluginOptions,
-  videojsUntyped
+  videojsUntyped,
+  VideoJSCaption
 }
diff --git a/client/src/assets/player/settings-menu-item.ts b/client/src/assets/player/settings-menu-item.ts
index 88985e1ae..6e2224e20 100644
--- a/client/src/assets/player/settings-menu-item.ts
+++ b/client/src/assets/player/settings-menu-item.ts
@@ -32,6 +32,8 @@ class SettingsMenuItem extends MenuItem {
       throw new Error(`Component ${subMenuName} does not exist`)
     }
     this.subMenu = new SubMenuComponent(this.player(), options, menuButton, this)
+    const subMenuClass = this.subMenu.buildCSSClass().split(' ')[0]
+    this.settingsSubMenuEl_.className += ' ' + subMenuClass
 
     this.eventHandlers()