mirror of
https://github.com/Chocobozzz/PeerTube.git
synced 2025-10-03 09:49:20 +02:00
Remove webtorrent support from client
This commit is contained in:
Chocobozzz
parent
8ef866071f
commit
a1bd2b77d9
80 changed files with 2590 additions and 3896 deletions
|
|
@ -3,7 +3,6 @@ import '../../assets/player/shared/dock/peertube-dock-component'
|
|||
import '../../assets/player/shared/dock/peertube-dock-plugin'
|
||||
import { PeerTubeServerError } from 'src/types'
|
||||
import videojs from 'video.js'
|
||||
import { peertubeTranslate } from '../../../../shared/core-utils/i18n'
|
||||
import {
|
||||
HTMLServerConfig,
|
||||
ResultList,
|
||||
|
|
@ -13,7 +12,7 @@ import {
|
|||
VideoPlaylistElement,
|
||||
VideoState
|
||||
} from '../../../../shared/models'
|
||||
import { PeertubePlayerManager } from '../../assets/player'
|
||||
import { PeerTubePlayer } from '../../assets/player/peertube-player'
|
||||
import { TranslationsManager } from '../../assets/player/translations-manager'
|
||||
import { getParamString, logger, videoRequiresFileToken } from '../../root-helpers'
|
||||
import { PeerTubeEmbedApi } from './embed-api'
|
||||
|
|
@ -21,7 +20,7 @@ import {
|
|||
AuthHTTP,
|
||||
LiveManager,
|
||||
PeerTubePlugin,
|
||||
PlayerManagerOptions,
|
||||
PlayerOptionsBuilder,
|
||||
PlaylistFetcher,
|
||||
PlaylistTracker,
|
||||
Translations,
|
||||
|
|
@ -36,17 +35,23 @@ export class PeerTubeEmbed {
|
|||
config: HTMLServerConfig
|
||||
|
||||
private translationsPromise: Promise<{ [id: string]: string }>
|
||||
private PeertubePlayerManagerModulePromise: Promise<any>
|
||||
private PeerTubePlayerManagerModulePromise: Promise<any>
|
||||
|
||||
private readonly http: AuthHTTP
|
||||
private readonly videoFetcher: VideoFetcher
|
||||
private readonly playlistFetcher: PlaylistFetcher
|
||||
private readonly peertubePlugin: PeerTubePlugin
|
||||
private readonly playerHTML: PlayerHTML
|
||||
private readonly playerManagerOptions: PlayerManagerOptions
|
||||
private readonly playerOptionsBuilder: PlayerOptionsBuilder
|
||||
private readonly liveManager: LiveManager
|
||||
|
||||
private peertubePlayer: PeerTubePlayer
|
||||
|
||||
private playlistTracker: PlaylistTracker
|
||||
|
||||
private alreadyInitialized = false
|
||||
private alreadyPlayed = false
|
||||
|
||||
private videoPassword: string
|
||||
private requiresPassword: boolean
|
||||
|
||||
|
|
@ -59,7 +64,7 @@ export class PeerTubeEmbed {
|
|||
this.playlistFetcher = new PlaylistFetcher(this.http)
|
||||
this.peertubePlugin = new PeerTubePlugin(this.http)
|
||||
this.playerHTML = new PlayerHTML(videoWrapperId)
|
||||
this.playerManagerOptions = new PlayerManagerOptions(this.playerHTML, this.videoFetcher, this.peertubePlugin)
|
||||
this.playerOptionsBuilder = new PlayerOptionsBuilder(this.playerHTML, this.videoFetcher, this.peertubePlugin)
|
||||
this.liveManager = new LiveManager(this.playerHTML)
|
||||
this.requiresPassword = false
|
||||
|
||||
|
|
@ -81,14 +86,14 @@ export class PeerTubeEmbed {
|
|||
}
|
||||
|
||||
getScope () {
|
||||
return this.playerManagerOptions.getScope()
|
||||
return this.playerOptionsBuilder.getScope()
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
async init () {
|
||||
this.translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language)
|
||||
this.PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager')
|
||||
this.PeerTubePlayerManagerModulePromise = import('../../assets/player/peertube-player')
|
||||
|
||||
// Issue when we parsed config from HTML, fallback to API
|
||||
if (!this.config) {
|
||||
|
|
@ -102,7 +107,7 @@ export class PeerTubeEmbed {
|
|||
|
||||
if (!videoId) return
|
||||
|
||||
return this.loadVideoAndBuildPlayer({ uuid: videoId, autoplayFromPreviousVideo: false, forceAutoplay: false })
|
||||
return this.loadVideoAndBuildPlayer({ uuid: videoId, forceAutoplay: false })
|
||||
}
|
||||
|
||||
private async initPlaylist () {
|
||||
|
|
@ -137,7 +142,7 @@ export class PeerTubeEmbed {
|
|||
}
|
||||
|
||||
private initializeApi () {
|
||||
if (this.playerManagerOptions.hasAPIEnabled()) {
|
||||
if (this.playerOptionsBuilder.hasAPIEnabled()) {
|
||||
if (this.api) {
|
||||
this.api.reInit()
|
||||
return
|
||||
|
|
@ -159,7 +164,7 @@ export class PeerTubeEmbed {
|
|||
|
||||
this.playlistTracker.setCurrentElement(next)
|
||||
|
||||
return this.loadVideoAndBuildPlayer({ uuid: next.video.uuid, autoplayFromPreviousVideo: true, forceAutoplay: false })
|
||||
return this.loadVideoAndBuildPlayer({ uuid: next.video.uuid, forceAutoplay: false })
|
||||
}
|
||||
|
||||
async playPreviousPlaylistVideo () {
|
||||
|
|
@ -171,7 +176,7 @@ export class PeerTubeEmbed {
|
|||
|
||||
this.playlistTracker.setCurrentElement(previous)
|
||||
|
||||
await this.loadVideoAndBuildPlayer({ uuid: previous.video.uuid, autoplayFromPreviousVideo: true, forceAutoplay: false })
|
||||
await this.loadVideoAndBuildPlayer({ uuid: previous.video.uuid, forceAutoplay: false })
|
||||
}
|
||||
|
||||
getCurrentPlaylistPosition () {
|
||||
|
|
@ -182,10 +187,9 @@ export class PeerTubeEmbed {
|
|||
|
||||
private async loadVideoAndBuildPlayer (options: {
|
||||
uuid: string
|
||||
autoplayFromPreviousVideo: boolean
|
||||
forceAutoplay: boolean
|
||||
}) {
|
||||
const { uuid, autoplayFromPreviousVideo, forceAutoplay } = options
|
||||
const { uuid, forceAutoplay } = options
|
||||
|
||||
try {
|
||||
const {
|
||||
|
|
@ -194,7 +198,7 @@ export class PeerTubeEmbed {
|
|||
storyboardsPromise
|
||||
} = await this.videoFetcher.loadVideo({ videoId: uuid, videoPassword: this.videoPassword })
|
||||
|
||||
return this.buildVideoPlayer({ videoResponse, captionsPromise, storyboardsPromise, autoplayFromPreviousVideo, forceAutoplay })
|
||||
return this.buildVideoPlayer({ videoResponse, captionsPromise, storyboardsPromise, forceAutoplay })
|
||||
} catch (err) {
|
||||
|
||||
if (await this.handlePasswordError(err)) this.loadVideoAndBuildPlayer({ ...options })
|
||||
|
|
@ -206,20 +210,14 @@ export class PeerTubeEmbed {
|
|||
videoResponse: Response
|
||||
storyboardsPromise: Promise<Response>
|
||||
captionsPromise: Promise<Response>
|
||||
autoplayFromPreviousVideo: boolean
|
||||
forceAutoplay: boolean
|
||||
}) {
|
||||
const { videoResponse, captionsPromise, storyboardsPromise, autoplayFromPreviousVideo, forceAutoplay } = options
|
||||
|
||||
this.resetPlayerElement()
|
||||
const { videoResponse, captionsPromise, storyboardsPromise, forceAutoplay } = options
|
||||
|
||||
const videoInfoPromise = videoResponse.json()
|
||||
.then(async (videoInfo: VideoDetails) => {
|
||||
this.playerManagerOptions.loadParams(this.config, videoInfo)
|
||||
this.playerOptionsBuilder.loadParams(this.config, videoInfo)
|
||||
|
||||
if (!autoplayFromPreviousVideo && !this.playerManagerOptions.hasAutoplay()) {
|
||||
this.playerHTML.buildPlaceholder(videoInfo)
|
||||
}
|
||||
const live = videoInfo.isLive
|
||||
? await this.videoFetcher.loadLive(videoInfo)
|
||||
: undefined
|
||||
|
|
@ -235,89 +233,75 @@ export class PeerTubeEmbed {
|
|||
{ video, live, videoFileToken },
|
||||
translations,
|
||||
captionsResponse,
|
||||
storyboardsResponse,
|
||||
PeertubePlayerManagerModule
|
||||
storyboardsResponse
|
||||
] = await Promise.all([
|
||||
videoInfoPromise,
|
||||
this.translationsPromise,
|
||||
captionsPromise,
|
||||
storyboardsPromise,
|
||||
this.PeertubePlayerManagerModulePromise
|
||||
this.buildPlayerIfNeeded()
|
||||
])
|
||||
|
||||
await this.peertubePlugin.loadPlugins(this.config, translations)
|
||||
this.peertubePlayer.setPoster(window.location.origin + video.previewPath)
|
||||
|
||||
const PlayerManager: typeof PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
|
||||
const playlist = this.playlistTracker
|
||||
? {
|
||||
onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer({ uuid, forceAutoplay: false }),
|
||||
|
||||
const playerOptions = await this.playerManagerOptions.getPlayerOptions({
|
||||
playlistTracker: this.playlistTracker,
|
||||
playNext: () => this.playNextPlaylistVideo(),
|
||||
playPrevious: () => this.playPreviousPlaylistVideo()
|
||||
}
|
||||
: undefined
|
||||
|
||||
const loadOptions = await this.playerOptionsBuilder.getPlayerLoadOptions({
|
||||
video,
|
||||
captionsResponse,
|
||||
autoplayFromPreviousVideo,
|
||||
translations,
|
||||
serverConfig: this.config,
|
||||
|
||||
storyboardsResponse,
|
||||
|
||||
authorizationHeader: () => this.http.getHeaderTokenValue(),
|
||||
videoFileToken: () => videoFileToken,
|
||||
videoPassword: () => this.videoPassword,
|
||||
requiresPassword: this.requiresPassword,
|
||||
|
||||
onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer({ uuid, autoplayFromPreviousVideo: true, forceAutoplay: false }),
|
||||
|
||||
playlistTracker: this.playlistTracker,
|
||||
playNextPlaylistVideo: () => this.playNextPlaylistVideo(),
|
||||
playPreviousPlaylistVideo: () => this.playPreviousPlaylistVideo(),
|
||||
playlist,
|
||||
|
||||
live,
|
||||
forceAutoplay
|
||||
forceAutoplay,
|
||||
alreadyPlayed: this.alreadyPlayed
|
||||
})
|
||||
await this.peertubePlayer.load(loadOptions)
|
||||
|
||||
this.player = await PlayerManager.initialize(this.playerManagerOptions.getMode(), playerOptions, (player: videojs.Player) => {
|
||||
this.player = player
|
||||
})
|
||||
if (!this.alreadyInitialized) {
|
||||
this.player = this.peertubePlayer.getPlayer();
|
||||
|
||||
this.player.on('customError', (event: any, data: any) => {
|
||||
const message = data?.err?.message || ''
|
||||
if (!message.includes('from xs param')) return
|
||||
(window as any)['videojsPlayer'] = this.player
|
||||
|
||||
this.player.dispose()
|
||||
this.playerHTML.removePlayerElement()
|
||||
this.playerHTML.displayError('This video is not available because the remote instance is not responding.', translations)
|
||||
});
|
||||
|
||||
(window as any)['videojsPlayer'] = this.player
|
||||
|
||||
this.buildCSS()
|
||||
this.buildPlayerDock(video)
|
||||
this.initializeApi()
|
||||
|
||||
this.playerHTML.removePlaceholder()
|
||||
if (this.videoPassword) this.playerHTML.removeVideoPasswordBlock()
|
||||
|
||||
if (this.isPlaylistEmbed()) {
|
||||
await this.buildPlayerPlaylistUpnext()
|
||||
|
||||
this.player.playlist().updateSelected()
|
||||
|
||||
this.player.on('stopped', () => {
|
||||
this.playNextPlaylistVideo()
|
||||
})
|
||||
this.buildCSS()
|
||||
this.initializeApi()
|
||||
}
|
||||
|
||||
this.alreadyInitialized = true
|
||||
|
||||
this.player.one('play', () => {
|
||||
this.alreadyPlayed = true
|
||||
})
|
||||
|
||||
if (this.videoPassword) this.playerHTML.removeVideoPasswordBlock()
|
||||
|
||||
if (video.isLive) {
|
||||
this.liveManager.listenForChanges({
|
||||
video,
|
||||
onPublishedVideo: () => {
|
||||
this.liveManager.stopListeningForChanges(video)
|
||||
this.loadVideoAndBuildPlayer({ uuid: video.uuid, autoplayFromPreviousVideo: false, forceAutoplay: true })
|
||||
this.loadVideoAndBuildPlayer({ uuid: video.uuid, forceAutoplay: true })
|
||||
}
|
||||
})
|
||||
|
||||
if (video.state.id === VideoState.WAITING_FOR_LIVE || video.state.id === VideoState.LIVE_ENDED) {
|
||||
this.liveManager.displayInfo({ state: video.state.id, translations })
|
||||
|
||||
this.disablePlayer()
|
||||
this.peertubePlayer.disable()
|
||||
} else {
|
||||
this.correctlyHandleLiveEnding(translations)
|
||||
}
|
||||
|
|
@ -326,74 +310,15 @@ export class PeerTubeEmbed {
|
|||
this.peertubePlugin.getPluginsManager().runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video })
|
||||
}
|
||||
|
||||
private resetPlayerElement () {
|
||||
if (this.player) {
|
||||
this.player.dispose()
|
||||
this.player = undefined
|
||||
}
|
||||
|
||||
const playerElement = document.createElement('video')
|
||||
playerElement.className = 'video-js vjs-peertube-skin'
|
||||
playerElement.setAttribute('playsinline', 'true')
|
||||
|
||||
this.playerHTML.setPlayerElement(playerElement)
|
||||
this.playerHTML.addPlayerElementToDOM()
|
||||
}
|
||||
|
||||
private async buildPlayerPlaylistUpnext () {
|
||||
const translations = await this.translationsPromise
|
||||
|
||||
this.player.upnext({
|
||||
timeout: 10000, // 10s
|
||||
headText: peertubeTranslate('Up Next', translations),
|
||||
cancelText: peertubeTranslate('Cancel', translations),
|
||||
suspendedText: peertubeTranslate('Autoplay is suspended', translations),
|
||||
getTitle: () => this.playlistTracker.nextVideoTitle(),
|
||||
next: () => this.playNextPlaylistVideo(),
|
||||
condition: () => !!this.playlistTracker.getNextPlaylistElement(),
|
||||
suspended: () => false
|
||||
})
|
||||
}
|
||||
|
||||
private buildPlayerDock (videoInfo: VideoDetails) {
|
||||
if (!this.playerManagerOptions.hasControls()) return
|
||||
|
||||
// On webtorrent fallback, player may have been disposed
|
||||
if (!this.player.player_) return
|
||||
|
||||
const title = this.playerManagerOptions.hasTitle()
|
||||
? videoInfo.name
|
||||
: undefined
|
||||
|
||||
const description = this.playerManagerOptions.hasWarningTitle() && this.playerManagerOptions.hasP2PEnabled()
|
||||
? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
|
||||
: undefined
|
||||
|
||||
if (!title && !description) return
|
||||
|
||||
const availableAvatars = videoInfo.channel.avatars.filter(a => a.width < 50)
|
||||
const avatar = availableAvatars.length !== 0
|
||||
? availableAvatars[0]
|
||||
: undefined
|
||||
|
||||
this.player.peertubeDock({
|
||||
title,
|
||||
description,
|
||||
avatarUrl: title && avatar
|
||||
? avatar.path
|
||||
: undefined
|
||||
})
|
||||
}
|
||||
|
||||
private buildCSS () {
|
||||
const body = document.getElementById('custom-css')
|
||||
|
||||
if (this.playerManagerOptions.hasBigPlayBackgroundColor()) {
|
||||
body.style.setProperty('--embedBigPlayBackgroundColor', this.playerManagerOptions.getBigPlayBackgroundColor())
|
||||
if (this.playerOptionsBuilder.hasBigPlayBackgroundColor()) {
|
||||
body.style.setProperty('--embedBigPlayBackgroundColor', this.playerOptionsBuilder.getBigPlayBackgroundColor())
|
||||
}
|
||||
|
||||
if (this.playerManagerOptions.hasForegroundColor()) {
|
||||
body.style.setProperty('--embedForegroundColor', this.playerManagerOptions.getForegroundColor())
|
||||
if (this.playerOptionsBuilder.hasForegroundColor()) {
|
||||
body.style.setProperty('--embedForegroundColor', this.playerOptionsBuilder.getForegroundColor())
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -415,23 +340,10 @@ export class PeerTubeEmbed {
|
|||
// Display the live ended information
|
||||
this.liveManager.displayInfo({ state: VideoState.LIVE_ENDED, translations })
|
||||
|
||||
this.disablePlayer()
|
||||
this.peertubePlayer.disable()
|
||||
})
|
||||
}
|
||||
|
||||
private disablePlayer () {
|
||||
if (this.player.isFullscreen()) {
|
||||
this.player.exitFullscreen()
|
||||
}
|
||||
|
||||
// Disable player
|
||||
this.player.hasStarted(false)
|
||||
this.player.removeClass('vjs-has-autoplay')
|
||||
this.player.bigPlayButton.hide();
|
||||
|
||||
(this.player.el() as HTMLElement).style.pointerEvents = 'none'
|
||||
}
|
||||
|
||||
private async handlePasswordError (err: PeerTubeServerError) {
|
||||
let incorrectPassword: boolean = null
|
||||
if (err.serverCode === ServerErrorCode.VIDEO_REQUIRES_PASSWORD) incorrectPassword = false
|
||||
|
|
@ -447,6 +359,33 @@ export class PeerTubeEmbed {
|
|||
return true
|
||||
}
|
||||
|
||||
private async buildPlayerIfNeeded () {
|
||||
if (this.peertubePlayer) {
|
||||
this.peertubePlayer.enable()
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
const playerElement = document.createElement('video')
|
||||
playerElement.className = 'video-js vjs-peertube-skin'
|
||||
playerElement.setAttribute('playsinline', 'true')
|
||||
|
||||
this.playerHTML.setPlayerElement(playerElement)
|
||||
this.playerHTML.addPlayerElementToDOM()
|
||||
|
||||
const [ { PeerTubePlayer } ] = await Promise.all([
|
||||
this.PeerTubePlayerManagerModulePromise,
|
||||
this.peertubePlugin.loadPlugins(this.config, await this.translationsPromise)
|
||||
])
|
||||
|
||||
const constructorOptions = this.playerOptionsBuilder.getPlayerConstructorOptions({
|
||||
serverConfig: this.config,
|
||||
authorizationHeader: () => this.http.getHeaderTokenValue()
|
||||
})
|
||||
this.peertubePlayer = new PeerTubePlayer(constructorOptions)
|
||||
|
||||
this.player = this.peertubePlayer.getPlayer()
|
||||
}
|
||||
}
|
||||
|
||||
PeerTubeEmbed.main()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue