import 'videojs-hotkeys'
import 'videojs-dock'
-import 'videojs-contextmenu'
import 'videojs-contextmenu-ui'
import './peertube-link-button'
import './resolution-menu-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,
inactivityTimeout: number,
peertubeLink: boolean,
poster: string,
- startTime: number
- theaterMode: boolean
+ startTime: number | string
+ theaterMode: boolean,
+ videoCaptions: VideoJSCaption[],
+ language?: string,
+ controls?: boolean,
+ muted?: boolean,
+ loop?: boolean
}) {
const videojsOptions = {
- controls: true,
+ // 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,
poster: options.poster,
autoplay: false,
inactivityTimeout: options.inactivityTimeout,
- playbackRates: [ 0.5, 1, 1.5, 2 ],
+ playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ],
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,
if (options.enableHotkeys === true) {
Object.assign(videojsOptions.plugins, {
hotkeys: {
- enableVolumeScroll: false
+ enableVolumeScroll: false,
+ enableModifiersForNumbers: false,
+ customKeys: {
+ increasePlaybackRateKey: {
+ key: function (event) {
+ return event.key === '>'
+ },
+ handler: function (player) {
+ player.playbackRate((player.playbackRate() + 0.1).toFixed(2))
+ }
+ },
+ decreasePlaybackRateKey: {
+ key: function (event) {
+ return event.key === '<'
+ },
+ handler: function (player) {
+ player.playbackRate((player.playbackRate() - 0.1).toFixed(2))
+ }
+ }
+ }
}
})
}
+ if (options.language && !isDefaultLocale(options.language)) {
+ Object.assign(videojsOptions, { language: options.language })
+ }
+
return videojsOptions
}
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': {},
setup: {
maxHeightOffset: 40
},
- entries: [
- 'resolutionMenuButton',
- 'playbackRateMenuButton'
- ]
+ entries: settingEntries
}
}
listener: () => {
copyToClipboard(buildVideoEmbed(videoEmbedUrl))
}
+ },
+ {
+ label: player.localize('Copy magnet URI'),
+ listener: function () {
+ const player = this
+ copyToClipboard(player.peertube().getCurrentVideoFile().magnetUri)
+ }
}
]
})
}
-function loadLocale (serverUrl: string, videojs: any, locale: string) {
+function loadLocaleInVideoJS (serverUrl: string, videojs: any, locale: string) {
+ const path = getLocalePath(serverUrl, locale)
+ // It is the default locale, nothing to translate
+ if (!path) return Promise.resolve(undefined)
+
+ let p: Promise<any>
+
+ if (loadLocaleInVideoJS.cache[path]) {
+ p = Promise.resolve(loadLocaleInVideoJS.cache[path])
+ } else {
+ p = fetch(path + '/player.json')
+ .then(res => res.json())
+ .then(json => {
+ loadLocaleInVideoJS.cache[path] = json
+ return json
+ })
+ }
+
const completeLocale = getCompleteLocale(locale)
+ return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
+}
+namespace loadLocaleInVideoJS {
+ export const cache: { [ path: string ]: any } = {}
+}
- if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return Promise.resolve(undefined)
+function getServerTranslations (serverUrl: string, locale: string) {
+ const path = getLocalePath(serverUrl, locale)
+ // It is the default locale, nothing to translate
+ if (!path) return Promise.resolve(undefined)
- return fetch(serverUrl + '/client/locales/' + completeLocale + '/player.json')
+ return fetch(path + '/server.json')
.then(res => res.json())
- .then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
}
+// ############################################################################
+
export {
- loadLocale,
+ getServerTranslations,
+ loadLocaleInVideoJS,
getVideojsOptions,
addContextMenu
}
+
+// ############################################################################
+
+function getLocalePath (serverUrl: string, locale: string) {
+ const completeLocale = getCompleteLocale(locale)
+
+ if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
+
+ return serverUrl + '/client/locales/' + completeLocale
+}