aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets/player/peertube-player-manager.ts
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/assets/player/peertube-player-manager.ts')
-rw-r--r--client/src/assets/player/peertube-player-manager.ts602
1 files changed, 80 insertions, 522 deletions
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index b9a289aa0..2ef42a961 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -24,28 +24,12 @@ import './mobile/peertube-mobile-plugin'
24import './mobile/peertube-mobile-buttons' 24import './mobile/peertube-mobile-buttons'
25import './hotkeys/peertube-hotkeys-plugin' 25import './hotkeys/peertube-hotkeys-plugin'
26import videojs from 'video.js' 26import videojs from 'video.js'
27import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs'
28import { PluginsManager } from '@root-helpers/plugins-manager' 27import { PluginsManager } from '@root-helpers/plugins-manager'
29import { buildVideoLink, decorateVideoLink } from '@shared/core-utils' 28import { saveAverageBandwidth } from './peertube-player-local-storage'
30import { isDefaultLocale } from '@shared/core-utils/i18n' 29import { CommonOptions, PeertubePlayerManagerOptions, PeertubePlayerOptionsBuilder, PlayerMode } from './peertube-player-options-builder'
31import { VideoFile } from '@shared/models' 30import { PlayerNetworkInfo } from './peertube-videojs-typings'
32import { copyToClipboard } from '../../root-helpers/utils'
33import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
34import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
35import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
36import { getAverageBandwidthInStore, saveAverageBandwidth } from './peertube-player-local-storage'
37import {
38 NextPreviousVideoButtonOptions,
39 P2PMediaLoaderPluginOptions,
40 PeerTubeLinkButtonOptions,
41 PlayerNetworkInfo,
42 PlaylistPluginOptions,
43 UserWatching,
44 VideoJSCaption,
45 VideoJSPluginOptions
46} from './peertube-videojs-typings'
47import { TranslationsManager } from './translations-manager' 31import { TranslationsManager } from './translations-manager'
48import { buildVideoOrPlaylistEmbed, getRtcConfig, isIOS, isMobile, isSafari } from './utils' 32import { isMobile } from './utils'
49 33
50// Change 'Playback Rate' to 'Speed' (smaller for our settings menu) 34// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
51(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed' 35(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
@@ -56,112 +40,49 @@ CaptionsButton.prototype.controlText_ = 'Subtitles/CC'
56// We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know) 40// We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
57CaptionsButton.prototype.label_ = ' ' 41CaptionsButton.prototype.label_ = ' '
58 42
59export type PlayerMode = 'webtorrent' | 'p2p-media-loader'
60
61export type WebtorrentOptions = {
62 videoFiles: VideoFile[]
63}
64
65export type P2PMediaLoaderOptions = {
66 playlistUrl: string
67 segmentsSha256Url: string
68 trackerAnnounce: string[]
69 redundancyBaseUrls: string[]
70 videoFiles: VideoFile[]
71}
72
73export interface CustomizationOptions {
74 startTime: number | string
75 stopTime: number | string
76
77 controls?: boolean
78 muted?: boolean
79 loop?: boolean
80 subtitle?: string
81 resume?: string
82
83 peertubeLink: boolean
84}
85
86export interface CommonOptions extends CustomizationOptions {
87 playerElement: HTMLVideoElement
88 onPlayerElementChange: (element: HTMLVideoElement) => void
89
90 autoplay: boolean
91 p2pEnabled: boolean
92
93 nextVideo?: () => void
94 hasNextVideo?: () => boolean
95
96 previousVideo?: () => void
97 hasPreviousVideo?: () => boolean
98
99 playlist?: PlaylistPluginOptions
100
101 videoDuration: number
102 enableHotkeys: boolean
103 inactivityTimeout: number
104 poster: string
105
106 theaterButton: boolean
107 captions: boolean
108
109 videoViewUrl: string
110 embedUrl: string
111 embedTitle: string
112
113 isLive: boolean
114
115 language?: string
116
117 videoCaptions: VideoJSCaption[]
118
119 videoUUID: string
120 videoShortUUID: string
121
122 userWatching?: UserWatching
123
124 serverUrl: string
125}
126
127export type PeertubePlayerManagerOptions = {
128 common: CommonOptions
129 webtorrent: WebtorrentOptions
130 p2pMediaLoader?: P2PMediaLoaderOptions
131
132 pluginsManager: PluginsManager
133}
134
135export class PeertubePlayerManager { 43export class PeertubePlayerManager {
136 private static playerElementClassName: string 44 private static playerElementClassName: string
137 private static onPlayerChange: (player: videojs.Player) => void 45 private static onPlayerChange: (player: videojs.Player) => void
138 private static alreadyPlayed = false 46 private static alreadyPlayed = false
139 private static pluginsManager: PluginsManager 47 private static pluginsManager: PluginsManager
140 48
49 private static videojsDecodeErrors = 0
50
51 private static p2pMediaLoaderModule: any
52
141 static initState () { 53 static initState () {
142 PeertubePlayerManager.alreadyPlayed = false 54 this.alreadyPlayed = false
143 } 55 }
144 56
145 static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) { 57 static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) {
146 this.pluginsManager = options.pluginsManager 58 this.pluginsManager = options.pluginsManager
147 59
148 let p2pMediaLoader: any
149
150 this.onPlayerChange = onPlayerChange 60 this.onPlayerChange = onPlayerChange
151 this.playerElementClassName = options.common.playerElement.className 61 this.playerElementClassName = options.common.playerElement.className
152 62
153 if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin') 63 if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin')
154 if (mode === 'p2p-media-loader') { 64 if (mode === 'p2p-media-loader') {
155 [ p2pMediaLoader ] = await Promise.all([ 65 const [ p2pMediaLoaderModule ] = await Promise.all([
156 import('@peertube/p2p-media-loader-hlsjs'), 66 import('@peertube/p2p-media-loader-hlsjs'),
157 import('./p2p-media-loader/p2p-media-loader-plugin') 67 import('./p2p-media-loader/p2p-media-loader-plugin')
158 ]) 68 ])
159 }
160 69
161 const videojsOptions = await this.getVideojsOptions(mode, options, p2pMediaLoader) 70 this.p2pMediaLoaderModule = p2pMediaLoaderModule
71 }
162 72
163 await TranslationsManager.loadLocaleInVideoJS(options.common.serverUrl, options.common.language, videojs) 73 await TranslationsManager.loadLocaleInVideoJS(options.common.serverUrl, options.common.language, videojs)
164 74
75 return this.buildPlayer(mode, options)
76 }
77
78 private static async buildPlayer (mode: PlayerMode, options: PeertubePlayerManagerOptions): Promise<videojs.Player> {
79 const videojsOptionsBuilder = new PeertubePlayerOptionsBuilder(mode, options, this.p2pMediaLoaderModule)
80
81 const videojsOptions = await this.pluginsManager.runHook(
82 'filter:internal.player.videojs.options.result',
83 videojsOptionsBuilder.getVideojsOptions(this.alreadyPlayed)
84 )
85
165 const self = this 86 const self = this
166 return new Promise(res => { 87 return new Promise(res => {
167 videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) { 88 videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) {
@@ -169,27 +90,24 @@ export class PeertubePlayerManager {
169 90
170 let alreadyFallback = false 91 let alreadyFallback = false
171 92
172 player.tech(true).one('error', () => { 93 const handleError = () => {
173 if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options) 94 if (alreadyFallback) return
174 alreadyFallback = true 95 alreadyFallback = true
175 })
176 96
177 player.one('error', () => { 97 if (mode === 'p2p-media-loader') {
178 if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options) 98 self.tryToRecoverHLSError(player.error(), player, options)
179 alreadyFallback = true 99 } else {
180 }) 100 self.maybeFallbackToWebTorrent(mode, player, options)
101 }
102 }
103
104 player.one('error', () => handleError())
181 105
182 player.one('play', () => { 106 player.one('play', () => {
183 PeertubePlayerManager.alreadyPlayed = true 107 self.alreadyPlayed = true
184 }) 108 })
185 109
186 self.addContextMenu({ 110 self.addContextMenu(videojsOptionsBuilder, player, options.common)
187 mode,
188 player,
189 videoShortUUID: options.common.videoShortUUID,
190 videoEmbedUrl: options.common.embedUrl,
191 videoEmbedTitle: options.common.embedTitle
192 })
193 111
194 if (isMobile()) player.peertubeMobile() 112 if (isMobile()) player.peertubeMobile()
195 if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin() 113 if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin()
@@ -214,437 +132,77 @@ export class PeertubePlayerManager {
214 }) 132 })
215 } 133 }
216 134
217 private static async maybeFallbackToWebTorrent (currentMode: PlayerMode, player: any, options: PeertubePlayerManagerOptions) { 135 private static async tryToRecoverHLSError (err: any, currentPlayer: videojs.Player, options: PeertubePlayerManagerOptions) {
218 if (currentMode === 'webtorrent') return 136 if (err.code === 3) { // Decode error
219
220 console.log('Fallback to webtorrent.')
221
222 const newVideoElement = document.createElement('video')
223 newVideoElement.className = this.playerElementClassName
224
225 // VideoJS wraps our video element inside a div
226 let currentParentPlayerElement = options.common.playerElement.parentNode
227 // Fix on IOS, don't ask me why
228 if (!currentParentPlayerElement) currentParentPlayerElement = document.getElementById(options.common.playerElement.id).parentNode
229
230 currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement)
231
232 options.common.playerElement = newVideoElement
233 options.common.onPlayerElementChange(newVideoElement)
234
235 player.dispose()
236
237 await import('./webtorrent/webtorrent-plugin')
238
239 const mode = 'webtorrent'
240 const videojsOptions = await this.getVideojsOptions(mode, options)
241 137
242 const self = this 138 // Display a notification to user
243 videojs(newVideoElement, videojsOptions, function (this: videojs.Player) { 139 if (this.videojsDecodeErrors === 0) {
244 const player = this 140 options.common.errorNotifier(currentPlayer.localize('The video failed to play, will try to fast forward.'))
245
246 self.addContextMenu({
247 mode,
248 player,
249 videoShortUUID: options.common.videoShortUUID,
250 videoEmbedUrl: options.common.embedUrl,
251 videoEmbedTitle: options.common.embedTitle
252 })
253
254 PeertubePlayerManager.onPlayerChange(player)
255 })
256 }
257
258 private static async getVideojsOptions (
259 mode: PlayerMode,
260 options: PeertubePlayerManagerOptions,
261 p2pMediaLoaderModule?: any
262 ): Promise<videojs.PlayerOptions> {
263 const commonOptions = options.common
264 const isHLS = mode === 'p2p-media-loader'
265
266 let autoplay = this.getAutoPlayValue(commonOptions.autoplay)
267 const html5 = {
268 preloadTextTracks: false
269 }
270
271 const plugins: VideoJSPluginOptions = {
272 peertube: {
273 mode,
274 autoplay, // Use peertube plugin autoplay because we could get the file by webtorrent
275 videoViewUrl: commonOptions.videoViewUrl,
276 videoDuration: commonOptions.videoDuration,
277 userWatching: commonOptions.userWatching,
278 subtitle: commonOptions.subtitle,
279 videoCaptions: commonOptions.videoCaptions,
280 stopTime: commonOptions.stopTime,
281 isLive: commonOptions.isLive,
282 videoUUID: commonOptions.videoUUID
283 } 141 }
284 }
285
286 if (commonOptions.playlist) {
287 plugins.playlist = commonOptions.playlist
288 }
289
290 if (isHLS) {
291 const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
292
293 Object.assign(html5, hlsjs.html5)
294 }
295
296 if (mode === 'webtorrent') {
297 PeertubePlayerManager.addWebTorrentOptions(plugins, options)
298
299 // WebTorrent plugin handles autoplay, because we do some hackish stuff in there
300 autoplay = false
301 }
302
303 const videojsOptions = {
304 html5,
305
306 // We don't use text track settings for now
307 textTrackSettings: false as any, // FIXME: typings
308 controls: commonOptions.controls !== undefined ? commonOptions.controls : true,
309 loop: commonOptions.loop !== undefined ? commonOptions.loop : false,
310
311 muted: commonOptions.muted !== undefined
312 ? commonOptions.muted
313 : undefined, // Undefined so the player knows it has to check the local storage
314
315 autoplay: this.getAutoPlayValue(autoplay),
316
317 poster: commonOptions.poster,
318 inactivityTimeout: commonOptions.inactivityTimeout,
319 playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ],
320
321 plugins,
322
323 controlBar: {
324 children: this.getControlBarChildren(mode, {
325 videoShortUUID: commonOptions.videoShortUUID,
326 p2pEnabled: commonOptions.p2pEnabled,
327
328 captions: commonOptions.captions,
329 peertubeLink: commonOptions.peertubeLink,
330 theaterButton: commonOptions.theaterButton,
331
332 nextVideo: commonOptions.nextVideo,
333 hasNextVideo: commonOptions.hasNextVideo,
334 142
335 previousVideo: commonOptions.previousVideo, 143 if (this.videojsDecodeErrors === 20) {
336 hasPreviousVideo: commonOptions.hasPreviousVideo 144 this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options)
337 }) as any // FIXME: typings 145 return
338 } 146 }
339 }
340
341 if (commonOptions.language && !isDefaultLocale(commonOptions.language)) {
342 Object.assign(videojsOptions, { language: commonOptions.language })
343 }
344
345 return this.pluginsManager.runHook('filter:internal.player.videojs.options.result', videojsOptions)
346 }
347
348 private static addP2PMediaLoaderOptions (
349 plugins: VideoJSPluginOptions,
350 options: PeertubePlayerManagerOptions,
351 p2pMediaLoaderModule: any
352 ) {
353 const p2pMediaLoaderOptions = options.p2pMediaLoader
354 const commonOptions = options.common
355
356 const trackerAnnounce = p2pMediaLoaderOptions.trackerAnnounce
357 .filter(t => t.startsWith('ws'))
358
359 const redundancyUrlManager = new RedundancyUrlManager(options.p2pMediaLoader.redundancyBaseUrls)
360
361 const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
362 redundancyUrlManager,
363 type: 'application/x-mpegURL',
364 startTime: commonOptions.startTime,
365 src: p2pMediaLoaderOptions.playlistUrl
366 }
367 147
368 let consumeOnly = false 148 console.log('Fast forwarding HLS to recover from an error.')
369 if ((navigator as any)?.connection?.type === 'cellular') {
370 console.log('We are on a cellular connection: disabling seeding.')
371 consumeOnly = true
372 }
373
374 const p2pMediaLoaderConfig: HlsJsEngineSettings = {
375 loader: {
376 trackerAnnounce,
377 segmentValidator: segmentValidatorFactory(options.p2pMediaLoader.segmentsSha256Url, options.common.isLive),
378 rtcConfig: getRtcConfig(),
379 requiredSegmentsPriority: 1,
380 simultaneousHttpDownloads: 1,
381 segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager, 1),
382 useP2P: commonOptions.p2pEnabled,
383 consumeOnly
384 },
385 segments: {
386 swarmId: p2pMediaLoaderOptions.playlistUrl
387 }
388 }
389
390 const hlsjs = {
391 levelLabelHandler: (level: { height: number, width: number }) => {
392 const resolution = Math.min(level.height || 0, level.width || 0)
393 149
394 const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === resolution) 150 this.videojsDecodeErrors++
395 // We don't have files for live videos
396 if (!file) return level.height
397 151
398 let label = file.resolution.label 152 options.common.startTime = currentPlayer.currentTime() + 2
399 if (file.fps >= 50) label += file.fps 153 options.common.autoplay = true
154 this.rebuildAndUpdateVideoElement(currentPlayer, options.common)
400 155
401 return label 156 const newPlayer = await this.buildPlayer('p2p-media-loader', options)
402 }, 157 this.onPlayerChange(newPlayer)
403 html5: { 158 } else {
404 hlsjsConfig: this.getHLSOptions(p2pMediaLoaderModule, p2pMediaLoaderConfig) 159 this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options)
405 }
406 } 160 }
407
408 const toAssign = { p2pMediaLoader, hlsjs }
409 Object.assign(plugins, toAssign)
410
411 return toAssign
412 } 161 }
413 162
414 private static getHLSOptions (p2pMediaLoaderModule: any, p2pMediaLoaderConfig: HlsJsEngineSettings) { 163 private static async maybeFallbackToWebTorrent (
415 const base = { 164 currentMode: PlayerMode,
416 capLevelToPlayerSize: true, 165 currentPlayer: videojs.Player,
417 autoStartLoad: false, 166 options: PeertubePlayerManagerOptions
418 liveSyncDurationCount: 5, 167 ) {
419 168 if (options.webtorrent.videoFiles.length === 0 || currentMode === 'webtorrent') {
420 loader: new p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass() 169 currentPlayer.peertube().displayFatalError()
421 } 170 return
422
423 const averageBandwidth = getAverageBandwidthInStore()
424 if (!averageBandwidth) return base
425
426 return {
427 ...base,
428
429 abrEwmaDefaultEstimate: averageBandwidth * 8, // We want bit/s
430 startLevel: -1,
431 testBandwidth: false,
432 debug: false
433 }
434 }
435
436 private static addWebTorrentOptions (plugins: VideoJSPluginOptions, options: PeertubePlayerManagerOptions) {
437 const commonOptions = options.common
438 const webtorrentOptions = options.webtorrent
439 const p2pMediaLoaderOptions = options.p2pMediaLoader
440
441 const autoplay = this.getAutoPlayValue(commonOptions.autoplay) === 'play'
442
443 const webtorrent = {
444 autoplay,
445 playerRefusedP2P: commonOptions.p2pEnabled === false,
446 videoDuration: commonOptions.videoDuration,
447 playerElement: commonOptions.playerElement,
448 videoFiles: webtorrentOptions.videoFiles.length !== 0
449 ? webtorrentOptions.videoFiles
450 // The WebTorrent plugin won't be able to play these files, but it will fallback to HTTP mode
451 : p2pMediaLoaderOptions?.videoFiles || [],
452 startTime: commonOptions.startTime
453 }
454
455 Object.assign(plugins, { webtorrent })
456 }
457
458 private static getControlBarChildren (mode: PlayerMode, options: {
459 p2pEnabled: boolean
460 videoShortUUID: string
461
462 peertubeLink: boolean
463 theaterButton: boolean
464 captions: boolean
465
466 nextVideo?: () => void
467 hasNextVideo?: () => boolean
468
469 previousVideo?: () => void
470 hasPreviousVideo?: () => boolean
471 }) {
472 const settingEntries = []
473 const loadProgressBar = mode === 'webtorrent' ? 'peerTubeLoadProgressBar' : 'loadProgressBar'
474
475 // Keep an order
476 settingEntries.push('playbackRateMenuButton')
477 if (options.captions === true) settingEntries.push('captionsButton')
478 settingEntries.push('resolutionMenuButton')
479
480 const children = {}
481
482 if (options.previousVideo) {
483 const buttonOptions: NextPreviousVideoButtonOptions = {
484 type: 'previous',
485 handler: options.previousVideo,
486 isDisabled: () => {
487 if (!options.hasPreviousVideo) return false
488
489 return !options.hasPreviousVideo()
490 }
491 }
492
493 Object.assign(children, {
494 previousVideoButton: buttonOptions
495 })
496 }
497
498 Object.assign(children, { playToggle: {} })
499
500 if (options.nextVideo) {
501 const buttonOptions: NextPreviousVideoButtonOptions = {
502 type: 'next',
503 handler: options.nextVideo,
504 isDisabled: () => {
505 if (!options.hasNextVideo) return false
506
507 return !options.hasNextVideo()
508 }
509 }
510
511 Object.assign(children, {
512 nextVideoButton: buttonOptions
513 })
514 } 171 }
515 172
516 Object.assign(children, { 173 console.log('Fallback to webtorrent.')
517 currentTimeDisplay: {},
518 timeDivider: {},
519 durationDisplay: {},
520 liveDisplay: {},
521
522 flexibleWidthSpacer: {},
523 progressControl: {
524 children: {
525 seekBar: {
526 children: {
527 [loadProgressBar]: {},
528 mouseTimeDisplay: {},
529 playProgressBar: {}
530 }
531 }
532 }
533 },
534
535 p2PInfoButton: {
536 p2pEnabled: options.p2pEnabled
537 },
538
539 muteToggle: {},
540 volumeControl: {},
541
542 settingsButton: {
543 setup: {
544 maxHeightOffset: 40
545 },
546 entries: settingEntries
547 }
548 })
549
550 if (options.peertubeLink === true) {
551 Object.assign(children, {
552 peerTubeLinkButton: { shortUUID: options.videoShortUUID } as PeerTubeLinkButtonOptions
553 })
554 }
555 174
556 if (options.theaterButton === true) { 175 this.rebuildAndUpdateVideoElement(currentPlayer, options.common)
557 Object.assign(children, {
558 theaterButton: {}
559 })
560 }
561 176
562 Object.assign(children, { 177 await import('./webtorrent/webtorrent-plugin')
563 fullscreenToggle: {}
564 })
565 178
566 return children 179 const newPlayer = await this.buildPlayer('webtorrent', options)
180 this.onPlayerChange(newPlayer)
567 } 181 }
568 182
569 private static addContextMenu (options: { 183 private static rebuildAndUpdateVideoElement (player: videojs.Player, commonOptions: CommonOptions) {
570 mode: PlayerMode 184 const newVideoElement = document.createElement('video')
571 player: videojs.Player 185 newVideoElement.className = this.playerElementClassName
572 videoShortUUID: string
573 videoEmbedUrl: string
574 videoEmbedTitle: string
575 }) {
576 const { mode, player, videoEmbedTitle, videoEmbedUrl, videoShortUUID } = options
577
578 const content = () => {
579 const isLoopEnabled = player.options_['loop']
580 const items = [
581 {
582 icon: 'repeat',
583 label: player.localize('Play in loop') + (isLoopEnabled ? '<span class="vjs-icon-tick-white"></span>' : ''),
584 listener: function () {
585 player.options_['loop'] = !isLoopEnabled
586 }
587 },
588 {
589 label: player.localize('Copy the video URL'),
590 listener: function () {
591 copyToClipboard(buildVideoLink({ shortUUID: videoShortUUID }))
592 }
593 },
594 {
595 label: player.localize('Copy the video URL at the current time'),
596 listener: function (this: videojs.Player) {
597 const url = buildVideoLink({ shortUUID: videoShortUUID })
598 186
599 copyToClipboard(decorateVideoLink({ url, startTime: this.currentTime() })) 187 // VideoJS wraps our video element inside a div
600 } 188 let currentParentPlayerElement = commonOptions.playerElement.parentNode
601 }, 189 // Fix on IOS, don't ask me why
602 { 190 if (!currentParentPlayerElement) currentParentPlayerElement = document.getElementById(commonOptions.playerElement.id).parentNode
603 icon: 'code',
604 label: player.localize('Copy embed code'),
605 listener: () => {
606 copyToClipboard(buildVideoOrPlaylistEmbed(videoEmbedUrl, videoEmbedTitle))
607 }
608 }
609 ]
610 191
611 if (mode === 'webtorrent') { 192 currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement)
612 items.push({
613 label: player.localize('Copy magnet URI'),
614 listener: function (this: videojs.Player) {
615 copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
616 }
617 })
618 }
619 193
620 items.push({ 194 commonOptions.playerElement = newVideoElement
621 icon: 'info', 195 commonOptions.onPlayerElementChange(newVideoElement)
622 label: player.localize('Stats for nerds'),
623 listener: () => {
624 player.stats().show()
625 }
626 })
627 196
628 return items.map(i => ({ 197 player.dispose()
629 ...i,
630 label: `<span class="vjs-icon-${i.icon || 'link-2'}"></span>` + i.label
631 }))
632 }
633 198
634 // adding the menu 199 return newVideoElement
635 player.contextmenuUI({ content })
636 } 200 }
637 201
638 private static getAutoPlayValue (autoplay: any) { 202 private static addContextMenu (optionsBuilder: PeertubePlayerOptionsBuilder, player: videojs.Player, commonOptions: CommonOptions) {
639 if (autoplay !== true) return autoplay 203 const options = optionsBuilder.getContextMenuOptions(player, commonOptions)
640
641 // On first play, disable autoplay to avoid issues
642 // But if the player already played videos, we can safely autoplay next ones
643 if (isIOS() || isSafari()) {
644 return PeertubePlayerManager.alreadyPlayed ? 'play' : false
645 }
646 204
647 return 'play' 205 player.contextmenuUI(options)
648 } 206 }
649} 207}
650 208