]>
Commit | Line | Data |
---|---|---|
1 | import '@peertube/videojs-contextmenu' | |
2 | import './shared/upnext/end-card' | |
3 | import './shared/upnext/upnext-plugin' | |
4 | import './shared/stats/stats-card' | |
5 | import './shared/stats/stats-plugin' | |
6 | import './shared/bezels/bezels-plugin' | |
7 | import './shared/peertube/peertube-plugin' | |
8 | import './shared/resolutions/peertube-resolutions-plugin' | |
9 | import './shared/control-bar/next-previous-video-button' | |
10 | import './shared/control-bar/p2p-info-button' | |
11 | import './shared/control-bar/peertube-link-button' | |
12 | import './shared/control-bar/peertube-load-progress-bar' | |
13 | import './shared/control-bar/theater-button' | |
14 | import './shared/control-bar/peertube-live-display' | |
15 | import './shared/settings/resolution-menu-button' | |
16 | import './shared/settings/resolution-menu-item' | |
17 | import './shared/settings/settings-dialog' | |
18 | import './shared/settings/settings-menu-button' | |
19 | import './shared/settings/settings-menu-item' | |
20 | import './shared/settings/settings-panel' | |
21 | import './shared/settings/settings-panel-child' | |
22 | import './shared/playlist/playlist-plugin' | |
23 | import './shared/mobile/peertube-mobile-plugin' | |
24 | import './shared/mobile/peertube-mobile-buttons' | |
25 | import './shared/hotkeys/peertube-hotkeys-plugin' | |
26 | import './shared/metrics/metrics-plugin' | |
27 | import videojs from 'video.js' | |
28 | import { logger } from '@root-helpers/logger' | |
29 | import { PluginsManager } from '@root-helpers/plugins-manager' | |
30 | import { isMobile } from '@root-helpers/web-browser' | |
31 | import { saveAverageBandwidth } from './peertube-player-local-storage' | |
32 | import { ManagerOptionsBuilder } from './shared/manager-options' | |
33 | import { TranslationsManager } from './translations-manager' | |
34 | import { CommonOptions, PeertubePlayerManagerOptions, PlayerMode, PlayerNetworkInfo } from './types' | |
35 | ||
36 | // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) | |
37 | (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed' | |
38 | ||
39 | const CaptionsButton = videojs.getComponent('CaptionsButton') as any | |
40 | // Change Captions to Subtitles/CC | |
41 | CaptionsButton.prototype.controlText_ = 'Subtitles/CC' | |
42 | // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know) | |
43 | CaptionsButton.prototype.label_ = ' ' | |
44 | ||
45 | export class PeertubePlayerManager { | |
46 | private static playerElementClassName: string | |
47 | private static playerElementAttributes: { name: string, value: string }[] = [] | |
48 | ||
49 | private static onPlayerChange: (player: videojs.Player) => void | |
50 | private static alreadyPlayed = false | |
51 | private static pluginsManager: PluginsManager | |
52 | ||
53 | private static videojsDecodeErrors = 0 | |
54 | ||
55 | private static p2pMediaLoaderModule: any | |
56 | ||
57 | static initState () { | |
58 | this.alreadyPlayed = false | |
59 | } | |
60 | ||
61 | static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) { | |
62 | this.pluginsManager = options.pluginsManager | |
63 | ||
64 | this.onPlayerChange = onPlayerChange | |
65 | ||
66 | this.playerElementClassName = options.common.playerElement.className | |
67 | ||
68 | for (const name of options.common.playerElement.getAttributeNames()) { | |
69 | this.playerElementAttributes.push({ name, value: options.common.playerElement.getAttribute(name) }) | |
70 | } | |
71 | ||
72 | if (mode === 'webtorrent') await import('./shared/webtorrent/webtorrent-plugin') | |
73 | if (mode === 'p2p-media-loader') { | |
74 | const [ p2pMediaLoaderModule ] = await Promise.all([ | |
75 | import('@peertube/p2p-media-loader-hlsjs'), | |
76 | import('./shared/p2p-media-loader/p2p-media-loader-plugin') | |
77 | ]) | |
78 | ||
79 | this.p2pMediaLoaderModule = p2pMediaLoaderModule | |
80 | } | |
81 | ||
82 | await TranslationsManager.loadLocaleInVideoJS(options.common.serverUrl, options.common.language, videojs) | |
83 | ||
84 | return this.buildPlayer(mode, options) | |
85 | } | |
86 | ||
87 | private static async buildPlayer (mode: PlayerMode, options: PeertubePlayerManagerOptions): Promise<videojs.Player> { | |
88 | const videojsOptionsBuilder = new ManagerOptionsBuilder(mode, options, this.p2pMediaLoaderModule) | |
89 | ||
90 | const videojsOptions = await this.pluginsManager.runHook( | |
91 | 'filter:internal.player.videojs.options.result', | |
92 | videojsOptionsBuilder.getVideojsOptions(this.alreadyPlayed) | |
93 | ) | |
94 | ||
95 | const self = this | |
96 | return new Promise(res => { | |
97 | videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) { | |
98 | const player = this | |
99 | ||
100 | let alreadyFallback = false | |
101 | ||
102 | const handleError = () => { | |
103 | if (alreadyFallback) return | |
104 | alreadyFallback = true | |
105 | ||
106 | if (mode === 'p2p-media-loader') { | |
107 | self.tryToRecoverHLSError(player.error(), player, options) | |
108 | } else { | |
109 | self.maybeFallbackToWebTorrent(mode, player, options) | |
110 | } | |
111 | } | |
112 | ||
113 | player.one('error', () => handleError()) | |
114 | ||
115 | player.one('play', () => { | |
116 | self.alreadyPlayed = true | |
117 | }) | |
118 | ||
119 | self.addContextMenu(videojsOptionsBuilder, player, options.common) | |
120 | ||
121 | if (isMobile()) player.peertubeMobile() | |
122 | if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin() | |
123 | if (options.common.controlBar === false) player.controlBar.addClass('control-bar-hidden') | |
124 | ||
125 | player.bezels() | |
126 | ||
127 | player.stats({ | |
128 | videoUUID: options.common.videoUUID, | |
129 | videoIsLive: options.common.isLive, | |
130 | mode, | |
131 | p2pEnabled: options.common.p2pEnabled | |
132 | }) | |
133 | ||
134 | player.on('p2pInfo', (_, data: PlayerNetworkInfo) => { | |
135 | if (data.source !== 'p2p-media-loader' || isNaN(data.bandwidthEstimate)) return | |
136 | ||
137 | saveAverageBandwidth(data.bandwidthEstimate) | |
138 | }) | |
139 | ||
140 | const offlineNotificationElem = document.createElement('div') | |
141 | offlineNotificationElem.classList.add('vjs-peertube-offline-notification') | |
142 | offlineNotificationElem.innerText = player.localize('You seem to be offline and the video may not work') | |
143 | ||
144 | let offlineNotificationElemAdded = false | |
145 | ||
146 | const handleOnline = () => { | |
147 | if (!offlineNotificationElemAdded) return | |
148 | ||
149 | player.el().removeChild(offlineNotificationElem) | |
150 | offlineNotificationElemAdded = false | |
151 | ||
152 | logger.info('The browser is online') | |
153 | } | |
154 | ||
155 | const handleOffline = () => { | |
156 | if (offlineNotificationElemAdded) return | |
157 | ||
158 | player.el().appendChild(offlineNotificationElem) | |
159 | offlineNotificationElemAdded = true | |
160 | ||
161 | logger.info('The browser is offline') | |
162 | } | |
163 | ||
164 | window.addEventListener('online', handleOnline) | |
165 | window.addEventListener('offline', handleOffline) | |
166 | ||
167 | player.on('dispose', () => { | |
168 | window.removeEventListener('online', handleOnline) | |
169 | window.removeEventListener('offline', handleOffline) | |
170 | }) | |
171 | ||
172 | return res(player) | |
173 | }) | |
174 | }) | |
175 | } | |
176 | ||
177 | private static async tryToRecoverHLSError (err: any, currentPlayer: videojs.Player, options: PeertubePlayerManagerOptions) { | |
178 | if (err.code === MediaError.MEDIA_ERR_DECODE) { | |
179 | ||
180 | // Display a notification to user | |
181 | if (this.videojsDecodeErrors === 0) { | |
182 | options.common.errorNotifier(currentPlayer.localize('The video failed to play, will try to fast forward.')) | |
183 | } | |
184 | ||
185 | if (this.videojsDecodeErrors === 20) { | |
186 | this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options) | |
187 | return | |
188 | } | |
189 | ||
190 | logger.info('Fast forwarding HLS to recover from an error.') | |
191 | ||
192 | this.videojsDecodeErrors++ | |
193 | ||
194 | options.common.startTime = currentPlayer.currentTime() + 2 | |
195 | options.common.autoplay = true | |
196 | this.rebuildAndUpdateVideoElement(currentPlayer, options.common) | |
197 | ||
198 | const newPlayer = await this.buildPlayer('p2p-media-loader', options) | |
199 | this.onPlayerChange(newPlayer) | |
200 | } else { | |
201 | this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options) | |
202 | } | |
203 | } | |
204 | ||
205 | private static async maybeFallbackToWebTorrent ( | |
206 | currentMode: PlayerMode, | |
207 | currentPlayer: videojs.Player, | |
208 | options: PeertubePlayerManagerOptions | |
209 | ) { | |
210 | if (options.webtorrent.videoFiles.length === 0 || currentMode === 'webtorrent') { | |
211 | currentPlayer.peertube().displayFatalError() | |
212 | return | |
213 | } | |
214 | ||
215 | logger.info('Fallback to webtorrent.') | |
216 | ||
217 | this.rebuildAndUpdateVideoElement(currentPlayer, options.common) | |
218 | ||
219 | await import('./shared/webtorrent/webtorrent-plugin') | |
220 | ||
221 | const newPlayer = await this.buildPlayer('webtorrent', options) | |
222 | this.onPlayerChange(newPlayer) | |
223 | } | |
224 | ||
225 | private static rebuildAndUpdateVideoElement (player: videojs.Player, commonOptions: CommonOptions) { | |
226 | const newVideoElement = document.createElement('video') | |
227 | ||
228 | // Reset class | |
229 | newVideoElement.className = this.playerElementClassName | |
230 | ||
231 | // Reapply attributes | |
232 | for (const { name, value } of this.playerElementAttributes) { | |
233 | newVideoElement.setAttribute(name, value) | |
234 | } | |
235 | ||
236 | // VideoJS wraps our video element inside a div | |
237 | let currentParentPlayerElement = commonOptions.playerElement.parentNode | |
238 | // Fix on IOS, don't ask me why | |
239 | if (!currentParentPlayerElement) currentParentPlayerElement = document.getElementById(commonOptions.playerElement.id).parentNode | |
240 | ||
241 | currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement) | |
242 | ||
243 | commonOptions.playerElement = newVideoElement | |
244 | commonOptions.onPlayerElementChange(newVideoElement) | |
245 | ||
246 | player.dispose() | |
247 | ||
248 | return newVideoElement | |
249 | } | |
250 | ||
251 | private static addContextMenu (optionsBuilder: ManagerOptionsBuilder, player: videojs.Player, commonOptions: CommonOptions) { | |
252 | const options = optionsBuilder.getContextMenuOptions(player, commonOptions) | |
253 | ||
254 | player.contextmenuUI(options) | |
255 | } | |
256 | } | |
257 | ||
258 | // ############################################################################ | |
259 | ||
260 | export { | |
261 | videojs | |
262 | } |