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 { UserWatching, 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[],
43 userWatching?: UserWatching
45 const videojsOptions = {
46 // We don't use text track settings for now
47 textTrackSettings: false,
48 controls: options.controls !== undefined ? options.controls : true,
49 muted: options.controls !== undefined ? options.muted : false,
50 loop: options.loop !== undefined ? options.loop : false,
51 poster: options.poster,
53 inactivityTimeout: options.inactivityTimeout,
54 playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ],
57 autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
58 videoCaptions: options.videoCaptions,
59 videoFiles: options.videoFiles,
60 playerElement: options.playerElement,
61 videoViewUrl: options.videoViewUrl,
62 videoDuration: options.videoDuration,
63 startTime: options.startTime,
64 userWatching: options.userWatching
68 children: getControlBarChildren(options)
72 if (options.enableHotkeys === true) {
73 Object.assign(videojsOptions.plugins, {
75 enableVolumeScroll: false,
76 enableModifiersForNumbers: false,
78 fullscreenKey: function (event: any) {
79 // fullscreen with the f key or Ctrl+Enter
80 return event.key === 'f' || (event.ctrlKey && event.key === 'Enter')
83 seekStep: function (event: any) {
84 // mimic VLC seek behavior, and default to 5 (original value is 5).
85 if (event.ctrlKey && event.altKey) {
87 } else if (event.ctrlKey) {
89 } else if (event.altKey) {
97 increasePlaybackRateKey: {
98 key: function (event: any) {
99 return event.key === '>'
101 handler: function (player: any) {
102 player.playbackRate((player.playbackRate() + 0.1).toFixed(2))
105 decreasePlaybackRateKey: {
106 key: function (event: any) {
107 return event.key === '<'
109 handler: function (player: any) {
110 player.playbackRate((player.playbackRate() - 0.1).toFixed(2))
114 key: function (event: any) {
115 return event.key === '.'
117 handler: function (player: any) {
119 // Calculate movement distance (assuming 30 fps)
121 player.currentTime(player.currentTime() + dist)
129 if (options.language && !isDefaultLocale(options.language)) {
130 Object.assign(videojsOptions, { language: options.language })
133 return videojsOptions
136 function getControlBarChildren (options: {
137 peertubeLink: boolean
138 theaterMode: boolean,
139 videoCaptions: VideoJSCaption[]
141 const settingEntries = []
144 settingEntries.push('playbackRateMenuButton')
145 if (options.videoCaptions.length !== 0) settingEntries.push('captionsButton')
146 settingEntries.push('resolutionMenuButton')
150 'currentTimeDisplay': {},
152 'durationDisplay': {},
155 'flexibleWidthSpacer': {},
160 'peerTubeLoadProgressBar': {},
161 'mouseTimeDisplay': {},
162 'playProgressBar': {}
168 'webTorrentButton': {},
177 entries: settingEntries
181 if (options.peertubeLink === true) {
182 Object.assign(children, {
183 'peerTubeLinkButton': {}
187 if (options.theaterMode === true) {
188 Object.assign(children, {
193 Object.assign(children, {
194 'fullscreenToggle': {}
200 function addContextMenu (player: any, videoEmbedUrl: string) {
201 player.contextmenuUI({
204 label: player.localize('Copy the video URL'),
205 listener: function () {
206 copyToClipboard(buildVideoLink())
210 label: player.localize('Copy the video URL at the current time'),
211 listener: function () {
213 copyToClipboard(buildVideoLink(player.currentTime()))
217 label: player.localize('Copy embed code'),
219 copyToClipboard(buildVideoEmbed(videoEmbedUrl))
223 label: player.localize('Copy magnet URI'),
224 listener: function () {
226 copyToClipboard(player.peertube().getCurrentVideoFile().magnetUri)
233 function loadLocaleInVideoJS (serverUrl: string, videojs: any, locale: string) {
234 const path = getLocalePath(serverUrl, locale)
235 // It is the default locale, nothing to translate
236 if (!path) return Promise.resolve(undefined)
240 if (loadLocaleInVideoJS.cache[path]) {
241 p = Promise.resolve(loadLocaleInVideoJS.cache[path])
243 p = fetch(path + '/player.json')
244 .then(res => res.json())
246 loadLocaleInVideoJS.cache[path] = json
251 const completeLocale = getCompleteLocale(locale)
252 return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
254 namespace loadLocaleInVideoJS {
255 export const cache: { [ path: string ]: any } = {}
258 function getServerTranslations (serverUrl: string, locale: string) {
259 const path = getLocalePath(serverUrl, locale)
260 // It is the default locale, nothing to translate
261 if (!path) return Promise.resolve(undefined)
263 return fetch(path + '/server.json')
264 .then(res => res.json())
267 // ############################################################################
270 getServerTranslations,
276 // ############################################################################
278 function getLocalePath (serverUrl: string, locale: string) {
279 const completeLocale = getCompleteLocale(locale)
281 if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
283 return serverUrl + '/client/locales/' + completeLocale