Add lazy loading in player

client/src/assets/player/p2p-media-loader-plugin.ts

@@ -5,10 +5,9 @@ import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo, VideoJSComponentInterfa
 
 // videojs-hlsjs-plugin needs videojs in window
 window['videojs'] = videojs
-import '@streamroot/videojs-hlsjs-plugin'
+require('@streamroot/videojs-hlsjs-plugin')
 
 import { Engine, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
-import * as Hls from 'hls.js'
 import { Events } from 'p2p-media-loader-core'
 
 const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
@@ -18,7 +17,7 @@ class P2pMediaLoaderPlugin extends Plugin {
     INFO_SCHEDULER: 1000 // Don't change this
   }
 
-  private hlsjs: Hls
+  private hlsjs: any // Don't type hlsjs to not bundle the module
   private p2pEngine: Engine
   private statsP2PBytes = {
     pendingDownload: [] as number[],
@@ -33,7 +32,7 @@ class P2pMediaLoaderPlugin extends Plugin {
   constructor (player: videojs.Player, options: P2PMediaLoaderPluginOptions) {
     super(player, options)
 
-    videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: Hls) => {
+    videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
       this.hlsjs = hlsjs
 
       this.initialize()
@@ -54,7 +53,9 @@ class P2pMediaLoaderPlugin extends Plugin {
   private initialize () {
     this.p2pEngine = this.player.tech_.options_.hlsjsConfig.loader.getEngine()
 
-    this.hlsjs.on(Hls.Events.LEVEL_SWITCHING, (_, data: Hls.levelSwitchingData) => {
+    // Avoid using constants to not import hls.hs
+    // https://github.com/video-dev/hls.js/blob/master/src/events.js#L37
+    this.hlsjs.on('hlsLevelSwitching', (_: any, data: any) => {
       this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
     })
 

client/src/assets/player/peertube-player-manager.ts

@@ -15,7 +15,6 @@ import './videojs-components/theater-button'
 import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings'
 import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
 import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
-import { Engine } from 'p2p-media-loader-hlsjs'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
 videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
@@ -32,6 +31,7 @@ export type WebtorrentOptions = {
 
 export type P2PMediaLoaderOptions = {
   playlistUrl: string
+  trackerAnnounce: string[]
 }
 
 export type CommonOptions = {
@@ -88,10 +88,17 @@ export class PeertubePlayerManager {
   }
 
   static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions) {
-    if (mode === 'webtorrent') await import('./webtorrent-plugin')
-    if (mode === 'p2p-media-loader') await import('./p2p-media-loader-plugin')
+    let p2pMediaLoader: any
 
-    const videojsOptions = this.getVideojsOptions(mode, options)
+    if (mode === 'webtorrent') await import('./webtorrent-plugin')
+    if (mode === 'p2p-media-loader') {
+      [ p2pMediaLoader ] = await Promise.all([
+        import('p2p-media-loader-hlsjs'),
+        import('./p2p-media-loader-plugin')
+      ])
+    }
+
+    const videojsOptions = this.getVideojsOptions(mode, options, p2pMediaLoader)
 
     await this.loadLocaleInVideoJS(options.common.serverUrl, options.common.language)
 
@@ -133,7 +140,7 @@ export class PeertubePlayerManager {
     return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
   }
 
-  private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions) {
+  private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions, p2pMediaLoaderModule?: any) {
     const commonOptions = options.common
     const webtorrentOptions = options.webtorrent
     const p2pMediaLoaderOptions = options.p2pMediaLoader
@@ -157,16 +164,19 @@ export class PeertubePlayerManager {
         src: p2pMediaLoaderOptions.playlistUrl
       }
 
-      const config = {
+      const p2pMediaLoaderConfig = {
+        // loader: {
+        //   trackerAnnounce: p2pMediaLoaderOptions.trackerAnnounce
+        // },
         segments: {
-          swarmId: 'swarm' // TODO: choose swarm id
+          swarmId: p2pMediaLoaderOptions.playlistUrl
         }
       }
       const streamrootHls = {
         html5: {
           hlsjsConfig: {
             liveSyncDurationCount: 7,
-            loader: new Engine(config).createLoaderClass()
+            loader: new p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass()
           }
         }
       }

client/src/standalone/videos/embed.ts

@@ -323,6 +323,7 @@ class PeerTubeEmbed {
         p2pMediaLoader: {
           // playlistUrl: 'https://akamai-axtest.akamaized.net/routes/lapd-v1-acceptance/www_c4/Manifest.m3u8'
           // playlistUrl: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'
+          // trackerAnnounce: [ window.location.origin.replace(/^http/, 'ws') + '/tracker/socket' ],
           playlistUrl: 'https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8'
         }
       })

client/tsconfig.json

@@ -5,6 +5,7 @@
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
+    "module": "esnext",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "noImplicitAny": true,