1 // FIXME: something weird with our path definition in tsconfig and typings
3 import * as videojs from 'video.js'
4 import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo, VideoJSComponentInterface } from '../peertube-videojs-typings'
5 import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
6 import { Events } from 'p2p-media-loader-core'
7 import { timeToInt } from '../utils'
9 // videojs-hlsjs-plugin needs videojs in window
10 window['videojs'] = videojs
11 require('@streamroot/videojs-hlsjs-plugin')
13 const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
14 class P2pMediaLoaderPlugin extends Plugin {
16 private readonly CONSTANTS = {
17 INFO_SCHEDULER: 1000 // Don't change this
19 private readonly options: P2PMediaLoaderPluginOptions
21 private hlsjs: any // Don't type hlsjs to not bundle the module
22 private p2pEngine: Engine
23 private statsP2PBytes = {
24 pendingDownload: [] as number[],
25 pendingUpload: [] as number[],
30 private statsHTTPBytes = {
31 pendingDownload: [] as number[],
32 pendingUpload: [] as number[],
36 private startTime: number
38 private networkInfoInterval: any
40 constructor (player: videojs.Player, options: P2PMediaLoaderPluginOptions) {
41 super(player, options)
43 this.options = options
45 if (!videojs.Html5Hlsjs) {
46 const message = 'HLS.js does not seem to be supported.'
49 player.ready(() => player.trigger('error', new Error(message)))
53 videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
57 initVideoJsContribHlsJsPlayer(player)
59 this.startTime = timeToInt(options.startTime)
60 console.log(this.startTime)
67 player.one('play', () => {
68 player.addClass('vjs-has-big-play-button-clicked')
71 player.ready(() => this.initialize())
75 if (this.hlsjs) this.hlsjs.destroy()
76 if (this.p2pEngine) this.p2pEngine.destroy()
78 clearInterval(this.networkInfoInterval)
81 private initialize () {
82 initHlsJsPlayer(this.hlsjs)
84 const tech = this.player.tech_
85 this.p2pEngine = tech.options_.hlsjsConfig.loader.getEngine()
87 // Avoid using constants to not import hls.hs
88 // https://github.com/video-dev/hls.js/blob/master/src/events.js#L37
89 this.hlsjs.on('hlsLevelSwitching', (_: any, data: any) => {
90 this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
93 this.p2pEngine.on(Events.SegmentError, (segment, err) => {
94 console.error('Segment error.', segment, err)
97 this.statsP2PBytes.numPeers = 1 + this.options.redundancyBaseUrls.length
101 this.player.one('canplay', () => {
102 if (this.startTime) {
103 this.player.currentTime(this.startTime)
108 private runStats () {
109 this.p2pEngine.on(Events.PieceBytesDownloaded, (method: string, size: number) => {
110 const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
112 elem.pendingDownload.push(size)
113 elem.totalDownload += size
116 this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, size: number) => {
117 const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
119 elem.pendingUpload.push(size)
120 elem.totalUpload += size
123 this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++)
124 this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--)
126 this.networkInfoInterval = setInterval(() => {
127 const p2pDownloadSpeed = this.arraySum(this.statsP2PBytes.pendingDownload)
128 const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload)
130 const httpDownloadSpeed = this.arraySum(this.statsHTTPBytes.pendingDownload)
131 const httpUploadSpeed = this.arraySum(this.statsHTTPBytes.pendingUpload)
133 this.statsP2PBytes.pendingDownload = []
134 this.statsP2PBytes.pendingUpload = []
135 this.statsHTTPBytes.pendingDownload = []
136 this.statsHTTPBytes.pendingUpload = []
138 return this.player.trigger('p2pInfo', {
140 downloadSpeed: httpDownloadSpeed,
141 uploadSpeed: httpUploadSpeed,
142 downloaded: this.statsHTTPBytes.totalDownload,
143 uploaded: this.statsHTTPBytes.totalUpload
146 downloadSpeed: p2pDownloadSpeed,
147 uploadSpeed: p2pUploadSpeed,
148 numPeers: this.statsP2PBytes.numPeers,
149 downloaded: this.statsP2PBytes.totalDownload,
150 uploaded: this.statsP2PBytes.totalUpload
152 } as PlayerNetworkInfo)
153 }, this.CONSTANTS.INFO_SCHEDULER)
156 private arraySum (data: number[]) {
157 return data.reduce((a: number, b: number) => a + b, 0)
161 videojs.registerPlugin('p2pMediaLoader', P2pMediaLoaderPlugin)
162 export { P2pMediaLoaderPlugin }