From aea0b0e7cde7495e60fe07b4444067f53d35ce3f Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 14 May 2021 12:04:44 +0200 Subject: Inject server config in HTML --- .../trending/video-trending-header.component.ts | 12 ++--- .../trending/video-trending.component.ts | 7 ++- client/src/app/app.component.ts | 2 +- client/src/app/core/routing/redirect.service.ts | 35 ++++++++------- client/src/app/core/server/server.service.ts | 25 ++++------- client/src/index.html | 1 + client/src/standalone/videos/embed.html | 12 ++++- client/src/standalone/videos/embed.ts | 52 ++++++++++++---------- 8 files changed, 77 insertions(+), 69 deletions(-) (limited to 'client/src') diff --git a/client/src/app/+videos/video-list/trending/video-trending-header.component.ts b/client/src/app/+videos/video-list/trending/video-trending-header.component.ts index 55040f3c9..bbb02a236 100644 --- a/client/src/app/+videos/video-list/trending/video-trending-header.component.ts +++ b/client/src/app/+videos/video-list/trending/video-trending-header.component.ts @@ -31,7 +31,8 @@ export class VideoTrendingHeaderComponent extends VideoListHeaderComponent imple private route: ActivatedRoute, private router: Router, private auth: AuthService, - private serverService: ServerService + private serverService: ServerService, + private redirectService: RedirectService ) { super(data) @@ -84,12 +85,7 @@ export class VideoTrendingHeaderComponent extends VideoListHeaderComponent imple this.algorithmChangeSub = this.route.queryParams.subscribe( queryParams => { - const algorithm = queryParams['alg'] - if (algorithm) { - this.data.model = algorithm - } else { - this.data.model = RedirectService.DEFAULT_TRENDING_ALGORITHM - } + this.data.model = queryParams['alg'] || this.redirectService.getDefaultTrendingAlgorithm() } ) } @@ -99,7 +95,7 @@ export class VideoTrendingHeaderComponent extends VideoListHeaderComponent imple } setSort () { - const alg = this.data.model !== RedirectService.DEFAULT_TRENDING_ALGORITHM + const alg = this.data.model !== this.redirectService.getDefaultTrendingAlgorithm() ? this.data.model : undefined diff --git a/client/src/app/+videos/video-list/trending/video-trending.component.ts b/client/src/app/+videos/video-list/trending/video-trending.component.ts index e50d6ec3a..ebec672f3 100644 --- a/client/src/app/+videos/video-list/trending/video-trending.component.ts +++ b/client/src/app/+videos/video-list/trending/video-trending.component.ts @@ -35,11 +35,12 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit, protected storageService: LocalStorageService, protected cfr: ComponentFactoryResolver, private videoService: VideoService, + private redirectService: RedirectService, private hooks: HooksService ) { super() - this.defaultSort = this.parseAlgorithm(RedirectService.DEFAULT_TRENDING_ALGORITHM) + this.defaultSort = this.parseAlgorithm(this.redirectService.getDefaultTrendingAlgorithm()) this.headerComponentInjector = this.getInjector() } @@ -106,7 +107,7 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit, } protected loadPageRouteParams (queryParams: Params) { - const algorithm = queryParams['alg'] || RedirectService.DEFAULT_TRENDING_ALGORITHM + const algorithm = queryParams['alg'] || this.redirectService.getDefaultTrendingAlgorithm() this.sort = this.parseAlgorithm(algorithm) } @@ -115,8 +116,10 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit, switch (algorithm) { case 'most-viewed': return '-trending' + case 'most-liked': return '-likes' + default: return '-' + algorithm as VideoSortField } diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 66d871b4a..239e275a4 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -67,7 +67,7 @@ export class AppComponent implements OnInit, AfterViewInit { } goToDefaultRoute () { - return this.router.navigateByUrl(RedirectService.DEFAULT_ROUTE) + return this.router.navigateByUrl(this.redirectService.getDefaultRoute()) } ngOnInit () { diff --git a/client/src/app/core/routing/redirect.service.ts b/client/src/app/core/routing/redirect.service.ts index 6d26fb504..cf690a4d0 100644 --- a/client/src/app/core/routing/redirect.service.ts +++ b/client/src/app/core/routing/redirect.service.ts @@ -6,14 +6,14 @@ import { ServerService } from '../server' export class RedirectService { // Default route could change according to the instance configuration static INIT_DEFAULT_ROUTE = '/videos/trending' - static DEFAULT_ROUTE = RedirectService.INIT_DEFAULT_ROUTE static INIT_DEFAULT_TRENDING_ALGORITHM = 'most-viewed' - static DEFAULT_TRENDING_ALGORITHM = RedirectService.INIT_DEFAULT_TRENDING_ALGORITHM private previousUrl: string private currentUrl: string private redirectingToHomepage = false + private defaultTrendingAlgorithm = RedirectService.INIT_DEFAULT_TRENDING_ALGORITHM + private defaultRoute = RedirectService.INIT_DEFAULT_ROUTE constructor ( private router: Router, @@ -22,10 +22,10 @@ export class RedirectService { // The config is first loaded from the cache so try to get the default route const tmpConfig = this.serverService.getTmpConfig() if (tmpConfig?.instance?.defaultClientRoute) { - RedirectService.DEFAULT_ROUTE = tmpConfig.instance.defaultClientRoute + this.defaultRoute = tmpConfig.instance.defaultClientRoute } if (tmpConfig?.trending?.videos?.algorithms?.default) { - RedirectService.DEFAULT_TRENDING_ALGORITHM = tmpConfig.trending.videos.algorithms.default + this.defaultTrendingAlgorithm = tmpConfig.trending.videos.algorithms.default } // Load default route @@ -34,13 +34,8 @@ export class RedirectService { const defaultRouteConfig = config.instance.defaultClientRoute const defaultTrendingConfig = config.trending.videos.algorithms.default - if (defaultRouteConfig) { - RedirectService.DEFAULT_ROUTE = defaultRouteConfig - } - - if (defaultTrendingConfig) { - RedirectService.DEFAULT_TRENDING_ALGORITHM = defaultTrendingConfig - } + if (defaultRouteConfig) this.defaultRoute = defaultRouteConfig + if (defaultTrendingConfig) this.defaultTrendingAlgorithm = defaultTrendingConfig }) // Track previous url @@ -53,6 +48,14 @@ export class RedirectService { }) } + getDefaultRoute () { + return this.defaultRoute + } + + getDefaultTrendingAlgorithm () { + return this.defaultTrendingAlgorithm + } + redirectToPreviousRoute () { const exceptions = [ '/verify-account', @@ -72,21 +75,21 @@ export class RedirectService { this.redirectingToHomepage = true - console.log('Redirecting to %s...', RedirectService.DEFAULT_ROUTE) + console.log('Redirecting to %s...', this.defaultRoute) - this.router.navigateByUrl(RedirectService.DEFAULT_ROUTE, { skipLocationChange }) + this.router.navigateByUrl(this.defaultRoute, { skipLocationChange }) .then(() => this.redirectingToHomepage = false) .catch(() => { this.redirectingToHomepage = false console.error( 'Cannot navigate to %s, resetting default route to %s.', - RedirectService.DEFAULT_ROUTE, + this.defaultRoute, RedirectService.INIT_DEFAULT_ROUTE ) - RedirectService.DEFAULT_ROUTE = RedirectService.INIT_DEFAULT_ROUTE - return this.router.navigateByUrl(RedirectService.DEFAULT_ROUTE, { skipLocationChange }) + this.defaultRoute = RedirectService.INIT_DEFAULT_ROUTE + return this.router.navigateByUrl(this.defaultRoute, { skipLocationChange }) }) } diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts index 906191ae1..e48786e18 100644 --- a/client/src/app/core/server/server.service.ts +++ b/client/src/app/core/server/server.service.ts @@ -3,7 +3,6 @@ import { first, map, share, shareReplay, switchMap, tap } from 'rxjs/operators' import { HttpClient } from '@angular/common/http' import { Inject, Injectable, LOCALE_ID } from '@angular/core' import { getDevLocale, isOnDevLocale, sortBy } from '@app/helpers' -import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' import { getCompleteLocale, isDefaultLocale, peertubeTranslate } from '@shared/core-utils/i18n' import { SearchTargetType, ServerConfig, ServerStats, VideoConstant } from '@shared/models' import { environment } from '../../../environments/environment' @@ -16,8 +15,6 @@ export class ServerService { private static BASE_LOCALE_URL = environment.apiUrl + '/client/locales/' private static BASE_STATS_URL = environment.apiUrl + '/api/v1/server/stats' - private static CONFIG_LOCAL_STORAGE_KEY = 'server-config' - configReloaded = new Subject() private localeObservable: Observable @@ -212,7 +209,6 @@ export class ServerService { if (!this.configObservable) { this.configObservable = this.http.get(ServerService.BASE_CONFIG_URL) .pipe( - tap(config => this.saveConfigLocally(config)), tap(config => { this.config = config this.configLoaded = true @@ -343,20 +339,15 @@ export class ServerService { ) } - private saveConfigLocally (config: ServerConfig) { - peertubeLocalStorage.setItem(ServerService.CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config)) - } - private loadConfigLocally () { - const configString = peertubeLocalStorage.getItem(ServerService.CONFIG_LOCAL_STORAGE_KEY) - - if (configString) { - try { - const parsed = JSON.parse(configString) - Object.assign(this.config, parsed) - } catch (err) { - console.error('Cannot parse config saved in local storage.', err) - } + const configString = window['PeerTubeServerConfig'] + if (!configString) return + + try { + const parsed = JSON.parse(configString) + Object.assign(this.config, parsed) + } catch (err) { + console.error('Cannot parse config saved in from index.html.', err) } } } diff --git a/client/src/index.html b/client/src/index.html index 72c184dc1..28667cdd0 100644 --- a/client/src/index.html +++ b/client/src/index.html @@ -29,6 +29,7 @@ + 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 @@ - - + + + + + + + + + + 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 @@ import './embed.scss' import videojs from 'video.js' import { peertubeTranslate } from '../../../../shared/core-utils/i18n' +import { HttpStatusCode } from '../../../../shared/core-utils/miscs/http-error-codes' import { + ClientHookName, + HTMLServerConfig, + PluginType, ResultList, - ServerConfig, UserRefreshToken, VideoCaption, VideoDetails, VideoPlaylist, VideoPlaylistElement, - VideoStreamingPlaylistType, - PluginType, - ClientHookName + VideoStreamingPlaylistType } from '../../../../shared/models' -import { HttpStatusCode } from '../../../../shared/core-utils/miscs/http-error-codes' import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../assets/player/peertube-player-manager' import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings' import { TranslationsManager } from '../../assets/player/translations-manager' +import { peertubeLocalStorage } from '../../root-helpers/peertube-web-storage' import { Hooks, loadPlugin, runHook } from '../../root-helpers/plugins' import { Tokens } from '../../root-helpers/users' -import { peertubeLocalStorage } from '../../root-helpers/peertube-web-storage' import { objectToUrlEncoded } from '../../root-helpers/utils' -import { PeerTubeEmbedApi } from './embed-api' import { RegisterClientHelpers } from '../../types/register-client-option.model' +import { PeerTubeEmbedApi } from './embed-api' type Translations = { [ id: string ]: string } @@ -56,8 +56,9 @@ export class PeerTubeEmbed { CLIENT_SECRET: 'client_secret' } + config: HTMLServerConfig + private translationsPromise: Promise<{ [id: string]: string }> - private configPromise: Promise private PeertubePlayerManagerModulePromise: Promise private playlist: VideoPlaylist @@ -77,6 +78,12 @@ export class PeerTubeEmbed { constructor (private videoWrapperId: string) { this.wrapperElement = document.getElementById(this.videoWrapperId) + + try { + this.config = JSON.parse(window['PeerTubeServerConfig']) + } catch (err) { + console.error('Cannot parse HTML config.', err) + } } getVideoUrl (id: string) { @@ -166,11 +173,6 @@ export class PeerTubeEmbed { return this.refreshFetch(url.toString(), { headers: this.headers }) } - loadConfig (): Promise { - return this.refreshFetch('/api/v1/config') - .then(res => res.json()) - } - removeElement (element: HTMLElement) { element.parentElement.removeChild(element) } @@ -466,6 +468,12 @@ export class PeerTubeEmbed { this.playerElement.setAttribute('playsinline', 'true') this.wrapperElement.appendChild(this.playerElement) + // Issue when we parsed config from HTML, fallback to API + if (!this.config) { + this.config = await this.refreshFetch('/api/v1/config') + .then(res => res.json()) + } + const videoInfoPromise = videoResponse.json() .then((videoInfo: VideoDetails) => { if (!alreadyHadPlayer) this.loadPlaceholder(videoInfo) @@ -473,15 +481,14 @@ export class PeerTubeEmbed { return videoInfo }) - const [ videoInfoTmp, serverTranslations, captionsResponse, config, PeertubePlayerManagerModule ] = await Promise.all([ + const [ videoInfoTmp, serverTranslations, captionsResponse, PeertubePlayerManagerModule ] = await Promise.all([ videoInfoPromise, this.translationsPromise, captionsPromise, - this.configPromise, this.PeertubePlayerManagerModulePromise ]) - await this.ensurePluginsAreLoaded(config, serverTranslations) + await this.ensurePluginsAreLoaded(serverTranslations) const videoInfo: VideoDetails = videoInfoTmp @@ -576,7 +583,7 @@ export class PeerTubeEmbed { this.buildCSS() - await this.buildDock(videoInfo, config) + await this.buildDock(videoInfo) this.initializeApi() @@ -598,7 +605,6 @@ export class PeerTubeEmbed { private async initCore () { if (this.userTokens) this.setHeadersFromTokens() - this.configPromise = this.loadConfig() this.translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language) this.PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager') @@ -653,7 +659,7 @@ export class PeerTubeEmbed { } } - private async buildDock (videoInfo: VideoDetails, config: ServerConfig) { + private async buildDock (videoInfo: VideoDetails) { if (!this.controls) return // On webtorrent fallback, player may have been disposed @@ -661,7 +667,7 @@ export class PeerTubeEmbed { const title = this.title ? videoInfo.name : undefined - const description = config.tracker.enabled && this.warningTitle + const description = this.config.tracker.enabled && this.warningTitle ? '' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '' : undefined @@ -733,10 +739,10 @@ export class PeerTubeEmbed { return window.location.pathname.split('/')[1] === 'video-playlists' } - private async ensurePluginsAreLoaded (config: ServerConfig, translations?: { [ id: string ]: string }) { - if (config.plugin.registered.length === 0) return + private async ensurePluginsAreLoaded (translations?: { [ id: string ]: string }) { + if (this.config.plugin.registered.length === 0) return - for (const plugin of config.plugin.registered) { + for (const plugin of this.config.plugin.registered) { for (const key of Object.keys(plugin.clientScripts)) { const clientScript = plugin.clientScripts[key] -- cgit v1.2.3