X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fassets%2Fplayer%2Fpeertube-player-manager.ts;h=533ee1bb8f8de2a11ddd8b192bc7ff0a2a176398;hb=3545e72c686ff1725bbdfd8d16d693e2f4aa75a3;hp=892385a0a823526c8c3b44a3a87430c1531b39a2;hpb=1648dcb5095061a200a9209d560fc7d5819e777d;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 892385a0a..533ee1bb8 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts @@ -1,41 +1,36 @@ -import 'videojs-hotkeys/videojs.hotkeys' -import 'videojs-dock' -import 'videojs-contextmenu-ui' -import 'videojs-contrib-quality-levels' -import './upnext/end-card' -import './upnext/upnext-plugin' -import './bezels/bezels-plugin' -import './peertube-plugin' -import './videojs-components/next-previous-video-button' -import './videojs-components/p2p-info-button' -import './videojs-components/peertube-link-button' -import './videojs-components/peertube-load-progress-bar' -import './videojs-components/resolution-menu-button' -import './videojs-components/resolution-menu-item' -import './videojs-components/settings-dialog' -import './videojs-components/settings-menu-button' -import './videojs-components/settings-menu-item' -import './videojs-components/settings-panel' -import './videojs-components/settings-panel-child' -import './videojs-components/theater-button' -import './playlist/playlist-plugin' +import '@peertube/videojs-contextmenu' +import './shared/upnext/end-card' +import './shared/upnext/upnext-plugin' +import './shared/stats/stats-card' +import './shared/stats/stats-plugin' +import './shared/bezels/bezels-plugin' +import './shared/peertube/peertube-plugin' +import './shared/resolutions/peertube-resolutions-plugin' +import './shared/control-bar/next-previous-video-button' +import './shared/control-bar/p2p-info-button' +import './shared/control-bar/peertube-link-button' +import './shared/control-bar/peertube-load-progress-bar' +import './shared/control-bar/theater-button' +import './shared/settings/resolution-menu-button' +import './shared/settings/resolution-menu-item' +import './shared/settings/settings-dialog' +import './shared/settings/settings-menu-button' +import './shared/settings/settings-menu-item' +import './shared/settings/settings-panel' +import './shared/settings/settings-panel-child' +import './shared/playlist/playlist-plugin' +import './shared/mobile/peertube-mobile-plugin' +import './shared/mobile/peertube-mobile-buttons' +import './shared/hotkeys/peertube-hotkeys-plugin' +import './shared/metrics/metrics-plugin' import videojs from 'video.js' -import { isDefaultLocale } from '@shared/core-utils/i18n' -import { VideoFile } from '@shared/models' -import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager' -import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder' -import { segmentValidatorFactory } from './p2p-media-loader/segment-validator' -import { getStoredP2PEnabled } from './peertube-player-local-storage' -import { - NextPreviousVideoButtonOptions, - P2PMediaLoaderPluginOptions, - PlaylistPluginOptions, - UserWatching, - VideoJSCaption, - VideoJSPluginOptions -} from './peertube-videojs-typings' +import { logger } from '@root-helpers/logger' +import { PluginsManager } from '@root-helpers/plugins-manager' +import { isMobile } from '@root-helpers/web-browser' +import { saveAverageBandwidth } from './peertube-player-local-storage' +import { ManagerOptionsBuilder } from './shared/manager-options' import { TranslationsManager } from './translations-manager' -import { buildVideoOrPlaylistEmbed, buildVideoLink, copyToClipboard, getRtcConfig, isSafari, isIOS } from './utils' +import { CommonOptions, PeertubePlayerManagerOptions, PlayerMode, PlayerNetworkInfo } from './types' // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed' @@ -46,103 +41,49 @@ CaptionsButton.prototype.controlText_ = 'Subtitles/CC' // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know) CaptionsButton.prototype.label_ = ' ' -export type PlayerMode = 'webtorrent' | 'p2p-media-loader' - -export type WebtorrentOptions = { - videoFiles: VideoFile[] -} - -export type P2PMediaLoaderOptions = { - playlistUrl: string - segmentsSha256Url: string - trackerAnnounce: string[] - redundancyBaseUrls: string[] - videoFiles: VideoFile[] -} - -export interface CustomizationOptions { - startTime: number | string - stopTime: number | string - - controls?: boolean - muted?: boolean - loop?: boolean - subtitle?: string - resume?: string - - peertubeLink: boolean -} - -export interface CommonOptions extends CustomizationOptions { - playerElement: HTMLVideoElement - onPlayerElementChange: (element: HTMLVideoElement) => void - - autoplay: boolean - - nextVideo?: () => void - hasNextVideo?: () => boolean - - previousVideo?: () => void - hasPreviousVideo?: () => boolean - - playlist?: PlaylistPluginOptions - - videoDuration: number - enableHotkeys: boolean - inactivityTimeout: number - poster: string - - theaterButton: boolean - captions: boolean - - videoViewUrl: string - embedUrl: string - - isLive: boolean - - language?: string - - videoCaptions: VideoJSCaption[] - - userWatching?: UserWatching - - serverUrl: string -} - -export type PeertubePlayerManagerOptions = { - common: CommonOptions, - webtorrent: WebtorrentOptions, - p2pMediaLoader?: P2PMediaLoaderOptions -} - export class PeertubePlayerManager { private static playerElementClassName: string private static onPlayerChange: (player: videojs.Player) => void - private static alreadyPlayed = false + private static pluginsManager: PluginsManager + + private static videojsDecodeErrors = 0 + + private static p2pMediaLoaderModule: any static initState () { - PeertubePlayerManager.alreadyPlayed = false + this.alreadyPlayed = false } static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) { - let p2pMediaLoader: any + this.pluginsManager = options.pluginsManager this.onPlayerChange = onPlayerChange this.playerElementClassName = options.common.playerElement.className - if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin') + if (mode === 'webtorrent') await import('./shared/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 [ p2pMediaLoaderModule ] = await Promise.all([ + import('@peertube/p2p-media-loader-hlsjs'), + import('./shared/p2p-media-loader/p2p-media-loader-plugin') ]) - } - const videojsOptions = this.getVideojsOptions(mode, options, p2pMediaLoader) + this.p2pMediaLoaderModule = p2pMediaLoaderModule + } await TranslationsManager.loadLocaleInVideoJS(options.common.serverUrl, options.common.language, videojs) + return this.buildPlayer(mode, options) + } + + private static async buildPlayer (mode: PlayerMode, options: PeertubePlayerManagerOptions): Promise { + const videojsOptionsBuilder = new ManagerOptionsBuilder(mode, options, this.p2pMediaLoaderModule) + + const videojsOptions = await this.pluginsManager.runHook( + 'filter:internal.player.videojs.options.result', + videojsOptionsBuilder.getVideojsOptions(this.alreadyPlayed) + ) + const self = this return new Promise(res => { videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) { @@ -150,457 +91,142 @@ export class PeertubePlayerManager { let alreadyFallback = false - player.tech(true).one('error', () => { - if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options) + const handleError = () => { + if (alreadyFallback) return alreadyFallback = true - }) - player.one('error', () => { - if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options) - alreadyFallback = true - }) + if (mode === 'p2p-media-loader') { + self.tryToRecoverHLSError(player.error(), player, options) + } else { + self.maybeFallbackToWebTorrent(mode, player, options) + } + } + + player.one('error', () => handleError()) player.one('play', () => { - PeertubePlayerManager.alreadyPlayed = true + self.alreadyPlayed = true }) - self.addContextMenu(mode, player, options.common.embedUrl) - - player.bezels() - - return res(player) - }) - }) - } + self.addContextMenu(videojsOptionsBuilder, player, options.common) - private static async maybeFallbackToWebTorrent (currentMode: PlayerMode, player: any, options: PeertubePlayerManagerOptions) { - if (currentMode === 'webtorrent') return + if (isMobile()) player.peertubeMobile() + if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin() + if (options.common.controlBar === false) player.controlBar.addClass('control-bar-hidden') - console.log('Fallback to webtorrent.') + player.bezels() - const newVideoElement = document.createElement('video') - newVideoElement.className = this.playerElementClassName + player.stats({ + videoUUID: options.common.videoUUID, + videoIsLive: options.common.isLive, + mode, + p2pEnabled: options.common.p2pEnabled + }) - // 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 + player.on('p2pInfo', (_, data: PlayerNetworkInfo) => { + if (data.source !== 'p2p-media-loader' || isNaN(data.bandwidthEstimate)) return - currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement) + saveAverageBandwidth(data.bandwidthEstimate) + }) - options.common.playerElement = newVideoElement - options.common.onPlayerElementChange(newVideoElement) + const offlineNotificationElem = document.createElement('div') + offlineNotificationElem.classList.add('vjs-peertube-offline-notification') + offlineNotificationElem.innerText = player.localize('You seem to be offline and the video may not work') - player.dispose() + const handleOnline = () => { + player.el().removeChild(offlineNotificationElem) + logger.info('The browser is online') + } - await import('./webtorrent/webtorrent-plugin') + const handleOffline = () => { + player.el().appendChild(offlineNotificationElem) + logger.info('The browser is offline') + } - const mode = 'webtorrent' - const videojsOptions = this.getVideojsOptions(mode, options) + window.addEventListener('online', handleOnline) + window.addEventListener('offline', handleOffline) - const self = this - videojs(newVideoElement, videojsOptions, function (this: videojs.Player) { - const player = this - - self.addContextMenu(mode, player, options.common.embedUrl) + player.on('dispose', () => { + window.removeEventListener('online', handleOnline) + window.removeEventListener('offline', handleOffline) + }) - PeertubePlayerManager.onPlayerChange(player) + return res(player) + }) }) } - private static getVideojsOptions ( - mode: PlayerMode, - options: PeertubePlayerManagerOptions, - p2pMediaLoaderModule?: any - ): videojs.PlayerOptions { - const commonOptions = options.common - const isHLS = mode === 'p2p-media-loader' - - let autoplay = this.getAutoPlayValue(commonOptions.autoplay) - let html5 = {} - - const plugins: VideoJSPluginOptions = { - peertube: { - mode, - autoplay, // Use peertube plugin autoplay because we get the file by webtorrent - videoViewUrl: commonOptions.videoViewUrl, - videoDuration: commonOptions.videoDuration, - userWatching: commonOptions.userWatching, - subtitle: commonOptions.subtitle, - videoCaptions: commonOptions.videoCaptions, - stopTime: commonOptions.stopTime - } - } - - if (commonOptions.playlist) { - plugins.playlist = commonOptions.playlist - } - - if (commonOptions.enableHotkeys === true) { - PeertubePlayerManager.addHotkeysOptions(plugins) - } - - if (isHLS) { - const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule) - - html5 = hlsjs.html5 - } - - 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 as any, // FIXME: typings - controls: commonOptions.controls !== undefined ? commonOptions.controls : true, - loop: commonOptions.loop !== undefined ? commonOptions.loop : false, - - muted: commonOptions.muted !== undefined - ? commonOptions.muted - : undefined, // Undefined so the player knows it has to check the local storage + private static async tryToRecoverHLSError (err: any, currentPlayer: videojs.Player, options: PeertubePlayerManagerOptions) { + if (err.code === 3) { // Decode error - autoplay: this.getAutoPlayValue(autoplay), - - poster: commonOptions.poster, - 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, - theaterButton: commonOptions.theaterButton, - - nextVideo: commonOptions.nextVideo, - hasNextVideo: commonOptions.hasNextVideo, - - previousVideo: commonOptions.previousVideo, - hasPreviousVideo: commonOptions.hasPreviousVideo - }) as any // FIXME: typings + // Display a notification to user + if (this.videojsDecodeErrors === 0) { + options.common.errorNotifier(currentPlayer.localize('The video failed to play, will try to fast forward.')) } - } - - if (commonOptions.language && !isDefaultLocale(commonOptions.language)) { - Object.assign(videojsOptions, { language: commonOptions.language }) - } - - return videojsOptions - } - 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, options.common.isLive), - rtcConfig: getRtcConfig(), - requiredSegmentsPriority: 1, - segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager), - useP2P: getStoredP2PEnabled(), - consumeOnly - }, - segments: { - swarmId: p2pMediaLoaderOptions.playlistUrl - } - } - const hlsjs = { - levelLabelHandler: (level: { height: number, width: number }) => { - const resolution = Math.min(level.height || 0, level.width || 0) - - const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === resolution) - // We don't have files for live videos - if (!file) return 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 (this.videojsDecodeErrors === 20) { + this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options) + return } - } - const toAssign = { p2pMediaLoader, hlsjs } - Object.assign(plugins, toAssign) + logger.info('Fast forwarding HLS to recover from an error.') - return toAssign - } + this.videojsDecodeErrors++ - private static addWebTorrentOptions (plugins: VideoJSPluginOptions, options: PeertubePlayerManagerOptions) { - const commonOptions = options.common - const webtorrentOptions = options.webtorrent + options.common.startTime = currentPlayer.currentTime() + 2 + options.common.autoplay = true + this.rebuildAndUpdateVideoElement(currentPlayer, options.common) - const autoplay = this.getAutoPlayValue(commonOptions.autoplay) === 'play' - ? true - : false - - const webtorrent = { - autoplay, - videoDuration: commonOptions.videoDuration, - playerElement: commonOptions.playerElement, - videoFiles: webtorrentOptions.videoFiles, - startTime: commonOptions.startTime + const newPlayer = await this.buildPlayer('p2p-media-loader', options) + this.onPlayerChange(newPlayer) + } else { + this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options) } - - Object.assign(plugins, { webtorrent }) } - private static getControlBarChildren (mode: PlayerMode, options: { - peertubeLink: boolean - theaterButton: boolean - captions: boolean - - nextVideo?: Function - hasNextVideo?: () => boolean - - previousVideo?: Function - hasPreviousVideo?: () => boolean - }) { - const settingEntries = [] - const loadProgressBar = mode === 'webtorrent' ? 'peerTubeLoadProgressBar' : 'loadProgressBar' - - // Keep an order - settingEntries.push('playbackRateMenuButton') - if (options.captions === true) settingEntries.push('captionsButton') - settingEntries.push('resolutionMenuButton') - - const children = {} - - if (options.previousVideo) { - const buttonOptions: NextPreviousVideoButtonOptions = { - type: 'previous', - handler: options.previousVideo, - isDisabled: () => { - if (!options.hasPreviousVideo) return false - - return !options.hasPreviousVideo() - } - } - - Object.assign(children, { - 'previousVideoButton': buttonOptions - }) - } - - Object.assign(children, { playToggle: {} }) - - if (options.nextVideo) { - const buttonOptions: NextPreviousVideoButtonOptions = { - type: 'next', - handler: options.nextVideo, - isDisabled: () => { - if (!options.hasNextVideo) return false - - return !options.hasNextVideo() - } - } - - Object.assign(children, { - 'nextVideoButton': buttonOptions - }) + private static async maybeFallbackToWebTorrent ( + currentMode: PlayerMode, + currentPlayer: videojs.Player, + options: PeertubePlayerManagerOptions + ) { + if (options.webtorrent.videoFiles.length === 0 || currentMode === 'webtorrent') { + currentPlayer.peertube().displayFatalError() + return } - Object.assign(children, { - 'currentTimeDisplay': {}, - 'timeDivider': {}, - 'durationDisplay': {}, - 'liveDisplay': {}, - - 'flexibleWidthSpacer': {}, - 'progressControl': { - children: { - 'seekBar': { - children: { - [loadProgressBar]: {}, - 'mouseTimeDisplay': {}, - 'playProgressBar': {} - } - } - } - }, - - 'p2PInfoButton': {}, - - 'muteToggle': {}, - 'volumeControl': {}, + logger.info('Fallback to webtorrent.') - 'settingsButton': { - setup: { - maxHeightOffset: 40 - }, - entries: settingEntries - } - }) + this.rebuildAndUpdateVideoElement(currentPlayer, options.common) - if (options.peertubeLink === true) { - Object.assign(children, { - 'peerTubeLinkButton': {} - }) - } + await import('./shared/webtorrent/webtorrent-plugin') - if (options.theaterButton === true) { - Object.assign(children, { - 'theaterButton': {} - }) - } + const newPlayer = await this.buildPlayer('webtorrent', options) + this.onPlayerChange(newPlayer) + } - Object.assign(children, { - 'fullscreenToggle': {} - }) + private static rebuildAndUpdateVideoElement (player: videojs.Player, commonOptions: CommonOptions) { + const newVideoElement = document.createElement('video') + newVideoElement.className = this.playerElementClassName - return children - } + // VideoJS wraps our video element inside a div + let currentParentPlayerElement = commonOptions.playerElement.parentNode + // Fix on IOS, don't ask me why + if (!currentParentPlayerElement) currentParentPlayerElement = document.getElementById(commonOptions.playerElement.id).parentNode - private static addContextMenu (mode: PlayerMode, player: videojs.Player, videoEmbedUrl: string) { - const content = [ - { - label: player.localize('Copy the video URL'), - listener: function () { - copyToClipboard(buildVideoLink()) - } - }, - { - label: player.localize('Copy the video URL at the current time'), - listener: function (this: videojs.Player) { - copyToClipboard(buildVideoLink({ startTime: this.currentTime() })) - } - }, - { - label: player.localize('Copy embed code'), - listener: () => { - copyToClipboard(buildVideoOrPlaylistEmbed(videoEmbedUrl)) - } - } - ] + currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement) - if (mode === 'webtorrent') { - content.push({ - label: player.localize('Copy magnet URI'), - listener: function (this: videojs.Player) { - copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri) - } - }) - } + commonOptions.playerElement = newVideoElement + commonOptions.onPlayerElementChange(newVideoElement) - player.contextmenuUI({ content }) - } + player.dispose() - private static addHotkeysOptions (plugins: VideoJSPluginOptions) { - Object.assign(plugins, { - hotkeys: { - skipInitialFocus: true, - enableInactiveFocus: false, - captureDocumentHotkeys: true, - documentHotkeysFocusElementFilter: (e: HTMLElement) => { - const tagName = e.tagName.toLowerCase() - return e.id === 'content' || tagName === 'body' || tagName === 'video' - }, - - 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) { - const newValue = Math.min(player.playbackRate() + 0.1, 5) - player.playbackRate(parseFloat(newValue.toFixed(2))) - } - }, - decreasePlaybackRateKey: { - key: function (event: KeyboardEvent) { - return event.key === '<' - }, - handler: function (player: videojs.Player) { - const newValue = Math.max(player.playbackRate() - 0.1, 0.10) - player.playbackRate(parseFloat(newValue.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) - } - } - } - } - }) + return newVideoElement } - private static getAutoPlayValue (autoplay: any) { - if (autoplay !== true) return autoplay - - // On first play, disable autoplay to avoid issues - // But if the player already played videos, we can safely autoplay next ones - if (isIOS() || isSafari()) { - return PeertubePlayerManager.alreadyPlayed ? 'play' : false - } + private static addContextMenu (optionsBuilder: ManagerOptionsBuilder, player: videojs.Player, commonOptions: CommonOptions) { + const options = optionsBuilder.getContextMenuOptions(player, commonOptions) - return 'play' + player.contextmenuUI(options) } }