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 { 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'
21 function getVideojsOptions (options: {
23 playerElement: HTMLVideoElement,
25 videoDuration: number,
26 videoFiles: VideoFile[],
27 enableHotkeys: boolean,
28 inactivityTimeout: number,
29 peertubeLink: boolean,
37 const videojsOptions = {
38 controls: options.controls !== undefined ? options.controls : true,
39 muted: options.controls !== undefined ? options.muted : false,
40 loop: options.loop !== undefined ? options.loop : false,
41 poster: options.poster,
43 inactivityTimeout: options.inactivityTimeout,
44 playbackRates: [ 0.5, 1, 1.5, 2 ],
47 autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
48 videoFiles: options.videoFiles,
49 playerElement: options.playerElement,
50 videoViewUrl: options.videoViewUrl,
51 videoDuration: options.videoDuration,
52 startTime: options.startTime
56 children: getControlBarChildren(options)
60 if (options.enableHotkeys === true) {
61 Object.assign(videojsOptions.plugins, {
63 enableVolumeScroll: false,
64 enableModifiersForNumbers: false
72 function getControlBarChildren (options: {
78 'currentTimeDisplay': {},
80 'durationDisplay': {},
83 'flexibleWidthSpacer': {},
88 'peerTubeLoadProgressBar': {},
89 'mouseTimeDisplay': {},
96 'webTorrentButton': {},
106 'resolutionMenuButton',
107 'playbackRateMenuButton'
112 if (options.peertubeLink === true) {
113 Object.assign(children, {
114 'peerTubeLinkButton': {}
118 if (options.theaterMode === true) {
119 Object.assign(children, {
124 Object.assign(children, {
125 'fullscreenToggle': {}
131 function addContextMenu (player: any, videoEmbedUrl: string) {
132 player.contextmenuUI({
135 label: player.localize('Copy the video URL'),
136 listener: function () {
137 copyToClipboard(buildVideoLink())
141 label: player.localize('Copy the video URL at the current time'),
142 listener: function () {
144 copyToClipboard(buildVideoLink(player.currentTime()))
148 label: player.localize('Copy embed code'),
150 copyToClipboard(buildVideoEmbed(videoEmbedUrl))
154 label: player.localize('Copy magnet URI'),
155 listener: function () {
157 copyToClipboard(player.peertube().getCurrentVideoFile().magnetUri)
164 function loadLocale (serverUrl: string, videojs: any, locale: string) {
165 const completeLocale = getCompleteLocale(locale)
167 if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return Promise.resolve(undefined)
169 return fetch(serverUrl + '/client/locales/' + completeLocale + '/player.json')
170 .then(res => res.json())
171 .then(json => videojs.addLanguage(getShortLocale(completeLocale), json))