fix(front): fix initialization error on dev setup

merge-requests/2506/merge
Kasper Seweryn 2023-09-21 12:44:15 +02:00
rodzic 096a435d56
commit 185a61ecdd
3 zmienionych plików z 40 dodań i 31 usunięć

Wyświetl plik

@ -8,6 +8,7 @@ import { useQueue } from '~/composables/audio/queue'
import { useStore } from '~/store'
import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
import useLogger from '~/composables/useLogger'
const ChannelUploadModal = defineAsyncComponent(() => import('~/components/channels/UploadModal.vue'))
const PlaylistModal = defineAsyncComponent(() => import('~/components/playlists/PlaylistModal.vue'))
@ -20,6 +21,9 @@ const AudioPlayer = defineAsyncComponent(() => import('~/components/audio/Player
const Sidebar = defineAsyncComponent(() => import('~/components/Sidebar.vue'))
const Queue = defineAsyncComponent(() => import('~/components/Queue.vue'))
const logger = useLogger()
logger.debug('App setup()')
const store = useStore()
// Tracks
@ -77,27 +81,15 @@ store.dispatch('auth/fetchUser')
</script>
<template>
<div
:key="store.state.instance.instanceUrl"
:class="{
'has-bottom-player': tracks.length > 0,
'queue-focused': store.state.ui.queueFocused
}"
>
<div :key="store.state.instance.instanceUrl" :class="{
'has-bottom-player': tracks.length > 0,
'queue-focused': store.state.ui.queueFocused
}">
<!-- here, we display custom stylesheets, if any -->
<link
v-for="url in customStylesheets"
:key="url"
rel="stylesheet"
property="stylesheet"
:href="url"
>
<link v-for="url in customStylesheets" :key="url" rel="stylesheet" property="stylesheet" :href="url">
<sidebar
:width="width"
@show:set-instance-modal="showSetInstanceModal = !showSetInstanceModal"
@show:shortcuts-modal="toggleShortcutsModal"
/>
<sidebar :width="width" @show:set-instance-modal="showSetInstanceModal = !showSetInstanceModal"
@show:shortcuts-modal="toggleShortcutsModal" />
<set-instance-modal v-model:show="showSetInstanceModal" />
<service-messages />
<transition name="queue">

Wyświetl plik

@ -3,22 +3,30 @@ import type { InitModule } from '~/types'
import { whenever } from '@vueuse/core'
import useLogger from '~/composables/useLogger'
import axios from 'axios'
const logger = useLogger()
export const install: InitModule = async ({ store, router }) => {
await store.dispatch('instance/fetchFrontSettings')
const fetchNodeInfo = async () => {
const [{ data }] = await Promise.all([
axios.get<NodeInfo>('instance/nodeinfo/2.0/'),
store.dispatch('instance/fetchSettings')
])
try {
const [{ data }] = await Promise.all([
axios.get<NodeInfo>('instance/nodeinfo/2.0/'),
store.dispatch('instance/fetchSettings')
])
if (data.metadata.library.music?.hours) {
data.metadata.library.music.hours = Math.floor(data.metadata.library.music.hours)
if (data.metadata.library.music?.hours) {
data.metadata.library.music.hours = Math.floor(data.metadata.library.music.hours)
}
store.commit('instance/nodeinfo', data)
} catch (error) {
logger.error('Error while fetching node info', error)
}
store.commit('instance/nodeinfo', data)
}
whenever(() => store.state.instance.instanceUrl, fetchNodeInfo)

Wyświetl plik

@ -22,11 +22,11 @@ logger.debug('Environment variables:', import.meta.env)
const app = createApp({
name: 'Root',
data: () => ({ ready: false }),
mounted () {
mounted() {
this.ready = true
logger.info('Everything loaded!')
},
render () {
render() {
if (this.ready) {
return h(defineAsyncComponent(() => import('~/App.vue')))
}
@ -50,6 +50,7 @@ const moduleContext: InitModuleContext = {
// and that the instance url is set before any requests are made
const IMPORTANT_MODULES_QUEUE = ['axios', 'instance']
const waitForImportantModules = async () => {
logger.debug('Loading important modules')
for (const moduleName of IMPORTANT_MODULES_QUEUE) {
const path = `./init/${moduleName}.ts`
if (!(path in modules)) {
@ -57,16 +58,24 @@ const waitForImportantModules = async () => {
continue
}
await modules[path].install?.(moduleContext)
await modules[path].install?.(moduleContext)?.catch((error: Error) => {
logger.error(`Failed to load important module: ${path}`, error)
throw error
})
delete modules[path]
}
}
waitForImportantModules()
.then(() => logger.debug('Loading rest of the modules'))
// NOTE: We load the modules in parallel
.then(() => Promise.all(Object.values(modules).map(module => module.install?.(moduleContext))))
.catch(error => logger.error('Failed to load modules:', error))
// NOTE: We need to mount the app after all modules are loaded
.finally(() => app.mount('#app'))
.finally(() => {
logger.debug('Mounting app')
app.mount('#app')
})
// TODO (wvffle): Rename filters from useSharedLabels to filters from backend