koel/resources/assets/js/components/screens/HomeScreen.vue

113 lines
2.5 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
<section id="homeWrapper">
2022-04-15 17:00:08 +00:00
<ScreenHeader>{{ greeting }}</ScreenHeader>
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
<div class="main-scroll-wrap" @scroll="scrolling">
2022-04-15 14:24:30 +00:00
<div class="two-cols">
2022-06-10 10:47:46 +00:00
<MostPlayedSongs/>
<RecentlyPlayedSongs/>
2022-04-15 14:24:30 +00:00
</div>
2022-06-10 10:47:46 +00:00
<div class="two-cols">
<RecentlyAddedAlbums/>
<RecentlyAddedSongs/>
</div>
<MostPlayedArtists/>
<MostPlayedAlbum/>
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
<ToTopButton/>
2022-04-15 14:24:30 +00:00
</div>
</section>
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
2022-04-15 14:24:30 +00:00
import { sample } from 'lodash'
2022-06-10 10:47:46 +00:00
import { computed, defineAsyncComponent } from 'vue'
2022-04-15 14:24:30 +00:00
2022-06-10 10:47:46 +00:00
import { eventBus, noop } from '@/utils'
import { overviewStore, userStore } from '@/stores'
2022-04-15 17:00:08 +00:00
import { useInfiniteScroll } from '@/composables'
2022-06-10 10:47:46 +00:00
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 MostPlayedAlbum from '@/components/screens/home/MostPlayedAlbum.vue'
2022-04-15 17:00:08 +00:00
2022-04-21 16:06:45 +00:00
const ScreenHeader = defineAsyncComponent(() => import('@/components/ui/ScreenHeader.vue'))
2022-04-21 18:39:18 +00:00
const Btn = defineAsyncComponent(() => import('@/components/ui/Btn.vue'))
2022-04-15 17:00:08 +00:00
2022-06-10 10:47:46 +00:00
const { ToTopButton, scrolling } = useInfiniteScroll(() => noop())
2022-04-15 17:00:08 +00:00
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?'
]
2022-06-10 10:47:46 +00:00
const greeting = computed(() => sample(greetings)!.replace('%s', userStore.current.name))
2022-04-15 17:00:08 +00:00
2022-06-10 10:47:46 +00:00
let initialized = false
2022-04-15 14:24:30 +00:00
2022-06-10 10:47:46 +00:00
eventBus.on('LOAD_MAIN_CONTENT', async (view: MainViewName) => {
if (view === 'Home' && !initialized) {
await overviewStore.init()
initialized = true
}
2022-04-15 17:00:08 +00:00
})
2022-04-15 14:24:30 +00:00
</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>