client/src/standalone/videos/embed.ts

   1 import './embed.scss'
   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'
  13
  14 export class PeerTubeEmbed {
  15   player: videojs.Player
  16   api: PeerTubeEmbedApi = null
  17
  18   config: HTMLServerConfig
  19
  20   private translationsPromise: Promise<{ [id: string]: string }>
  21   private PeertubePlayerManagerModulePromise: Promise<any>
  22
  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
  30   private playlistTracker: PlaylistTracker
  31
  32   constructor (videoWrapperId: string) {
  33     this.http = new AuthHTTP()
  34
  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)
  40
  41     try {
  42       this.config = JSON.parse(window['PeerTubeServerConfig'])
  43     } catch (err) {
  44       console.error('Cannot parse HTML config.', err)
  45     }
  46   }
  47
  48   static async main () {
  49     const videoContainerId = 'video-wrapper'
  50     const embed = new PeerTubeEmbed(videoContainerId)
  51     await embed.init()
  52   }
  53
  54   getPlayerElement () {
  55     return this.playerHTML.getPlayerElement()
  56   }
  57
  58   getScope () {
  59     return this.playerManagerOptions.getScope()
  60   }
  61
  62   // ---------------------------------------------------------------------------
  63
  64   async init () {
  65     this.translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language)
  66     this.PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager')
  67
  68     // Issue when we parsed config from HTML, fallback to API
  69     if (!this.config) {
  70       this.config = await this.http.fetch('/api/v1/config', { optionalAuth: false })
  71         .then(res => res.json())
  72     }
  73
  74     const videoId = this.isPlaylistEmbed()
  75       ? await this.initPlaylist()
  76       : this.getResourceId()
  77
  78     if (!videoId) return
  79
  80     return this.loadVideoAndBuildPlayer(videoId)
  81   }
  82
  83   private async initPlaylist () {
  84     const playlistId = this.getResourceId()
  85
  86     try {
  87       const res = await this.playlistFetcher.loadPlaylist(playlistId)
  88
  89       const [ playlist, playlistElementResult ] = await Promise.all([
  90         res.playlistResponse.json() as Promise<VideoPlaylist>,
  91         res.videosResponse.json() as Promise<ResultList<VideoPlaylistElement>>
  92       ])
  93
  94       const allPlaylistElements = await this.playlistFetcher.loadAllPlaylistVideos(playlistId, playlistElementResult)
  95
  96       this.playlistTracker = new PlaylistTracker(playlist, allPlaylistElements)
  97
  98       const params = new URL(window.location.toString()).searchParams
  99       const playlistPositionParam = getParamString(params, 'playlistPosition')
 100
 101       const position = playlistPositionParam
 102         ? parseInt(playlistPositionParam + '', 10)
 103         : 1
 104
 105       this.playlistTracker.setPosition(position)
 106     } catch (err) {
 107       this.playerHTML.displayError(err.message, await this.translationsPromise)
 108       return undefined
 109     }
 110
 111     return this.playlistTracker.getCurrentElement().video.uuid
 112   }
 113
 114   private initializeApi () {
 115     if (this.playerManagerOptions.hasAPIEnabled()) {
 116       this.api = new PeerTubeEmbedApi(this)
 117       this.api.initialize()
 118     }
 119   }
 120
 121   // ---------------------------------------------------------------------------
 122
 123   async playNextPlaylistVideo () {
 124     const next = this.playlistTracker.getNextPlaylistElement()
 125     if (!next) {
 126       console.log('Next element not found in playlist.')
 127       return
 128     }
 129
 130     this.playlistTracker.setCurrentElement(next)
 131
 132     return this.loadVideoAndBuildPlayer(next.video.uuid)
 133   }
 134
 135   async playPreviousPlaylistVideo () {
 136     const previous = this.playlistTracker.getPreviousPlaylistElement()
 137     if (!previous) {
 138       console.log('Previous element not found in playlist.')
 139       return
 140     }
 141
 142     this.playlistTracker.setCurrentElement(previous)
 143
 144     await this.loadVideoAndBuildPlayer(previous.video.uuid)
 145   }
 146
 147   getCurrentPlaylistPosition () {
 148     return this.playlistTracker.getCurrentPosition()
 149   }
 150
 151   // ---------------------------------------------------------------------------
 152
 153   private async loadVideoAndBuildPlayer (uuid: string) {
 154     try {
 155       const { videoResponse, captionsPromise } = await this.videoFetcher.loadVideo(uuid)
 156
 157       return this.buildVideoPlayer(videoResponse, captionsPromise)
 158     } catch (err) {
 159       this.playerHTML.displayError(err.message, await this.translationsPromise)
 160     }
 161   }
 162
 163   private async buildVideoPlayer (videoResponse: Response, captionsPromise: Promise<Response>) {
 164     const alreadyHadPlayer = this.resetPlayerElement()
 165
 166     const videoInfoPromise: Promise<{ video: VideoDetails, live?: LiveVideo }> = videoResponse.json()
 167       .then((videoInfo: VideoDetails) => {
 168         this.playerManagerOptions.loadParams(this.config, videoInfo)
 169
 170         if (!alreadyHadPlayer && !this.playerManagerOptions.hasAutoplay()) {
 171           this.playerHTML.buildPlaceholder(videoInfo)
 172         }
 173
 174         if (!videoInfo.isLive) {
 175           return { video: videoInfo }
 176         }
 177
 178         return this.videoFetcher.loadVideoWithLive(videoInfo)
 179       })
 180
 181     const [ { video, live }, translations, captionsResponse, PeertubePlayerManagerModule ] = await Promise.all([
 182       videoInfoPromise,
 183       this.translationsPromise,
 184       captionsPromise,
 185       this.PeertubePlayerManagerModulePromise
 186     ])
 187
 188     await this.peertubePlugin.loadPlugins(this.config, translations)
 189
 190     const PlayerManager: typeof PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
 191
 192     const options = await this.playerManagerOptions.getPlayerOptions({
 193       video,
 194       captionsResponse,
 195       alreadyHadPlayer,
 196       translations,
 197       onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer(uuid),
 198
 199       playlistTracker: this.playlistTracker,
 200       playNextPlaylistVideo: () => this.playNextPlaylistVideo(),
 201       playPreviousPlaylistVideo: () => this.playPreviousPlaylistVideo(),
 202
 203       live
 204     })
 205
 206     this.player = await PlayerManager.initialize(this.playerManagerOptions.getMode(), options, (player: videojs.Player) => {
 207       this.player = player
 208     })
 209
 210     this.player.on('customError', (event: any, data: any) => {
 211       const message = data?.err?.message || ''
 212       if (!message.includes('from xs param')) return
 213
 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)
 217     })
 218
 219     window['videojsPlayer'] = this.player
 220
 221     this.buildCSS()
 222     this.buildPlayerDock(video)
 223     this.initializeApi()
 224
 225     this.playerHTML.removePlaceholder()
 226
 227     if (this.isPlaylistEmbed()) {
 228       await this.buildPlayerPlaylistUpnext()
 229
 230       this.player.playlist().updateSelected()
 231
 232       this.player.on('stopped', () => {
 233         this.playNextPlaylistVideo()
 234       })
 235     }
 236
 237     this.peertubePlugin.getPluginsManager().runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video })
 238   }
 239
 240   private resetPlayerElement () {
 241     let alreadyHadPlayer = false
 242
 243     if (this.player) {
 244       this.player.dispose()
 245       alreadyHadPlayer = true
 246     }
 247
 248     const playerElement = document.createElement('video')
 249     playerElement.className = 'video-js vjs-peertube-skin'
 250     playerElement.setAttribute('playsinline', 'true')
 251
 252     this.playerHTML.setPlayerElement(playerElement)
 253     this.playerHTML.addPlayerElementToDOM()
 254
 255     return alreadyHadPlayer
 256   }
 257
 258   private async buildPlayerPlaylistUpnext () {
 259     const translations = await this.translationsPromise
 260
 261     this.player.upnext({
 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
 270     })
 271   }
 272
 273   private buildPlayerDock (videoInfo: VideoDetails) {
 274     if (!this.playerManagerOptions.hasControls()) return
 275
 276     // On webtorrent fallback, player may have been disposed
 277     if (!this.player.player_) return
 278
 279     const title = this.playerManagerOptions.hasTitle()
 280       ? videoInfo.name
 281       : undefined
 282
 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>'
 285       : undefined
 286
 287     if (!title && !description) return
 288
 289     const availableAvatars = videoInfo.channel.avatars.filter(a => a.width < 50)
 290     const avatar = availableAvatars.length !== 0
 291       ? availableAvatars[0]
 292       : undefined
 293
 294     this.player.peertubeDock({
 295       title,
 296       description,
 297       avatarUrl: title && avatar
 298         ? avatar.path
 299         : undefined
 300     })
 301   }
 302
 303   private buildCSS () {
 304     const body = document.getElementById('custom-css')
 305
 306     if (this.playerManagerOptions.hasBigPlayBackgroundColor()) {
 307       body.style.setProperty('--embedBigPlayBackgroundColor', this.playerManagerOptions.getBigPlayBackgroundColor())
 308     }
 309
 310     if (this.playerManagerOptions.hasForegroundColor()) {
 311       body.style.setProperty('--embedForegroundColor', this.playerManagerOptions.getForegroundColor())
 312     }
 313   }
 314
 315   // ---------------------------------------------------------------------------
 316
 317   private getResourceId () {
 318     const urlParts = window.location.pathname.split('/')
 319     return urlParts[urlParts.length - 1]
 320   }
 321
 322   private isPlaylistEmbed () {
 323     return window.location.pathname.split('/')[1] === 'video-playlists'
 324   }
 325 }
 326
 327 PeerTubeEmbed.main()
 328   .catch(err => {
 329     (window as any).displayIncompatibleBrowser()
 330
 331     console.error('Cannot init embed.', err)
 332   })