Optimize fetching config

client/src/components/Footer.vue

@@ -29,8 +29,8 @@
       }
     },
 
-    async mounted () {
-      const config = await getConfig()
+    mounted () {
+      const config = getConfig()
 
       this.legalNoticesUrl = config.legalNoticesUrl
     }

client/src/components/Header.vue

@@ -5,7 +5,7 @@
 
       <h1>
         <router-link to="/" :title="$gettext('Come back to homepage')">
-          <span v-if="configLoaded && !titleImageUrl">{{ indexName }}</span>
+          <span v-if="!titleImageUrl">{{ indexName }}</span>
 
           <img v-else class="title-image" :src="titleImageUrl" :alt="indexName" />
         </router-link>
@@ -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
     }
   })
 </script>
@@ -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 {

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)
 

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<ServerConfig>
-
-function getConfigHttp () {
-  return axios.get<ServerConfig>(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<ServerConfig>(buildApiUrl('/api/v1/config'))
+}

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

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
 

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) {
     ? `<style type="text/css">${bufferCSS.toString()}</style>`
     : ''
 
+  // 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 = `<script type="application/javascript">window.PeerTubeServerConfig = ${serverConfigString}</script>`
+
   const tags = `
   <title>${title}</title>
   <meta name="description" content="${description}">
@@ -103,7 +108,8 @@ app.use('/*', async function (req, res) {
 
   <link rel="search" type="application/opensearchdescription+xml" title="${title}" href="${url}/opensearch.xml" />
 
-  ${styleCSS}`
+  ${styleCSS}
+  ${configJS}`
 
   const buffer = await readFile(join(__dirname, '../client/dist/index.html'))
 

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())
 }