X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fassets%2Fplayer%2Fpeertube-player-manager.ts;h=2f4e0ac1a03ca30c9e77ac855dffc054cee61e76;hb=3bcb4fd74190aecb22c39a88772e80b223a87472;hp=9155c0698f841b4ed86e6e1f8b47367050fe5990;hpb=2adfc7ea9a1f858db874df9fe322e7ae833db77c;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 9155c0698..2f4e0ac1a 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts @@ -5,6 +5,7 @@ import 'videojs-hotkeys' import 'videojs-dock' import 'videojs-contextmenu-ui' import 'videojs-contrib-quality-levels' +import './upnext/upnext-plugin' import './peertube-plugin' import './videojs-components/peertube-link-button' import './videojs-components/resolution-menu-button' @@ -13,9 +14,12 @@ import './videojs-components/p2p-info-button' import './videojs-components/peertube-load-progress-bar' import './videojs-components/theater-button' import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings' -import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils' +import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils' import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n' -import { Engine } from 'p2p-media-loader-hlsjs' +import { segmentValidatorFactory } from './p2p-media-loader/segment-validator' +import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder' +import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager' +import { getStoredP2PEnabled } from './peertube-player-local-storage' // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed' @@ -24,38 +28,49 @@ videojsUntyped.getComponent('CaptionsButton').prototype.controlText_ = 'Subtitle // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know) videojsUntyped.getComponent('CaptionsButton').prototype.label_ = ' ' -type PlayerMode = 'webtorrent' | 'p2p-media-loader' +export type PlayerMode = 'webtorrent' | 'p2p-media-loader' -type WebtorrentOptions = { +export type WebtorrentOptions = { videoFiles: VideoFile[] } -type P2PMediaLoaderOptions = { +export type P2PMediaLoaderOptions = { playlistUrl: string + segmentsSha256Url: string + trackerAnnounce: string[] + redundancyBaseUrls: string[] + videoFiles: VideoFile[] } -type CommonOptions = { +export interface CustomizationOptions { + startTime: number | string + stopTime: number | string + + controls?: boolean + muted?: boolean + loop?: boolean + subtitle?: string + + peertubeLink: boolean +} + +export interface CommonOptions extends CustomizationOptions { playerElement: HTMLVideoElement + onPlayerElementChange: (element: HTMLVideoElement) => void autoplay: boolean videoDuration: number enableHotkeys: boolean inactivityTimeout: number poster: string - startTime: number | string - theaterMode: boolean + theaterButton: boolean captions: boolean - peertubeLink: boolean videoViewUrl: string embedUrl: string language?: string - controls?: boolean - muted?: boolean - loop?: boolean - subtitle?: string videoCaptions: VideoJSCaption[] @@ -66,13 +81,15 @@ 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 + private static onPlayerChange: (player: any) => void static getServerTranslations (serverUrl: string, locale: string) { const path = PeertubePlayerManager.getLocalePath(serverUrl, locale) @@ -87,11 +104,21 @@ 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') + static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: any) => void) { + let p2pMediaLoader: any - const videojsOptions = this.getVideojsOptions(mode, options) + this.onPlayerChange = onPlayerChange + this.playerElementClassName = options.common.playerElement.className + + if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin') + if (mode === 'p2p-media-loader') { + [ p2pMediaLoader ] = await Promise.all([ + import('p2p-media-loader-hlsjs'), + import('./p2p-media-loader/p2p-media-loader-plugin') + ]) + } + + const videojsOptions = this.getVideojsOptions(mode, options, p2pMediaLoader) await this.loadLocaleInVideoJS(options.common.serverUrl, options.common.language) @@ -100,6 +127,18 @@ export class PeertubePlayerManager { videojs(options.common.playerElement, videojsOptions, function (this: any) { const player = this + let alreadyFallback = false + + player.tech_.one('error', () => { + if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options) + alreadyFallback = true + }) + + player.one('error', () => { + if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options) + alreadyFallback = true + }) + self.addContextMenu(mode, player, options.common.embedUrl) return res(player) @@ -107,6 +146,41 @@ 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) + + PeertubePlayerManager.onPlayerChange(player) + }) + } + private static loadLocaleInVideoJS (serverUrl: string, locale: string) { const path = PeertubePlayerManager.getLocalePath(serverUrl, locale) // It is the default locale, nothing to translate @@ -133,57 +207,45 @@ 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 + + let autoplay = commonOptions.autoplay + let html5 = {} const plugins: VideoJSPluginOptions = { peertube: { - autoplay: commonOptions.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent + mode, + 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) { - const p2pMediaLoader: P2PMediaLoaderPluginOptions = { - type: 'application/x-mpegURL', - src: p2pMediaLoaderOptions.playlistUrl - } + if (commonOptions.enableHotkeys === true) { + PeertubePlayerManager.addHotkeysOptions(plugins) + } - const config = { - segments: { - swarmId: 'swarm' // TODO: choose swarm id - } - } - const streamrootHls = { - html5: { - hlsjsConfig: { - liveSyncDurationCount: 7, - loader: new Engine(config).createLoaderClass() - } - } - } + if (mode === 'p2p-media-loader') { + const { streamrootHls } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule) - Object.assign(plugins, { p2pMediaLoader, streamrootHls }) + html5 = streamrootHls.html5 } - if (webtorrentOptions) { - const webtorrent = { - autoplay: commonOptions.autoplay, - videoDuration: commonOptions.videoDuration, - playerElement: commonOptions.playerElement, - videoFiles: webtorrentOptions.videoFiles - } - Object.assign(plugins, { webtorrent }) + if (mode === 'webtorrent') { + PeertubePlayerManager.addWebTorrentOptions(plugins, options) + + // WebTorrent plugin handles autoplay, because we do some hackish stuff in there + autoplay = false } const videojsOptions = { + html5, + // We don't use text track settings for now textTrackSettings: false, controls: commonOptions.controls !== undefined ? commonOptions.controls : true, @@ -193,87 +255,116 @@ export class PeertubePlayerManager { ? commonOptions.muted : undefined, // Undefined so the player knows it has to check the local storage + autoplay: autoplay === true + ? 'any' // Use 'any' instead of true to get notifier by videojs if autoplay fails + : autoplay, + poster: commonOptions.poster, - autoplay: false, inactivityTimeout: commonOptions.inactivityTimeout, playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ], + plugins, + controlBar: { children: this.getControlBarChildren(mode, { captions: commonOptions.captions, peertubeLink: commonOptions.peertubeLink, - theaterMode: commonOptions.theaterMode + theaterButton: commonOptions.theaterButton }) } } - if (commonOptions.enableHotkeys === true) { - Object.assign(videojsOptions.plugins, { - hotkeys: { - enableVolumeScroll: false, - enableModifiersForNumbers: false, - - fullscreenKey: function (event: KeyboardEvent) { - // fullscreen with the f key or Ctrl+Enter - return event.key === 'f' || (event.ctrlKey && event.key === 'Enter') - }, + if (commonOptions.language && !isDefaultLocale(commonOptions.language)) { + Object.assign(videojsOptions, { language: commonOptions.language }) + } - seekStep: function (event: KeyboardEvent) { - // mimic VLC seek behavior, and default to 5 (original value is 5). - if (event.ctrlKey && event.altKey) { - return 5 * 60 - } else if (event.ctrlKey) { - return 60 - } else if (event.altKey) { - return 10 - } else { - return 5 - } - }, + return videojsOptions + } - customKeys: { - increasePlaybackRateKey: { - key: function (event: KeyboardEvent) { - return event.key === '>' - }, - handler: function (player: videojs.Player) { - player.playbackRate((player.playbackRate() + 0.1).toFixed(2)) - } - }, - decreasePlaybackRateKey: { - key: function (event: KeyboardEvent) { - return event.key === '<' - }, - handler: function (player: videojs.Player) { - player.playbackRate((player.playbackRate() - 0.1).toFixed(2)) - } - }, - frameByFrame: { - key: function (event: KeyboardEvent) { - return event.key === '.' - }, - handler: function (player: videojs.Player) { - player.pause() - // Calculate movement distance (assuming 30 fps) - const dist = 1 / 30 - player.currentTime(player.currentTime() + dist) - } - } - } + private static addP2PMediaLoaderOptions ( + plugins: VideoJSPluginOptions, + options: PeertubePlayerManagerOptions, + p2pMediaLoaderModule: any + ) { + const p2pMediaLoaderOptions = options.p2pMediaLoader + const commonOptions = options.common + + const trackerAnnounce = p2pMediaLoaderOptions.trackerAnnounce + .filter(t => t.startsWith('ws')) + + const redundancyUrlManager = new RedundancyUrlManager(options.p2pMediaLoader.redundancyBaseUrls) + + const p2pMediaLoader: P2PMediaLoaderPluginOptions = { + redundancyUrlManager, + type: 'application/x-mpegURL', + startTime: commonOptions.startTime, + src: p2pMediaLoaderOptions.playlistUrl + } + + let consumeOnly = false + // FIXME: typings + if (navigator && (navigator as any).connection && (navigator as any).connection.type === 'cellular') { + console.log('We are on a cellular connection: disabling seeding.') + consumeOnly = true + } + + const p2pMediaLoaderConfig = { + loader: { + trackerAnnounce, + segmentValidator: segmentValidatorFactory(options.p2pMediaLoader.segmentsSha256Url), + rtcConfig: getRtcConfig(), + requiredSegmentsPriority: 5, + segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager), + useP2P: getStoredP2PEnabled(), + consumeOnly + }, + segments: { + swarmId: p2pMediaLoaderOptions.playlistUrl + } + } + const streamrootHls = { + levelLabelHandler: (level: { height: number, width: number }) => { + const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === level.height) + + let label = file.resolution.label + if (file.fps >= 50) label += file.fps + + return label + }, + html5: { + hlsjsConfig: { + capLevelToPlayerSize: true, + autoStartLoad: false, + liveSyncDurationCount: 7, + loader: new p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass() } - }) + } } - if (commonOptions.language && !isDefaultLocale(commonOptions.language)) { - Object.assign(videojsOptions, { language: commonOptions.language }) + const toAssign = { p2pMediaLoader, streamrootHls } + Object.assign(plugins, toAssign) + + return toAssign + } + + private static addWebTorrentOptions (plugins: VideoJSPluginOptions, options: PeertubePlayerManagerOptions) { + const commonOptions = options.common + const webtorrentOptions = options.webtorrent + + const webtorrent = { + autoplay: commonOptions.autoplay, + videoDuration: commonOptions.videoDuration, + playerElement: commonOptions.playerElement, + videoFiles: webtorrentOptions.videoFiles, + startTime: commonOptions.startTime } - return videojsOptions + Object.assign(plugins, { webtorrent }) } private static getControlBarChildren (mode: PlayerMode, options: { peertubeLink: boolean - theaterMode: boolean, + theaterButton: boolean, captions: boolean }) { const settingEntries = [] @@ -323,7 +414,7 @@ export class PeertubePlayerManager { }) } - if (options.theaterMode === true) { + if (options.theaterButton === true) { Object.assign(children, { 'theaterButton': {} }) @@ -348,7 +439,7 @@ export class PeertubePlayerManager { label: player.localize('Copy the video URL at the current time'), listener: function () { const player = this as videojs.Player - copyToClipboard(buildVideoLink(player.currentTime())) + copyToClipboard(buildVideoLink({ startTime: player.currentTime() })) } }, { @@ -372,6 +463,63 @@ export class PeertubePlayerManager { player.contextmenuUI({ content }) } + private static addHotkeysOptions (plugins: VideoJSPluginOptions) { + Object.assign(plugins, { + hotkeys: { + enableVolumeScroll: false, + enableModifiersForNumbers: false, + + fullscreenKey: function (event: KeyboardEvent) { + // fullscreen with the f key or Ctrl+Enter + return event.key === 'f' || (event.ctrlKey && event.key === 'Enter') + }, + + seekStep: function (event: KeyboardEvent) { + // mimic VLC seek behavior, and default to 5 (original value is 5). + if (event.ctrlKey && event.altKey) { + return 5 * 60 + } else if (event.ctrlKey) { + return 60 + } else if (event.altKey) { + return 10 + } else { + return 5 + } + }, + + customKeys: { + increasePlaybackRateKey: { + key: function (event: KeyboardEvent) { + return event.key === '>' + }, + handler: function (player: videojs.Player) { + player.playbackRate((player.playbackRate() + 0.1).toFixed(2)) + } + }, + decreasePlaybackRateKey: { + key: function (event: KeyboardEvent) { + return event.key === '<' + }, + handler: function (player: videojs.Player) { + player.playbackRate((player.playbackRate() - 0.1).toFixed(2)) + } + }, + frameByFrame: { + key: function (event: KeyboardEvent) { + return event.key === '.' + }, + handler: function (player: videojs.Player) { + player.pause() + // Calculate movement distance (assuming 30 fps) + const dist = 1 / 30 + player.currentTime(player.currentTime() + dist) + } + } + } + } + }) + } + private static getLocalePath (serverUrl: string, locale: string) { const completeLocale = getCompleteLocale(locale)