aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-01-24 13:43:44 +0100
committerChocobozzz <chocobozzz@cpy.re>2019-02-11 09:13:02 +0100
commit4348a27d252a3349bafa7ef4859c0e2cf060c255 (patch)
treeab3d60118ebb31c84050c3d544dbd600006491d1
parent3b6f205c34bb931de0323581edf991ca33256e6b (diff)
downloadPeerTube-4348a27d252a3349bafa7ef4859c0e2cf060c255.tar.gz
PeerTube-4348a27d252a3349bafa7ef4859c0e2cf060c255.tar.zst
PeerTube-4348a27d252a3349bafa7ef4859c0e2cf060c255.zip
Add lazy loading in player
-rw-r--r--client/src/assets/player/p2p-media-loader-plugin.ts11
-rw-r--r--client/src/assets/player/peertube-player-manager.ts24
-rw-r--r--client/src/standalone/videos/embed.ts1
-rw-r--r--client/tsconfig.json1
4 files changed, 25 insertions, 12 deletions
diff --git a/client/src/assets/player/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader-plugin.ts
index 25117e51e..a5b20219f 100644
--- a/client/src/assets/player/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/p2p-media-loader-plugin.ts
@@ -5,10 +5,9 @@ import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo, VideoJSComponentInterfa
5 5
6// videojs-hlsjs-plugin needs videojs in window 6// videojs-hlsjs-plugin needs videojs in window
7window['videojs'] = videojs 7window['videojs'] = videojs
8import '@streamroot/videojs-hlsjs-plugin' 8require('@streamroot/videojs-hlsjs-plugin')
9 9
10import { Engine, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs' 10import { Engine, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
11import * as Hls from 'hls.js'
12import { Events } from 'p2p-media-loader-core' 11import { Events } from 'p2p-media-loader-core'
13 12
14const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin') 13const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
@@ -18,7 +17,7 @@ class P2pMediaLoaderPlugin extends Plugin {
18 INFO_SCHEDULER: 1000 // Don't change this 17 INFO_SCHEDULER: 1000 // Don't change this
19 } 18 }
20 19
21 private hlsjs: Hls 20 private hlsjs: any // Don't type hlsjs to not bundle the module
22 private p2pEngine: Engine 21 private p2pEngine: Engine
23 private statsP2PBytes = { 22 private statsP2PBytes = {
24 pendingDownload: [] as number[], 23 pendingDownload: [] as number[],
@@ -33,7 +32,7 @@ class P2pMediaLoaderPlugin extends Plugin {
33 constructor (player: videojs.Player, options: P2PMediaLoaderPluginOptions) { 32 constructor (player: videojs.Player, options: P2PMediaLoaderPluginOptions) {
34 super(player, options) 33 super(player, options)
35 34
36 videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: Hls) => { 35 videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
37 this.hlsjs = hlsjs 36 this.hlsjs = hlsjs
38 37
39 this.initialize() 38 this.initialize()
@@ -54,7 +53,9 @@ class P2pMediaLoaderPlugin extends Plugin {
54 private initialize () { 53 private initialize () {
55 this.p2pEngine = this.player.tech_.options_.hlsjsConfig.loader.getEngine() 54 this.p2pEngine = this.player.tech_.options_.hlsjsConfig.loader.getEngine()
56 55
57 this.hlsjs.on(Hls.Events.LEVEL_SWITCHING, (_, data: Hls.levelSwitchingData) => { 56 // Avoid using constants to not import hls.hs
57 // https://github.com/video-dev/hls.js/blob/master/src/events.js#L37
58 this.hlsjs.on('hlsLevelSwitching', (_: any, data: any) => {
58 this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height }) 59 this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
59 }) 60 })
60 61
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 2e090847c..91ca6a2aa 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -15,7 +15,6 @@ import './videojs-components/theater-button'
15import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings' 15import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings'
16import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils' 16import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
17import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n' 17import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
18import { Engine } from 'p2p-media-loader-hlsjs'
19 18
20// Change 'Playback Rate' to 'Speed' (smaller for our settings menu) 19// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
21videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed' 20videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
@@ -32,6 +31,7 @@ export type WebtorrentOptions = {
32 31
33export type P2PMediaLoaderOptions = { 32export type P2PMediaLoaderOptions = {
34 playlistUrl: string 33 playlistUrl: string
34 trackerAnnounce: string[]
35} 35}
36 36
37export type CommonOptions = { 37export type CommonOptions = {
@@ -88,10 +88,17 @@ export class PeertubePlayerManager {
88 } 88 }
89 89
90 static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions) { 90 static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions) {
91 let p2pMediaLoader: any
92
91 if (mode === 'webtorrent') await import('./webtorrent-plugin') 93 if (mode === 'webtorrent') await import('./webtorrent-plugin')
92 if (mode === 'p2p-media-loader') await import('./p2p-media-loader-plugin') 94 if (mode === 'p2p-media-loader') {
95 [ p2pMediaLoader ] = await Promise.all([
96 import('p2p-media-loader-hlsjs'),
97 import('./p2p-media-loader-plugin')
98 ])
99 }
93 100
94 const videojsOptions = this.getVideojsOptions(mode, options) 101 const videojsOptions = this.getVideojsOptions(mode, options, p2pMediaLoader)
95 102
96 await this.loadLocaleInVideoJS(options.common.serverUrl, options.common.language) 103 await this.loadLocaleInVideoJS(options.common.serverUrl, options.common.language)
97 104
@@ -133,7 +140,7 @@ export class PeertubePlayerManager {
133 return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json)) 140 return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
134 } 141 }
135 142
136 private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions) { 143 private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions, p2pMediaLoaderModule?: any) {
137 const commonOptions = options.common 144 const commonOptions = options.common
138 const webtorrentOptions = options.webtorrent 145 const webtorrentOptions = options.webtorrent
139 const p2pMediaLoaderOptions = options.p2pMediaLoader 146 const p2pMediaLoaderOptions = options.p2pMediaLoader
@@ -157,16 +164,19 @@ export class PeertubePlayerManager {
157 src: p2pMediaLoaderOptions.playlistUrl 164 src: p2pMediaLoaderOptions.playlistUrl
158 } 165 }
159 166
160 const config = { 167 const p2pMediaLoaderConfig = {
168 // loader: {
169 // trackerAnnounce: p2pMediaLoaderOptions.trackerAnnounce
170 // },
161 segments: { 171 segments: {
162 swarmId: 'swarm' // TODO: choose swarm id 172 swarmId: p2pMediaLoaderOptions.playlistUrl
163 } 173 }
164 } 174 }
165 const streamrootHls = { 175 const streamrootHls = {
166 html5: { 176 html5: {
167 hlsjsConfig: { 177 hlsjsConfig: {
168 liveSyncDurationCount: 7, 178 liveSyncDurationCount: 7,
169 loader: new Engine(config).createLoaderClass() 179 loader: new p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass()
170 } 180 }
171 } 181 }
172 } 182 }
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 0d165ea7b..6dd9a3d76 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -323,6 +323,7 @@ class PeerTubeEmbed {
323 p2pMediaLoader: { 323 p2pMediaLoader: {
324 // playlistUrl: 'https://akamai-axtest.akamaized.net/routes/lapd-v1-acceptance/www_c4/Manifest.m3u8' 324 // playlistUrl: 'https://akamai-axtest.akamaized.net/routes/lapd-v1-acceptance/www_c4/Manifest.m3u8'
325 // playlistUrl: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8' 325 // playlistUrl: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'
326 // trackerAnnounce: [ window.location.origin.replace(/^http/, 'ws') + '/tracker/socket' ],
326 playlistUrl: 'https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8' 327 playlistUrl: 'https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8'
327 } 328 }
328 }) 329 })
diff --git a/client/tsconfig.json b/client/tsconfig.json
index beca79e01..3f9986f8a 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -5,6 +5,7 @@
5 "sourceMap": true, 5 "sourceMap": true,
6 "declaration": false, 6 "declaration": false,
7 "moduleResolution": "node", 7 "moduleResolution": "node",
8 "module": "esnext",
8 "emitDecoratorMetadata": true, 9 "emitDecoratorMetadata": true,
9 "experimentalDecorators": true, 10 "experimentalDecorators": true,
10 "noImplicitAny": true, 11 "noImplicitAny": true,