]>
Commit | Line | Data |
---|---|---|
2adfc7ea | 1 | import 'videojs-dock' |
950b3ce7 | 2 | import '@peertube/videojs-contextmenu' |
f5fcd9f7 | 3 | import './upnext/end-card' |
3bcb4fd7 | 4 | import './upnext/upnext-plugin' |
ff563914 RK |
5 | import './stats/stats-card' |
6 | import './stats/stats-plugin' | |
62ab565d | 7 | import './bezels/bezels-plugin' |
2adfc7ea | 8 | import './peertube-plugin' |
e367da94 | 9 | import './peertube-resolutions-plugin' |
a950e4c8 | 10 | import './videojs-components/next-previous-video-button' |
f5fcd9f7 | 11 | import './videojs-components/p2p-info-button' |
2adfc7ea | 12 | import './videojs-components/peertube-link-button' |
f5fcd9f7 | 13 | import './videojs-components/peertube-load-progress-bar' |
2adfc7ea | 14 | import './videojs-components/resolution-menu-button' |
f5fcd9f7 C |
15 | import './videojs-components/resolution-menu-item' |
16 | import './videojs-components/settings-dialog' | |
2adfc7ea | 17 | import './videojs-components/settings-menu-button' |
f5fcd9f7 C |
18 | import './videojs-components/settings-menu-item' |
19 | import './videojs-components/settings-panel' | |
20 | import './videojs-components/settings-panel-child' | |
2adfc7ea | 21 | import './videojs-components/theater-button' |
4572c3d0 | 22 | import './playlist/playlist-plugin' |
f1a0555a | 23 | import './mobile/peertube-mobile-plugin' |
2dd0a8a8 | 24 | import './mobile/peertube-mobile-buttons' |
d7b052ff | 25 | import './hotkeys/peertube-hotkeys-plugin' |
3e2bc4ea | 26 | import videojs from 'video.js' |
72f611ca | 27 | import { PluginsManager } from '@root-helpers/plugins-manager' |
c4207f97 C |
28 | import { saveAverageBandwidth } from './peertube-player-local-storage' |
29 | import { CommonOptions, PeertubePlayerManagerOptions, PeertubePlayerOptionsBuilder, PlayerMode } from './peertube-player-options-builder' | |
30 | import { PlayerNetworkInfo } from './peertube-videojs-typings' | |
3f9c4955 | 31 | import { TranslationsManager } from './translations-manager' |
c4207f97 | 32 | import { isMobile } from './utils' |
2adfc7ea C |
33 | |
34 | // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) | |
f5fcd9f7 C |
35 | (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed' |
36 | ||
37 | const CaptionsButton = videojs.getComponent('CaptionsButton') as any | |
2adfc7ea | 38 | // Change Captions to Subtitles/CC |
f5fcd9f7 | 39 | CaptionsButton.prototype.controlText_ = 'Subtitles/CC' |
2adfc7ea | 40 | // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know) |
f5fcd9f7 | 41 | CaptionsButton.prototype.label_ = ' ' |
2adfc7ea | 42 | |
2adfc7ea | 43 | export class PeertubePlayerManager { |
6ec0b75b | 44 | private static playerElementClassName: string |
7e37e111 | 45 | private static onPlayerChange: (player: videojs.Player) => void |
9eccae74 | 46 | private static alreadyPlayed = false |
72f611ca | 47 | private static pluginsManager: PluginsManager |
9eccae74 | 48 | |
c4207f97 C |
49 | private static videojsDecodeErrors = 0 |
50 | ||
51 | private static p2pMediaLoaderModule: any | |
52 | ||
1a568b6f | 53 | static initState () { |
c4207f97 | 54 | this.alreadyPlayed = false |
1a568b6f C |
55 | } |
56 | ||
7e37e111 | 57 | static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) { |
72f611ca | 58 | this.pluginsManager = options.pluginsManager |
59 | ||
bfbd9128 | 60 | this.onPlayerChange = onPlayerChange |
6ec0b75b C |
61 | this.playerElementClassName = options.common.playerElement.className |
62 | ||
09209296 | 63 | if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin') |
4348a27d | 64 | if (mode === 'p2p-media-loader') { |
c4207f97 | 65 | const [ p2pMediaLoaderModule ] = await Promise.all([ |
3e254de8 | 66 | import('@peertube/p2p-media-loader-hlsjs'), |
09209296 | 67 | import('./p2p-media-loader/p2p-media-loader-plugin') |
4348a27d | 68 | ]) |
2adfc7ea | 69 | |
c4207f97 C |
70 | this.p2pMediaLoaderModule = p2pMediaLoaderModule |
71 | } | |
2adfc7ea | 72 | |
3f9c4955 | 73 | await TranslationsManager.loadLocaleInVideoJS(options.common.serverUrl, options.common.language, videojs) |
2adfc7ea | 74 | |
c4207f97 C |
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 | ||
2adfc7ea C |
86 | const self = this |
87 | return new Promise(res => { | |
7e37e111 | 88 | videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) { |
2adfc7ea C |
89 | const player = this |
90 | ||
536598cf C |
91 | let alreadyFallback = false |
92 | ||
c4207f97 C |
93 | const handleError = () => { |
94 | if (alreadyFallback) return | |
536598cf | 95 | alreadyFallback = true |
536598cf | 96 | |
c4207f97 C |
97 | if (mode === 'p2p-media-loader') { |
98 | self.tryToRecoverHLSError(player.error(), player, options) | |
99 | } else { | |
100 | self.maybeFallbackToWebTorrent(mode, player, options) | |
101 | } | |
102 | } | |
103 | ||
104 | player.one('error', () => handleError()) | |
6ec0b75b | 105 | |
9eccae74 | 106 | player.one('play', () => { |
c4207f97 | 107 | self.alreadyPlayed = true |
9eccae74 C |
108 | }) |
109 | ||
c4207f97 | 110 | self.addContextMenu(videojsOptionsBuilder, player, options.common) |
2adfc7ea | 111 | |
f1a0555a | 112 | if (isMobile()) player.peertubeMobile() |
d7b052ff | 113 | if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin() |
f1a0555a | 114 | |
10475dea | 115 | player.bezels() |
f1a0555a | 116 | |
ff563914 RK |
117 | player.stats({ |
118 | videoUUID: options.common.videoUUID, | |
119 | videoIsLive: options.common.isLive, | |
95765067 C |
120 | mode, |
121 | p2pEnabled: options.common.p2pEnabled | |
ff563914 | 122 | }) |
10475dea | 123 | |
3e254de8 C |
124 | player.on('p2pInfo', (_, data: PlayerNetworkInfo) => { |
125 | if (data.source !== 'p2p-media-loader' || isNaN(data.bandwidthEstimate)) return | |
126 | ||
127 | saveAverageBandwidth(data.bandwidthEstimate) | |
128 | }) | |
129 | ||
2adfc7ea C |
130 | return res(player) |
131 | }) | |
132 | }) | |
133 | } | |
134 | ||
c4207f97 C |
135 | private static async tryToRecoverHLSError (err: any, currentPlayer: videojs.Player, options: PeertubePlayerManagerOptions) { |
136 | if (err.code === 3) { // Decode error | |
6ec0b75b | 137 | |
c4207f97 C |
138 | // Display a notification to user |
139 | if (this.videojsDecodeErrors === 0) { | |
140 | options.common.errorNotifier(currentPlayer.localize('The video failed to play, will try to fast forward.')) | |
2adfc7ea | 141 | } |
a950e4c8 | 142 | |
c4207f97 C |
143 | if (this.videojsDecodeErrors === 20) { |
144 | this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options) | |
145 | return | |
2adfc7ea | 146 | } |
39aad8cc | 147 | |
c4207f97 | 148 | console.log('Fast forwarding HLS to recover from an error.') |
dca0fe12 | 149 | |
c4207f97 | 150 | this.videojsDecodeErrors++ |
39aad8cc | 151 | |
c4207f97 C |
152 | options.common.startTime = currentPlayer.currentTime() + 2 |
153 | options.common.autoplay = true | |
154 | this.rebuildAndUpdateVideoElement(currentPlayer, options.common) | |
39aad8cc | 155 | |
c4207f97 C |
156 | const newPlayer = await this.buildPlayer('p2p-media-loader', options) |
157 | this.onPlayerChange(newPlayer) | |
158 | } else { | |
159 | this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options) | |
2adfc7ea | 160 | } |
39aad8cc C |
161 | } |
162 | ||
c4207f97 C |
163 | private static async maybeFallbackToWebTorrent ( |
164 | currentMode: PlayerMode, | |
165 | currentPlayer: videojs.Player, | |
166 | options: PeertubePlayerManagerOptions | |
167 | ) { | |
168 | if (options.webtorrent.videoFiles.length === 0 || currentMode === 'webtorrent') { | |
169 | currentPlayer.peertube().displayFatalError() | |
170 | return | |
1dc240a9 RK |
171 | } |
172 | ||
c4207f97 | 173 | console.log('Fallback to webtorrent.') |
2adfc7ea | 174 | |
c4207f97 | 175 | this.rebuildAndUpdateVideoElement(currentPlayer, options.common) |
2adfc7ea | 176 | |
c4207f97 | 177 | await import('./webtorrent/webtorrent-plugin') |
2adfc7ea | 178 | |
c4207f97 C |
179 | const newPlayer = await this.buildPlayer('webtorrent', options) |
180 | this.onPlayerChange(newPlayer) | |
2adfc7ea C |
181 | } |
182 | ||
c4207f97 C |
183 | private static rebuildAndUpdateVideoElement (player: videojs.Player, commonOptions: CommonOptions) { |
184 | const newVideoElement = document.createElement('video') | |
185 | newVideoElement.className = this.playerElementClassName | |
9162fdd3 | 186 | |
c4207f97 C |
187 | // VideoJS wraps our video element inside a div |
188 | let currentParentPlayerElement = commonOptions.playerElement.parentNode | |
189 | // Fix on IOS, don't ask me why | |
190 | if (!currentParentPlayerElement) currentParentPlayerElement = document.getElementById(commonOptions.playerElement.id).parentNode | |
a472cf03 | 191 | |
c4207f97 | 192 | currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement) |
2adfc7ea | 193 | |
c4207f97 C |
194 | commonOptions.playerElement = newVideoElement |
195 | commonOptions.onPlayerElementChange(newVideoElement) | |
ff563914 | 196 | |
c4207f97 | 197 | player.dispose() |
2adfc7ea | 198 | |
c4207f97 | 199 | return newVideoElement |
2adfc7ea C |
200 | } |
201 | ||
c4207f97 C |
202 | private static addContextMenu (optionsBuilder: PeertubePlayerOptionsBuilder, player: videojs.Player, commonOptions: CommonOptions) { |
203 | const options = optionsBuilder.getContextMenuOptions(player, commonOptions) | |
64228474 | 204 | |
c4207f97 | 205 | player.contextmenuUI(options) |
64228474 | 206 | } |
2adfc7ea C |
207 | } |
208 | ||
209 | // ############################################################################ | |
210 | ||
211 | export { | |
212 | videojs | |
213 | } |