diff options
Diffstat (limited to 'client/src/assets/player/p2p-media-loader-plugin.ts')
-rw-r--r-- | client/src/assets/player/p2p-media-loader-plugin.ts | 82 |
1 files changed, 76 insertions, 6 deletions
diff --git a/client/src/assets/player/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader-plugin.ts index 6d07a2c9c..25117e51e 100644 --- a/client/src/assets/player/p2p-media-loader-plugin.ts +++ b/client/src/assets/player/p2p-media-loader-plugin.ts | |||
@@ -1,25 +1,45 @@ | |||
1 | // FIXME: something weird with our path definition in tsconfig and typings | 1 | // FIXME: something weird with our path definition in tsconfig and typings |
2 | // @ts-ignore | 2 | // @ts-ignore |
3 | import * as videojs from 'video.js' | 3 | import * as videojs from 'video.js' |
4 | import { P2PMediaLoaderPluginOptions, VideoJSComponentInterface } from './peertube-videojs-typings' | 4 | import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo, VideoJSComponentInterface } from './peertube-videojs-typings' |
5 | 5 | ||
6 | // videojs-hlsjs-plugin needs videojs in window | 6 | // videojs-hlsjs-plugin needs videojs in window |
7 | window['videojs'] = videojs | 7 | window['videojs'] = videojs |
8 | import '@streamroot/videojs-hlsjs-plugin' | 8 | import '@streamroot/videojs-hlsjs-plugin' |
9 | 9 | ||
10 | import { initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs' | 10 | import { Engine, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs' |
11 | 11 | import * as Hls from 'hls.js' | |
12 | // import { Events } from '../p2p-media-loader/p2p-media-loader-core/lib' | 12 | import { Events } from 'p2p-media-loader-core' |
13 | 13 | ||
14 | const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin') | 14 | const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin') |
15 | class P2pMediaLoaderPlugin extends Plugin { | 15 | class P2pMediaLoaderPlugin extends Plugin { |
16 | 16 | ||
17 | private readonly CONSTANTS = { | ||
18 | INFO_SCHEDULER: 1000 // Don't change this | ||
19 | } | ||
20 | |||
21 | private hlsjs: Hls | ||
22 | private p2pEngine: Engine | ||
23 | private statsP2PBytes = { | ||
24 | pendingDownload: [] as number[], | ||
25 | pendingUpload: [] as number[], | ||
26 | numPeers: 0, | ||
27 | totalDownload: 0, | ||
28 | totalUpload: 0 | ||
29 | } | ||
30 | |||
31 | private networkInfoInterval: any | ||
32 | |||
17 | constructor (player: videojs.Player, options: P2PMediaLoaderPluginOptions) { | 33 | constructor (player: videojs.Player, options: P2PMediaLoaderPluginOptions) { |
18 | super(player, options) | 34 | super(player, options) |
19 | 35 | ||
20 | initVideoJsContribHlsJsPlayer(player) | 36 | videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: Hls) => { |
37 | this.hlsjs = hlsjs | ||
21 | 38 | ||
22 | console.log(options) | 39 | this.initialize() |
40 | }) | ||
41 | |||
42 | initVideoJsContribHlsJsPlayer(player) | ||
23 | 43 | ||
24 | player.src({ | 44 | player.src({ |
25 | type: options.type, | 45 | type: options.type, |
@@ -27,6 +47,56 @@ class P2pMediaLoaderPlugin extends Plugin { | |||
27 | }) | 47 | }) |
28 | } | 48 | } |
29 | 49 | ||
50 | dispose () { | ||
51 | clearInterval(this.networkInfoInterval) | ||
52 | } | ||
53 | |||
54 | private initialize () { | ||
55 | this.p2pEngine = this.player.tech_.options_.hlsjsConfig.loader.getEngine() | ||
56 | |||
57 | this.hlsjs.on(Hls.Events.LEVEL_SWITCHING, (_, data: Hls.levelSwitchingData) => { | ||
58 | this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height }) | ||
59 | }) | ||
60 | |||
61 | this.runStats() | ||
62 | } | ||
63 | |||
64 | private runStats () { | ||
65 | this.p2pEngine.on(Events.PieceBytesDownloaded, (method: string, size: number) => { | ||
66 | if (method === 'p2p') { | ||
67 | this.statsP2PBytes.pendingDownload.push(size) | ||
68 | this.statsP2PBytes.totalDownload += size | ||
69 | } | ||
70 | }) | ||
71 | |||
72 | this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, size: number) => { | ||
73 | if (method === 'p2p') { | ||
74 | this.statsP2PBytes.pendingUpload.push(size) | ||
75 | this.statsP2PBytes.totalUpload += size | ||
76 | } | ||
77 | }) | ||
78 | |||
79 | this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++) | ||
80 | this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--) | ||
81 | |||
82 | this.networkInfoInterval = setInterval(() => { | ||
83 | let downloadSpeed = this.statsP2PBytes.pendingDownload.reduce((a: number, b: number) => a + b, 0) | ||
84 | let uploadSpeed = this.statsP2PBytes.pendingUpload.reduce((a: number, b: number) => a + b, 0) | ||
85 | |||
86 | this.statsP2PBytes.pendingDownload = [] | ||
87 | this.statsP2PBytes.pendingUpload = [] | ||
88 | |||
89 | return this.player.trigger('p2pInfo', { | ||
90 | p2p: { | ||
91 | downloadSpeed, | ||
92 | uploadSpeed, | ||
93 | numPeers: this.statsP2PBytes.numPeers, | ||
94 | downloaded: this.statsP2PBytes.totalDownload, | ||
95 | uploaded: this.statsP2PBytes.totalUpload | ||
96 | } | ||
97 | } as PlayerNetworkInfo) | ||
98 | }, this.CONSTANTS.INFO_SCHEDULER) | ||
99 | } | ||
30 | } | 100 | } |
31 | 101 | ||
32 | videojs.registerPlugin('p2pMediaLoader', P2pMediaLoaderPlugin) | 102 | videojs.registerPlugin('p2pMediaLoader', P2pMediaLoaderPlugin) |