96 lines
2.8 KiB
Vue
96 lines
2.8 KiB
Vue
<script setup lang="ts">
|
||
// import LegacyLayout from '~/LegacyLayout.vue'
|
||
// TODO: see below (isUIv2)
|
||
import UiApp from '~/ui/App.vue'
|
||
|
||
import type { QueueTrack } from '~/composables/audio/queue'
|
||
|
||
import { watchEffect, computed, onMounted, nextTick } from 'vue'
|
||
|
||
import { useQueue } from '~/composables/audio/queue'
|
||
import { useStore } from '~/store'
|
||
|
||
import useLogger from '~/composables/useLogger'
|
||
|
||
import { generateTrackCreditStringFromQueue } from '~/utils/utils'
|
||
|
||
const ChannelUploadModal = defineAsyncComponent(() => import('~/components/channels/UploadModal.vue'))
|
||
const PlaylistModal = defineAsyncComponent(() => import('~/components/playlists/PlaylistModal.vue'))
|
||
const FilterModal = defineAsyncComponent(() => import('~/components/moderation/FilterModal.vue'))
|
||
const ReportModal = defineAsyncComponent(() => import('~/components/moderation/ReportModal.vue'))
|
||
const ServiceMessages = defineAsyncComponent(() => import('~/components/ServiceMessages.vue'))
|
||
const ShortcutsModal = defineAsyncComponent(() => import('~/components/ShortcutsModal.vue'))
|
||
const AudioPlayer = defineAsyncComponent(() => import('~/components/audio/Player.vue'))
|
||
const Sidebar = defineAsyncComponent(() => import('~/components/Sidebar.vue'))
|
||
const Queue = defineAsyncComponent(() => import('~/components/Queue.vue'))
|
||
|
||
import { useLocalStorage, useStyleTag, useIntervalFn, useToggle, useWindowSize } from '@vueuse/core'
|
||
|
||
|
||
const logger = useLogger()
|
||
logger.debug('App setup()')
|
||
|
||
const store = useStore()
|
||
|
||
// Tracks
|
||
const { currentTrack } = useQueue()
|
||
const getTrackInformationText = (track: QueueTrack | undefined) => {
|
||
if (!track) {
|
||
return null
|
||
}
|
||
|
||
return `♫ ${track.title} – ${generateTrackCreditStringFromQueue(track)} ♫`
|
||
}
|
||
|
||
// Update title
|
||
const initialTitle = document.title
|
||
watchEffect(() => {
|
||
const parts = [
|
||
getTrackInformationText(currentTrack.value),
|
||
store.state.ui.pageTitle,
|
||
initialTitle || 'Funkwhale'
|
||
]
|
||
|
||
document.title = parts.filter(i => i).join(' – ')
|
||
})
|
||
|
||
// Styles
|
||
useStyleTag(computed(() => store.state.instance.settings.ui.custom_css.value))
|
||
|
||
// Fake content
|
||
onMounted(async () => {
|
||
await nextTick()
|
||
document.getElementById('fake-content')?.classList.add('loaded')
|
||
})
|
||
|
||
// Time ago
|
||
useIntervalFn(() => {
|
||
// used to redraw ago dates every minute
|
||
store.commit('ui/computeLastDate')
|
||
}, 1000 * 60)
|
||
|
||
// Fetch user data on startup
|
||
// NOTE: We're not checking if we're authenticated in the store,
|
||
// because we want to learn if we are authenticated at all
|
||
store.dispatch('auth/fetchUser')
|
||
|
||
// TODO:
|
||
// Research...
|
||
// - "What is the use case for this toggle?"
|
||
// - "Is Local Storage (persistence on a specific browser
|
||
// on a specific machine) the right place?"
|
||
const isUIv2 = useLocalStorage('ui-v2', true)
|
||
</script>
|
||
|
||
<template>
|
||
<UiApp/>
|
||
<!-- <LegacyLayout v-else /> -->
|
||
</template>
|
||
|
||
<style>
|
||
html, body {
|
||
font-size: 16px;
|
||
}
|
||
|
||
</style>
|