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 // FIXME: something weird with our path definition in tsconfig and typings
19 import { Player } from 'video.js'
21 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
22 videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
23 // Change Captions to Subtitles/CC
24 videojsUntyped.getComponent('CaptionsButton').prototype.controlText_ = 'Subtitles/CC'
25 // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
26 videojsUntyped.getComponent('CaptionsButton').prototype.label_ = ' '
28 function getVideojsOptions (options: {
30 playerElement: HTMLVideoElement
33 videoFiles: VideoFile[]
34 enableHotkeys: boolean
35 inactivityTimeout: number
38 startTime: number | string
40 videoCaptions: VideoJSCaption[]
48 userWatching?: UserWatching
50 const videojsOptions = {
51 // We don't use text track settings for now
52 textTrackSettings: false,
53 controls: options.controls !== undefined ? options.controls : true,
54 loop: options.loop !== undefined ? options.loop : false,
56 muted: options.muted !== undefined ? options.muted : undefined, // Undefined so the player knows it has to check the local storage
58 poster: options.poster,
60 inactivityTimeout: options.inactivityTimeout,
61 playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ],
64 autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
65 videoCaptions: options.videoCaptions,
66 videoFiles: options.videoFiles,
67 playerElement: options.playerElement,
68 videoViewUrl: options.videoViewUrl,
69 videoDuration: options.videoDuration,
70 startTime: options.startTime,
71 userWatching: options.userWatching,
72 subtitle: options.subtitle
76 children: getControlBarChildren(options)
80 if (options.enableHotkeys === true) {
81 Object.assign(videojsOptions.plugins, {
83 enableVolumeScroll: false,
84 enableModifiersForNumbers: false,
86 fullscreenKey: function (event: KeyboardEvent) {
87 // fullscreen with the f key or Ctrl+Enter
88 return event.key === 'f' || (event.ctrlKey && event.key === 'Enter')
91 seekStep: function (event: KeyboardEvent) {
92 // mimic VLC seek behavior, and default to 5 (original value is 5).
93 if (event.ctrlKey && event.altKey) {
95 } else if (event.ctrlKey) {
97 } else if (event.altKey) {
105 increasePlaybackRateKey: {
106 key: function (event: KeyboardEvent) {
107 return event.key === '>'
109 handler: function (player: Player) {
110 player.playbackRate((player.playbackRate() + 0.1).toFixed(2))
113 decreasePlaybackRateKey: {
114 key: function (event: KeyboardEvent) {
115 return event.key === '<'
117 handler: function (player: Player) {
118 player.playbackRate((player.playbackRate() - 0.1).toFixed(2))
122 key: function (event: KeyboardEvent) {
123 return event.key === '.'
125 handler: function (player: Player) {
127 // Calculate movement distance (assuming 30 fps)
129 player.currentTime(player.currentTime() + dist)
137 if (options.language && !isDefaultLocale(options.language)) {
138 Object.assign(videojsOptions, { language: options.language })
141 return videojsOptions
144 function getControlBarChildren (options: {
145 peertubeLink: boolean
146 theaterMode: boolean,
147 videoCaptions: VideoJSCaption[]
149 const settingEntries = []
152 settingEntries.push('playbackRateMenuButton')
153 if (options.videoCaptions.length !== 0) settingEntries.push('captionsButton')
154 settingEntries.push('resolutionMenuButton')
158 'currentTimeDisplay': {},
160 'durationDisplay': {},
163 'flexibleWidthSpacer': {},
168 'peerTubeLoadProgressBar': {},
169 'mouseTimeDisplay': {},
170 'playProgressBar': {}
176 'webTorrentButton': {},
185 entries: settingEntries
189 if (options.peertubeLink === true) {
190 Object.assign(children, {
191 'peerTubeLinkButton': {}
195 if (options.theaterMode === true) {
196 Object.assign(children, {
201 Object.assign(children, {
202 'fullscreenToggle': {}
208 function addContextMenu (player: any, videoEmbedUrl: string) {
209 player.contextmenuUI({
212 label: player.localize('Copy the video URL'),
213 listener: function () {
214 copyToClipboard(buildVideoLink())
218 label: player.localize('Copy the video URL at the current time'),
219 listener: function () {
220 const player = this as Player
221 copyToClipboard(buildVideoLink(player.currentTime()))
225 label: player.localize('Copy embed code'),
227 copyToClipboard(buildVideoEmbed(videoEmbedUrl))
231 label: player.localize('Copy magnet URI'),
232 listener: function () {
233 const player = this as Player
234 copyToClipboard(player.peertube().getCurrentVideoFile().magnetUri)
241 function loadLocaleInVideoJS (serverUrl: string, videojs: any, locale: string) {
242 const path = getLocalePath(serverUrl, locale)
243 // It is the default locale, nothing to translate
244 if (!path) return Promise.resolve(undefined)
248 if (loadLocaleInVideoJS.cache[path]) {
249 p = Promise.resolve(loadLocaleInVideoJS.cache[path])
251 p = fetch(path + '/player.json')
252 .then(res => res.json())
254 loadLocaleInVideoJS.cache[path] = json
258 console.error('Cannot get player translations', err)
263 const completeLocale = getCompleteLocale(locale)
264 return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
266 namespace loadLocaleInVideoJS {
267 export const cache: { [ path: string ]: any } = {}
270 function getServerTranslations (serverUrl: string, locale: string) {
271 const path = getLocalePath(serverUrl, locale)
272 // It is the default locale, nothing to translate
273 if (!path) return Promise.resolve(undefined)
275 return fetch(path + '/server.json')
276 .then(res => res.json())
278 console.error('Cannot get server translations', err)
283 // ############################################################################
286 getServerTranslations,
292 // ############################################################################
294 function getLocalePath (serverUrl: string, locale: string) {
295 const completeLocale = getCompleteLocale(locale)
297 if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
299 return serverUrl + '/client/locales/' + completeLocale