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, ResultList, VideoDetails, VideoPlaylist, VideoPlaylistElement, VideoState } from '../../../../shared/models'
7 import { PeertubePlayerManager } from '../../assets/player'
8 import { TranslationsManager } from '../../assets/player/translations-manager'
9 import { getParamString, logger, videoRequiresAuth } from '../../root-helpers'
10 import { PeerTubeEmbedApi } from './embed-api'
11 import { AuthHTTP, LiveManager, PeerTubePlugin, PlayerManagerOptions, PlaylistFetcher, PlaylistTracker, Translations, VideoFetcher } from './shared'
12 import { PlayerHTML } from './shared/player-html'
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
29 private readonly liveManager: LiveManager
31 private playlistTracker: PlaylistTracker
33 constructor (videoWrapperId: string) {
34 logger.registerServerSending(window.location.origin)
36 this.http = new AuthHTTP()
38 this.videoFetcher = new VideoFetcher(this.http)
39 this.playlistFetcher = new PlaylistFetcher(this.http)
40 this.peertubePlugin = new PeerTubePlugin(this.http)
41 this.playerHTML = new PlayerHTML(videoWrapperId)
42 this.playerManagerOptions = new PlayerManagerOptions(this.playerHTML, this.videoFetcher, this.peertubePlugin)
43 this.liveManager = new LiveManager(this.playerHTML)
46 this.config = JSON.parse(window['PeerTubeServerConfig'])
48 logger.error('Cannot parse HTML config.', err)
52 static async main () {
53 const videoContainerId = 'video-wrapper'
54 const embed = new PeerTubeEmbed(videoContainerId)
59 return this.playerHTML.getPlayerElement()
63 return this.playerManagerOptions.getScope()
66 // ---------------------------------------------------------------------------
69 this.translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language)
70 this.PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager')
72 // Issue when we parsed config from HTML, fallback to API
74 this.config = await this.http.fetch('/api/v1/config', { optionalAuth: false })
75 .then(res => res.json())
78 const videoId = this.isPlaylistEmbed()
79 ? await this.initPlaylist()
80 : this.getResourceId()
84 return this.loadVideoAndBuildPlayer(videoId)
87 private async initPlaylist () {
88 const playlistId = this.getResourceId()
91 const res = await this.playlistFetcher.loadPlaylist(playlistId)
93 const [ playlist, playlistElementResult ] = await Promise.all([
94 res.playlistResponse.json() as Promise<VideoPlaylist>,
95 res.videosResponse.json() as Promise<ResultList<VideoPlaylistElement>>
98 const allPlaylistElements = await this.playlistFetcher.loadAllPlaylistVideos(playlistId, playlistElementResult)
100 this.playlistTracker = new PlaylistTracker(playlist, allPlaylistElements)
102 const params = new URL(window.location.toString()).searchParams
103 const playlistPositionParam = getParamString(params, 'playlistPosition')
105 const position = playlistPositionParam
106 ? parseInt(playlistPositionParam + '', 10)
109 this.playlistTracker.setPosition(position)
111 this.playerHTML.displayError(err.message, await this.translationsPromise)
115 return this.playlistTracker.getCurrentElement().video.uuid
118 private initializeApi () {
119 if (this.playerManagerOptions.hasAPIEnabled()) {
125 this.api = new PeerTubeEmbedApi(this)
126 this.api.initialize()
130 // ---------------------------------------------------------------------------
132 async playNextPlaylistVideo () {
133 const next = this.playlistTracker.getNextPlaylistElement()
135 logger.info('Next element not found in playlist.')
139 this.playlistTracker.setCurrentElement(next)
141 return this.loadVideoAndBuildPlayer(next.video.uuid)
144 async playPreviousPlaylistVideo () {
145 const previous = this.playlistTracker.getPreviousPlaylistElement()
147 logger.info('Previous element not found in playlist.')
151 this.playlistTracker.setCurrentElement(previous)
153 await this.loadVideoAndBuildPlayer(previous.video.uuid)
156 getCurrentPlaylistPosition () {
157 return this.playlistTracker.getCurrentPosition()
160 // ---------------------------------------------------------------------------
162 private async loadVideoAndBuildPlayer (uuid: string) {
164 const { videoResponse, captionsPromise } = await this.videoFetcher.loadVideo(uuid)
166 return this.buildVideoPlayer(videoResponse, captionsPromise)
168 this.playerHTML.displayError(err.message, await this.translationsPromise)
172 private async buildVideoPlayer (videoResponse: Response, captionsPromise: Promise<Response>) {
173 const alreadyHadPlayer = this.resetPlayerElement()
175 const videoInfoPromise = videoResponse.json()
176 .then(async (videoInfo: VideoDetails) => {
177 this.playerManagerOptions.loadParams(this.config, videoInfo)
179 if (!alreadyHadPlayer && !this.playerManagerOptions.hasAutoplay()) {
180 this.playerHTML.buildPlaceholder(videoInfo)
182 const live = videoInfo.isLive
183 ? await this.videoFetcher.loadLive(videoInfo)
186 const videoFileToken = videoRequiresAuth(videoInfo)
187 ? await this.videoFetcher.loadVideoToken(videoInfo)
190 return { live, video: videoInfo, videoFileToken }
193 const [ { video, live, videoFileToken }, translations, captionsResponse, PeertubePlayerManagerModule ] = await Promise.all([
195 this.translationsPromise,
197 this.PeertubePlayerManagerModulePromise
200 await this.peertubePlugin.loadPlugins(this.config, translations)
202 const PlayerManager: typeof PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
204 const options = await this.playerManagerOptions.getPlayerOptions({
209 serverConfig: this.config,
211 authorizationHeader: () => this.http.getHeaderTokenValue(),
212 videoFileToken: () => videoFileToken,
214 onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer(uuid),
216 playlistTracker: this.playlistTracker,
217 playNextPlaylistVideo: () => this.playNextPlaylistVideo(),
218 playPreviousPlaylistVideo: () => this.playPreviousPlaylistVideo(),
223 this.player = await PlayerManager.initialize(this.playerManagerOptions.getMode(), options, (player: videojs.Player) => {
227 this.player.on('customError', (event: any, data: any) => {
228 const message = data?.err?.message || ''
229 if (!message.includes('from xs param')) return
231 this.player.dispose()
232 this.playerHTML.removePlayerElement()
233 this.playerHTML.displayError('This video is not available because the remote instance is not responding.', translations)
236 window['videojsPlayer'] = this.player
239 this.buildPlayerDock(video)
242 this.playerHTML.removePlaceholder()
244 if (this.isPlaylistEmbed()) {
245 await this.buildPlayerPlaylistUpnext()
247 this.player.playlist().updateSelected()
249 this.player.on('stopped', () => {
250 this.playNextPlaylistVideo()
255 this.liveManager.listenForChanges({
257 onPublishedVideo: () => {
258 this.liveManager.stopListeningForChanges(video)
259 this.loadVideoAndBuildPlayer(video.uuid)
263 if (video.state.id === VideoState.WAITING_FOR_LIVE || video.state.id === VideoState.LIVE_ENDED) {
264 this.liveManager.displayInfo({ state: video.state.id, translations })
268 this.correctlyHandleLiveEnding(translations)
272 this.peertubePlugin.getPluginsManager().runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video })
275 private resetPlayerElement () {
276 let alreadyHadPlayer = false
279 this.player.dispose()
280 this.player = undefined
281 alreadyHadPlayer = true
284 const playerElement = document.createElement('video')
285 playerElement.className = 'video-js vjs-peertube-skin'
286 playerElement.setAttribute('playsinline', 'true')
288 this.playerHTML.setPlayerElement(playerElement)
289 this.playerHTML.addPlayerElementToDOM()
291 return alreadyHadPlayer
294 private async buildPlayerPlaylistUpnext () {
295 const translations = await this.translationsPromise
298 timeout: 10000, // 10s
299 headText: peertubeTranslate('Up Next', translations),
300 cancelText: peertubeTranslate('Cancel', translations),
301 suspendedText: peertubeTranslate('Autoplay is suspended', translations),
302 getTitle: () => this.playlistTracker.nextVideoTitle(),
303 next: () => this.playNextPlaylistVideo(),
304 condition: () => !!this.playlistTracker.getNextPlaylistElement(),
305 suspended: () => false
309 private buildPlayerDock (videoInfo: VideoDetails) {
310 if (!this.playerManagerOptions.hasControls()) return
312 // On webtorrent fallback, player may have been disposed
313 if (!this.player.player_) return
315 const title = this.playerManagerOptions.hasTitle()
319 const description = this.playerManagerOptions.hasWarningTitle() && this.playerManagerOptions.hasP2PEnabled()
320 ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
323 if (!title && !description) return
325 const availableAvatars = videoInfo.channel.avatars.filter(a => a.width < 50)
326 const avatar = availableAvatars.length !== 0
327 ? availableAvatars[0]
330 this.player.peertubeDock({
333 avatarUrl: title && avatar
339 private buildCSS () {
340 const body = document.getElementById('custom-css')
342 if (this.playerManagerOptions.hasBigPlayBackgroundColor()) {
343 body.style.setProperty('--embedBigPlayBackgroundColor', this.playerManagerOptions.getBigPlayBackgroundColor())
346 if (this.playerManagerOptions.hasForegroundColor()) {
347 body.style.setProperty('--embedForegroundColor', this.playerManagerOptions.getForegroundColor())
351 // ---------------------------------------------------------------------------
353 private getResourceId () {
354 const urlParts = window.location.pathname.split('/')
355 return urlParts[urlParts.length - 1]
358 private isPlaylistEmbed () {
359 return window.location.pathname.split('/')[1] === 'video-playlists'
362 // ---------------------------------------------------------------------------
364 private correctlyHandleLiveEnding (translations: Translations) {
365 this.player.one('ended', () => {
366 // Display the live ended information
367 this.liveManager.displayInfo({ state: VideoState.LIVE_ENDED, translations })
373 private disablePlayer () {
374 if (this.player.isFullscreen()) {
375 this.player.exitFullscreen()
379 this.player.hasStarted(false)
380 this.player.removeClass('vjs-has-autoplay')
381 this.player.bigPlayButton.hide();
383 (this.player.el() as HTMLElement).style.pointerEvents = 'none'
390 (window as any).displayIncompatibleBrowser()
392 logger.error('Cannot init embed.', err)