From 16f7022b06fb76c0b00c23c970bc8df605b0ec63 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 13 Jul 2018 18:21:19 +0200 Subject: Handle subtitles in player --- client/src/assets/player/peertube-player.ts | 25 ++++++++++++++++------ .../src/assets/player/peertube-videojs-plugin.ts | 20 +++++++++++++++-- .../src/assets/player/peertube-videojs-typings.ts | 12 +++++++++-- client/src/assets/player/settings-menu-item.ts | 2 ++ 4 files changed, 49 insertions(+), 10 deletions(-) (limited to 'client/src/assets/player') 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() -- cgit v1.2.3