]>
Commit | Line | Data |
---|---|---|
c4207f97 C |
1 | import videojs from 'video.js' |
2 | import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs' | |
3 | import { PluginsManager } from '@root-helpers/plugins-manager' | |
4 | import { buildVideoLink, decorateVideoLink } from '@shared/core-utils' | |
5 | import { isDefaultLocale } from '@shared/core-utils/i18n' | |
6 | import { VideoFile } from '@shared/models' | |
7 | import { copyToClipboard } from '../../root-helpers/utils' | |
8 | import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager' | |
9 | import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder' | |
10 | import { segmentValidatorFactory } from './p2p-media-loader/segment-validator' | |
11 | import { getAverageBandwidthInStore } from './peertube-player-local-storage' | |
12 | import { | |
13 | NextPreviousVideoButtonOptions, | |
14 | P2PMediaLoaderPluginOptions, | |
15 | PeerTubeLinkButtonOptions, | |
16 | PlaylistPluginOptions, | |
17 | UserWatching, | |
18 | VideoJSCaption, | |
19 | VideoJSPluginOptions | |
20 | } from './peertube-videojs-typings' | |
21 | import { buildVideoOrPlaylistEmbed, getRtcConfig, isIOS, isSafari } from './utils' | |
ac5f679a | 22 | import { HybridLoaderSettings } from '@peertube/p2p-media-loader-core' |
c4207f97 C |
23 | |
24 | export type PlayerMode = 'webtorrent' | 'p2p-media-loader' | |
25 | ||
26 | export type WebtorrentOptions = { | |
27 | videoFiles: VideoFile[] | |
28 | } | |
29 | ||
30 | export type P2PMediaLoaderOptions = { | |
31 | playlistUrl: string | |
32 | segmentsSha256Url: string | |
33 | trackerAnnounce: string[] | |
34 | redundancyBaseUrls: string[] | |
35 | videoFiles: VideoFile[] | |
36 | } | |
37 | ||
38 | export interface CustomizationOptions { | |
39 | startTime: number | string | |
40 | stopTime: number | string | |
41 | ||
42 | controls?: boolean | |
43 | muted?: boolean | |
44 | loop?: boolean | |
45 | subtitle?: string | |
46 | resume?: string | |
47 | ||
48 | peertubeLink: boolean | |
49 | } | |
50 | ||
51 | export interface CommonOptions extends CustomizationOptions { | |
52 | playerElement: HTMLVideoElement | |
53 | onPlayerElementChange: (element: HTMLVideoElement) => void | |
54 | ||
55 | autoplay: boolean | |
56 | p2pEnabled: boolean | |
57 | ||
58 | nextVideo?: () => void | |
59 | hasNextVideo?: () => boolean | |
60 | ||
61 | previousVideo?: () => void | |
62 | hasPreviousVideo?: () => boolean | |
63 | ||
64 | playlist?: PlaylistPluginOptions | |
65 | ||
66 | videoDuration: number | |
67 | enableHotkeys: boolean | |
68 | inactivityTimeout: number | |
69 | poster: string | |
70 | ||
71 | theaterButton: boolean | |
72 | captions: boolean | |
73 | ||
74 | videoViewUrl: string | |
75 | embedUrl: string | |
76 | embedTitle: string | |
77 | ||
78 | isLive: boolean | |
79 | ||
80 | language?: string | |
81 | ||
82 | videoCaptions: VideoJSCaption[] | |
83 | ||
84 | videoUUID: string | |
85 | videoShortUUID: string | |
86 | ||
87 | userWatching?: UserWatching | |
88 | ||
89 | serverUrl: string | |
90 | ||
91 | errorNotifier: (message: string) => void | |
92 | } | |
93 | ||
94 | export type PeertubePlayerManagerOptions = { | |
95 | common: CommonOptions | |
96 | webtorrent: WebtorrentOptions | |
97 | p2pMediaLoader?: P2PMediaLoaderOptions | |
98 | ||
99 | pluginsManager: PluginsManager | |
100 | } | |
101 | ||
102 | export class PeertubePlayerOptionsBuilder { | |
103 | ||
104 | constructor ( | |
105 | private mode: PlayerMode, | |
106 | private options: PeertubePlayerManagerOptions, | |
107 | private p2pMediaLoaderModule?: any | |
108 | ) { | |
109 | ||
110 | } | |
111 | ||
112 | getVideojsOptions (alreadyPlayed: boolean): videojs.PlayerOptions { | |
113 | const commonOptions = this.options.common | |
114 | const isHLS = this.mode === 'p2p-media-loader' | |
115 | ||
116 | let autoplay = this.getAutoPlayValue(commonOptions.autoplay, alreadyPlayed) | |
117 | const html5 = { | |
118 | preloadTextTracks: false | |
119 | } | |
120 | ||
121 | const plugins: VideoJSPluginOptions = { | |
122 | peertube: { | |
123 | mode: this.mode, | |
124 | autoplay, // Use peertube plugin autoplay because we could get the file by webtorrent | |
125 | videoViewUrl: commonOptions.videoViewUrl, | |
126 | videoDuration: commonOptions.videoDuration, | |
127 | userWatching: commonOptions.userWatching, | |
128 | subtitle: commonOptions.subtitle, | |
129 | videoCaptions: commonOptions.videoCaptions, | |
130 | stopTime: commonOptions.stopTime, | |
131 | isLive: commonOptions.isLive, | |
132 | videoUUID: commonOptions.videoUUID | |
133 | } | |
134 | } | |
135 | ||
136 | if (commonOptions.playlist) { | |
137 | plugins.playlist = commonOptions.playlist | |
138 | } | |
139 | ||
140 | if (isHLS) { | |
141 | const { hlsjs } = this.addP2PMediaLoaderOptions(plugins) | |
142 | ||
143 | Object.assign(html5, hlsjs.html5) | |
144 | } | |
145 | ||
146 | if (this.mode === 'webtorrent') { | |
147 | this.addWebTorrentOptions(plugins, alreadyPlayed) | |
148 | ||
149 | // WebTorrent plugin handles autoplay, because we do some hackish stuff in there | |
150 | autoplay = false | |
151 | } | |
152 | ||
153 | const videojsOptions = { | |
154 | html5, | |
155 | ||
156 | // We don't use text track settings for now | |
157 | textTrackSettings: false as any, // FIXME: typings | |
158 | controls: commonOptions.controls !== undefined ? commonOptions.controls : true, | |
159 | loop: commonOptions.loop !== undefined ? commonOptions.loop : false, | |
160 | ||
161 | muted: commonOptions.muted !== undefined | |
162 | ? commonOptions.muted | |
163 | : undefined, // Undefined so the player knows it has to check the local storage | |
164 | ||
165 | autoplay: this.getAutoPlayValue(autoplay, alreadyPlayed), | |
166 | ||
167 | poster: commonOptions.poster, | |
168 | inactivityTimeout: commonOptions.inactivityTimeout, | |
169 | playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ], | |
170 | ||
171 | plugins, | |
172 | ||
173 | controlBar: { | |
174 | children: this.getControlBarChildren(this.mode, { | |
175 | videoShortUUID: commonOptions.videoShortUUID, | |
176 | p2pEnabled: commonOptions.p2pEnabled, | |
177 | ||
178 | captions: commonOptions.captions, | |
179 | peertubeLink: commonOptions.peertubeLink, | |
180 | theaterButton: commonOptions.theaterButton, | |
181 | ||
182 | nextVideo: commonOptions.nextVideo, | |
183 | hasNextVideo: commonOptions.hasNextVideo, | |
184 | ||
185 | previousVideo: commonOptions.previousVideo, | |
186 | hasPreviousVideo: commonOptions.hasPreviousVideo | |
187 | }) as any // FIXME: typings | |
188 | } | |
189 | } | |
190 | ||
191 | if (commonOptions.language && !isDefaultLocale(commonOptions.language)) { | |
192 | Object.assign(videojsOptions, { language: commonOptions.language }) | |
193 | } | |
194 | ||
195 | return videojsOptions | |
196 | } | |
197 | ||
198 | private addP2PMediaLoaderOptions (plugins: VideoJSPluginOptions) { | |
199 | const p2pMediaLoaderOptions = this.options.p2pMediaLoader | |
200 | const commonOptions = this.options.common | |
201 | ||
c4207f97 C |
202 | const redundancyUrlManager = new RedundancyUrlManager(this.options.p2pMediaLoader.redundancyBaseUrls) |
203 | ||
204 | const p2pMediaLoader: P2PMediaLoaderPluginOptions = { | |
205 | redundancyUrlManager, | |
206 | type: 'application/x-mpegURL', | |
207 | startTime: commonOptions.startTime, | |
208 | src: p2pMediaLoaderOptions.playlistUrl | |
209 | } | |
210 | ||
c4207f97 | 211 | const p2pMediaLoaderConfig: HlsJsEngineSettings = { |
ac5f679a | 212 | loader: this.getP2PMediaLoaderOptions(redundancyUrlManager), |
c4207f97 C |
213 | segments: { |
214 | swarmId: p2pMediaLoaderOptions.playlistUrl | |
215 | } | |
216 | } | |
217 | ||
218 | const hlsjs = { | |
219 | levelLabelHandler: (level: { height: number, width: number }) => { | |
220 | const resolution = Math.min(level.height || 0, level.width || 0) | |
221 | ||
222 | const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === resolution) | |
223 | // We don't have files for live videos | |
224 | if (!file) return level.height | |
225 | ||
226 | let label = file.resolution.label | |
227 | if (file.fps >= 50) label += file.fps | |
228 | ||
229 | return label | |
230 | }, | |
231 | html5: { | |
232 | hlsjsConfig: this.getHLSOptions(p2pMediaLoaderConfig) | |
233 | } | |
234 | } | |
235 | ||
236 | const toAssign = { p2pMediaLoader, hlsjs } | |
237 | Object.assign(plugins, toAssign) | |
238 | ||
239 | return toAssign | |
240 | } | |
241 | ||
ac5f679a C |
242 | private getP2PMediaLoaderOptions (redundancyUrlManager: RedundancyUrlManager): Partial<HybridLoaderSettings> { |
243 | let consumeOnly = false | |
244 | if ((navigator as any)?.connection?.type === 'cellular') { | |
245 | console.log('We are on a cellular connection: disabling seeding.') | |
246 | consumeOnly = true | |
247 | } | |
248 | ||
249 | const trackerAnnounce = this.options.p2pMediaLoader.trackerAnnounce | |
250 | .filter(t => t.startsWith('ws')) | |
251 | ||
252 | const specificLiveOrVODOptions = this.options.common.isLive | |
253 | ? { // Live | |
254 | requiredSegmentsPriority: 1 | |
255 | } | |
256 | : { // VOD | |
257 | requiredSegmentsPriority: 3, | |
258 | ||
259 | cachedSegmentExpiration: 86400000, | |
260 | cachedSegmentsCount: 100, | |
261 | ||
262 | httpDownloadMaxPriority: 9, | |
263 | httpDownloadProbability: 0.06, | |
264 | httpDownloadProbabilitySkipIfNoPeers: true, | |
265 | ||
266 | p2pDownloadMaxPriority: 50 | |
267 | } | |
268 | ||
269 | return { | |
270 | trackerAnnounce, | |
271 | segmentValidator: segmentValidatorFactory(this.options.p2pMediaLoader.segmentsSha256Url, this.options.common.isLive), | |
272 | rtcConfig: getRtcConfig(), | |
273 | simultaneousHttpDownloads: 1, | |
274 | segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager, 1), | |
275 | useP2P: this.options.common.p2pEnabled, | |
276 | consumeOnly, | |
277 | ||
278 | ...specificLiveOrVODOptions | |
279 | } | |
280 | } | |
281 | ||
c4207f97 C |
282 | private getHLSOptions (p2pMediaLoaderConfig: HlsJsEngineSettings) { |
283 | const base = { | |
284 | capLevelToPlayerSize: true, | |
285 | autoStartLoad: false, | |
286 | liveSyncDurationCount: 5, | |
287 | ||
288 | loader: new this.p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass() | |
289 | } | |
290 | ||
291 | const averageBandwidth = getAverageBandwidthInStore() | |
292 | if (!averageBandwidth) return base | |
293 | ||
294 | return { | |
295 | ...base, | |
296 | ||
297 | abrEwmaDefaultEstimate: averageBandwidth * 8, // We want bit/s | |
298 | startLevel: -1, | |
299 | testBandwidth: false, | |
300 | debug: false | |
301 | } | |
302 | } | |
303 | ||
304 | private addWebTorrentOptions (plugins: VideoJSPluginOptions, alreadyPlayed: boolean) { | |
305 | const commonOptions = this.options.common | |
306 | const webtorrentOptions = this.options.webtorrent | |
307 | const p2pMediaLoaderOptions = this.options.p2pMediaLoader | |
308 | ||
309 | const autoplay = this.getAutoPlayValue(commonOptions.autoplay, alreadyPlayed) === 'play' | |
310 | ||
311 | const webtorrent = { | |
312 | autoplay, | |
313 | ||
314 | playerRefusedP2P: commonOptions.p2pEnabled === false, | |
315 | videoDuration: commonOptions.videoDuration, | |
316 | playerElement: commonOptions.playerElement, | |
317 | ||
318 | videoFiles: webtorrentOptions.videoFiles.length !== 0 | |
319 | ? webtorrentOptions.videoFiles | |
320 | // The WebTorrent plugin won't be able to play these files, but it will fallback to HTTP mode | |
321 | : p2pMediaLoaderOptions?.videoFiles || [], | |
322 | ||
323 | startTime: commonOptions.startTime | |
324 | } | |
325 | ||
326 | Object.assign(plugins, { webtorrent }) | |
327 | } | |
328 | ||
329 | private getControlBarChildren (mode: PlayerMode, options: { | |
330 | p2pEnabled: boolean | |
331 | videoShortUUID: string | |
332 | ||
333 | peertubeLink: boolean | |
334 | theaterButton: boolean | |
335 | captions: boolean | |
336 | ||
337 | nextVideo?: () => void | |
338 | hasNextVideo?: () => boolean | |
339 | ||
340 | previousVideo?: () => void | |
341 | hasPreviousVideo?: () => boolean | |
342 | }) { | |
343 | const settingEntries = [] | |
344 | const loadProgressBar = mode === 'webtorrent' ? 'peerTubeLoadProgressBar' : 'loadProgressBar' | |
345 | ||
346 | // Keep an order | |
347 | settingEntries.push('playbackRateMenuButton') | |
348 | if (options.captions === true) settingEntries.push('captionsButton') | |
349 | settingEntries.push('resolutionMenuButton') | |
350 | ||
351 | const children = {} | |
352 | ||
353 | if (options.previousVideo) { | |
354 | const buttonOptions: NextPreviousVideoButtonOptions = { | |
355 | type: 'previous', | |
356 | handler: options.previousVideo, | |
357 | isDisabled: () => { | |
358 | if (!options.hasPreviousVideo) return false | |
359 | ||
360 | return !options.hasPreviousVideo() | |
361 | } | |
362 | } | |
363 | ||
364 | Object.assign(children, { | |
365 | previousVideoButton: buttonOptions | |
366 | }) | |
367 | } | |
368 | ||
369 | Object.assign(children, { playToggle: {} }) | |
370 | ||
371 | if (options.nextVideo) { | |
372 | const buttonOptions: NextPreviousVideoButtonOptions = { | |
373 | type: 'next', | |
374 | handler: options.nextVideo, | |
375 | isDisabled: () => { | |
376 | if (!options.hasNextVideo) return false | |
377 | ||
378 | return !options.hasNextVideo() | |
379 | } | |
380 | } | |
381 | ||
382 | Object.assign(children, { | |
383 | nextVideoButton: buttonOptions | |
384 | }) | |
385 | } | |
386 | ||
387 | Object.assign(children, { | |
388 | currentTimeDisplay: {}, | |
389 | timeDivider: {}, | |
390 | durationDisplay: {}, | |
391 | liveDisplay: {}, | |
392 | ||
393 | flexibleWidthSpacer: {}, | |
394 | progressControl: { | |
395 | children: { | |
396 | seekBar: { | |
397 | children: { | |
398 | [loadProgressBar]: {}, | |
399 | mouseTimeDisplay: {}, | |
400 | playProgressBar: {} | |
401 | } | |
402 | } | |
403 | } | |
404 | }, | |
405 | ||
406 | p2PInfoButton: { | |
407 | p2pEnabled: options.p2pEnabled | |
408 | }, | |
409 | ||
410 | muteToggle: {}, | |
411 | volumeControl: {}, | |
412 | ||
413 | settingsButton: { | |
414 | setup: { | |
415 | maxHeightOffset: 40 | |
416 | }, | |
417 | entries: settingEntries | |
418 | } | |
419 | }) | |
420 | ||
421 | if (options.peertubeLink === true) { | |
422 | Object.assign(children, { | |
423 | peerTubeLinkButton: { shortUUID: options.videoShortUUID } as PeerTubeLinkButtonOptions | |
424 | }) | |
425 | } | |
426 | ||
427 | if (options.theaterButton === true) { | |
428 | Object.assign(children, { | |
429 | theaterButton: {} | |
430 | }) | |
431 | } | |
432 | ||
433 | Object.assign(children, { | |
434 | fullscreenToggle: {} | |
435 | }) | |
436 | ||
437 | return children | |
438 | } | |
439 | ||
440 | private getAutoPlayValue (autoplay: any, alreadyPlayed: boolean) { | |
441 | if (autoplay !== true) return autoplay | |
442 | ||
443 | // On first play, disable autoplay to avoid issues | |
444 | // But if the player already played videos, we can safely autoplay next ones | |
445 | if (isIOS() || isSafari()) { | |
446 | return alreadyPlayed ? 'play' : false | |
447 | } | |
448 | ||
449 | return 'play' | |
450 | } | |
451 | ||
452 | getContextMenuOptions (player: videojs.Player, commonOptions: CommonOptions) { | |
453 | const content = () => { | |
454 | const isLoopEnabled = player.options_['loop'] | |
455 | ||
456 | const items = [ | |
457 | { | |
458 | icon: 'repeat', | |
459 | label: player.localize('Play in loop') + (isLoopEnabled ? '<span class="vjs-icon-tick-white"></span>' : ''), | |
460 | listener: function () { | |
461 | player.options_['loop'] = !isLoopEnabled | |
462 | } | |
463 | }, | |
464 | { | |
465 | label: player.localize('Copy the video URL'), | |
466 | listener: function () { | |
467 | copyToClipboard(buildVideoLink({ shortUUID: commonOptions.videoShortUUID })) | |
468 | } | |
469 | }, | |
470 | { | |
471 | label: player.localize('Copy the video URL at the current time'), | |
472 | listener: function (this: videojs.Player) { | |
473 | const url = buildVideoLink({ shortUUID: commonOptions.videoShortUUID }) | |
474 | ||
475 | copyToClipboard(decorateVideoLink({ url, startTime: this.currentTime() })) | |
476 | } | |
477 | }, | |
478 | { | |
479 | icon: 'code', | |
480 | label: player.localize('Copy embed code'), | |
481 | listener: () => { | |
482 | copyToClipboard(buildVideoOrPlaylistEmbed(commonOptions.embedUrl, commonOptions.embedTitle)) | |
483 | } | |
484 | } | |
485 | ] | |
486 | ||
487 | if (this.mode === 'webtorrent') { | |
488 | items.push({ | |
489 | label: player.localize('Copy magnet URI'), | |
490 | listener: function (this: videojs.Player) { | |
491 | copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri) | |
492 | } | |
493 | }) | |
494 | } | |
495 | ||
496 | items.push({ | |
497 | icon: 'info', | |
498 | label: player.localize('Stats for nerds'), | |
499 | listener: () => { | |
500 | player.stats().show() | |
501 | } | |
502 | }) | |
503 | ||
504 | return items.map(i => ({ | |
505 | ...i, | |
506 | label: `<span class="vjs-icon-${i.icon || 'link-2'}"></span>` + i.label | |
507 | })) | |
508 | } | |
509 | ||
510 | return { content } | |
511 | } | |
512 | } |