]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/standalone/videos/embed.ts
Translate plugin options
[github/Chocobozzz/PeerTube.git] / client / src / standalone / videos / embed.ts
CommitLineData
202e7223 1import './embed.scss'
583eb04b 2import videojs from 'video.js'
bd45d503 3import { peertubeTranslate } from '../../../../shared/core-utils/i18n'
3f9c4955 4import {
3f9c4955
C
5 ResultList,
6 ServerConfig,
583eb04b
C
7 UserRefreshToken,
8 VideoCaption,
4504f09f 9 VideoDetails,
5abc96fc
C
10 VideoPlaylist,
11 VideoPlaylistElement,
f9562863
C
12 VideoStreamingPlaylistType,
13 PluginType,
14 ClientHookName
583eb04b 15} from '../../../../shared/models'
f2eb23cd 16import { HttpStatusCode } from '../../../../shared/core-utils/miscs/http-error-codes'
583eb04b 17import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../assets/player/peertube-player-manager'
abb3097e 18import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
583eb04b 19import { TranslationsManager } from '../../assets/player/translations-manager'
f9562863
C
20import { Hooks, loadPlugin, runHook } from '../../root-helpers/plugins'
21import { Tokens } from '../../root-helpers/users'
22import { peertubeLocalStorage } from '../../root-helpers/peertube-web-storage'
23import { objectToUrlEncoded } from '../../root-helpers/utils'
583eb04b 24import { PeerTubeEmbedApi } from './embed-api'
f9562863 25import { RegisterClientHelpers } from '../../types/register-client-option.model'
abb3097e
C
26
27type Translations = { [ id: string ]: string }
202e7223 28
5efab546 29export class PeerTubeEmbed {
5abc96fc 30 playerElement: HTMLVideoElement
7e37e111 31 player: videojs.Player
902aa3a0 32 api: PeerTubeEmbedApi = null
5abc96fc 33
3b019808
C
34 autoplay: boolean
35 controls: boolean
36 muted: boolean
37 loop: boolean
38 subtitle: string
902aa3a0 39 enableApi = false
1f6824c9 40 startTime: number | string = 0
f0a39880 41 stopTime: number | string
5efab546
C
42
43 title: boolean
44 warningTitle: boolean
08d9ba0f 45 peertubeLink: boolean
5efab546
C
46 bigPlayBackgroundColor: string
47 foregroundColor: string
48
3b6f205c 49 mode: PlayerMode
902aa3a0
C
50 scope = 'peertube'
51
a4ff3100 52 userTokens: Tokens
71ab65d0 53 headers = new Headers()
4504f09f
RK
54 LOCAL_STORAGE_OAUTH_CLIENT_KEYS = {
55 CLIENT_ID: 'client_id',
56 CLIENT_SECRET: 'client_secret'
57 }
71ab65d0 58
5abc96fc
C
59 private translationsPromise: Promise<{ [id: string]: string }>
60 private configPromise: Promise<ServerConfig>
61 private PeertubePlayerManagerModulePromise: Promise<any>
62
63 private playlist: VideoPlaylist
64 private playlistElements: VideoPlaylistElement[]
65 private currentPlaylistElement: VideoPlaylistElement
66
67 private wrapperElement: HTMLElement
68
f9562863
C
69 private peertubeHooks: Hooks = {}
70 private loadedScripts = new Set<string>()
71
902aa3a0 72 static async main () {
5abc96fc 73 const videoContainerId = 'video-wrapper'
99941732
WL
74 const embed = new PeerTubeEmbed(videoContainerId)
75 await embed.init()
76 }
902aa3a0 77
5abc96fc
C
78 constructor (private videoWrapperId: string) {
79 this.wrapperElement = document.getElementById(this.videoWrapperId)
902aa3a0
C
80 }
81
99941732
WL
82 getVideoUrl (id: string) {
83 return window.location.origin + '/api/v1/videos/' + id
84 }
d4f3fea6 85
207612df 86 refreshFetch (url: string, options?: RequestInit) {
4504f09f
RK
87 return fetch(url, options)
88 .then((res: Response) => {
f2eb23cd 89 if (res.status !== HttpStatusCode.UNAUTHORIZED_401) return res
4504f09f 90
72aa835e 91 const refreshingTokenPromise = new Promise<void>((resolve, reject) => {
4504f09f
RK
92 const clientId: string = peertubeLocalStorage.getItem(this.LOCAL_STORAGE_OAUTH_CLIENT_KEYS.CLIENT_ID)
93 const clientSecret: string = peertubeLocalStorage.getItem(this.LOCAL_STORAGE_OAUTH_CLIENT_KEYS.CLIENT_SECRET)
207612df 94
4504f09f
RK
95 const headers = new Headers()
96 headers.set('Content-Type', 'application/x-www-form-urlencoded')
207612df 97
4504f09f 98 const data = {
a4ff3100 99 refresh_token: this.userTokens.refreshToken,
4504f09f
RK
100 client_id: clientId,
101 client_secret: clientSecret,
102 response_type: 'code',
103 grant_type: 'refresh_token'
104 }
105
106 fetch('/api/v1/users/token', {
107 headers,
108 method: 'POST',
109 body: objectToUrlEncoded(data)
496d784d 110 }).then(res => {
f2eb23cd 111 if (res.status === HttpStatusCode.UNAUTHORIZED_401) return undefined
a4ff3100 112
496d784d
C
113 return res.json()
114 }).then((obj: UserRefreshToken & { code: 'invalid_grant'}) => {
115 if (!obj || obj.code === 'invalid_grant') {
116 Tokens.flush()
117 this.removeTokensFromHeaders()
a4ff3100 118
496d784d
C
119 return resolve()
120 }
121
122 this.userTokens.accessToken = obj.access_token
123 this.userTokens.refreshToken = obj.refresh_token
124 this.userTokens.save()
125
126 this.setHeadersFromTokens()
127
128 resolve()
a7299d9d
C
129 }).catch((refreshTokenError: any) => {
130 reject(refreshTokenError)
496d784d 131 })
4504f09f
RK
132 })
133
134 return refreshingTokenPromise
496d784d
C
135 .catch(() => {
136 Tokens.flush()
137
138 this.removeTokensFromHeaders()
139 }).then(() => fetch(url, {
4504f09f
RK
140 ...options,
141 headers: this.headers
142 }))
143 })
144 }
145
5abc96fc
C
146 getPlaylistUrl (id: string) {
147 return window.location.origin + '/api/v1/video-playlists/' + id
148 }
149
99941732 150 loadVideoInfo (videoId: string): Promise<Response> {
4504f09f 151 return this.refreshFetch(this.getVideoUrl(videoId), { headers: this.headers })
99941732 152 }
d4f3fea6 153
16f7022b 154 loadVideoCaptions (videoId: string): Promise<Response> {
be59656c 155 return this.refreshFetch(this.getVideoUrl(videoId) + '/captions', { headers: this.headers })
16f7022b
C
156 }
157
5abc96fc 158 loadPlaylistInfo (playlistId: string): Promise<Response> {
be59656c 159 return this.refreshFetch(this.getPlaylistUrl(playlistId), { headers: this.headers })
5abc96fc
C
160 }
161
fb13852d
C
162 loadPlaylistElements (playlistId: string, start = 0): Promise<Response> {
163 const url = new URL(this.getPlaylistUrl(playlistId) + '/videos')
164 url.search = new URLSearchParams({ start: '' + start, count: '100' }).toString()
165
be59656c 166 return this.refreshFetch(url.toString(), { headers: this.headers })
5abc96fc
C
167 }
168
169 loadConfig (): Promise<ServerConfig> {
be59656c 170 return this.refreshFetch('/api/v1/config')
5abc96fc 171 .then(res => res.json())
31b6ddf8
C
172 }
173
99941732
WL
174 removeElement (element: HTMLElement) {
175 element.parentElement.removeChild(element)
176 }
d4f3fea6 177
abb3097e 178 displayError (text: string, translations?: Translations) {
99941732 179 // Remove video element
5abc96fc
C
180 if (this.playerElement) {
181 this.removeElement(this.playerElement)
182 this.playerElement = undefined
183 }
99941732 184
ad3fa0c5
C
185 const translatedText = peertubeTranslate(text, translations)
186 const translatedSorry = peertubeTranslate('Sorry', translations)
187
188 document.title = translatedSorry + ' - ' + translatedText
99941732
WL
189
190 const errorBlock = document.getElementById('error-block')
191 errorBlock.style.display = 'flex'
192
ad3fa0c5
C
193 const errorTitle = document.getElementById('error-title')
194 errorTitle.innerHTML = peertubeTranslate('Sorry', translations)
195
99941732 196 const errorText = document.getElementById('error-content')
ad3fa0c5 197 errorText.innerHTML = translatedText
2a71d286
C
198
199 this.wrapperElement.style.display = 'none'
99941732
WL
200 }
201
abb3097e 202 videoNotFound (translations?: Translations) {
99941732 203 const text = 'This video does not exist.'
ad3fa0c5 204 this.displayError(text, translations)
99941732
WL
205 }
206
abb3097e 207 videoFetchError (translations?: Translations) {
99941732 208 const text = 'We cannot fetch the video. Please try again later.'
ad3fa0c5 209 this.displayError(text, translations)
99941732
WL
210 }
211
5abc96fc
C
212 playlistNotFound (translations?: Translations) {
213 const text = 'This playlist does not exist.'
214 this.displayError(text, translations)
215 }
216
217 playlistFetchError (translations?: Translations) {
218 const text = 'We cannot fetch the playlist. Please try again later.'
219 this.displayError(text, translations)
220 }
221
3b019808 222 getParamToggle (params: URLSearchParams, name: string, defaultValue?: boolean) {
99941732
WL
223 return params.has(name) ? (params.get(name) === '1' || params.get(name) === 'true') : defaultValue
224 }
d4f3fea6 225
3b019808 226 getParamString (params: URLSearchParams, name: string, defaultValue?: string) {
99941732
WL
227 return params.has(name) ? params.get(name) : defaultValue
228 }
da99ccf2 229
9054a8b6
C
230 async playNextVideo () {
231 const next = this.getNextPlaylistElement()
232 if (!next) {
233 console.log('Next element not found in playlist.')
234 return
235 }
236
237 this.currentPlaylistElement = next
238
239 return this.loadVideoAndBuildPlayer(this.currentPlaylistElement.video.uuid)
240 }
241
242 async playPreviousVideo () {
243 const previous = this.getPreviousPlaylistElement()
244 if (!previous) {
245 console.log('Previous element not found in playlist.')
246 return
247 }
248
249 this.currentPlaylistElement = previous
250
251 await this.loadVideoAndBuildPlayer(this.currentPlaylistElement.video.uuid)
252 }
253
254 getCurrentPosition () {
255 if (!this.currentPlaylistElement) return -1
256
257 return this.currentPlaylistElement.position
258 }
259
902aa3a0 260 async init () {
99941732 261 try {
a4ff3100 262 this.userTokens = Tokens.load()
99941732
WL
263 await this.initCore()
264 } catch (e) {
265 console.error(e)
266 }
267 }
268
902aa3a0
C
269 private initializeApi () {
270 if (!this.enableApi) return
271
272 this.api = new PeerTubeEmbedApi(this)
273 this.api.initialize()
274 }
275
0f2f274c 276 private loadParams (video: VideoDetails) {
da99ccf2 277 try {
c4710631 278 const params = new URL(window.location.toString()).searchParams
99941732 279
31b6ddf8
C
280 this.autoplay = this.getParamToggle(params, 'autoplay', false)
281 this.controls = this.getParamToggle(params, 'controls', true)
64645512 282 this.muted = this.getParamToggle(params, 'muted', undefined)
31b6ddf8 283 this.loop = this.getParamToggle(params, 'loop', false)
5efab546 284 this.title = this.getParamToggle(params, 'title', true)
99941732 285 this.enableApi = this.getParamToggle(params, 'api', this.enableApi)
5efab546 286 this.warningTitle = this.getParamToggle(params, 'warningTitle', true)
08d9ba0f 287 this.peertubeLink = this.getParamToggle(params, 'peertubeLink', true)
f37bad63 288
3b019808
C
289 this.scope = this.getParamString(params, 'scope', this.scope)
290 this.subtitle = this.getParamString(params, 'subtitle')
291 this.startTime = this.getParamString(params, 'start')
f0a39880 292 this.stopTime = this.getParamString(params, 'stop')
3b6f205c 293
5efab546
C
294 this.bigPlayBackgroundColor = this.getParamString(params, 'bigPlayBackgroundColor')
295 this.foregroundColor = this.getParamString(params, 'foregroundColor')
296
0f2f274c
C
297 const modeParam = this.getParamString(params, 'mode')
298
299 if (modeParam) {
300 if (modeParam === 'p2p-media-loader') this.mode = 'p2p-media-loader'
301 else this.mode = 'webtorrent'
302 } else {
303 if (Array.isArray(video.streamingPlaylists) && video.streamingPlaylists.length !== 0) this.mode = 'p2p-media-loader'
304 else this.mode = 'webtorrent'
305 }
da99ccf2
C
306 } catch (err) {
307 console.error('Cannot get params from URL.', err)
308 }
99941732
WL
309 }
310
fb13852d
C
311 private async loadAllPlaylistVideos (playlistId: string, baseResult: ResultList<VideoPlaylistElement>) {
312 let elements = baseResult.data
313 let total = baseResult.total
314 let i = 0
315
316 while (total > elements.length && i < 10) {
317 const result = await this.loadPlaylistElements(playlistId, elements.length)
318
319 const json = await result.json() as ResultList<VideoPlaylistElement>
320 total = json.total
321
322 elements = elements.concat(json.data)
323 i++
324 }
325
326 if (i === 10) {
327 console.error('Cannot fetch all playlists elements, there are too many!')
328 }
329
330 return elements
331 }
332
5abc96fc
C
333 private async loadPlaylist (playlistId: string) {
334 const playlistPromise = this.loadPlaylistInfo(playlistId)
335 const playlistElementsPromise = this.loadPlaylistElements(playlistId)
99941732 336
be59656c
C
337 let playlistResponse: Response
338 let isResponseOk: boolean
5abc96fc 339
be59656c
C
340 try {
341 playlistResponse = await playlistPromise
f2eb23cd 342 isResponseOk = playlistResponse.status === HttpStatusCode.OK_200
be59656c
C
343 } catch (err) {
344 console.error(err)
345 isResponseOk = false
346 }
347
348 if (!isResponseOk) {
5abc96fc 349 const serverTranslations = await this.translationsPromise
71ab65d0 350
f2eb23cd 351 if (playlistResponse?.status === HttpStatusCode.NOT_FOUND_404) {
5abc96fc
C
352 this.playlistNotFound(serverTranslations)
353 return undefined
354 }
355
356 this.playlistFetchError(serverTranslations)
357 return undefined
358 }
359
360 return { playlistResponse, videosResponse: await playlistElementsPromise }
361 }
362
363 private async loadVideo (videoId: string) {
3f9c4955 364 const videoPromise = this.loadVideoInfo(videoId)
3f9c4955 365
be59656c
C
366 let videoResponse: Response
367 let isResponseOk: boolean
368
369 try {
370 videoResponse = await videoPromise
f2eb23cd 371 isResponseOk = videoResponse.status === HttpStatusCode.OK_200
be59656c
C
372 } catch (err) {
373 console.error(err)
374
375 isResponseOk = false
376 }
99941732 377
be59656c 378 if (!isResponseOk) {
5abc96fc
C
379 const serverTranslations = await this.translationsPromise
380
f2eb23cd 381 if (videoResponse?.status === HttpStatusCode.NOT_FOUND_404) {
5abc96fc
C
382 this.videoNotFound(serverTranslations)
383 return undefined
384 }
385
386 this.videoFetchError(serverTranslations)
387 return undefined
388 }
389
390 const captionsPromise = this.loadVideoCaptions(videoId)
391
392 return { captionsPromise, videoResponse }
393 }
3f9c4955 394
5abc96fc
C
395 private async buildPlaylistManager () {
396 const translations = await this.translationsPromise
397
398 this.player.upnext({
399 timeout: 10000, // 10s
400 headText: peertubeTranslate('Up Next', translations),
401 cancelText: peertubeTranslate('Cancel', translations),
402 suspendedText: peertubeTranslate('Autoplay is suspended', translations),
403 getTitle: () => this.nextVideoTitle(),
a950e4c8 404 next: () => this.playNextVideo(),
5abc96fc
C
405 condition: () => !!this.getNextPlaylistElement(),
406 suspended: () => false
407 })
408 }
99941732 409
4572c3d0
C
410 private async loadVideoAndBuildPlayer (uuid: string) {
411 const res = await this.loadVideo(uuid)
5abc96fc
C
412 if (res === undefined) return
413
414 return this.buildVideoPlayer(res.videoResponse, res.captionsPromise)
415 }
3f9c4955 416
5abc96fc
C
417 private nextVideoTitle () {
418 const next = this.getNextPlaylistElement()
419 if (!next) return ''
420
421 return next.video.name
422 }
423
424 private getNextPlaylistElement (position?: number): VideoPlaylistElement {
425 if (!position) position = this.currentPlaylistElement.position + 1
426
427 if (position > this.playlist.videosLength) {
428 return undefined
429 }
430
431 const next = this.playlistElements.find(e => e.position === position)
432
433 if (!next || !next.video) {
434 return this.getNextPlaylistElement(position + 1)
435 }
436
437 return next
438 }
439
a950e4c8 440 private getPreviousPlaylistElement (position?: number): VideoPlaylistElement {
2a71d286 441 if (!position) position = this.currentPlaylistElement.position - 1
a950e4c8
C
442
443 if (position < 1) {
444 return undefined
445 }
446
447 const prev = this.playlistElements.find(e => e.position === position)
448
449 if (!prev || !prev.video) {
450 return this.getNextPlaylistElement(position - 1)
451 }
452
453 return prev
454 }
455
5abc96fc
C
456 private async buildVideoPlayer (videoResponse: Response, captionsPromise: Promise<Response>) {
457 let alreadyHadPlayer = false
458
459 if (this.player) {
460 this.player.dispose()
461 alreadyHadPlayer = true
462 }
463
464 this.playerElement = document.createElement('video')
465 this.playerElement.className = 'video-js vjs-peertube-skin'
466 this.playerElement.setAttribute('playsinline', 'true')
467 this.wrapperElement.appendChild(this.playerElement)
468
469 const videoInfoPromise = videoResponse.json()
470 .then((videoInfo: VideoDetails) => {
471 if (!alreadyHadPlayer) this.loadPlaceholder(videoInfo)
472
473 return videoInfo
474 })
475
6fad8e51 476 const [ videoInfoTmp, serverTranslations, captionsResponse, config, PeertubePlayerManagerModule ] = await Promise.all([
5abc96fc
C
477 videoInfoPromise,
478 this.translationsPromise,
479 captionsPromise,
480 this.configPromise,
481 this.PeertubePlayerManagerModulePromise
482 ])
3f9c4955 483
f9562863
C
484 await this.ensurePluginsAreLoaded(config, serverTranslations)
485
6fad8e51
C
486 const videoInfo: VideoDetails = videoInfoTmp
487
3f9c4955 488 const PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
5efab546 489 const videoCaptions = await this.buildCaptions(serverTranslations, captionsResponse)
99941732 490
0f2f274c 491 this.loadParams(videoInfo)
da99ccf2 492
4572c3d0
C
493 const playlistPlugin = this.currentPlaylistElement
494 ? {
495 elements: this.playlistElements,
496 playlist: this.playlist,
497
498 getCurrentPosition: () => this.currentPlaylistElement.position,
499
500 onItemClicked: (videoPlaylistElement: VideoPlaylistElement) => {
501 this.currentPlaylistElement = videoPlaylistElement
502
503 this.loadVideoAndBuildPlayer(this.currentPlaylistElement.video.uuid)
504 .catch(err => console.error(err))
505 }
506 }
507 : undefined
508
2adfc7ea
C
509 const options: PeertubePlayerManagerOptions = {
510 common: {
5abc96fc
C
511 // Autoplay in playlist mode
512 autoplay: alreadyHadPlayer ? true : this.autoplay,
2adfc7ea
C
513 controls: this.controls,
514 muted: this.muted,
515 loop: this.loop,
1a8c2d74 516
2adfc7ea 517 captions: videoCaptions.length !== 0,
2adfc7ea
C
518 subtitle: this.subtitle,
519
1a8c2d74
C
520 startTime: this.playlist ? this.currentPlaylistElement.startTimestamp : this.startTime,
521 stopTime: this.playlist ? this.currentPlaylistElement.stopTimestamp : this.stopTime,
522
a950e4c8
C
523 nextVideo: this.playlist ? () => this.playNextVideo() : undefined,
524 hasNextVideo: this.playlist ? () => !!this.getNextPlaylistElement() : undefined,
525
526 previousVideo: this.playlist ? () => this.playPreviousVideo() : undefined,
527 hasPreviousVideo: this.playlist ? () => !!this.getPreviousPlaylistElement() : undefined,
528
4572c3d0 529 playlist: playlistPlugin,
5abc96fc 530
2adfc7ea 531 videoCaptions,
35f0a5e6 532 inactivityTimeout: 2500,
5abc96fc 533 videoViewUrl: this.getVideoUrl(videoInfo.uuid) + '/views',
58b9ce30 534 videoUUID: videoInfo.uuid,
6ec0b75b 535
25b7c847
C
536 isLive: videoInfo.isLive,
537
5abc96fc
C
538 playerElement: this.playerElement,
539 onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
6ec0b75b 540
2adfc7ea
C
541 videoDuration: videoInfo.duration,
542 enableHotkeys: true,
08d9ba0f 543 peertubeLink: this.peertubeLink,
2adfc7ea 544 poster: window.location.origin + videoInfo.previewPath,
3d9a63d3 545 theaterButton: false,
2adfc7ea
C
546
547 serverUrl: window.location.origin,
548 language: navigator.language,
4097c6d6
TP
549 embedUrl: window.location.origin + videoInfo.embedPath,
550 embedTitle: videoInfo.name
6ec0b75b
C
551 },
552
553 webtorrent: {
554 videoFiles: videoInfo.files
2adfc7ea 555 }
3b6f205c 556 }
2adfc7ea 557
3b6f205c 558 if (this.mode === 'p2p-media-loader') {
09209296
C
559 const hlsPlaylist = videoInfo.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
560
3b6f205c
C
561 Object.assign(options, {
562 p2pMediaLoader: {
b9da21bd 563 playlistUrl: hlsPlaylist.playlistUrl,
09209296 564 segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
b9da21bd 565 redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
09209296 566 trackerAnnounce: videoInfo.trackerUrls,
5a71acd2 567 videoFiles: hlsPlaylist.files
09209296 568 } as P2PMediaLoaderOptions
3b6f205c 569 })
2adfc7ea 570 }
202e7223 571
7e37e111 572 this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: videojs.Player) => this.player = player)
2adfc7ea 573 this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
99941732 574
2adfc7ea 575 window[ 'videojsPlayer' ] = this.player
902aa3a0 576
5efab546
C
577 this.buildCSS()
578
5abc96fc 579 await this.buildDock(videoInfo, config)
5efab546
C
580
581 this.initializeApi()
3f9c4955
C
582
583 this.removePlaceholder()
5abc96fc
C
584
585 if (this.isPlaylistEmbed()) {
586 await this.buildPlaylistManager()
1a8c2d74 587
4572c3d0 588 this.player.playlist().updateSelected()
1a8c2d74
C
589
590 this.player.on('stopped', () => {
591 this.playNextVideo()
592 })
5abc96fc 593 }
f9562863 594
781ba981 595 this.runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video: videoInfo })
5abc96fc
C
596 }
597
598 private async initCore () {
599 if (this.userTokens) this.setHeadersFromTokens()
600
601 this.configPromise = this.loadConfig()
602 this.translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language)
603 this.PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager')
604
605 let videoId: string
606
607 if (this.isPlaylistEmbed()) {
608 const playlistId = this.getResourceId()
609 const res = await this.loadPlaylist(playlistId)
610 if (!res) return undefined
611
612 this.playlist = await res.playlistResponse.json()
613
614 const playlistElementResult = await res.videosResponse.json()
fb13852d 615 this.playlistElements = await this.loadAllPlaylistVideos(playlistId, playlistElementResult)
5abc96fc 616
2a71d286
C
617 const params = new URL(window.location.toString()).searchParams
618 const playlistPositionParam = this.getParamString(params, 'playlistPosition')
619
620 let position = 1
621
622 if (playlistPositionParam) {
623 position = parseInt(playlistPositionParam + '', 10)
624 }
625
626 this.currentPlaylistElement = this.playlistElements.find(e => e.position === position)
627 if (!this.currentPlaylistElement || !this.currentPlaylistElement.video) {
628 console.error('Current playlist element is not valid.', this.currentPlaylistElement)
629 this.currentPlaylistElement = this.getNextPlaylistElement()
630 }
631
632 if (!this.currentPlaylistElement) {
633 console.error('This playlist does not have any valid element.')
634 const serverTranslations = await this.translationsPromise
635 this.playlistFetchError(serverTranslations)
636 return
637 }
638
5abc96fc
C
639 videoId = this.currentPlaylistElement.video.uuid
640 } else {
641 videoId = this.getResourceId()
642 }
643
4572c3d0 644 return this.loadVideoAndBuildPlayer(videoId)
5efab546
C
645 }
646
647 private handleError (err: Error, translations?: { [ id: string ]: string }) {
648 if (err.message.indexOf('from xs param') !== -1) {
649 this.player.dispose()
5abc96fc 650 this.playerElement = null
5efab546
C
651 this.displayError('This video is not available because the remote instance is not responding.', translations)
652 return
653 }
654 }
655
5abc96fc 656 private async buildDock (videoInfo: VideoDetails, config: ServerConfig) {
abb3097e 657 if (!this.controls) return
5efab546 658
818c449b
C
659 // On webtorrent fallback, player may have been disposed
660 if (!this.player.player_) return
5efab546 661
abb3097e 662 const title = this.title ? videoInfo.name : undefined
31b6ddf8 663
abb3097e
C
664 const description = config.tracker.enabled && this.warningTitle
665 ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
666 : undefined
667
b9da21bd
C
668 if (title || description) {
669 this.player.dock({
670 title,
671 description
672 })
673 }
5efab546 674 }
16f7022b 675
5efab546
C
676 private buildCSS () {
677 const body = document.getElementById('custom-css')
678
679 if (this.bigPlayBackgroundColor) {
680 body.style.setProperty('--embedBigPlayBackgroundColor', this.bigPlayBackgroundColor)
681 }
682
683 if (this.foregroundColor) {
684 body.style.setProperty('--embedForegroundColor', this.foregroundColor)
685 }
99941732 686 }
6d88de72 687
5efab546
C
688 private async buildCaptions (serverTranslations: any, captionsResponse: Response): Promise<VideoJSCaption[]> {
689 if (captionsResponse.ok) {
690 const { data } = (await captionsResponse.json()) as ResultList<VideoCaption>
691
692 return data.map(c => ({
693 label: peertubeTranslate(c.language.label, serverTranslations),
694 language: c.language.id,
695 src: window.location.origin + c.captionPath
696 }))
6d88de72 697 }
5efab546
C
698
699 return []
6d88de72 700 }
3f9c4955
C
701
702 private loadPlaceholder (video: VideoDetails) {
703 const placeholder = this.getPlaceholderElement()
704
705 const url = window.location.origin + video.previewPath
706 placeholder.style.backgroundImage = `url("${url}")`
5abc96fc 707 placeholder.style.display = 'block'
3f9c4955
C
708 }
709
710 private removePlaceholder () {
711 const placeholder = this.getPlaceholderElement()
5abc96fc 712 placeholder.style.display = 'none'
3f9c4955
C
713 }
714
715 private getPlaceholderElement () {
716 return document.getElementById('placeholder-preview')
717 }
a4ff3100
C
718
719 private setHeadersFromTokens () {
720 this.headers.set('Authorization', `${this.userTokens.tokenType} ${this.userTokens.accessToken}`)
721 }
5abc96fc 722
207612df
C
723 private removeTokensFromHeaders () {
724 this.headers.delete('Authorization')
725 }
726
5abc96fc
C
727 private getResourceId () {
728 const urlParts = window.location.pathname.split('/')
729 return urlParts[ urlParts.length - 1 ]
730 }
731
732 private isPlaylistEmbed () {
733 return window.location.pathname.split('/')[1] === 'video-playlists'
734 }
f9562863
C
735
736 private async ensurePluginsAreLoaded (config: ServerConfig, translations?: { [ id: string ]: string }) {
737 if (config.plugin.registered.length === 0) return
738
739 for (const plugin of config.plugin.registered) {
740 for (const key of Object.keys(plugin.clientScripts)) {
741 const clientScript = plugin.clientScripts[key]
742
743 if (clientScript.scopes.includes('embed') === false) continue
744
745 const script = `/plugins/${plugin.name}/${plugin.version}/client-scripts/${clientScript.script}`
746
747 if (this.loadedScripts.has(script)) continue
748
749 const pluginInfo = {
750 plugin,
751 clientScript: {
752 script,
753 scopes: clientScript.scopes
754 },
755 pluginType: PluginType.PLUGIN,
756 isTheme: false
757 }
758
7294aab0
C
759 await loadPlugin({
760 hooks: this.peertubeHooks,
761 pluginInfo,
762 peertubeHelpersFactory: _ => this.buildPeerTubeHelpers(translations)
763 })
f9562863
C
764 }
765 }
766 }
767
768 private buildPeerTubeHelpers (translations?: { [ id: string ]: string }): RegisterClientHelpers {
769 function unimplemented (): any {
770 throw new Error('This helper is not implemented in embed.')
771 }
772
773 return {
774 getBaseStaticRoute: unimplemented,
775
776 getSettings: unimplemented,
777
778 isLoggedIn: unimplemented,
779
780 notifier: {
781 info: unimplemented,
782 error: unimplemented,
783 success: unimplemented
784 },
785
786 showModal: unimplemented,
787
5aa7abf1
C
788 getServerConfig: unimplemented,
789
f9562863
C
790 markdownRenderer: {
791 textMarkdownToHTML: unimplemented,
792 enhancedMarkdownToHTML: unimplemented
793 },
794
795 translate: (value: string) => {
796 return Promise.resolve(peertubeTranslate(value, translations))
797 }
798 }
799 }
800
801 private runHook <T> (hookName: ClientHookName, result?: T, params?: any): Promise<T> {
802 return runHook(this.peertubeHooks, hookName, result, params)
803 }
99941732
WL
804}
805
806PeerTubeEmbed.main()
902aa3a0 807 .catch(err => console.error('Cannot init embed.', err))