1 import { VideoFile } from '../../../../shared/models/videos'
3 import 'videojs-hotkeys'
5 import 'videojs-contextmenu-ui'
6 import './peertube-link-button'
7 import './resolution-menu-button'
8 import './settings-menu-button'
9 import './webtorrent-info-button'
10 import './peertube-videojs-plugin'
11 import './peertube-load-progress-bar'
12 import './theater-button'
13 import { VideoJSCaption, videojsUntyped } from './peertube-videojs-typings'
14 import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
15 import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
17 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
18 videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
19 // Change Captions to Subtitles/CC
20 videojsUntyped.getComponent('CaptionsButton').prototype.controlText_ = 'Subtitles/CC'
21 // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
22 videojsUntyped.getComponent('CaptionsButton').prototype.label_ = ' '
24 function getVideojsOptions (options: {
26 playerElement: HTMLVideoElement,
28 videoDuration: number,
29 videoFiles: VideoFile[],
30 enableHotkeys: boolean,
31 inactivityTimeout: number,
32 peertubeLink: boolean,
34 startTime: number | string
36 videoCaptions: VideoJSCaption[],
42 const videojsOptions = {
43 // We don't use text track settings for now
44 textTrackSettings: false,
45 controls: options.controls !== undefined ? options.controls : true,
46 muted: options.controls !== undefined ? options.muted : false,
47 loop: options.loop !== undefined ? options.loop : false,
48 poster: options.poster,
50 inactivityTimeout: options.inactivityTimeout,
51 playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ],
54 autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
55 videoCaptions: options.videoCaptions,
56 videoFiles: options.videoFiles,
57 playerElement: options.playerElement,
58 videoViewUrl: options.videoViewUrl,
59 videoDuration: options.videoDuration,
60 startTime: options.startTime
64 children: getControlBarChildren(options)
68 if (options.enableHotkeys === true) {
69 Object.assign(videojsOptions.plugins, {
71 enableVolumeScroll: false,
72 enableModifiersForNumbers: false,
74 increasePlaybackRateKey: {
75 key: function (event) {
77 return event.which === 51
79 handler: function (player, options, event) {
80 player.playbackRate(player.playbackRate() + 0.1)
83 decreasePlaybackRateKey: {
84 key: function (event) {
86 return event.which === 50
88 handler: function (player, options, event) {
89 player.playbackRate(player.playbackRate() - 0.1)
97 if (options.language && !isDefaultLocale(options.language)) {
98 Object.assign(videojsOptions, { language: options.language })
101 return videojsOptions
104 function getControlBarChildren (options: {
105 peertubeLink: boolean
106 theaterMode: boolean,
107 videoCaptions: VideoJSCaption[]
109 const settingEntries = []
112 settingEntries.push('playbackRateMenuButton')
113 if (options.videoCaptions.length !== 0) settingEntries.push('captionsButton')
114 settingEntries.push('resolutionMenuButton')
118 'currentTimeDisplay': {},
120 'durationDisplay': {},
123 'flexibleWidthSpacer': {},
128 'peerTubeLoadProgressBar': {},
129 'mouseTimeDisplay': {},
130 'playProgressBar': {}
136 'webTorrentButton': {},
145 entries: settingEntries
149 if (options.peertubeLink === true) {
150 Object.assign(children, {
151 'peerTubeLinkButton': {}
155 if (options.theaterMode === true) {
156 Object.assign(children, {
161 Object.assign(children, {
162 'fullscreenToggle': {}
168 function addContextMenu (player: any, videoEmbedUrl: string) {
169 player.contextmenuUI({
172 label: player.localize('Copy the video URL'),
173 listener: function () {
174 copyToClipboard(buildVideoLink())
178 label: player.localize('Copy the video URL at the current time'),
179 listener: function () {
181 copyToClipboard(buildVideoLink(player.currentTime()))
185 label: player.localize('Copy embed code'),
187 copyToClipboard(buildVideoEmbed(videoEmbedUrl))
191 label: player.localize('Copy magnet URI'),
192 listener: function () {
194 copyToClipboard(player.peertube().getCurrentVideoFile().magnetUri)
201 function loadLocaleInVideoJS (serverUrl: string, videojs: any, locale: string) {
202 const path = getLocalePath(serverUrl, locale)
203 // It is the default locale, nothing to translate
204 if (!path) return Promise.resolve(undefined)
208 if (loadLocaleInVideoJS.cache[path]) {
209 p = Promise.resolve(loadLocaleInVideoJS.cache[path])
211 p = fetch(path + '/player.json')
212 .then(res => res.json())
214 loadLocaleInVideoJS.cache[path] = json
219 const completeLocale = getCompleteLocale(locale)
220 return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
222 namespace loadLocaleInVideoJS {
223 export const cache: { [ path: string ]: any } = {}
226 function getServerTranslations (serverUrl: string, locale: string) {
227 const path = getLocalePath(serverUrl, locale)
228 // It is the default locale, nothing to translate
229 if (!path) return Promise.resolve(undefined)
231 return fetch(path + '/server.json')
232 .then(res => res.json())
235 // ############################################################################
238 getServerTranslations,
244 // ############################################################################
246 function getLocalePath (serverUrl: string, locale: string) {
247 const completeLocale = getCompleteLocale(locale)
249 if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
251 return serverUrl + '/client/locales/' + completeLocale