X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fassets%2Fplayer%2Fpeertube-player-manager.ts;h=2f4e0ac1a03ca30c9e77ac855dffc054cee61e76;hb=3bcb4fd74190aecb22c39a88772e80b223a87472;hp=31cbc7dfd4c17c3b18f6b3cbcd2572de57968512;hpb=79ad1706f3cf009e04db9cd9e6a721801d93e64e;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 31cbc7dfd..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' @@ -17,6 +18,8 @@ import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from ' import { getCompleteLocale, getShortLocale, is18nLocale, 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' // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed' @@ -39,7 +42,19 @@ export type P2PMediaLoaderOptions = { videoFiles: VideoFile[] } -export 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 @@ -48,21 +63,14 @@ export type CommonOptions = { enableHotkeys: boolean inactivityTimeout: number poster: string - startTime: number | string - stopTime: 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[] @@ -81,6 +89,7 @@ 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) @@ -95,9 +104,10 @@ export class PeertubePlayerManager { }) } - static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions) { + static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: any) => void) { let p2pMediaLoader: any + this.onPlayerChange = onPlayerChange this.playerElementClassName = options.common.playerElement.className if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin') @@ -166,6 +176,8 @@ export class PeertubePlayerManager { const player = this self.addContextMenu(mode, player, options.common.embedUrl) + + PeertubePlayerManager.onPlayerChange(player) }) } @@ -197,10 +209,8 @@ export class PeertubePlayerManager { private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions, p2pMediaLoaderModule?: any) { const commonOptions = options.common - const webtorrentOptions = options.webtorrent - const p2pMediaLoaderOptions = options.p2pMediaLoader - let autoplay = options.common.autoplay + let autoplay = commonOptions.autoplay let html5 = {} const plugins: VideoJSPluginOptions = { @@ -216,59 +226,18 @@ export class PeertubePlayerManager { } } - if (mode === 'p2p-media-loader') { - const p2pMediaLoader: P2PMediaLoaderPluginOptions = { - redundancyBaseUrls: options.p2pMediaLoader.redundancyBaseUrls, - type: 'application/x-mpegURL', - startTime: commonOptions.startTime, - src: p2pMediaLoaderOptions.playlistUrl - } - - const trackerAnnounce = p2pMediaLoaderOptions.trackerAnnounce - .filter(t => t.startsWith('ws')) - - const p2pMediaLoaderConfig = { - loader: { - trackerAnnounce, - segmentValidator: segmentValidatorFactory(options.p2pMediaLoader.segmentsSha256Url), - rtcConfig: getRtcConfig(), - requiredSegmentsPriority: 5, - segmentUrlBuilder: segmentUrlBuilderFactory(options.p2pMediaLoader.redundancyBaseUrls) - }, - 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 + if (commonOptions.enableHotkeys === true) { + PeertubePlayerManager.addHotkeysOptions(plugins) + } - return label - }, - html5: { - hlsjsConfig: { - liveSyncDurationCount: 7, - loader: new p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass() - } - } - } + if (mode === 'p2p-media-loader') { + const { streamrootHls } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule) - Object.assign(plugins, { p2pMediaLoader, streamrootHls }) html5 = streamrootHls.html5 } if (mode === 'webtorrent') { - const webtorrent = { - autoplay, - videoDuration: commonOptions.videoDuration, - playerElement: commonOptions.playerElement, - videoFiles: webtorrentOptions.videoFiles, - startTime: commonOptions.startTime - } - Object.assign(plugins, { webtorrent }) + PeertubePlayerManager.addWebTorrentOptions(plugins, options) // WebTorrent plugin handles autoplay, because we do some hackish stuff in there autoplay = false @@ -286,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: 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, + 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 = [] @@ -416,7 +414,7 @@ export class PeertubePlayerManager { }) } - if (options.theaterMode === true) { + if (options.theaterButton === true) { Object.assign(children, { 'theaterButton': {} }) @@ -441,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() })) } }, { @@ -465,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)