aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/standalone/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-05-14 12:04:44 +0200
committerChocobozzz <me@florianbigard.com>2021-05-14 13:37:23 +0200
commitaea0b0e7cde7495e60fe07b4444067f53d35ce3f (patch)
tree61d1e161bb32be144d46b9f5f51f1386e6819b0b /client/src/standalone/videos
parentc76ecc3ff746d78519404db4c525fd024f9a51c0 (diff)
downloadPeerTube-aea0b0e7cde7495e60fe07b4444067f53d35ce3f.tar.gz
PeerTube-aea0b0e7cde7495e60fe07b4444067f53d35ce3f.tar.zst
PeerTube-aea0b0e7cde7495e60fe07b4444067f53d35ce3f.zip
Inject server config in HTML
Diffstat (limited to 'client/src/standalone/videos')
-rw-r--r--client/src/standalone/videos/embed.html12
-rw-r--r--client/src/standalone/videos/embed.ts52
2 files changed, 39 insertions, 25 deletions
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
index 7d09bfb8f..e13a4dc24 100644
--- a/client/src/standalone/videos/embed.html
+++ b/client/src/standalone/videos/embed.html
@@ -1,14 +1,22 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<html> 2<html>
3 <head> 3 <head>
4 <!-- title tag -->
5
6 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <meta name="robots" content="noindex"> 6 <meta name="robots" content="noindex">
9 <meta property="og:platform" content="PeerTube" /> 7 <meta property="og:platform" content="PeerTube" />
10 8
9
10 <!-- /!\ The following comment is used by the server to prerender some tags /!\ -->
11
12 <!-- title tag -->
13 <!-- description tag -->
11 <!-- custom css tag --> 14 <!-- custom css tag -->
15 <!-- meta tags -->
16 <!-- server config -->
17
18 <!-- /!\ Do not remove it /!\ -->
19
12 <link rel="icon" type="image/png" href="/client/assets/images/favicon.png" /> 20 <link rel="icon" type="image/png" href="/client/assets/images/favicon.png" />
13 </head> 21 </head>
14 22
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 3a90fdc58..fc61d3730 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -1,28 +1,28 @@
1import './embed.scss' 1import './embed.scss'
2import videojs from 'video.js' 2import videojs from 'video.js'
3import { peertubeTranslate } from '../../../../shared/core-utils/i18n' 3import { peertubeTranslate } from '../../../../shared/core-utils/i18n'
4import { HttpStatusCode } from '../../../../shared/core-utils/miscs/http-error-codes'
4import { 5import {
6 ClientHookName,
7 HTMLServerConfig,
8 PluginType,
5 ResultList, 9 ResultList,
6 ServerConfig,
7 UserRefreshToken, 10 UserRefreshToken,
8 VideoCaption, 11 VideoCaption,
9 VideoDetails, 12 VideoDetails,
10 VideoPlaylist, 13 VideoPlaylist,
11 VideoPlaylistElement, 14 VideoPlaylistElement,
12 VideoStreamingPlaylistType, 15 VideoStreamingPlaylistType
13 PluginType,
14 ClientHookName
15} from '../../../../shared/models' 16} from '../../../../shared/models'
16import { HttpStatusCode } from '../../../../shared/core-utils/miscs/http-error-codes'
17import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../assets/player/peertube-player-manager' 17import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../assets/player/peertube-player-manager'
18import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings' 18import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
19import { TranslationsManager } from '../../assets/player/translations-manager' 19import { TranslationsManager } from '../../assets/player/translations-manager'
20import { peertubeLocalStorage } from '../../root-helpers/peertube-web-storage'
20import { Hooks, loadPlugin, runHook } from '../../root-helpers/plugins' 21import { Hooks, loadPlugin, runHook } from '../../root-helpers/plugins'
21import { Tokens } from '../../root-helpers/users' 22import { Tokens } from '../../root-helpers/users'
22import { peertubeLocalStorage } from '../../root-helpers/peertube-web-storage'
23import { objectToUrlEncoded } from '../../root-helpers/utils' 23import { objectToUrlEncoded } from '../../root-helpers/utils'
24import { PeerTubeEmbedApi } from './embed-api'
25import { RegisterClientHelpers } from '../../types/register-client-option.model' 24import { RegisterClientHelpers } from '../../types/register-client-option.model'
25import { PeerTubeEmbedApi } from './embed-api'
26 26
27type Translations = { [ id: string ]: string } 27type Translations = { [ id: string ]: string }
28 28
@@ -56,8 +56,9 @@ export class PeerTubeEmbed {
56 CLIENT_SECRET: 'client_secret' 56 CLIENT_SECRET: 'client_secret'
57 } 57 }
58 58
59 config: HTMLServerConfig
60
59 private translationsPromise: Promise<{ [id: string]: string }> 61 private translationsPromise: Promise<{ [id: string]: string }>
60 private configPromise: Promise<ServerConfig>
61 private PeertubePlayerManagerModulePromise: Promise<any> 62 private PeertubePlayerManagerModulePromise: Promise<any>
62 63
63 private playlist: VideoPlaylist 64 private playlist: VideoPlaylist
@@ -77,6 +78,12 @@ export class PeerTubeEmbed {
77 78
78 constructor (private videoWrapperId: string) { 79 constructor (private videoWrapperId: string) {
79 this.wrapperElement = document.getElementById(this.videoWrapperId) 80 this.wrapperElement = document.getElementById(this.videoWrapperId)
81
82 try {
83 this.config = JSON.parse(window['PeerTubeServerConfig'])
84 } catch (err) {
85 console.error('Cannot parse HTML config.', err)
86 }
80 } 87 }
81 88
82 getVideoUrl (id: string) { 89 getVideoUrl (id: string) {
@@ -166,11 +173,6 @@ export class PeerTubeEmbed {
166 return this.refreshFetch(url.toString(), { headers: this.headers }) 173 return this.refreshFetch(url.toString(), { headers: this.headers })
167 } 174 }
168 175
169 loadConfig (): Promise<ServerConfig> {
170 return this.refreshFetch('/api/v1/config')
171 .then(res => res.json())
172 }
173
174 removeElement (element: HTMLElement) { 176 removeElement (element: HTMLElement) {
175 element.parentElement.removeChild(element) 177 element.parentElement.removeChild(element)
176 } 178 }
@@ -466,6 +468,12 @@ export class PeerTubeEmbed {
466 this.playerElement.setAttribute('playsinline', 'true') 468 this.playerElement.setAttribute('playsinline', 'true')
467 this.wrapperElement.appendChild(this.playerElement) 469 this.wrapperElement.appendChild(this.playerElement)
468 470
471 // Issue when we parsed config from HTML, fallback to API
472 if (!this.config) {
473 this.config = await this.refreshFetch('/api/v1/config')
474 .then(res => res.json())
475 }
476
469 const videoInfoPromise = videoResponse.json() 477 const videoInfoPromise = videoResponse.json()
470 .then((videoInfo: VideoDetails) => { 478 .then((videoInfo: VideoDetails) => {
471 if (!alreadyHadPlayer) this.loadPlaceholder(videoInfo) 479 if (!alreadyHadPlayer) this.loadPlaceholder(videoInfo)
@@ -473,15 +481,14 @@ export class PeerTubeEmbed {
473 return videoInfo 481 return videoInfo
474 }) 482 })
475 483
476 const [ videoInfoTmp, serverTranslations, captionsResponse, config, PeertubePlayerManagerModule ] = await Promise.all([ 484 const [ videoInfoTmp, serverTranslations, captionsResponse, PeertubePlayerManagerModule ] = await Promise.all([
477 videoInfoPromise, 485 videoInfoPromise,
478 this.translationsPromise, 486 this.translationsPromise,
479 captionsPromise, 487 captionsPromise,
480 this.configPromise,
481 this.PeertubePlayerManagerModulePromise 488 this.PeertubePlayerManagerModulePromise
482 ]) 489 ])
483 490
484 await this.ensurePluginsAreLoaded(config, serverTranslations) 491 await this.ensurePluginsAreLoaded(serverTranslations)
485 492
486 const videoInfo: VideoDetails = videoInfoTmp 493 const videoInfo: VideoDetails = videoInfoTmp
487 494
@@ -576,7 +583,7 @@ export class PeerTubeEmbed {
576 583
577 this.buildCSS() 584 this.buildCSS()
578 585
579 await this.buildDock(videoInfo, config) 586 await this.buildDock(videoInfo)
580 587
581 this.initializeApi() 588 this.initializeApi()
582 589
@@ -598,7 +605,6 @@ export class PeerTubeEmbed {
598 private async initCore () { 605 private async initCore () {
599 if (this.userTokens) this.setHeadersFromTokens() 606 if (this.userTokens) this.setHeadersFromTokens()
600 607
601 this.configPromise = this.loadConfig()
602 this.translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language) 608 this.translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language)
603 this.PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager') 609 this.PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager')
604 610
@@ -653,7 +659,7 @@ export class PeerTubeEmbed {
653 } 659 }
654 } 660 }
655 661
656 private async buildDock (videoInfo: VideoDetails, config: ServerConfig) { 662 private async buildDock (videoInfo: VideoDetails) {
657 if (!this.controls) return 663 if (!this.controls) return
658 664
659 // On webtorrent fallback, player may have been disposed 665 // On webtorrent fallback, player may have been disposed
@@ -661,7 +667,7 @@ export class PeerTubeEmbed {
661 667
662 const title = this.title ? videoInfo.name : undefined 668 const title = this.title ? videoInfo.name : undefined
663 669
664 const description = config.tracker.enabled && this.warningTitle 670 const description = this.config.tracker.enabled && this.warningTitle
665 ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>' 671 ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
666 : undefined 672 : undefined
667 673
@@ -733,10 +739,10 @@ export class PeerTubeEmbed {
733 return window.location.pathname.split('/')[1] === 'video-playlists' 739 return window.location.pathname.split('/')[1] === 'video-playlists'
734 } 740 }
735 741
736 private async ensurePluginsAreLoaded (config: ServerConfig, translations?: { [ id: string ]: string }) { 742 private async ensurePluginsAreLoaded (translations?: { [ id: string ]: string }) {
737 if (config.plugin.registered.length === 0) return 743 if (this.config.plugin.registered.length === 0) return
738 744
739 for (const plugin of config.plugin.registered) { 745 for (const plugin of this.config.plugin.registered) {
740 for (const key of Object.keys(plugin.clientScripts)) { 746 for (const key of Object.keys(plugin.clientScripts)) {
741 const clientScript = plugin.clientScripts[key] 747 const clientScript = plugin.clientScripts[key]
742 748