mirror of https://github.com/Chocobozzz/PeerTube
389 lines
12 KiB
TypeScript
389 lines
12 KiB
TypeScript
|
import { VideoFile } from '../../../../shared/models/videos'
|
||
|
// @ts-ignore
|
||
|
import * as videojs from 'video.js'
|
||
|
import 'videojs-hotkeys'
|
||
|
import 'videojs-dock'
|
||
|
import 'videojs-contextmenu-ui'
|
||
|
import 'videojs-contrib-quality-levels'
|
||
|
import './peertube-plugin'
|
||
|
import './videojs-components/peertube-link-button'
|
||
|
import './videojs-components/resolution-menu-button'
|
||
|
import './videojs-components/settings-menu-button'
|
||
|
import './videojs-components/p2p-info-button'
|
||
|
import './videojs-components/peertube-load-progress-bar'
|
||
|
import './videojs-components/theater-button'
|
||
|
import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings'
|
||
|
import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
|
||
|
import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
|
||
|
import { Engine } from 'p2p-media-loader-hlsjs'
|
||
|
|
||
|
// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
|
||
|
videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
|
||
|
// Change Captions to Subtitles/CC
|
||
|
videojsUntyped.getComponent('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)
|
||
|
videojsUntyped.getComponent('CaptionsButton').prototype.label_ = ' '
|
||
|
|
||
|
type PlayerMode = 'webtorrent' | 'p2p-media-loader'
|
||
|
|
||
|
type WebtorrentOptions = {
|
||
|
videoFiles: VideoFile[]
|
||
|
}
|
||
|
|
||
|
type P2PMediaLoaderOptions = {
|
||
|
playlistUrl: string
|
||
|
}
|
||
|
|
||
|
type CommonOptions = {
|
||
|
playerElement: HTMLVideoElement
|
||
|
|
||
|
autoplay: boolean
|
||
|
videoDuration: number
|
||
|
enableHotkeys: boolean
|
||
|
inactivityTimeout: number
|
||
|
poster: string
|
||
|
startTime: number | string
|
||
|
|
||
|
theaterMode: boolean
|
||
|
captions: boolean
|
||
|
peertubeLink: boolean
|
||
|
|
||
|
videoViewUrl: string
|
||
|
embedUrl: string
|
||
|
|
||
|
language?: string
|
||
|
controls?: boolean
|
||
|
muted?: boolean
|
||
|
loop?: boolean
|
||
|
subtitle?: string
|
||
|
|
||
|
videoCaptions: VideoJSCaption[]
|
||
|
|
||
|
userWatching?: UserWatching
|
||
|
|
||
|
serverUrl: string
|
||
|
}
|
||
|
|
||
|
export type PeertubePlayerManagerOptions = {
|
||
|
common: CommonOptions,
|
||
|
webtorrent?: WebtorrentOptions,
|
||
|
p2pMediaLoader?: P2PMediaLoaderOptions
|
||
|
}
|
||
|
|
||
|
export class PeertubePlayerManager {
|
||
|
|
||
|
private static videojsLocaleCache: { [ path: string ]: any } = {}
|
||
|
|
||
|
static getServerTranslations (serverUrl: string, locale: string) {
|
||
|
const path = PeertubePlayerManager.getLocalePath(serverUrl, locale)
|
||
|
// It is the default locale, nothing to translate
|
||
|
if (!path) return Promise.resolve(undefined)
|
||
|
|
||
|
return fetch(path + '/server.json')
|
||
|
.then(res => res.json())
|
||
|
.catch(err => {
|
||
|
console.error('Cannot get server translations', err)
|
||
|
return undefined
|
||
|
})
|
||
|
}
|
||
|
|
||
|
static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions) {
|
||
|
if (mode === 'webtorrent') await import('./webtorrent-plugin')
|
||
|
if (mode === 'p2p-media-loader') await import('./p2p-media-loader-plugin')
|
||
|
|
||
|
const videojsOptions = this.getVideojsOptions(mode, options)
|
||
|
|
||
|
await this.loadLocaleInVideoJS(options.common.serverUrl, options.common.language)
|
||
|
|
||
|
const self = this
|
||
|
return new Promise(res => {
|
||
|
videojs(options.common.playerElement, videojsOptions, function (this: any) {
|
||
|
const player = this
|
||
|
|
||
|
self.addContextMenu(mode, player, options.common.embedUrl)
|
||
|
|
||
|
return res(player)
|
||
|
})
|
||
|
})
|
||
|
}
|
||
|
|
||
|
private static loadLocaleInVideoJS (serverUrl: string, locale: string) {
|
||
|
const path = PeertubePlayerManager.getLocalePath(serverUrl, locale)
|
||
|
// It is the default locale, nothing to translate
|
||
|
if (!path) return Promise.resolve(undefined)
|
||
|
|
||
|
let p: Promise<any>
|
||
|
|
||
|
if (PeertubePlayerManager.videojsLocaleCache[path]) {
|
||
|
p = Promise.resolve(PeertubePlayerManager.videojsLocaleCache[path])
|
||
|
} else {
|
||
|
p = fetch(path + '/player.json')
|
||
|
.then(res => res.json())
|
||
|
.then(json => {
|
||
|
PeertubePlayerManager.videojsLocaleCache[path] = json
|
||
|
return json
|
||
|
})
|
||
|
.catch(err => {
|
||
|
console.error('Cannot get player translations', err)
|
||
|
return undefined
|
||
|
})
|
||
|
}
|
||
|
|
||
|
const completeLocale = getCompleteLocale(locale)
|
||
|
return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
|
||
|
}
|
||
|
|
||
|
private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions) {
|
||
|
const commonOptions = options.common
|
||
|
const webtorrentOptions = options.webtorrent
|
||
|
const p2pMediaLoaderOptions = options.p2pMediaLoader
|
||
|
|
||
|
const plugins: VideoJSPluginOptions = {
|
||
|
peertube: {
|
||
|
autoplay: commonOptions.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
|
||
|
videoViewUrl: commonOptions.videoViewUrl,
|
||
|
videoDuration: commonOptions.videoDuration,
|
||
|
startTime: commonOptions.startTime,
|
||
|
userWatching: commonOptions.userWatching,
|
||
|
subtitle: commonOptions.subtitle,
|
||
|
videoCaptions: commonOptions.videoCaptions
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (p2pMediaLoaderOptions) {
|
||
|
const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
|
||
|
type: 'application/x-mpegURL',
|
||
|
src: p2pMediaLoaderOptions.playlistUrl
|
||
|
}
|
||
|
|
||
|
const config = {
|
||
|
segments: {
|
||
|
swarmId: 'swarm' // TODO: choose swarm id
|
||
|
}
|
||
|
}
|
||
|
const streamrootHls = {
|
||
|
html5: {
|
||
|
hlsjsConfig: {
|
||
|
liveSyncDurationCount: 7,
|
||
|
loader: new Engine(config).createLoaderClass()
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
Object.assign(plugins, { p2pMediaLoader, streamrootHls })
|
||
|
}
|
||
|
|
||
|
if (webtorrentOptions) {
|
||
|
const webtorrent = {
|
||
|
autoplay: commonOptions.autoplay,
|
||
|
videoDuration: commonOptions.videoDuration,
|
||
|
playerElement: commonOptions.playerElement,
|
||
|
videoFiles: webtorrentOptions.videoFiles
|
||
|
}
|
||
|
Object.assign(plugins, { webtorrent })
|
||
|
}
|
||
|
|
||
|
const videojsOptions = {
|
||
|
// We don't use text track settings for now
|
||
|
textTrackSettings: false,
|
||
|
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
|
||
|
|
||
|
poster: commonOptions.poster,
|
||
|
autoplay: false,
|
||
|
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
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
|
||
|
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')
|
||
|
},
|
||
|
|
||
|
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)
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
|
||
|
if (commonOptions.language && !isDefaultLocale(commonOptions.language)) {
|
||
|
Object.assign(videojsOptions, { language: commonOptions.language })
|
||
|
}
|
||
|
|
||
|
return videojsOptions
|
||
|
}
|
||
|
|
||
|
private static getControlBarChildren (mode: PlayerMode, options: {
|
||
|
peertubeLink: boolean
|
||
|
theaterMode: boolean,
|
||
|
captions: 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 = {
|
||
|
'playToggle': {},
|
||
|
'currentTimeDisplay': {},
|
||
|
'timeDivider': {},
|
||
|
'durationDisplay': {},
|
||
|
'liveDisplay': {},
|
||
|
|
||
|
'flexibleWidthSpacer': {},
|
||
|
'progressControl': {
|
||
|
children: {
|
||
|
'seekBar': {
|
||
|
children: {
|
||
|
[loadProgressBar]: {},
|
||
|
'mouseTimeDisplay': {},
|
||
|
'playProgressBar': {}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
|
||
|
'p2PInfoButton': {},
|
||
|
|
||
|
'muteToggle': {},
|
||
|
'volumeControl': {},
|
||
|
|
||
|
'settingsButton': {
|
||
|
setup: {
|
||
|
maxHeightOffset: 40
|
||
|
},
|
||
|
entries: settingEntries
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (options.peertubeLink === true) {
|
||
|
Object.assign(children, {
|
||
|
'peerTubeLinkButton': {}
|
||
|
})
|
||
|
}
|
||
|
|
||
|
if (options.theaterMode === true) {
|
||
|
Object.assign(children, {
|
||
|
'theaterButton': {}
|
||
|
})
|
||
|
}
|
||
|
|
||
|
Object.assign(children, {
|
||
|
'fullscreenToggle': {}
|
||
|
})
|
||
|
|
||
|
return children
|
||
|
}
|
||
|
|
||
|
private static addContextMenu (mode: PlayerMode, player: any, 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 () {
|
||
|
const player = this as videojs.Player
|
||
|
copyToClipboard(buildVideoLink(player.currentTime()))
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
label: player.localize('Copy embed code'),
|
||
|
listener: () => {
|
||
|
copyToClipboard(buildVideoEmbed(videoEmbedUrl))
|
||
|
}
|
||
|
}
|
||
|
]
|
||
|
|
||
|
if (mode === 'webtorrent') {
|
||
|
content.push({
|
||
|
label: player.localize('Copy magnet URI'),
|
||
|
listener: function () {
|
||
|
const player = this as videojs.Player
|
||
|
copyToClipboard(player.webtorrent().getCurrentVideoFile().magnetUri)
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
|
||
|
player.contextmenuUI({ content })
|
||
|
}
|
||
|
|
||
|
private static getLocalePath (serverUrl: string, locale: string) {
|
||
|
const completeLocale = getCompleteLocale(locale)
|
||
|
|
||
|
if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
|
||
|
|
||
|
return serverUrl + '/client/locales/' + completeLocale
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// ############################################################################
|
||
|
|
||
|
export {
|
||
|
videojs
|
||
|
}
|