1 import { VideoFile } from '../../../../shared/models/videos'
3 import 'videojs-hotkeys'
5 import 'videojs-contextmenu'
6 import 'videojs-contextmenu-ui'
7 import './peertube-link-button'
8 import './resolution-menu-button'
9 import './settings-menu-button'
10 import './webtorrent-info-button'
11 import './peertube-videojs-plugin'
12 import './peertube-load-progress-bar'
13 import './theater-button'
14 import { VideoJSCaption, videojsUntyped } from './peertube-videojs-typings'
15 import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
16 import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
18 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
19 videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
20 // Change Captions to Subtitles/CC
21 videojsUntyped.getComponent('CaptionsButton').prototype.controlText_ = 'Subtitles/CC'
22 // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
23 videojsUntyped.getComponent('CaptionsButton').prototype.label_ = ' '
25 function getVideojsOptions (options: {
27 playerElement: HTMLVideoElement,
29 videoDuration: number,
30 videoFiles: VideoFile[],
31 enableHotkeys: boolean,
32 inactivityTimeout: number,
33 peertubeLink: boolean,
35 startTime: number | string
37 videoCaptions: VideoJSCaption[],
43 const videojsOptions = {
44 // We don't use text track settings for now
45 textTrackSettings: false,
46 controls: options.controls !== undefined ? options.controls : true,
47 muted: options.controls !== undefined ? options.muted : false,
48 loop: options.loop !== undefined ? options.loop : false,
49 poster: options.poster,
51 inactivityTimeout: options.inactivityTimeout,
52 playbackRates: [ 0.5, 1, 1.5, 2 ],
55 autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
56 videoCaptions: options.videoCaptions,
57 videoFiles: options.videoFiles,
58 playerElement: options.playerElement,
59 videoViewUrl: options.videoViewUrl,
60 videoDuration: options.videoDuration,
61 startTime: options.startTime
65 children: getControlBarChildren(options)
69 if (options.enableHotkeys === true) {
70 Object.assign(videojsOptions.plugins, {
72 enableVolumeScroll: false,
73 enableModifiersForNumbers: false
78 if (options.language && !isDefaultLocale(options.language)) {
79 Object.assign(videojsOptions, { language: options.language })
85 function getControlBarChildren (options: {
88 videoCaptions: VideoJSCaption[]
90 const settingEntries = []
93 settingEntries.push('playbackRateMenuButton')
94 if (options.videoCaptions.length !== 0) settingEntries.push('captionsButton')
95 settingEntries.push('resolutionMenuButton')
99 'currentTimeDisplay': {},
101 'durationDisplay': {},
104 'flexibleWidthSpacer': {},
109 'peerTubeLoadProgressBar': {},
110 'mouseTimeDisplay': {},
111 'playProgressBar': {}
117 'webTorrentButton': {},
126 entries: settingEntries
130 if (options.peertubeLink === true) {
131 Object.assign(children, {
132 'peerTubeLinkButton': {}
136 if (options.theaterMode === true) {
137 Object.assign(children, {
142 Object.assign(children, {
143 'fullscreenToggle': {}
149 function addContextMenu (player: any, videoEmbedUrl: string) {
150 player.contextmenuUI({
153 label: player.localize('Copy the video URL'),
154 listener: function () {
155 copyToClipboard(buildVideoLink())
159 label: player.localize('Copy the video URL at the current time'),
160 listener: function () {
162 copyToClipboard(buildVideoLink(player.currentTime()))
166 label: player.localize('Copy embed code'),
168 copyToClipboard(buildVideoEmbed(videoEmbedUrl))
172 label: player.localize('Copy magnet URI'),
173 listener: function () {
175 copyToClipboard(player.peertube().getCurrentVideoFile().magnetUri)
182 function loadLocaleInVideoJS (serverUrl: string, videojs: any, locale: string) {
183 const path = getLocalePath(serverUrl, locale)
184 // It is the default locale, nothing to translate
185 if (!path) return Promise.resolve(undefined)
189 if (loadLocaleInVideoJS.cache[path]) {
190 p = Promise.resolve(loadLocaleInVideoJS.cache[path])
192 p = fetch(path + '/player.json')
193 .then(res => res.json())
195 loadLocaleInVideoJS.cache[path] = json
200 const completeLocale = getCompleteLocale(locale)
201 return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
203 namespace loadLocaleInVideoJS {
204 export const cache: { [ path: string ]: any } = {}
207 function getServerTranslations (serverUrl: string, locale: string) {
208 const path = getLocalePath(serverUrl, locale)
209 // It is the default locale, nothing to translate
210 if (!path) return Promise.resolve(undefined)
212 return fetch(path + '/server.json')
213 .then(res => res.json())
216 // ############################################################################
219 getServerTranslations,
225 // ############################################################################
227 function getLocalePath (serverUrl: string, locale: string) {
228 const completeLocale = getCompleteLocale(locale)
230 if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
232 return serverUrl + '/client/locales/' + completeLocale