aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets/player/peertube-player.ts
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-02-11 11:52:34 +0100
committerChocobozzz <me@florianbigard.com>2019-02-11 11:52:34 +0100
commit88108880bbdba473cfe36ecbebc1c3c4f972e102 (patch)
treeb242efb3b4f0d7e49d88f2d1f2063b5b3b0489c0 /client/src/assets/player/peertube-player.ts
parent53a94c7cfa8368da4cd248d65df8346905938f0c (diff)
parent9b712a2017e4ab3cf12cd6bd58278905520159d0 (diff)
downloadPeerTube-88108880bbdba473cfe36ecbebc1c3c4f972e102.tar.gz
PeerTube-88108880bbdba473cfe36ecbebc1c3c4f972e102.tar.zst
PeerTube-88108880bbdba473cfe36ecbebc1c3c4f972e102.zip
Merge branch 'develop' into pr/1217
Diffstat (limited to 'client/src/assets/player/peertube-player.ts')
-rw-r--r--client/src/assets/player/peertube-player.ts284
1 files changed, 0 insertions, 284 deletions
diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
deleted file mode 100644
index 792662b6c..000000000
--- a/client/src/assets/player/peertube-player.ts
+++ /dev/null
@@ -1,284 +0,0 @@
1import { VideoFile } from '../../../../shared/models/videos'
2
3import 'videojs-hotkeys'
4import 'videojs-dock'
5import 'videojs-contextmenu-ui'
6import './peertube-link-button'
7import './resolution-menu-button'
8import './settings-menu-button'
9import './webtorrent-info-button'
10import './peertube-videojs-plugin'
11import './peertube-load-progress-bar'
12import './theater-button'
13import { UserWatching, VideoJSCaption, videojsUntyped } from './peertube-videojs-typings'
14import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
15import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
16
17// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
18videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
19// Change Captions to Subtitles/CC
20videojsUntyped.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)
22videojsUntyped.getComponent('CaptionsButton').prototype.label_ = ' '
23
24function getVideojsOptions (options: {
25 autoplay: boolean,
26 playerElement: HTMLVideoElement,
27 videoViewUrl: string,
28 videoDuration: number,
29 videoFiles: VideoFile[],
30 enableHotkeys: boolean,
31 inactivityTimeout: number,
32 peertubeLink: boolean,
33 poster: string,
34 startTime: number | string
35 theaterMode: boolean,
36 videoCaptions: VideoJSCaption[],
37
38 language?: string,
39 controls?: boolean,
40 muted?: boolean,
41 loop?: boolean
42
43 userWatching?: UserWatching
44}) {
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,
52 autoplay: false,
53 inactivityTimeout: options.inactivityTimeout,
54 playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ],
55 plugins: {
56 peertube: {
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
65 }
66 },
67 controlBar: {
68 children: getControlBarChildren(options)
69 }
70 }
71
72 if (options.enableHotkeys === true) {
73 Object.assign(videojsOptions.plugins, {
74 hotkeys: {
75 enableVolumeScroll: false,
76 enableModifiersForNumbers: false,
77
78 fullscreenKey: function (event) {
79 // fullscreen with the f key or Ctrl+Enter
80 return event.key === 'f' || (event.ctrlKey && event.key === 'Enter')
81 },
82
83 seekStep: function (event) {
84 // mimic VLC seek behavior, and default to 5 (original value is 5).
85 if (event.ctrlKey && event.altKey) {
86 return 5 * 60
87 } else if (event.ctrlKey) {
88 return 60
89 } else if (event.altKey) {
90 return 10
91 } else {
92 return 5
93 }
94 },
95
96 customKeys: {
97 increasePlaybackRateKey: {
98 key: function (event) {
99 return event.key === '>'
100 },
101 handler: function (player) {
102 player.playbackRate((player.playbackRate() + 0.1).toFixed(2))
103 }
104 },
105 decreasePlaybackRateKey: {
106 key: function (event) {
107 return event.key === '<'
108 },
109 handler: function (player) {
110 player.playbackRate((player.playbackRate() - 0.1).toFixed(2))
111 }
112 },
113 frameByFrame: {
114 key: function (event) {
115 return event.key === '.'
116 },
117 handler: function (player, options, event) {
118 player.pause()
119 // Calculate movement distance (assuming 30 fps)
120 const dist = 1 / 30
121 player.currentTime(player.currentTime() + dist)
122 }
123 }
124 }
125 }
126 })
127 }
128
129 if (options.language && !isDefaultLocale(options.language)) {
130 Object.assign(videojsOptions, { language: options.language })
131 }
132
133 return videojsOptions
134}
135
136function getControlBarChildren (options: {
137 peertubeLink: boolean
138 theaterMode: boolean,
139 videoCaptions: VideoJSCaption[]
140}) {
141 const settingEntries = []
142
143 // Keep an order
144 settingEntries.push('playbackRateMenuButton')
145 if (options.videoCaptions.length !== 0) settingEntries.push('captionsButton')
146 settingEntries.push('resolutionMenuButton')
147
148 const children = {
149 'playToggle': {},
150 'currentTimeDisplay': {},
151 'timeDivider': {},
152 'durationDisplay': {},
153 'liveDisplay': {},
154
155 'flexibleWidthSpacer': {},
156 'progressControl': {
157 children: {
158 'seekBar': {
159 children: {
160 'peerTubeLoadProgressBar': {},
161 'mouseTimeDisplay': {},
162 'playProgressBar': {}
163 }
164 }
165 }
166 },
167
168 'webTorrentButton': {},
169
170 'muteToggle': {},
171 'volumeControl': {},
172
173 'settingsButton': {
174 setup: {
175 maxHeightOffset: 40
176 },
177 entries: settingEntries
178 }
179 }
180
181 if (options.peertubeLink === true) {
182 Object.assign(children, {
183 'peerTubeLinkButton': {}
184 })
185 }
186
187 if (options.theaterMode === true) {
188 Object.assign(children, {
189 'theaterButton': {}
190 })
191 }
192
193 Object.assign(children, {
194 'fullscreenToggle': {}
195 })
196
197 return children
198}
199
200function addContextMenu (player: any, videoEmbedUrl: string) {
201 player.contextmenuUI({
202 content: [
203 {
204 label: player.localize('Copy the video URL'),
205 listener: function () {
206 copyToClipboard(buildVideoLink())
207 }
208 },
209 {
210 label: player.localize('Copy the video URL at the current time'),
211 listener: function () {
212 const player = this
213 copyToClipboard(buildVideoLink(player.currentTime()))
214 }
215 },
216 {
217 label: player.localize('Copy embed code'),
218 listener: () => {
219 copyToClipboard(buildVideoEmbed(videoEmbedUrl))
220 }
221 },
222 {
223 label: player.localize('Copy magnet URI'),
224 listener: function () {
225 const player = this
226 copyToClipboard(player.peertube().getCurrentVideoFile().magnetUri)
227 }
228 }
229 ]
230 })
231}
232
233function 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)
237
238 let p: Promise<any>
239
240 if (loadLocaleInVideoJS.cache[path]) {
241 p = Promise.resolve(loadLocaleInVideoJS.cache[path])
242 } else {
243 p = fetch(path + '/player.json')
244 .then(res => res.json())
245 .then(json => {
246 loadLocaleInVideoJS.cache[path] = json
247 return json
248 })
249 }
250
251 const completeLocale = getCompleteLocale(locale)
252 return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
253}
254namespace loadLocaleInVideoJS {
255 export const cache: { [ path: string ]: any } = {}
256}
257
258function 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)
262
263 return fetch(path + '/server.json')
264 .then(res => res.json())
265}
266
267// ############################################################################
268
269export {
270 getServerTranslations,
271 loadLocaleInVideoJS,
272 getVideojsOptions,
273 addContextMenu
274}
275
276// ############################################################################
277
278function getLocalePath (serverUrl: string, locale: string) {
279 const completeLocale = getCompleteLocale(locale)
280
281 if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
282
283 return serverUrl + '/client/locales/' + completeLocale
284}