From d1a30ab2528828694bdfe2afe46705115ecb19a4 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 28 Dec 2022 10:58:51 +0100 Subject: [PATCH] Optimize fetching config --- client/src/components/Footer.vue | 4 ++-- client/src/components/Header.vue | 13 +++++------ client/src/main.ts | 4 +++- client/src/shared/config.ts | 38 +++++++++++++++++++++----------- client/src/views/Home.vue | 4 ++-- client/src/views/Search.vue | 4 ++-- server.ts | 8 ++++++- server/controllers/api/config.ts | 27 ++++++++++++++--------- 8 files changed, 64 insertions(+), 38 deletions(-) diff --git a/client/src/components/Footer.vue b/client/src/components/Footer.vue index f36a453..e9fdb06 100644 --- a/client/src/components/Footer.vue +++ b/client/src/components/Footer.vue @@ -29,8 +29,8 @@ } }, - async mounted () { - const config = await getConfig() + mounted () { + const config = getConfig() this.legalNoticesUrl = config.legalNoticesUrl } diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue index 4f80e56..3ddf4e6 100644 --- a/client/src/components/Header.vue +++ b/client/src/components/Header.vue @@ -5,7 +5,7 @@

- {{ indexName }} + {{ indexName }} @@ -50,19 +50,16 @@ data () { return { - configLoaded: false, titleImageUrl: '', } }, - async mounted () { - const config = await getConfig() + mounted () { + const config = getConfig() this.titleImageUrl = config.searchInstanceNameImage ? buildApiUrl(config.searchInstanceNameImage) : '' - - this.configLoaded = true } }) @@ -90,7 +87,7 @@ @include font-size(3rem); // Because it's loaded dynamically - min-height: 70px; + min-height: 80px; margin: 0; text-align: center; @@ -99,6 +96,8 @@ .title-image { width: 500px; height: 78px; + + color: transparent; } h4 { diff --git a/client/src/main.ts b/client/src/main.ts index c5a8ea9..ec16e9d 100644 --- a/client/src/main.ts +++ b/client/src/main.ts @@ -8,6 +8,7 @@ import Home from './views/Home.vue' import Search from './views/Search.vue' import CommonMixins from './mixins/CommonMixins' import SafeHTML from './components/SafeHTML.vue' +import { loadServerConfig } from './shared/config' const app = createApp(App) @@ -68,7 +69,8 @@ if (allLocales.includes(localePath)) { currentLanguage = aliasesLanguages[snakeCaseLanguage] ? aliasesLanguages[snakeCaseLanguage] : snakeCaseLanguage } -buildTranslationsPromise(defaultLanguage, currentLanguage) +loadServerConfig() + .then(() => buildTranslationsPromise(defaultLanguage, currentLanguage)) .catch(err => { console.error('Cannot load translations.', err) diff --git a/client/src/shared/config.ts b/client/src/shared/config.ts index e463ce8..a72af4e 100644 --- a/client/src/shared/config.ts +++ b/client/src/shared/config.ts @@ -2,28 +2,40 @@ import axios from 'axios' import { buildApiUrl } from './utils' import { ServerConfig } from '../../../shared' -const basePath = '/api/v1/config' -let serverConfigPromise: Promise - -function getConfigHttp () { - return axios.get(buildApiUrl(basePath)) -} +let config: ServerConfig async function loadServerConfig () { - const res = await getConfigHttp() + const fallback = async function () { + const res = await getConfigHttp() - return res.data + config = res.data + } + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const windowAny = (window as any) + if (windowAny.PeerTubeServerConfig) { + try { + config = JSON.parse(windowAny.PeerTubeServerConfig) + } catch (err) { + console.error(err) + await fallback() + } + } else { + await fallback() + } } function getConfig () { - if (serverConfigPromise) return serverConfigPromise - - serverConfigPromise = loadServerConfig() - - return serverConfigPromise + return config } export { getConfig, loadServerConfig } + +// --------------------------------------------------------------------------- + +function getConfigHttp () { + return axios.get(buildApiUrl('/api/v1/config')) +} diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue index 1876777..0461445 100644 --- a/client/src/views/Home.vue +++ b/client/src/views/Home.vue @@ -56,8 +56,8 @@ } }, - async mounted () { - const config = await getConfig() + mounted () { + const config = getConfig() this.instancesCount = config.indexedHostsCount this.indexedInstancesUrl = config.indexedInstancesUrl diff --git a/client/src/views/Search.vue b/client/src/views/Search.vue index 08e4373..6a54fc7 100644 --- a/client/src/views/Search.vue +++ b/client/src/views/Search.vue @@ -140,7 +140,7 @@ } }, - async mounted () { + mounted () { // eslint-disable-next-line no-new import('bootstrap/js/dist/popover') .then(Popover => { @@ -150,7 +150,7 @@ }) }) - const config = await getConfig() + const config = getConfig() this.indexName = config.searchInstanceName diff --git a/server.ts b/server.ts index 3083b17..988bab8 100644 --- a/server.ts +++ b/server.ts @@ -14,6 +14,7 @@ import { API_VERSION, CONFIG, getWebserverUrl } from './server/initializers/cons import { IndexationScheduler } from './server/lib/schedulers/indexation-scheduler' import { join } from 'path' import { readFile } from 'fs-extra' +import { getConfig } from './server/controllers/api/config' const app = express() const url = getWebserverUrl() @@ -84,6 +85,10 @@ app.use('/*', async function (req, res) { ? `` : '' + // Stringify the JSON object, and then stringify the string object so we can inject it into the HTML + const serverConfigString = JSON.stringify(JSON.stringify(getConfig())) + const configJS = `` + const tags = ` ${title} @@ -103,7 +108,8 @@ app.use('/*', async function (req, res) { - ${styleCSS}` + ${styleCSS} + ${configJS}` const buffer = await readFile(join(__dirname, '../client/dist/index.html')) diff --git a/server/controllers/api/config.ts b/server/controllers/api/config.ts index 6793b0f..0010d24 100644 --- a/server/controllers/api/config.ts +++ b/server/controllers/api/config.ts @@ -6,22 +6,29 @@ import { IndexationScheduler } from '../../lib/schedulers/indexation-scheduler' const configRouter = express.Router() configRouter.get('/config', - getConfig + sendConfig ) -// --------------------------------------------------------------------------- - -export { configRouter } - -// --------------------------------------------------------------------------- - -async function getConfig (req: express.Request, res: express.Response) { - return res.json({ +function getConfig () { + return { searchInstanceName: CONFIG.SEARCH_INSTANCE.NAME, searchInstanceNameImage: CONFIG.SEARCH_INSTANCE.NAME_IMAGE, searchInstanceSearchImage: CONFIG.SEARCH_INSTANCE.SEARCH_IMAGE, legalNoticesUrl: CONFIG.SEARCH_INSTANCE.LEGAL_NOTICES_URL, indexedHostsCount: IndexationScheduler.Instance.getIndexedHosts().length, indexedInstancesUrl: CONFIG.INSTANCES_INDEX.PUBLIC_URL - } as ServerConfig) + } as ServerConfig +} + +// --------------------------------------------------------------------------- + +export { + getConfig, + configRouter +} + +// --------------------------------------------------------------------------- + +async function sendConfig (req: express.Request, res: express.Response) { + return res.json(getConfig()) }