X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fassets%2Fplayer%2Fpeertube-player-manager.ts;h=6cdd543725604d32b08ddbb6aee2e6f3bec5bceb;hb=f0a3988066f72a28bb44520af072f18d91d77dde;hp=3fdba6fdf207f32a93ba5164365ea6c0aa4607db;hpb=092092969633bbcf6d4891a083ea497a7d5c3154;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index 3fdba6fdf..6cdd54372 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts @@ -41,6 +41,7 @@ export type P2PMediaLoaderOptions = { export type CommonOptions = { playerElement: HTMLVideoElement + onPlayerElementChange: (element: HTMLVideoElement) => void autoplay: boolean videoDuration: number @@ -48,6 +49,7 @@ export type CommonOptions = { inactivityTimeout: number poster: string startTime: number | string + stopTime: number | string theaterMode: boolean captions: boolean @@ -71,13 +73,14 @@ export type CommonOptions = { export type PeertubePlayerManagerOptions = { common: CommonOptions, - webtorrent?: WebtorrentOptions, + webtorrent: WebtorrentOptions, p2pMediaLoader?: P2PMediaLoaderOptions } export class PeertubePlayerManager { private static videojsLocaleCache: { [ path: string ]: any } = {} + private static playerElementClassName: string static getServerTranslations (serverUrl: string, locale: string) { const path = PeertubePlayerManager.getLocalePath(serverUrl, locale) @@ -95,6 +98,8 @@ export class PeertubePlayerManager { static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions) { let p2pMediaLoader: any + this.playerElementClassName = options.common.playerElement.className + if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin') if (mode === 'p2p-media-loader') { [ p2pMediaLoader ] = await Promise.all([ @@ -112,6 +117,9 @@ export class PeertubePlayerManager { videojs(options.common.playerElement, videojsOptions, function (this: any) { const player = this + player.tech_.one('error', () => self.maybeFallbackToWebTorrent(mode, player, options)) + player.one('error', () => self.maybeFallbackToWebTorrent(mode, player, options)) + self.addContextMenu(mode, player, options.common.embedUrl) return res(player) @@ -119,6 +127,39 @@ export class PeertubePlayerManager { }) } + private static async maybeFallbackToWebTorrent (currentMode: PlayerMode, player: any, options: PeertubePlayerManagerOptions) { + if (currentMode === 'webtorrent') return + + console.log('Fallback to webtorrent.') + + const newVideoElement = document.createElement('video') + newVideoElement.className = this.playerElementClassName + + // VideoJS wraps our video element inside a div + let currentParentPlayerElement = options.common.playerElement.parentNode + // Fix on IOS, don't ask me why + if (!currentParentPlayerElement) currentParentPlayerElement = document.getElementById(options.common.playerElement.id).parentNode + + currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement) + + options.common.playerElement = newVideoElement + options.common.onPlayerElementChange(newVideoElement) + + player.dispose() + + await import('./webtorrent/webtorrent-plugin') + + const mode = 'webtorrent' + const videojsOptions = this.getVideojsOptions(mode, options) + + const self = this + videojs(newVideoElement, videojsOptions, function (this: any) { + const player = this + + self.addContextMenu(mode, player, options.common.embedUrl) + }) + } + private static loadLocaleInVideoJS (serverUrl: string, locale: string) { const path = PeertubePlayerManager.getLocalePath(serverUrl, locale) // It is the default locale, nothing to translate @@ -159,17 +200,18 @@ export class PeertubePlayerManager { autoplay, // Use peertube plugin autoplay because we get the file by webtorrent videoViewUrl: commonOptions.videoViewUrl, videoDuration: commonOptions.videoDuration, - startTime: commonOptions.startTime, userWatching: commonOptions.userWatching, subtitle: commonOptions.subtitle, - videoCaptions: commonOptions.videoCaptions + videoCaptions: commonOptions.videoCaptions, + stopTime: commonOptions.stopTime } } - if (p2pMediaLoaderOptions) { + if (mode === 'p2p-media-loader') { const p2pMediaLoader: P2PMediaLoaderPluginOptions = { redundancyBaseUrls: options.p2pMediaLoader.redundancyBaseUrls, type: 'application/x-mpegURL', + startTime: commonOptions.startTime, src: p2pMediaLoaderOptions.playlistUrl } @@ -209,12 +251,13 @@ export class PeertubePlayerManager { html5 = streamrootHls.html5 } - if (webtorrentOptions) { + if (mode === 'webtorrent') { const webtorrent = { autoplay, videoDuration: commonOptions.videoDuration, playerElement: commonOptions.playerElement, - videoFiles: webtorrentOptions.videoFiles + videoFiles: webtorrentOptions.videoFiles, + startTime: commonOptions.startTime } Object.assign(plugins, { webtorrent }) @@ -235,7 +278,7 @@ export class PeertubePlayerManager { : undefined, // Undefined so the player knows it has to check the local storage poster: commonOptions.poster, - autoplay, + autoplay: autoplay === true ? 'any' : autoplay, // Use 'any' instead of true to get notifier by videojs if autoplay fails inactivityTimeout: commonOptions.inactivityTimeout, playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ], plugins,