X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fassets%2Fplayer%2Fpeertube-player-manager.ts;h=2f4e0ac1a03ca30c9e77ac855dffc054cee61e76;hb=3bcb4fd74190aecb22c39a88772e80b223a87472;hp=4564b6c3ec2f8c3529ac92b832b6106aa9980100;hpb=08eb3dca8257ad121ad74b180dc19c75466e221d;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 4564b6c3e..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' @@ -18,6 +19,7 @@ import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from 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' @@ -62,7 +64,7 @@ export interface CommonOptions extends CustomizationOptions { inactivityTimeout: number poster: string - theaterMode: boolean + theaterButton: boolean captions: boolean videoViewUrl: string @@ -207,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 = { @@ -226,62 +226,18 @@ export class PeertubePlayerManager { } } - if (mode === 'p2p-media-loader') { - const redundancyUrlManager = new RedundancyUrlManager(options.p2pMediaLoader.redundancyBaseUrls) - - const p2pMediaLoader: P2PMediaLoaderPluginOptions = { - redundancyUrlManager, - 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(redundancyUrlManager) - }, - 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: { - autoStartLoad: false, - 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 @@ -299,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 = [] @@ -429,7 +414,7 @@ export class PeertubePlayerManager { }) } - if (options.theaterMode === true) { + if (options.theaterButton === true) { Object.assign(children, { 'theaterButton': {} }) @@ -478,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)