1 import '@peertube/videojs-contextmenu'
2 import './upnext/end-card'
3 import './upnext/upnext-plugin'
4 import './stats/stats-card'
5 import './stats/stats-plugin'
6 import './bezels/bezels-plugin'
7 import './peertube-plugin'
8 import './peertube-resolutions-plugin'
9 import './videojs-components/next-previous-video-button'
10 import './videojs-components/p2p-info-button'
11 import './videojs-components/peertube-link-button'
12 import './videojs-components/peertube-load-progress-bar'
13 import './videojs-components/resolution-menu-button'
14 import './videojs-components/resolution-menu-item'
15 import './videojs-components/settings-dialog'
16 import './videojs-components/settings-menu-button'
17 import './videojs-components/settings-menu-item'
18 import './videojs-components/settings-panel'
19 import './videojs-components/settings-panel-child'
20 import './videojs-components/theater-button'
21 import './playlist/playlist-plugin'
22 import './mobile/peertube-mobile-plugin'
23 import './mobile/peertube-mobile-buttons'
24 import './hotkeys/peertube-hotkeys-plugin'
25 import videojs from 'video.js'
26 import { PluginsManager } from '@root-helpers/plugins-manager'
27 import { saveAverageBandwidth } from './peertube-player-local-storage'
28 import { CommonOptions, PeertubePlayerManagerOptions, PeertubePlayerOptionsBuilder, PlayerMode } from './peertube-player-options-builder'
29 import { PlayerNetworkInfo } from './peertube-videojs-typings'
30 import { TranslationsManager } from './translations-manager'
31 import { isMobile } from './utils'
33 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
34 (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
36 const CaptionsButton = videojs.getComponent('CaptionsButton') as any
37 // Change Captions to Subtitles/CC
38 CaptionsButton.prototype.controlText_ = 'Subtitles/CC'
39 // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
40 CaptionsButton.prototype.label_ = ' '
42 export class PeertubePlayerManager {
43 private static playerElementClassName: string
44 private static onPlayerChange: (player: videojs.Player) => void
45 private static alreadyPlayed = false
46 private static pluginsManager: PluginsManager
48 private static videojsDecodeErrors = 0
50 private static p2pMediaLoaderModule: any
53 this.alreadyPlayed = false
56 static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) {
57 this.pluginsManager = options.pluginsManager
59 this.onPlayerChange = onPlayerChange
60 this.playerElementClassName = options.common.playerElement.className
62 if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin')
63 if (mode === 'p2p-media-loader') {
64 const [ p2pMediaLoaderModule ] = await Promise.all([
65 import('@peertube/p2p-media-loader-hlsjs'),
66 import('./p2p-media-loader/p2p-media-loader-plugin')
69 this.p2pMediaLoaderModule = p2pMediaLoaderModule
72 await TranslationsManager.loadLocaleInVideoJS(options.common.serverUrl, options.common.language, videojs)
74 return this.buildPlayer(mode, options)
77 private static async buildPlayer (mode: PlayerMode, options: PeertubePlayerManagerOptions): Promise<videojs.Player> {
78 const videojsOptionsBuilder = new PeertubePlayerOptionsBuilder(mode, options, this.p2pMediaLoaderModule)
80 const videojsOptions = await this.pluginsManager.runHook(
81 'filter:internal.player.videojs.options.result',
82 videojsOptionsBuilder.getVideojsOptions(this.alreadyPlayed)
86 return new Promise(res => {
87 videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) {
90 let alreadyFallback = false
92 const handleError = () => {
93 if (alreadyFallback) return
94 alreadyFallback = true
96 if (mode === 'p2p-media-loader') {
97 self.tryToRecoverHLSError(player.error(), player, options)
99 self.maybeFallbackToWebTorrent(mode, player, options)
103 player.one('error', () => handleError())
105 player.one('play', () => {
106 self.alreadyPlayed = true
109 self.addContextMenu(videojsOptionsBuilder, player, options.common)
111 if (isMobile()) player.peertubeMobile()
112 if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin()
117 videoUUID: options.common.videoUUID,
118 videoIsLive: options.common.isLive,
120 p2pEnabled: options.common.p2pEnabled
123 player.on('p2pInfo', (_, data: PlayerNetworkInfo) => {
124 if (data.source !== 'p2p-media-loader' || isNaN(data.bandwidthEstimate)) return
126 saveAverageBandwidth(data.bandwidthEstimate)
134 private static async tryToRecoverHLSError (err: any, currentPlayer: videojs.Player, options: PeertubePlayerManagerOptions) {
135 if (err.code === 3) { // Decode error
137 // Display a notification to user
138 if (this.videojsDecodeErrors === 0) {
139 options.common.errorNotifier(currentPlayer.localize('The video failed to play, will try to fast forward.'))
142 if (this.videojsDecodeErrors === 20) {
143 this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options)
147 console.log('Fast forwarding HLS to recover from an error.')
149 this.videojsDecodeErrors++
151 options.common.startTime = currentPlayer.currentTime() + 2
152 options.common.autoplay = true
153 this.rebuildAndUpdateVideoElement(currentPlayer, options.common)
155 const newPlayer = await this.buildPlayer('p2p-media-loader', options)
156 this.onPlayerChange(newPlayer)
158 this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options)
162 private static async maybeFallbackToWebTorrent (
163 currentMode: PlayerMode,
164 currentPlayer: videojs.Player,
165 options: PeertubePlayerManagerOptions
167 if (options.webtorrent.videoFiles.length === 0 || currentMode === 'webtorrent') {
168 currentPlayer.peertube().displayFatalError()
172 console.log('Fallback to webtorrent.')
174 this.rebuildAndUpdateVideoElement(currentPlayer, options.common)
176 await import('./webtorrent/webtorrent-plugin')
178 const newPlayer = await this.buildPlayer('webtorrent', options)
179 this.onPlayerChange(newPlayer)
182 private static rebuildAndUpdateVideoElement (player: videojs.Player, commonOptions: CommonOptions) {
183 const newVideoElement = document.createElement('video')
184 newVideoElement.className = this.playerElementClassName
186 // VideoJS wraps our video element inside a div
187 let currentParentPlayerElement = commonOptions.playerElement.parentNode
188 // Fix on IOS, don't ask me why
189 if (!currentParentPlayerElement) currentParentPlayerElement = document.getElementById(commonOptions.playerElement.id).parentNode
191 currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement)
193 commonOptions.playerElement = newVideoElement
194 commonOptions.onPlayerElementChange(newVideoElement)
198 return newVideoElement
201 private static addContextMenu (optionsBuilder: PeertubePlayerOptionsBuilder, player: videojs.Player, commonOptions: CommonOptions) {
202 const options = optionsBuilder.getContextMenuOptions(player, commonOptions)
204 player.contextmenuUI(options)
208 // ############################################################################