From 4348a27d252a3349bafa7ef4859c0e2cf060c255 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 24 Jan 2019 13:43:44 +0100 Subject: [PATCH] Add lazy loading in player --- .../assets/player/p2p-media-loader-plugin.ts | 11 +++++---- .../assets/player/peertube-player-manager.ts | 24 +++++++++++++------ client/src/standalone/videos/embed.ts | 1 + client/tsconfig.json | 1 + 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 // 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 }) }) 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' 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) { + let p2pMediaLoader: any + if (mode === 'webtorrent') await import('./webtorrent-plugin') - if (mode === 'p2p-media-loader') await import('./p2p-media-loader-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) + 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() } } } 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 { 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' } }) 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 @@ "sourceMap": true, "declaration": false, "moduleResolution": "node", + "module": "esnext", "emitDecoratorMetadata": true, "experimentalDecorators": true, "noImplicitAny": true, -- 2.25.1