aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/assets')
-rw-r--r--client/src/assets/player/p2p-media-loader/hls-plugin.ts626
-rw-r--r--client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts13
-rw-r--r--client/src/assets/player/peertube-player-manager.ts8
-rw-r--r--client/src/assets/player/peertube-videojs-typings.ts57
4 files changed, 680 insertions, 24 deletions
diff --git a/client/src/assets/player/p2p-media-loader/hls-plugin.ts b/client/src/assets/player/p2p-media-loader/hls-plugin.ts
new file mode 100644
index 000000000..d78e1ab90
--- /dev/null
+++ b/client/src/assets/player/p2p-media-loader/hls-plugin.ts
@@ -0,0 +1,626 @@
1// Thanks https://github.com/streamroot/videojs-hlsjs-plugin
2// We duplicated this plugin to choose the hls.js version we want, because streamroot only provide a bundled file
3
4import * as Hlsjs from 'hls.js'
5import videojs, { VideoJsPlayer } from 'video.js'
6import { HlsjsConfigHandlerOptions, QualityLevelRepresentation, QualityLevels, VideoJSTechHLS } from '../peertube-videojs-typings'
7
8type ErrorCounts = {
9 [ type: string ]: number
10}
11
12type Metadata = {
13 levels: Hlsjs.Level[]
14}
15
16const registerSourceHandler = function (vjs: typeof videojs) {
17 if (!Hlsjs.isSupported()) {
18 console.warn('Hls.js is not supported in this browser!')
19 return
20 }
21
22 const html5 = vjs.getTech('Html5')
23
24 if (!html5) {
25 console.error('Not supported version if video.js')
26 return
27 }
28
29 // FIXME: typings
30 (html5 as any).registerSourceHandler({
31 canHandleSource: function (source: videojs.Tech.SourceObject) {
32 const hlsTypeRE = /^application\/x-mpegURL|application\/vnd\.apple\.mpegurl$/i
33 const hlsExtRE = /\.m3u8/i
34
35 if (hlsTypeRE.test(source.type)) return 'probably'
36 if (hlsExtRE.test(source.src)) return 'maybe'
37
38 return ''
39 },
40
41 handleSource: function (source: videojs.Tech.SourceObject, tech: VideoJSTechHLS) {
42 if (tech.hlsProvider) {
43 tech.hlsProvider.dispose()
44 }
45
46 tech.hlsProvider = new Html5Hlsjs(vjs, source, tech)
47
48 return tech.hlsProvider
49 }
50 }, 0);
51
52 // FIXME: typings
53 (vjs as any).Html5Hlsjs = Html5Hlsjs
54}
55
56function hlsjsConfigHandler (this: VideoJsPlayer, options: HlsjsConfigHandlerOptions) {
57 const player = this
58
59 if (!options) return
60
61 if (!player.srOptions_) {
62 player.srOptions_ = {}
63 }
64
65 if (!player.srOptions_.hlsjsConfig) {
66 player.srOptions_.hlsjsConfig = options.hlsjsConfig
67 }
68
69 if (!player.srOptions_.captionConfig) {
70 player.srOptions_.captionConfig = options.captionConfig
71 }
72
73 if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) {
74 player.srOptions_.levelLabelHandler = options.levelLabelHandler
75 }
76}
77
78const registerConfigPlugin = function (vjs: typeof videojs) {
79 // Used in Brightcove since we don't pass options directly there
80 const registerVjsPlugin = vjs.registerPlugin || vjs.plugin
81 registerVjsPlugin('hlsjs', hlsjsConfigHandler)
82}
83
84class Html5Hlsjs {
85 private static readonly hooks: { [id: string]: Function[] } = {}
86
87 private readonly videoElement: HTMLVideoElement
88 private readonly errorCounts: ErrorCounts = {}
89 private readonly player: VideoJsPlayer
90 private readonly tech: videojs.Tech
91 private readonly source: videojs.Tech.SourceObject
92 private readonly vjs: typeof videojs
93
94 private hls: Hlsjs & { manualLevel?: number } // FIXME: typings
95 private hlsjsConfig: Partial<Hlsjs.Config & { cueHandler: any }> = null
96
97 private _duration: number = null
98 private metadata: Metadata = null
99 private isLive: boolean = null
100 private dvrDuration: number = null
101 private edgeMargin: number = null
102
103 private handlers: { [ id in 'play' | 'addtrack' | 'playing' | 'textTracksChange' | 'audioTracksChange' ]: EventListener } = {
104 play: null,
105 addtrack: null,
106 playing: null,
107 textTracksChange: null,
108 audioTracksChange: null
109 }
110
111 private uiTextTrackHandled = false
112
113 constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) {
114 this.vjs = vjs
115 this.source = source
116
117 this.tech = tech;
118 (this.tech as any).name_ = 'Hlsjs'
119
120 this.videoElement = tech.el() as HTMLVideoElement
121 this.player = vjs((tech.options_ as any).playerId)
122
123 this.videoElement.addEventListener('error', event => {
124 let errorTxt: string
125 const mediaError = (event.currentTarget as HTMLVideoElement).error
126
127 switch (mediaError.code) {
128 case mediaError.MEDIA_ERR_ABORTED:
129 errorTxt = 'You aborted the video playback'
130 break
131 case mediaError.MEDIA_ERR_DECODE:
132 errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support'
133 this._handleMediaError(mediaError)
134 break
135 case mediaError.MEDIA_ERR_NETWORK:
136 errorTxt = 'A network error caused the video download to fail part-way'
137 break
138 case mediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
139 errorTxt = 'The video could not be loaded, either because the server or network failed or because the format is not supported'
140 break
141
142 default:
143 errorTxt = mediaError.message
144 }
145
146 console.error('MEDIA_ERROR: ', errorTxt)
147 })
148
149 this.initialize()
150 }
151
152 duration () {
153 return this._duration || this.videoElement.duration || 0
154 }
155
156 seekable () {
157 if (this.hls.media) {
158 if (!this.isLive) {
159 return this.vjs.createTimeRanges(0, this.hls.media.duration)
160 }
161
162 // Video.js doesn't seem to like floating point timeranges
163 const startTime = Math.round(this.hls.media.duration - this.dvrDuration)
164 const endTime = Math.round(this.hls.media.duration - this.edgeMargin)
165
166 return this.vjs.createTimeRanges(startTime, endTime)
167 }
168
169 return this.vjs.createTimeRanges()
170 }
171
172 // See comment for `initialize` method.
173 dispose () {
174 this.videoElement.removeEventListener('play', this.handlers.play)
175 this.videoElement.textTracks.removeEventListener('addtrack', this.handlers.addtrack)
176 this.videoElement.removeEventListener('playing', this.handlers.playing)
177
178 this.player.textTracks().removeEventListener('change', this.handlers.textTracksChange)
179 this.uiTextTrackHandled = false
180
181 this.player.audioTracks().removeEventListener('change', this.handlers.audioTracksChange)
182
183 this.hls.destroy()
184 }
185
186 static addHook (type: string, callback: Function) {
187 Html5Hlsjs.hooks[ type ] = this.hooks[ type ] || []
188 Html5Hlsjs.hooks[ type ].push(callback)
189 }
190
191 static removeHook (type: string, callback: Function) {
192 if (Html5Hlsjs.hooks[ type ] === undefined) return false
193
194 const index = Html5Hlsjs.hooks[ type ].indexOf(callback)
195 if (index === -1) return false
196
197 Html5Hlsjs.hooks[ type ].splice(index, 1)
198
199 return true
200 }
201
202 private _executeHooksFor (type: string) {
203 if (Html5Hlsjs.hooks[ type ] === undefined) {
204 return
205 }
206
207 // ES3 and IE < 9
208 for (let i = 0; i < Html5Hlsjs.hooks[ type ].length; i++) {
209 Html5Hlsjs.hooks[ type ][ i ](this.player, this.hls)
210 }
211 }
212
213 private _handleMediaError (error: any) {
214 if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 1) {
215 console.info('trying to recover media error')
216 this.hls.recoverMediaError()
217 return
218 }
219
220 if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 2) {
221 console.info('2nd try to recover media error (by swapping audio codec')
222 this.hls.swapAudioCodec()
223 this.hls.recoverMediaError()
224 return
225 }
226
227 if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] > 2) {
228 console.info('bubbling media error up to VIDEOJS')
229 this.tech.error = () => error
230 this.tech.trigger('error')
231 return
232 }
233 }
234
235 private _onError (_event: any, data: Hlsjs.errorData) {
236 const error: { message: string, code?: number } = {
237 message: `HLS.js error: ${data.type} - fatal: ${data.fatal} - ${data.details}`
238 }
239 console.error(error.message)
240
241 // increment/set error count
242 if (this.errorCounts[ data.type ]) this.errorCounts[ data.type ] += 1
243 else this.errorCounts[ data.type ] = 1
244
245 // Implement simple error handling based on hls.js documentation
246 // https://github.com/dailymotion/hls.js/blob/master/API.md#fifth-step-error-handling
247 if (data.fatal) {
248 switch (data.type) {
249 case Hlsjs.ErrorTypes.NETWORK_ERROR:
250 console.info('bubbling network error up to VIDEOJS')
251 error.code = 2
252 this.tech.error = () => error as any
253 this.tech.trigger('error')
254 break
255
256 case Hlsjs.ErrorTypes.MEDIA_ERROR:
257 error.code = 3
258 this._handleMediaError(error)
259 break
260
261 default:
262 // cannot recover
263 this.hls.destroy()
264 console.info('bubbling error up to VIDEOJS')
265 this.tech.error = () => error as any
266 this.tech.trigger('error')
267 break
268 }
269 }
270 }
271
272 private switchQuality (qualityId: number) {
273 this.hls.nextLevel = qualityId
274 }
275
276 private _levelLabel (level: Hlsjs.Level) {
277 if (this.player.srOptions_.levelLabelHandler) {
278 return this.player.srOptions_.levelLabelHandler(level)
279 }
280
281 if (level.height) return level.height + 'p'
282 if (level.width) return Math.round(level.width * 9 / 16) + 'p'
283 if (level.bitrate) return (level.bitrate / 1000) + 'kbps'
284
285 return 0
286 }
287
288 private _relayQualityChange (qualityLevels: QualityLevels) {
289 // Determine if it is "Auto" (all tracks enabled)
290 let isAuto = true
291
292 for (let i = 0; i < qualityLevels.length; i++) {
293 if (!qualityLevels[ i ]._enabled) {
294 isAuto = false
295 break
296 }
297 }
298
299 // Interact with ME
300 if (isAuto) {
301 this.hls.currentLevel = -1
302 return
303 }
304
305 // Find ID of highest enabled track
306 let selectedTrack: number
307
308 for (selectedTrack = qualityLevels.length - 1; selectedTrack >= 0; selectedTrack--) {
309 if (qualityLevels[ selectedTrack ]._enabled) {
310 break
311 }
312 }
313
314 this.hls.currentLevel = selectedTrack
315 }
316
317 private _handleQualityLevels () {
318 if (!this.metadata) return
319
320 const qualityLevels = this.player.qualityLevels && this.player.qualityLevels()
321 if (!qualityLevels) return
322
323 for (let i = 0; i < this.metadata.levels.length; i++) {
324 const details = this.metadata.levels[ i ]
325 const representation: QualityLevelRepresentation = {
326 id: i,
327 width: details.width,
328 height: details.height,
329 bandwidth: details.bitrate,
330 bitrate: details.bitrate,
331 _enabled: true
332 }
333
334 const self = this
335 representation.enabled = function (this: QualityLevels, level: number, toggle?: boolean) {
336 // Brightcove switcher works TextTracks-style (enable tracks that it wants to ABR on)
337 if (typeof toggle === 'boolean') {
338 this[ level ]._enabled = toggle
339 self._relayQualityChange(this)
340 }
341
342 return this[ level ]._enabled
343 }
344
345 qualityLevels.addQualityLevel(representation)
346 }
347 }
348
349 private _notifyVideoQualities () {
350 if (!this.metadata) return
351 const cleanTracklist = []
352
353 if (this.metadata.levels.length > 1) {
354 const autoLevel = {
355 id: -1,
356 label: 'auto',
357 selected: this.hls.manualLevel === -1
358 }
359 cleanTracklist.push(autoLevel)
360 }
361
362 this.metadata.levels.forEach((level, index) => {
363 // Don't write in level (shared reference with Hls.js)
364 const quality = {
365 id: index,
366 selected: index === this.hls.manualLevel,
367 label: this._levelLabel(level)
368 }
369
370 cleanTracklist.push(quality)
371 })
372
373 const payload = {
374 qualityData: { video: cleanTracklist },
375 qualitySwitchCallback: this.switchQuality.bind(this)
376 }
377
378 this.tech.trigger('loadedqualitydata', payload)
379
380 // Self-de-register so we don't raise the payload multiple times
381 this.videoElement.removeEventListener('playing', this.handlers.playing)
382 }
383
384 private _updateSelectedAudioTrack () {
385 const playerAudioTracks = this.tech.audioTracks()
386 for (let j = 0; j < playerAudioTracks.length; j++) {
387 // FIXME: typings
388 if ((playerAudioTracks[ j ] as any).enabled) {
389 this.hls.audioTrack = j
390 break
391 }
392 }
393 }
394
395 private _onAudioTracks () {
396 const hlsAudioTracks = this.hls.audioTracks as (AudioTrack & { name?: string, lang?: string })[] // FIXME typings
397 const playerAudioTracks = this.tech.audioTracks()
398
399 if (hlsAudioTracks.length > 1 && playerAudioTracks.length === 0) {
400 // Add Hls.js audio tracks if not added yet
401 for (let i = 0; i < hlsAudioTracks.length; i++) {
402 playerAudioTracks.addTrack(new this.vjs.AudioTrack({
403 id: i.toString(),
404 kind: 'alternative',
405 label: hlsAudioTracks[ i ].name || hlsAudioTracks[ i ].lang,
406 language: hlsAudioTracks[ i ].lang,
407 enabled: i === this.hls.audioTrack
408 }))
409 }
410
411 // Handle audio track change event
412 this.handlers.audioTracksChange = this._updateSelectedAudioTrack.bind(this)
413 playerAudioTracks.addEventListener('change', this.handlers.audioTracksChange)
414 }
415 }
416
417 private _getTextTrackLabel (textTrack: TextTrack) {
418 // Label here is readable label and is optional (used in the UI so if it is there it should be different)
419 return textTrack.label ? textTrack.label : textTrack.language
420 }
421
422 private _isSameTextTrack (track1: TextTrack, track2: TextTrack) {
423 return this._getTextTrackLabel(track1) === this._getTextTrackLabel(track2)
424 && track1.kind === track2.kind
425 }
426
427 private _updateSelectedTextTrack () {
428 const playerTextTracks = this.player.textTracks()
429 let activeTrack: TextTrack = null
430
431 for (let j = 0; j < playerTextTracks.length; j++) {
432 if (playerTextTracks[ j ].mode === 'showing') {
433 activeTrack = playerTextTracks[ j ]
434 break
435 }
436 }
437
438 const hlsjsTracks = this.videoElement.textTracks
439 for (let k = 0; k < hlsjsTracks.length; k++) {
440 if (hlsjsTracks[ k ].kind === 'subtitles' || hlsjsTracks[ k ].kind === 'captions') {
441 hlsjsTracks[ k ].mode = activeTrack && this._isSameTextTrack(hlsjsTracks[ k ], activeTrack)
442 ? 'showing'
443 : 'disabled'
444 }
445 }
446 }
447
448 private _startLoad () {
449 this.hls.startLoad(-1)
450 this.videoElement.removeEventListener('play', this.handlers.play)
451 }
452
453 private _oneLevelObjClone (obj: object) {
454 const result = {}
455 const objKeys = Object.keys(obj)
456 for (let i = 0; i < objKeys.length; i++) {
457 result[ objKeys[ i ] ] = obj[ objKeys[ i ] ]
458 }
459
460 return result
461 }
462
463 private _filterDisplayableTextTracks (textTracks: TextTrackList) {
464 const displayableTracks = []
465
466 // Filter out tracks that is displayable (captions or subtitles)
467 for (let idx = 0; idx < textTracks.length; idx++) {
468 if (textTracks[ idx ].kind === 'subtitles' || textTracks[ idx ].kind === 'captions') {
469 displayableTracks.push(textTracks[ idx ])
470 }
471 }
472
473 return displayableTracks
474 }
475
476 private _updateTextTrackList () {
477 const displayableTracks = this._filterDisplayableTextTracks(this.videoElement.textTracks)
478 const playerTextTracks = this.player.textTracks()
479
480 // Add stubs to make the caption switcher shows up
481 // Adding the Hls.js text track in will make us have double captions
482 for (let idx = 0; idx < displayableTracks.length; idx++) {
483 let isAdded = false
484
485 for (let jdx = 0; jdx < playerTextTracks.length; jdx++) {
486 if (this._isSameTextTrack(displayableTracks[ idx ], playerTextTracks[ jdx ])) {
487 isAdded = true
488 break
489 }
490 }
491
492 if (!isAdded) {
493 const hlsjsTextTrack = displayableTracks[ idx ]
494 this.player.addRemoteTextTrack({
495 kind: hlsjsTextTrack.kind as videojs.TextTrack.Kind,
496 label: this._getTextTrackLabel(hlsjsTextTrack),
497 language: hlsjsTextTrack.language,
498 srclang: hlsjsTextTrack.language
499 }, false)
500 }
501 }
502
503 // Handle UI switching
504 this._updateSelectedTextTrack()
505
506 if (!this.uiTextTrackHandled) {
507 this.handlers.textTracksChange = this._updateSelectedTextTrack.bind(this)
508 playerTextTracks.addEventListener('change', this.handlers.textTracksChange)
509
510 this.uiTextTrackHandled = true
511 }
512 }
513
514 private _onMetaData (_event: any, data: Hlsjs.manifestLoadedData) {
515 // This could arrive before 'loadedqualitydata' handlers is registered, remember it so we can raise it later
516 this.metadata = data as any
517 this._handleQualityLevels()
518 }
519
520 private _createCueHandler (captionConfig: any) {
521 return {
522 newCue: (track: any, startTime: number, endTime: number, captionScreen: { rows: any[] }) => {
523 let row: any
524 let cue: VTTCue
525 let text: string
526 const VTTCue = (window as any).VTTCue || (window as any).TextTrackCue
527
528 for (let r = 0; r < captionScreen.rows.length; r++) {
529 row = captionScreen.rows[ r ]
530 text = ''
531
532 if (!row.isEmpty()) {
533 for (let c = 0; c < row.chars.length; c++) {
534 text += row.chars[ c ].ucharj
535 }
536
537 cue = new VTTCue(startTime, endTime, text.trim())
538
539 // typeof null === 'object'
540 if (captionConfig != null && typeof captionConfig === 'object') {
541 // Copy client overridden property into the cue object
542 const configKeys = Object.keys(captionConfig)
543
544 for (let k = 0; k < configKeys.length; k++) {
545 cue[ configKeys[ k ] ] = captionConfig[ configKeys[ k ] ]
546 }
547 }
548 track.addCue(cue)
549 if (endTime === startTime) track.addCue(new VTTCue(endTime + 5, ''))
550 }
551 }
552 }
553 }
554 }
555
556 private _initHlsjs () {
557 const techOptions = this.tech.options_ as HlsjsConfigHandlerOptions
558 const srOptions_ = this.player.srOptions_
559
560 const hlsjsConfigRef = srOptions_ && srOptions_.hlsjsConfig || techOptions.hlsjsConfig
561 // Hls.js will write to the reference thus change the object for later streams
562 this.hlsjsConfig = hlsjsConfigRef ? this._oneLevelObjClone(hlsjsConfigRef) : {}
563
564 if ([ '', 'auto' ].includes(this.videoElement.preload) && !this.videoElement.autoplay && this.hlsjsConfig.autoStartLoad === undefined) {
565 this.hlsjsConfig.autoStartLoad = false
566 }
567
568 const captionConfig = srOptions_ && srOptions_.captionConfig || techOptions.captionConfig
569 if (captionConfig) {
570 this.hlsjsConfig.cueHandler = this._createCueHandler(captionConfig)
571 }
572
573 // If the user explicitly sets autoStartLoad to false, we're not going to enter the if block above
574 // That's why we have a separate if block here to set the 'play' listener
575 if (this.hlsjsConfig.autoStartLoad === false) {
576 this.handlers.play = this._startLoad.bind(this)
577 this.videoElement.addEventListener('play', this.handlers.play)
578 }
579
580 // _notifyVideoQualities sometimes runs before the quality picker event handler is registered -> no video switcher
581 this.handlers.playing = this._notifyVideoQualities.bind(this)
582 this.videoElement.addEventListener('playing', this.handlers.playing)
583
584 this.hls = new Hlsjs(this.hlsjsConfig)
585
586 this._executeHooksFor('beforeinitialize')
587
588 this.hls.on(Hlsjs.Events.ERROR, (event, data) => this._onError(event, data))
589 this.hls.on(Hlsjs.Events.AUDIO_TRACKS_UPDATED, () => this._onAudioTracks())
590 this.hls.on(Hlsjs.Events.MANIFEST_PARSED, (event, data) => this._onMetaData(event, data as any)) // FIXME: typings
591 this.hls.on(Hlsjs.Events.LEVEL_LOADED, (event, data) => {
592 // The DVR plugin will auto seek to "live edge" on start up
593 if (this.hlsjsConfig.liveSyncDuration) {
594 this.edgeMargin = this.hlsjsConfig.liveSyncDuration
595 } else if (this.hlsjsConfig.liveSyncDurationCount) {
596 this.edgeMargin = this.hlsjsConfig.liveSyncDurationCount * data.details.targetduration
597 }
598
599 this.isLive = data.details.live
600 this.dvrDuration = data.details.totalduration
601 this._duration = this.isLive ? Infinity : data.details.totalduration
602 })
603 this.hls.once(Hlsjs.Events.FRAG_LOADED, () => {
604 // Emit custom 'loadedmetadata' event for parity with `videojs-contrib-hls`
605 // Ref: https://github.com/videojs/videojs-contrib-hls#loadedmetadata
606 this.tech.trigger('loadedmetadata')
607 })
608
609 this.hls.attachMedia(this.videoElement)
610
611 this.handlers.addtrack = this._updateTextTrackList.bind(this)
612 this.videoElement.textTracks.addEventListener('addtrack', this.handlers.addtrack)
613
614 this.hls.loadSource(this.source.src)
615 }
616
617 private initialize () {
618 this._initHlsjs()
619 }
620}
621
622export {
623 Html5Hlsjs,
624 registerSourceHandler,
625 registerConfigPlugin
626}
diff --git a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
index 512054ae6..e86900faa 100644
--- a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -3,10 +3,11 @@ import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-vide
3import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs' 3import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
4import { Events, Segment } from 'p2p-media-loader-core' 4import { Events, Segment } from 'p2p-media-loader-core'
5import { timeToInt } from '../utils' 5import { timeToInt } from '../utils'
6import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
7import * as Hlsjs from 'hls.js'
6 8
7// videojs-hlsjs-plugin needs videojs in window 9registerConfigPlugin(videojs)
8window['videojs'] = videojs 10registerSourceHandler(videojs)
9require('@streamroot/videojs-hlsjs-plugin')
10 11
11const Plugin = videojs.getPlugin('plugin') 12const Plugin = videojs.getPlugin('plugin')
12class P2pMediaLoaderPlugin extends Plugin { 13class P2pMediaLoaderPlugin extends Plugin {
@@ -16,7 +17,7 @@ class P2pMediaLoaderPlugin extends Plugin {
16 } 17 }
17 private readonly options: P2PMediaLoaderPluginOptions 18 private readonly options: P2PMediaLoaderPluginOptions
18 19
19 private hlsjs: any // Don't type hlsjs to not bundle the module 20 private hlsjs: Hlsjs
20 private p2pEngine: Engine 21 private p2pEngine: Engine
21 private statsP2PBytes = { 22 private statsP2PBytes = {
22 pendingDownload: [] as number[], 23 pendingDownload: [] as number[],
@@ -88,9 +89,7 @@ class P2pMediaLoaderPlugin extends Plugin {
88 const options = this.player.tech(true).options_ as any 89 const options = this.player.tech(true).options_ as any
89 this.p2pEngine = options.hlsjsConfig.loader.getEngine() 90 this.p2pEngine = options.hlsjsConfig.loader.getEngine()
90 91
91 // Avoid using constants to not import hls.hs 92 this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHING, (_: any, data: any) => {
92 // https://github.com/video-dev/hls.js/blob/master/src/events.js#L37
93 this.hlsjs.on('hlsLevelSwitching', (_: any, data: any) => {
94 this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height }) 93 this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
95 }) 94 })
96 95
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 4e6387a53..dbf631a5e 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -211,9 +211,9 @@ export class PeertubePlayerManager {
211 } 211 }
212 212
213 if (mode === 'p2p-media-loader') { 213 if (mode === 'p2p-media-loader') {
214 const { streamrootHls } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule) 214 const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
215 215
216 html5 = streamrootHls.html5 216 html5 = hlsjs.html5
217 } 217 }
218 218
219 if (mode === 'webtorrent') { 219 if (mode === 'webtorrent') {
@@ -303,7 +303,7 @@ export class PeertubePlayerManager {
303 swarmId: p2pMediaLoaderOptions.playlistUrl 303 swarmId: p2pMediaLoaderOptions.playlistUrl
304 } 304 }
305 } 305 }
306 const streamrootHls = { 306 const hlsjs = {
307 levelLabelHandler: (level: { height: number, width: number }) => { 307 levelLabelHandler: (level: { height: number, width: number }) => {
308 const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === level.height) 308 const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === level.height)
309 309
@@ -322,7 +322,7 @@ export class PeertubePlayerManager {
322 } 322 }
323 } 323 }
324 324
325 const toAssign = { p2pMediaLoader, streamrootHls } 325 const toAssign = { p2pMediaLoader, hlsjs }
326 Object.assign(plugins, toAssign) 326 Object.assign(plugins, toAssign)
327 327
328 return toAssign 328 return toAssign
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index e45722661..8f3d76cac 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -1,13 +1,17 @@
1import videojs from 'video.js'
2import { PeerTubePlugin } from './peertube-plugin' 1import { PeerTubePlugin } from './peertube-plugin'
3import { WebTorrentPlugin } from './webtorrent/webtorrent-plugin' 2import { WebTorrentPlugin } from './webtorrent/webtorrent-plugin'
4import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin' 3import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin'
5import { PlayerMode } from './peertube-player-manager' 4import { PlayerMode } from './peertube-player-manager'
6import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager' 5import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
7import { VideoFile } from '@shared/models' 6import { VideoFile } from '@shared/models'
7import videojs from 'video.js'
8import { Config, Level } from 'hls.js'
8 9
9declare module 'video.js' { 10declare module 'video.js' {
11
10 export interface VideoJsPlayer { 12 export interface VideoJsPlayer {
13 srOptions_: HlsjsConfigHandlerOptions
14
11 theaterEnabled: boolean 15 theaterEnabled: boolean
12 16
13 // FIXME: add it to upstream typings 17 // FIXME: add it to upstream typings
@@ -21,32 +25,57 @@ declare module 'video.js' {
21 // Plugins 25 // Plugins
22 26
23 peertube (): PeerTubePlugin 27 peertube (): PeerTubePlugin
28
24 webtorrent (): WebTorrentPlugin 29 webtorrent (): WebTorrentPlugin
30
25 p2pMediaLoader (): P2pMediaLoaderPlugin 31 p2pMediaLoader (): P2pMediaLoaderPlugin
26 32
27 contextmenuUI (options: any): any 33 contextmenuUI (options: any): any
28 34
29 bezels (): void 35 bezels (): void
30 36
31 qualityLevels (): { height: number, id: number }[] & { 37 qualityLevels (): QualityLevels
32 selectedIndex: number
33 selectedIndex_: number
34
35 addQualityLevel (representation: {
36 id: number
37 label: string
38 height: number
39 _enabled: boolean
40 }): void
41 }
42 38
43 textTracks (): TextTrackList & { 39 textTracks (): TextTrackList & {
44 on: Function 40 on: Function
45 tracks_: { kind: string, mode: string, language: string }[] 41 tracks_: { kind: string, mode: string, language: string }[]
46 } 42 }
43
44 audioTracks (): AudioTrackList
47 } 45 }
48} 46}
49 47
48export interface VideoJSTechHLS extends videojs.Tech {
49 hlsProvider: any // FIXME: typings
50}
51
52export interface HlsjsConfigHandlerOptions {
53 hlsjsConfig?: Config & { cueHandler: any }// FIXME: typings
54 captionConfig?: any // FIXME: typings
55
56 levelLabelHandler?: (level: Level) => string
57}
58
59type QualityLevelRepresentation = {
60 id: number
61 height: number
62
63 label?: string
64 width?: number
65 bandwidth?: number
66 bitrate?: number
67
68 enabled?: Function
69 _enabled: boolean
70}
71
72type QualityLevels = QualityLevelRepresentation[] & {
73 selectedIndex: number
74 selectedIndex_: number
75
76 addQualityLevel (representation: QualityLevelRepresentation): void
77}
78
50type VideoJSCaption = { 79type VideoJSCaption = {
51 label: string 80 label: string
52 language: string 81 language: string
@@ -148,5 +177,7 @@ export {
148 WebtorrentPluginOptions, 177 WebtorrentPluginOptions,
149 P2PMediaLoaderPluginOptions, 178 P2PMediaLoaderPluginOptions,
150 VideoJSPluginOptions, 179 VideoJSPluginOptions,
151 LoadedQualityData 180 LoadedQualityData,
181 QualityLevelRepresentation,
182 QualityLevels
152} 183}