X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fassets%2Fplayer%2Fpeertube-player-manager.ts;h=533ee1bb8f8de2a11ddd8b192bc7ff0a2a176398;hb=3545e72c686ff1725bbdfd8d16d693e2f4aa75a3;hp=dbf631a5e761b45e03610c2bcec47ea52e3f9be4;hpb=818c449b3c34e9f324ac744120c8774e724ab25e;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 dbf631a5e..533ee1bb8 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts @@ -1,36 +1,36 @@ -import { VideoFile } from '../../../../shared/models/videos' -import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js' -import '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-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 { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions } from './peertube-videojs-typings' -import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils' -import { isDefaultLocale } from '../../../../shared/models/i18n/i18n' -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' +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 { 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' - -// For VideoJS -(window as any).WebVTT = require('vtt.js/lib/vtt.js').WebVTT; +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' @@ -41,476 +41,192 @@ 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?: Function - videoDuration: number - enableHotkeys: boolean - inactivityTimeout: number - poster: string - - theaterButton: boolean - captions: boolean - - videoViewUrl: string - embedUrl: string - - language?: string - - videoCaptions: VideoJSCaption[] - - userWatching?: UserWatching +export class PeertubePlayerManager { + private static playerElementClassName: string + private static onPlayerChange: (player: videojs.Player) => void + private static alreadyPlayed = false + private static pluginsManager: PluginsManager - serverUrl: string -} + private static videojsDecodeErrors = 0 -export type PeertubePlayerManagerOptions = { - common: CommonOptions, - webtorrent: WebtorrentOptions, - p2pMediaLoader?: P2PMediaLoaderOptions -} + private static p2pMediaLoaderModule: any -export class PeertubePlayerManager { - private static playerElementClassName: string - private static onPlayerChange: (player: VideoJsPlayer) => void + static initState () { + this.alreadyPlayed = false + } - static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: VideoJsPlayer) => void) { - let p2pMediaLoader: any + static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) { + 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: VideoJsPlayer) { + videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) { const player = this let alreadyFallback = false - player.tech(true).one('error', () => { - if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options) - alreadyFallback = true - }) - - player.one('error', () => { - if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options) + const handleError = () => { + if (alreadyFallback) return alreadyFallback = true - }) - self.addContextMenu(mode, player, options.common.embedUrl) + if (mode === 'p2p-media-loader') { + self.tryToRecoverHLSError(player.error(), player, options) + } else { + self.maybeFallbackToWebTorrent(mode, player, options) + } + } - player.bezels() + player.one('error', () => handleError()) - return res(player) - }) - }) - } + player.one('play', () => { + self.alreadyPlayed = true + }) - private static async maybeFallbackToWebTorrent (currentMode: PlayerMode, player: any, options: PeertubePlayerManagerOptions) { - if (currentMode === 'webtorrent') return + self.addContextMenu(videojsOptionsBuilder, player, options.common) - console.log('Fallback to webtorrent.') + if (isMobile()) player.peertubeMobile() + if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin() + if (options.common.controlBar === false) player.controlBar.addClass('control-bar-hidden') - const newVideoElement = document.createElement('video') - newVideoElement.className = this.playerElementClassName + player.bezels() - // 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.stats({ + videoUUID: options.common.videoUUID, + videoIsLive: options.common.isLive, + mode, + p2pEnabled: options.common.p2pEnabled + }) - currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement) + player.on('p2pInfo', (_, data: PlayerNetworkInfo) => { + if (data.source !== 'p2p-media-loader' || isNaN(data.bandwidthEstimate)) return - options.common.playerElement = newVideoElement - options.common.onPlayerElementChange(newVideoElement) + saveAverageBandwidth(data.bandwidthEstimate) + }) - player.dispose() + 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') - await import('./webtorrent/webtorrent-plugin') + const handleOnline = () => { + player.el().removeChild(offlineNotificationElem) + logger.info('The browser is online') + } - const mode = 'webtorrent' - const videojsOptions = this.getVideojsOptions(mode, options) + const handleOffline = () => { + player.el().appendChild(offlineNotificationElem) + logger.info('The browser is offline') + } - const self = this - videojs(newVideoElement, videojsOptions, function (this: VideoJsPlayer) { - const player = this + window.addEventListener('online', handleOnline) + window.addEventListener('offline', handleOffline) - 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 - ): VideoJsPlayerOptions { - const commonOptions = options.common - - let autoplay = 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.enableHotkeys === true) { - PeertubePlayerManager.addHotkeysOptions(plugins) - } - - if (mode === 'p2p-media-loader') { - 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 - } + private static async tryToRecoverHLSError (err: any, currentPlayer: videojs.Player, options: PeertubePlayerManagerOptions) { + if (err.code === 3) { // Decode error - 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 + // Display a notification to user + if (this.videojsDecodeErrors === 0) { + options.common.errorNotifier(currentPlayer.localize('The video failed to play, will try to fast forward.')) + } - autoplay: autoplay === true - ? 'any' // Use 'any' instead of true to get notifier by videojs if autoplay fails - : autoplay, + if (this.videojsDecodeErrors === 20) { + this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options) + return + } - poster: commonOptions.poster, - inactivityTimeout: commonOptions.inactivityTimeout, - playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ], + logger.info('Fast forwarding HLS to recover from an error.') - plugins, + this.videojsDecodeErrors++ - controlBar: { - children: this.getControlBarChildren(mode, { - captions: commonOptions.captions, - peertubeLink: commonOptions.peertubeLink, - theaterButton: commonOptions.theaterButton, - nextVideo: commonOptions.nextVideo - }) as any // FIXME: typings - } - } + options.common.startTime = currentPlayer.currentTime() + 2 + options.common.autoplay = true + this.rebuildAndUpdateVideoElement(currentPlayer, options.common) - if (commonOptions.language && !isDefaultLocale(commonOptions.language)) { - Object.assign(videojsOptions, { language: commonOptions.language }) + const newPlayer = await this.buildPlayer('p2p-media-loader', options) + this.onPlayerChange(newPlayer) + } else { + this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options) } - - return videojsOptions } - private static addP2PMediaLoaderOptions ( - plugins: VideoJSPluginOptions, - options: PeertubePlayerManagerOptions, - p2pMediaLoaderModule: any + private static async maybeFallbackToWebTorrent ( + currentMode: PlayerMode, + currentPlayer: videojs.Player, + options: PeertubePlayerManagerOptions ) { - 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 + if (options.webtorrent.videoFiles.length === 0 || currentMode === 'webtorrent') { + currentPlayer.peertube().displayFatalError() + return } - const p2pMediaLoaderConfig = { - loader: { - trackerAnnounce, - segmentValidator: segmentValidatorFactory(options.p2pMediaLoader.segmentsSha256Url), - rtcConfig: getRtcConfig(), - requiredSegmentsPriority: 5, - segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager), - useP2P: getStoredP2PEnabled(), - consumeOnly - }, - segments: { - swarmId: p2pMediaLoaderOptions.playlistUrl - } - } - const hlsjs = { - 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() - } - } - } - - const toAssign = { p2pMediaLoader, hlsjs } - Object.assign(plugins, toAssign) - - return toAssign - } + logger.info('Fallback to webtorrent.') - private static addWebTorrentOptions (plugins: VideoJSPluginOptions, options: PeertubePlayerManagerOptions) { - const commonOptions = options.common - const webtorrentOptions = options.webtorrent + this.rebuildAndUpdateVideoElement(currentPlayer, options.common) - const webtorrent = { - autoplay: commonOptions.autoplay, - videoDuration: commonOptions.videoDuration, - playerElement: commonOptions.playerElement, - videoFiles: webtorrentOptions.videoFiles, - startTime: commonOptions.startTime - } + await import('./shared/webtorrent/webtorrent-plugin') - Object.assign(plugins, { webtorrent }) + const newPlayer = await this.buildPlayer('webtorrent', options) + this.onPlayerChange(newPlayer) } - private static getControlBarChildren (mode: PlayerMode, options: { - peertubeLink: boolean - theaterButton: boolean, - captions: boolean, - nextVideo?: Function - }) { - 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 = { - 'playToggle': {} - } - - if (options.nextVideo) { - Object.assign(children, { - 'nextVideoButton': { - handler: options.nextVideo - } - }) - } - - Object.assign(children, { - 'currentTimeDisplay': {}, - 'timeDivider': {}, - 'durationDisplay': {}, - 'liveDisplay': {}, - - 'flexibleWidthSpacer': {}, - 'progressControl': { - children: { - 'seekBar': { - children: { - [loadProgressBar]: {}, - 'mouseTimeDisplay': {}, - 'playProgressBar': {} - } - } - } - }, - - 'p2PInfoButton': {}, - - 'muteToggle': {}, - 'volumeControl': {}, + private static rebuildAndUpdateVideoElement (player: videojs.Player, commonOptions: CommonOptions) { + const newVideoElement = document.createElement('video') + newVideoElement.className = this.playerElementClassName - 'settingsButton': { - setup: { - maxHeightOffset: 40 - }, - entries: settingEntries - } - }) + // 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 - if (options.peertubeLink === true) { - Object.assign(children, { - 'peerTubeLinkButton': {} - }) - } + currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement) - if (options.theaterButton === true) { - Object.assign(children, { - 'theaterButton': {} - }) - } + commonOptions.playerElement = newVideoElement + commonOptions.onPlayerElementChange(newVideoElement) - Object.assign(children, { - 'fullscreenToggle': {} - }) + player.dispose() - return children + return newVideoElement } - private static addContextMenu (mode: PlayerMode, player: VideoJsPlayer, 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: VideoJsPlayer) { - copyToClipboard(buildVideoLink({ startTime: this.currentTime() })) - } - }, - { - label: player.localize('Copy embed code'), - listener: () => { - copyToClipboard(buildVideoEmbed(videoEmbedUrl)) - } - } - ] - - if (mode === 'webtorrent') { - content.push({ - label: player.localize('Copy magnet URI'), - listener: function (this: VideoJsPlayer) { - copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri) - } - }) - } + private static addContextMenu (optionsBuilder: ManagerOptionsBuilder, player: videojs.Player, commonOptions: CommonOptions) { + const options = optionsBuilder.getContextMenuOptions(player, commonOptions) - 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) { - 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) - } - } - } - } - }) + player.contextmenuUI(options) } }