koel/resources/assets/js/components/screens/HomeScreen.vue
2022-07-12 11:05:12 +02:00

126 lines
3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<section id="homeWrapper">
<ScreenHeader>{{ greeting }}</ScreenHeader>
<div class="main-scroll-wrap" @scroll="scrolling">
<ScreenEmptyState v-if="libraryEmpty">
<template v-slot:icon>
<i class="fa fa-volume-off"></i>
</template>
No songs found.
<span class="secondary d-block">
{{ isAdmin ? 'Have you set up your library yet?' : 'Contact your administrator to set up your library.' }}
</span>
</ScreenEmptyState>
<template v-else>
<div class="two-cols">
<MostPlayedSongs/>
<RecentlyPlayedSongs/>
</div>
<div class="two-cols">
<RecentlyAddedAlbums/>
<RecentlyAddedSongs/>
</div>
<MostPlayedArtists/>
<MostPlayedAlbums/>
<ToTopButton/>
</template>
</div>
</section>
</template>
<script lang="ts" setup>
import { sample } from 'lodash'
import { computed } from 'vue'
import { eventBus, noop } from '@/utils'
import { commonStore, overviewStore, userStore } from '@/stores'
import { useAuthorization, useInfiniteScroll } from '@/composables'
import MostPlayedSongs from '@/components/screens/home/MostPlayedSongs.vue'
import RecentlyPlayedSongs from '@/components/screens/home/RecentlyPlayedSongs.vue'
import RecentlyAddedAlbums from '@/components/screens/home/RecentlyAddedAlbums.vue'
import RecentlyAddedSongs from '@/components/screens/home/RecentlyAddedSongs.vue'
import MostPlayedArtists from '@/components/screens/home/MostPlayedArtists.vue'
import MostPlayedAlbums from '@/components/screens/home/MostPlayedAlbums.vue'
import ScreenHeader from '@/components/ui/ScreenHeader.vue'
import ScreenEmptyState from '@/components/ui/ScreenEmptyState.vue'
const { ToTopButton, scrolling } = useInfiniteScroll(() => noop())
const { isAdmin } = useAuthorization()
const greetings = [
'Oh hai!',
'Hey, %s!',
'Howdy, %s!',
'Yo!',
'Hows it going, %s?',
'Sup, %s?',
'Hows life, %s?',
'Hows your day, %s?',
'How have you been, %s?'
]
const greeting = computed(() => sample(greetings)!.replace('%s', userStore.current?.name))
const libraryEmpty = computed(() => commonStore.state.song_length === 0)
let initialized = false
eventBus.on('LOAD_MAIN_CONTENT', async (view: MainViewName) => {
if (view === 'Home' && !initialized) {
await overviewStore.init()
initialized = true
}
})
</script>
<style lang="scss">
#homeWrapper {
.two-cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: .7em 1em;
ol, li {
overflow: hidden;
}
}
.recent {
h1 button {
float: right;
padding: 6px 10px;
margin-top: -3px;
}
}
ol {
display: grid;
grid-gap: .7em 1em;
align-content: start;
}
.main-scroll-wrap {
section {
margin-bottom: 48px;
}
h1 {
font-size: 1.4rem;
margin: 0 0 1.8rem;
font-weight: var(--font-weight-thin);
}
}
@media only screen and (max-width: 768px) {
.two-cols {
grid-template-columns: 1fr;
}
}
}
</style>