diff options
author | Chocobozzz <me@florianbigard.com> | 2021-05-14 12:04:44 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-05-14 13:37:23 +0200 |
commit | aea0b0e7cde7495e60fe07b4444067f53d35ce3f (patch) | |
tree | 61d1e161bb32be144d46b9f5f51f1386e6819b0b /client/src/standalone/videos | |
parent | c76ecc3ff746d78519404db4c525fd024f9a51c0 (diff) | |
download | PeerTube-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.html | 12 | ||||
-rw-r--r-- | client/src/standalone/videos/embed.ts | 52 |
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 @@ | |||
1 | import './embed.scss' | 1 | import './embed.scss' |
2 | import videojs from 'video.js' | 2 | import videojs from 'video.js' |
3 | import { peertubeTranslate } from '../../../../shared/core-utils/i18n' | 3 | import { peertubeTranslate } from '../../../../shared/core-utils/i18n' |
4 | import { HttpStatusCode } from '../../../../shared/core-utils/miscs/http-error-codes' | ||
4 | import { | 5 | import { |
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' |
16 | import { HttpStatusCode } from '../../../../shared/core-utils/miscs/http-error-codes' | ||
17 | import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../assets/player/peertube-player-manager' | 17 | import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../assets/player/peertube-player-manager' |
18 | import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings' | 18 | import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings' |
19 | import { TranslationsManager } from '../../assets/player/translations-manager' | 19 | import { TranslationsManager } from '../../assets/player/translations-manager' |
20 | import { peertubeLocalStorage } from '../../root-helpers/peertube-web-storage' | ||
20 | import { Hooks, loadPlugin, runHook } from '../../root-helpers/plugins' | 21 | import { Hooks, loadPlugin, runHook } from '../../root-helpers/plugins' |
21 | import { Tokens } from '../../root-helpers/users' | 22 | import { Tokens } from '../../root-helpers/users' |
22 | import { peertubeLocalStorage } from '../../root-helpers/peertube-web-storage' | ||
23 | import { objectToUrlEncoded } from '../../root-helpers/utils' | 23 | import { objectToUrlEncoded } from '../../root-helpers/utils' |
24 | import { PeerTubeEmbedApi } from './embed-api' | ||
25 | import { RegisterClientHelpers } from '../../types/register-client-option.model' | 24 | import { RegisterClientHelpers } from '../../types/register-client-option.model' |
25 | import { PeerTubeEmbedApi } from './embed-api' | ||
26 | 26 | ||
27 | type Translations = { [ id: string ]: string } | 27 | type 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 | ||