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