diff options
Diffstat (limited to 'client/src/assets/player/peertube-player-manager.ts')
-rw-r--r-- | client/src/assets/player/peertube-player-manager.ts | 48 |
1 files changed, 47 insertions, 1 deletions
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index 0d4acc3d9..56310c4e9 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts | |||
@@ -43,6 +43,8 @@ CaptionsButton.prototype.label_ = ' ' | |||
43 | 43 | ||
44 | export class PeertubePlayerManager { | 44 | export class PeertubePlayerManager { |
45 | private static playerElementClassName: string | 45 | private static playerElementClassName: string |
46 | private static playerElementAttributes: { name: string, value: string }[] = [] | ||
47 | |||
46 | private static onPlayerChange: (player: videojs.Player) => void | 48 | private static onPlayerChange: (player: videojs.Player) => void |
47 | private static alreadyPlayed = false | 49 | private static alreadyPlayed = false |
48 | private static pluginsManager: PluginsManager | 50 | private static pluginsManager: PluginsManager |
@@ -59,8 +61,13 @@ export class PeertubePlayerManager { | |||
59 | this.pluginsManager = options.pluginsManager | 61 | this.pluginsManager = options.pluginsManager |
60 | 62 | ||
61 | this.onPlayerChange = onPlayerChange | 63 | this.onPlayerChange = onPlayerChange |
64 | |||
62 | this.playerElementClassName = options.common.playerElement.className | 65 | this.playerElementClassName = options.common.playerElement.className |
63 | 66 | ||
67 | for (const name of options.common.playerElement.getAttributeNames()) { | ||
68 | this.playerElementAttributes.push({ name, value: options.common.playerElement.getAttribute(name) }) | ||
69 | } | ||
70 | |||
64 | if (mode === 'webtorrent') await import('./shared/webtorrent/webtorrent-plugin') | 71 | if (mode === 'webtorrent') await import('./shared/webtorrent/webtorrent-plugin') |
65 | if (mode === 'p2p-media-loader') { | 72 | if (mode === 'p2p-media-loader') { |
66 | const [ p2pMediaLoaderModule ] = await Promise.all([ | 73 | const [ p2pMediaLoaderModule ] = await Promise.all([ |
@@ -129,13 +136,45 @@ export class PeertubePlayerManager { | |||
129 | saveAverageBandwidth(data.bandwidthEstimate) | 136 | saveAverageBandwidth(data.bandwidthEstimate) |
130 | }) | 137 | }) |
131 | 138 | ||
139 | const offlineNotificationElem = document.createElement('div') | ||
140 | offlineNotificationElem.classList.add('vjs-peertube-offline-notification') | ||
141 | offlineNotificationElem.innerText = player.localize('You seem to be offline and the video may not work') | ||
142 | |||
143 | let offlineNotificationElemAdded = false | ||
144 | |||
145 | const handleOnline = () => { | ||
146 | if (!offlineNotificationElemAdded) return | ||
147 | |||
148 | player.el().removeChild(offlineNotificationElem) | ||
149 | offlineNotificationElemAdded = false | ||
150 | |||
151 | logger.info('The browser is online') | ||
152 | } | ||
153 | |||
154 | const handleOffline = () => { | ||
155 | if (offlineNotificationElemAdded) return | ||
156 | |||
157 | player.el().appendChild(offlineNotificationElem) | ||
158 | offlineNotificationElemAdded = true | ||
159 | |||
160 | logger.info('The browser is offline') | ||
161 | } | ||
162 | |||
163 | window.addEventListener('online', handleOnline) | ||
164 | window.addEventListener('offline', handleOffline) | ||
165 | |||
166 | player.on('dispose', () => { | ||
167 | window.removeEventListener('online', handleOnline) | ||
168 | window.removeEventListener('offline', handleOffline) | ||
169 | }) | ||
170 | |||
132 | return res(player) | 171 | return res(player) |
133 | }) | 172 | }) |
134 | }) | 173 | }) |
135 | } | 174 | } |
136 | 175 | ||
137 | private static async tryToRecoverHLSError (err: any, currentPlayer: videojs.Player, options: PeertubePlayerManagerOptions) { | 176 | private static async tryToRecoverHLSError (err: any, currentPlayer: videojs.Player, options: PeertubePlayerManagerOptions) { |
138 | if (err.code === 3) { // Decode error | 177 | if (err.code === MediaError.MEDIA_ERR_DECODE) { |
139 | 178 | ||
140 | // Display a notification to user | 179 | // Display a notification to user |
141 | if (this.videojsDecodeErrors === 0) { | 180 | if (this.videojsDecodeErrors === 0) { |
@@ -184,8 +223,15 @@ export class PeertubePlayerManager { | |||
184 | 223 | ||
185 | private static rebuildAndUpdateVideoElement (player: videojs.Player, commonOptions: CommonOptions) { | 224 | private static rebuildAndUpdateVideoElement (player: videojs.Player, commonOptions: CommonOptions) { |
186 | const newVideoElement = document.createElement('video') | 225 | const newVideoElement = document.createElement('video') |
226 | |||
227 | // Reset class | ||
187 | newVideoElement.className = this.playerElementClassName | 228 | newVideoElement.className = this.playerElementClassName |
188 | 229 | ||
230 | // Reapply attributes | ||
231 | for (const { name, value } of this.playerElementAttributes) { | ||
232 | newVideoElement.setAttribute(name, value) | ||
233 | } | ||
234 | |||
189 | // VideoJS wraps our video element inside a div | 235 | // VideoJS wraps our video element inside a div |
190 | let currentParentPlayerElement = commonOptions.playerElement.parentNode | 236 | let currentParentPlayerElement = commonOptions.playerElement.parentNode |
191 | // Fix on IOS, don't ask me why | 237 | // Fix on IOS, don't ask me why |