2 import '../../assets/player/shared/dock/peertube-dock-component'
3 import '../../assets/player/shared/dock/peertube-dock-plugin'
4 import videojs from 'video.js'
5 import { peertubeTranslate } from '../../../../shared/core-utils/i18n'
6 import { HTMLServerConfig, LiveVideo, ResultList, VideoDetails, VideoPlaylist, VideoPlaylistElement } from '../../../../shared/models'
7 import { TranslationsManager } from '../../assets/player/translations-manager'
8 import { getParamString } from '../../root-helpers'
9 import { PeerTubeEmbedApi } from './embed-api'
10 import { AuthHTTP, PeerTubePlugin, PlayerManagerOptions, PlaylistFetcher, PlaylistTracker, VideoFetcher } from './shared'
11 import { PlayerHTML } from './shared/player-html'
12 import { PeertubePlayerManager } from '../../assets/player'
14 export class PeerTubeEmbed {
15 player: videojs.Player
16 api: PeerTubeEmbedApi = null
18 config: HTMLServerConfig
20 private translationsPromise: Promise<{ [id: string]: string }>
21 private PeertubePlayerManagerModulePromise: Promise<any>
23 private readonly http: AuthHTTP
24 private readonly videoFetcher: VideoFetcher
25 private readonly playlistFetcher: PlaylistFetcher
26 private readonly peertubePlugin: PeerTubePlugin
27 private readonly playerHTML: PlayerHTML
28 private readonly playerManagerOptions: PlayerManagerOptions
30 private playlistTracker: PlaylistTracker
32 constructor (videoWrapperId: string) {
33 this.http = new AuthHTTP()
35 this.videoFetcher = new VideoFetcher(this.http)
36 this.playlistFetcher = new PlaylistFetcher(this.http)
37 this.peertubePlugin = new PeerTubePlugin(this.http)
38 this.playerHTML = new PlayerHTML(videoWrapperId)
39 this.playerManagerOptions = new PlayerManagerOptions(this.playerHTML, this.videoFetcher, this.peertubePlugin)
42 this.config = JSON.parse(window['PeerTubeServerConfig'])
44 console.error('Cannot parse HTML config.', err)
48 static async main () {
49 const videoContainerId = 'video-wrapper'
50 const embed = new PeerTubeEmbed(videoContainerId)
55 return this.playerHTML.getPlayerElement()
59 return this.playerManagerOptions.getScope()
62 // ---------------------------------------------------------------------------
65 this.translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language)
66 this.PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager')
68 // Issue when we parsed config from HTML, fallback to API
70 this.config = await this.http.fetch('/api/v1/config', { optionalAuth: false })
71 .then(res => res.json())
74 const videoId = this.isPlaylistEmbed()
75 ? await this.initPlaylist()
76 : this.getResourceId()
80 return this.loadVideoAndBuildPlayer(videoId)
83 private async initPlaylist () {
84 const playlistId = this.getResourceId()
87 const res = await this.playlistFetcher.loadPlaylist(playlistId)
89 const [ playlist, playlistElementResult ] = await Promise.all([
90 res.playlistResponse.json() as Promise<VideoPlaylist>,
91 res.videosResponse.json() as Promise<ResultList<VideoPlaylistElement>>
94 const allPlaylistElements = await this.playlistFetcher.loadAllPlaylistVideos(playlistId, playlistElementResult)
96 this.playlistTracker = new PlaylistTracker(playlist, allPlaylistElements)
98 const params = new URL(window.location.toString()).searchParams
99 const playlistPositionParam = getParamString(params, 'playlistPosition')
101 const position = playlistPositionParam
102 ? parseInt(playlistPositionParam + '', 10)
105 this.playlistTracker.setPosition(position)
107 this.playerHTML.displayError(err.message, await this.translationsPromise)
111 return this.playlistTracker.getCurrentElement().video.uuid
114 private initializeApi () {
115 if (this.playerManagerOptions.hasAPIEnabled()) {
116 this.api = new PeerTubeEmbedApi(this)
117 this.api.initialize()
121 // ---------------------------------------------------------------------------
123 async playNextPlaylistVideo () {
124 const next = this.playlistTracker.getNextPlaylistElement()
126 console.log('Next element not found in playlist.')
130 this.playlistTracker.setCurrentElement(next)
132 return this.loadVideoAndBuildPlayer(next.video.uuid)
135 async playPreviousPlaylistVideo () {
136 const previous = this.playlistTracker.getPreviousPlaylistElement()
138 console.log('Previous element not found in playlist.')
142 this.playlistTracker.setCurrentElement(previous)
144 await this.loadVideoAndBuildPlayer(previous.video.uuid)
147 getCurrentPlaylistPosition () {
148 return this.playlistTracker.getCurrentPosition()
151 // ---------------------------------------------------------------------------
153 private async loadVideoAndBuildPlayer (uuid: string) {
155 const { videoResponse, captionsPromise } = await this.videoFetcher.loadVideo(uuid)
157 return this.buildVideoPlayer(videoResponse, captionsPromise)
159 this.playerHTML.displayError(err.message, await this.translationsPromise)
163 private async buildVideoPlayer (videoResponse: Response, captionsPromise: Promise<Response>) {
164 const alreadyHadPlayer = this.resetPlayerElement()
166 const videoInfoPromise: Promise<{ video: VideoDetails, live?: LiveVideo }> = videoResponse.json()
167 .then((videoInfo: VideoDetails) => {
168 this.playerManagerOptions.loadParams(this.config, videoInfo)
170 if (!alreadyHadPlayer && !this.playerManagerOptions.hasAutoplay()) {
171 this.playerHTML.buildPlaceholder(videoInfo)
174 if (!videoInfo.isLive) {
175 return { video: videoInfo }
178 return this.videoFetcher.loadVideoWithLive(videoInfo)
181 const [ { video, live }, translations, captionsResponse, PeertubePlayerManagerModule ] = await Promise.all([
183 this.translationsPromise,
185 this.PeertubePlayerManagerModulePromise
188 await this.peertubePlugin.loadPlugins(this.config, translations)
190 const PlayerManager: typeof PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
192 const options = await this.playerManagerOptions.getPlayerOptions({
197 onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer(uuid),
199 playlistTracker: this.playlistTracker,
200 playNextPlaylistVideo: () => this.playNextPlaylistVideo(),
201 playPreviousPlaylistVideo: () => this.playPreviousPlaylistVideo(),
206 this.player = await PlayerManager.initialize(this.playerManagerOptions.getMode(), options, (player: videojs.Player) => {
210 this.player.on('customError', (event: any, data: any) => {
211 const message = data?.err?.message || ''
212 if (!message.includes('from xs param')) return
214 this.player.dispose()
215 this.playerHTML.removePlayerElement()
216 this.playerHTML.displayError('This video is not available because the remote instance is not responding.', translations)
219 window['videojsPlayer'] = this.player
222 this.buildPlayerDock(video)
225 this.playerHTML.removePlaceholder()
227 if (this.isPlaylistEmbed()) {
228 await this.buildPlayerPlaylistUpnext()
230 this.player.playlist().updateSelected()
232 this.player.on('stopped', () => {
233 this.playNextPlaylistVideo()
237 this.peertubePlugin.getPluginsManager().runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video })
240 private resetPlayerElement () {
241 let alreadyHadPlayer = false
244 this.player.dispose()
245 alreadyHadPlayer = true
248 const playerElement = document.createElement('video')
249 playerElement.className = 'video-js vjs-peertube-skin'
250 playerElement.setAttribute('playsinline', 'true')
252 this.playerHTML.setPlayerElement(playerElement)
253 this.playerHTML.addPlayerElementToDOM()
255 return alreadyHadPlayer
258 private async buildPlayerPlaylistUpnext () {
259 const translations = await this.translationsPromise
262 timeout: 10000, // 10s
263 headText: peertubeTranslate('Up Next', translations),
264 cancelText: peertubeTranslate('Cancel', translations),
265 suspendedText: peertubeTranslate('Autoplay is suspended', translations),
266 getTitle: () => this.playlistTracker.nextVideoTitle(),
267 next: () => this.playNextPlaylistVideo(),
268 condition: () => !!this.playlistTracker.getNextPlaylistElement(),
269 suspended: () => false
273 private buildPlayerDock (videoInfo: VideoDetails) {
274 if (!this.playerManagerOptions.hasControls()) return
276 // On webtorrent fallback, player may have been disposed
277 if (!this.player.player_) return
279 const title = this.playerManagerOptions.hasTitle()
283 const description = this.playerManagerOptions.hasWarningTitle() && this.playerManagerOptions.hasP2PEnabled()
284 ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
287 if (!title && !description) return
289 const availableAvatars = videoInfo.channel.avatars.filter(a => a.width < 50)
290 const avatar = availableAvatars.length !== 0
291 ? availableAvatars[0]
294 this.player.peertubeDock({
297 avatarUrl: title && avatar
303 private buildCSS () {
304 const body = document.getElementById('custom-css')
306 if (this.playerManagerOptions.hasBigPlayBackgroundColor()) {
307 body.style.setProperty('--embedBigPlayBackgroundColor', this.playerManagerOptions.getBigPlayBackgroundColor())
310 if (this.playerManagerOptions.hasForegroundColor()) {
311 body.style.setProperty('--embedForegroundColor', this.playerManagerOptions.getForegroundColor())
315 // ---------------------------------------------------------------------------
317 private getResourceId () {
318 const urlParts = window.location.pathname.split('/')
319 return urlParts[urlParts.length - 1]
322 private isPlaylistEmbed () {
323 return window.location.pathname.split('/')[1] === 'video-playlists'
329 (window as any).displayIncompatibleBrowser()
331 console.error('Cannot init embed.', err)