-import 'videojs-hotkeys/videojs.hotkeys'
import 'videojs-dock'
-import 'videojs-contextmenu-pt'
-import 'videojs-contrib-quality-levels'
+import '@peertube/videojs-contextmenu'
import './upnext/end-card'
import './upnext/upnext-plugin'
+import './stats/stats-card'
+import './stats/stats-plugin'
import './bezels/bezels-plugin'
import './peertube-plugin'
+import './peertube-resolutions-plugin'
import './videojs-components/next-previous-video-button'
import './videojs-components/p2p-info-button'
import './videojs-components/peertube-link-button'
import './videojs-components/settings-panel-child'
import './videojs-components/theater-button'
import './playlist/playlist-plugin'
+import './mobile/peertube-mobile-plugin'
+import './mobile/peertube-mobile-buttons'
+import './hotkeys/peertube-hotkeys-plugin'
import videojs from 'video.js'
+import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs'
+import { PluginsManager } from '@root-helpers/plugins-manager'
+import { buildVideoLink, decorateVideoLink } from '@shared/core-utils'
import { isDefaultLocale } from '@shared/core-utils/i18n'
import { VideoFile } from '@shared/models'
+import { copyToClipboard } from '../../root-helpers/utils'
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 { getAverageBandwidthInStore, saveAverageBandwidth } from './peertube-player-local-storage'
import {
NextPreviousVideoButtonOptions,
P2PMediaLoaderPluginOptions,
+ PeerTubeLinkButtonOptions,
+ PlayerNetworkInfo,
PlaylistPluginOptions,
UserWatching,
VideoJSCaption,
VideoJSPluginOptions
} from './peertube-videojs-typings'
import { TranslationsManager } from './translations-manager'
-import { buildVideoOrPlaylistEmbed, buildVideoLink, getRtcConfig, isSafari, isIOS } from './utils'
-import { copyToClipboard } from '../../root-helpers/utils'
+import { buildVideoOrPlaylistEmbed, getRtcConfig, isIOS, isMobile, isSafari } from './utils'
// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
onPlayerElementChange: (element: HTMLVideoElement) => void
autoplay: boolean
+ p2pEnabled: boolean
nextVideo?: () => void
hasNextVideo?: () => boolean
videoCaptions: VideoJSCaption[]
videoUUID: string
+ videoShortUUID: string
userWatching?: UserWatching
}
export type PeertubePlayerManagerOptions = {
- common: CommonOptions,
- webtorrent: WebtorrentOptions,
+ common: CommonOptions
+ webtorrent: WebtorrentOptions
p2pMediaLoader?: P2PMediaLoaderOptions
+
+ pluginsManager: PluginsManager
}
export class PeertubePlayerManager {
private static playerElementClassName: string
private static onPlayerChange: (player: videojs.Player) => void
private static alreadyPlayed = false
+ private static pluginsManager: PluginsManager
static initState () {
PeertubePlayerManager.alreadyPlayed = false
}
static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) {
+ this.pluginsManager = options.pluginsManager
+
let p2pMediaLoader: any
this.onPlayerChange = onPlayerChange
if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin')
if (mode === 'p2p-media-loader') {
[ p2pMediaLoader ] = await Promise.all([
- import('p2p-media-loader-hlsjs'),
+ import('@peertube/p2p-media-loader-hlsjs'),
import('./p2p-media-loader/p2p-media-loader-plugin')
])
}
- const videojsOptions = this.getVideojsOptions(mode, options, p2pMediaLoader)
+ const videojsOptions = await this.getVideojsOptions(mode, options, p2pMediaLoader)
await TranslationsManager.loadLocaleInVideoJS(options.common.serverUrl, options.common.language, videojs)
PeertubePlayerManager.alreadyPlayed = true
})
- self.addContextMenu(mode, player, options.common.embedUrl, options.common.embedTitle)
+ self.addContextMenu({
+ mode,
+ player,
+ videoShortUUID: options.common.videoShortUUID,
+ videoEmbedUrl: options.common.embedUrl,
+ videoEmbedTitle: options.common.embedTitle
+ })
+
+ if (isMobile()) player.peertubeMobile()
+ if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin()
player.bezels()
+ player.stats({
+ videoUUID: options.common.videoUUID,
+ videoIsLive: options.common.isLive,
+ mode,
+ p2pEnabled: options.common.p2pEnabled
+ })
+
+ player.on('p2pInfo', (_, data: PlayerNetworkInfo) => {
+ if (data.source !== 'p2p-media-loader' || isNaN(data.bandwidthEstimate)) return
+
+ saveAverageBandwidth(data.bandwidthEstimate)
+ })
+
return res(player)
})
})
await import('./webtorrent/webtorrent-plugin')
const mode = 'webtorrent'
- const videojsOptions = this.getVideojsOptions(mode, options)
+ const videojsOptions = await this.getVideojsOptions(mode, options)
const self = this
videojs(newVideoElement, videojsOptions, function (this: videojs.Player) {
const player = this
- self.addContextMenu(mode, player, options.common.embedUrl, options.common.embedTitle)
+ self.addContextMenu({
+ mode,
+ player,
+ videoShortUUID: options.common.videoShortUUID,
+ videoEmbedUrl: options.common.embedUrl,
+ videoEmbedTitle: options.common.embedTitle
+ })
PeertubePlayerManager.onPlayerChange(player)
})
}
- private static getVideojsOptions (
+ private static async getVideojsOptions (
mode: PlayerMode,
options: PeertubePlayerManagerOptions,
p2pMediaLoaderModule?: any
- ): videojs.PlayerOptions {
+ ): Promise<videojs.PlayerOptions> {
const commonOptions = options.common
const isHLS = mode === 'p2p-media-loader'
let autoplay = this.getAutoPlayValue(commonOptions.autoplay)
- let html5 = {
+ const html5 = {
preloadTextTracks: false
}
plugins.playlist = commonOptions.playlist
}
- if (commonOptions.enableHotkeys === true) {
- PeertubePlayerManager.addHotkeysOptions(plugins)
- }
-
if (isHLS) {
const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
controlBar: {
children: this.getControlBarChildren(mode, {
+ videoShortUUID: commonOptions.videoShortUUID,
+ p2pEnabled: commonOptions.p2pEnabled,
+
captions: commonOptions.captions,
peertubeLink: commonOptions.peertubeLink,
theaterButton: commonOptions.theaterButton,
Object.assign(videojsOptions, { language: commonOptions.language })
}
- return videojsOptions
+ return this.pluginsManager.runHook('filter:internal.player.videojs.options.result', videojsOptions)
}
private static addP2PMediaLoaderOptions (
}
let consumeOnly = false
- // FIXME: typings
- if (navigator && (navigator as any).connection && (navigator as any).connection.type === 'cellular') {
+ if ((navigator as any)?.connection?.type === 'cellular') {
console.log('We are on a cellular connection: disabling seeding.')
consumeOnly = true
}
- const p2pMediaLoaderConfig = {
+ const p2pMediaLoaderConfig: HlsJsEngineSettings = {
loader: {
trackerAnnounce,
segmentValidator: segmentValidatorFactory(options.p2pMediaLoader.segmentsSha256Url, options.common.isLive),
rtcConfig: getRtcConfig(),
requiredSegmentsPriority: 1,
- segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager),
- useP2P: getStoredP2PEnabled(),
+ simultaneousHttpDownloads: 1,
+ segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager, 1),
+ useP2P: commonOptions.p2pEnabled,
consumeOnly
},
segments: {
swarmId: p2pMediaLoaderOptions.playlistUrl
}
}
+
const hlsjs = {
levelLabelHandler: (level: { height: number, width: number }) => {
const resolution = Math.min(level.height || 0, level.width || 0)
return label
},
html5: {
- hlsjsConfig: {
- capLevelToPlayerSize: true,
- autoStartLoad: false,
- liveSyncDurationCount: 5,
- loader: new p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass()
- }
+ hlsjsConfig: this.getHLSOptions(p2pMediaLoaderModule, p2pMediaLoaderConfig)
}
}
return toAssign
}
+ private static getHLSOptions (p2pMediaLoaderModule: any, p2pMediaLoaderConfig: HlsJsEngineSettings) {
+ const base = {
+ capLevelToPlayerSize: true,
+ autoStartLoad: false,
+ liveSyncDurationCount: 5,
+
+ loader: new p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass()
+ }
+
+ const averageBandwidth = getAverageBandwidthInStore()
+ if (!averageBandwidth) return base
+
+ return {
+ ...base,
+
+ abrEwmaDefaultEstimate: averageBandwidth * 8, // We want bit/s
+ startLevel: -1,
+ testBandwidth: false,
+ debug: false
+ }
+ }
+
private static addWebTorrentOptions (plugins: VideoJSPluginOptions, options: PeertubePlayerManagerOptions) {
const commonOptions = options.common
const webtorrentOptions = options.webtorrent
+ const p2pMediaLoaderOptions = options.p2pMediaLoader
const autoplay = this.getAutoPlayValue(commonOptions.autoplay) === 'play'
- ? true
- : false
const webtorrent = {
autoplay,
+ playerRefusedP2P: commonOptions.p2pEnabled === false,
videoDuration: commonOptions.videoDuration,
playerElement: commonOptions.playerElement,
- videoFiles: webtorrentOptions.videoFiles,
+ videoFiles: webtorrentOptions.videoFiles.length !== 0
+ ? webtorrentOptions.videoFiles
+ // The WebTorrent plugin won't be able to play these files, but it will fallback to HTTP mode
+ : p2pMediaLoaderOptions?.videoFiles || [],
startTime: commonOptions.startTime
}
}
private static getControlBarChildren (mode: PlayerMode, options: {
+ p2pEnabled: boolean
+ videoShortUUID: string
+
peertubeLink: boolean
theaterButton: boolean
captions: boolean
- nextVideo?: Function
+ nextVideo?: () => void
hasNextVideo?: () => boolean
- previousVideo?: Function
+ previousVideo?: () => void
hasPreviousVideo?: () => boolean
}) {
const settingEntries = []
}
Object.assign(children, {
- 'previousVideoButton': buttonOptions
+ previousVideoButton: buttonOptions
})
}
}
Object.assign(children, {
- 'nextVideoButton': buttonOptions
+ nextVideoButton: buttonOptions
})
}
Object.assign(children, {
- 'currentTimeDisplay': {},
- 'timeDivider': {},
- 'durationDisplay': {},
- 'liveDisplay': {},
+ currentTimeDisplay: {},
+ timeDivider: {},
+ durationDisplay: {},
+ liveDisplay: {},
- 'flexibleWidthSpacer': {},
- 'progressControl': {
+ flexibleWidthSpacer: {},
+ progressControl: {
children: {
- 'seekBar': {
+ seekBar: {
children: {
[loadProgressBar]: {},
- 'mouseTimeDisplay': {},
- 'playProgressBar': {}
+ mouseTimeDisplay: {},
+ playProgressBar: {}
}
}
}
},
- 'p2PInfoButton': {},
+ p2PInfoButton: {
+ p2pEnabled: options.p2pEnabled
+ },
- 'muteToggle': {},
- 'volumeControl': {},
+ muteToggle: {},
+ volumeControl: {},
- 'settingsButton': {
+ settingsButton: {
setup: {
maxHeightOffset: 40
},
if (options.peertubeLink === true) {
Object.assign(children, {
- 'peerTubeLinkButton': {}
+ peerTubeLinkButton: { shortUUID: options.videoShortUUID } as PeerTubeLinkButtonOptions
})
}
if (options.theaterButton === true) {
Object.assign(children, {
- 'theaterButton': {}
+ theaterButton: {}
})
}
Object.assign(children, {
- 'fullscreenToggle': {}
+ fullscreenToggle: {}
})
return children
}
- private static addContextMenu (mode: PlayerMode, player: videojs.Player, videoEmbedUrl: string, videoEmbedTitle: string) {
+ private static addContextMenu (options: {
+ mode: PlayerMode
+ player: videojs.Player
+ videoShortUUID: string
+ videoEmbedUrl: string
+ videoEmbedTitle: string
+ }) {
+ const { mode, player, videoEmbedTitle, videoEmbedUrl, videoShortUUID } = options
+
const content = () => {
const isLoopEnabled = player.options_['loop']
const items = [
{
label: player.localize('Copy the video URL'),
listener: function () {
- copyToClipboard(buildVideoLink())
+ copyToClipboard(buildVideoLink({ shortUUID: videoShortUUID }))
}
},
{
label: player.localize('Copy the video URL at the current time'),
listener: function (this: videojs.Player) {
- copyToClipboard(buildVideoLink({ startTime: this.currentTime() }))
+ const url = buildVideoLink({ shortUUID: videoShortUUID })
+
+ copyToClipboard(decorateVideoLink({ url, startTime: this.currentTime() }))
}
},
{
})
}
+ items.push({
+ icon: 'info',
+ label: player.localize('Stats for nerds'),
+ listener: () => {
+ player.stats().show()
+ }
+ })
+
return items.map(i => ({
...i,
label: `<span class="vjs-icon-${i.icon || 'link-2'}"></span>` + i.label
player.contextmenuUI({ content })
}
- private static addHotkeysOptions (plugins: VideoJSPluginOptions) {
- const isNaked = (event: KeyboardEvent, key: string) =>
- (!event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey && event.key === key)
-
- 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,
-
- rewindKey: function (event: KeyboardEvent) {
- return isNaked(event, 'ArrowLeft')
- },
-
- forwardKey: function (event: KeyboardEvent) {
- return isNaked(event, 'ArrowRight')
- },
-
- fullscreenKey: function (event: KeyboardEvent) {
- // fullscreen with the f key or Ctrl+Enter
- return isNaked(event, 'f') || (!event.altKey && event.ctrlKey && event.key === 'Enter')
- },
-
- customKeys: {
- increasePlaybackRateKey: {
- key: function (event: KeyboardEvent) {
- return isNaked(event, '>')
- },
- 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 isNaked(event, '<')
- },
- 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 isNaked(event, '.')
- },
- handler: function (player: videojs.Player) {
- player.pause()
- // Calculate movement distance (assuming 30 fps)
- const dist = 1 / 30
- player.currentTime(player.currentTime() + dist)
- }
- }
- }
- }
- })
- }
-
private static getAutoPlayValue (autoplay: any) {
if (autoplay !== true) return autoplay
projects / github / Chocobozzz / PeerTube.git / blobdiff