mirror of
https://github.com/koel/koel
synced 2024-11-24 13:13:05 +00:00
feat: add empty state for Home screen
This commit is contained in:
Phan An
parent
3efeec44a5
commit
c9d469067e
7 changed files with 42 additions and 24 deletions
|
|
@ -3,20 +3,32 @@
|
|||
<ScreenHeader>{{ greeting }}</ScreenHeader>
|
||||
|
||||
<div class="main-scroll-wrap" @scroll="scrolling">
|
||||
<div class="two-cols">
|
||||
<MostPlayedSongs/>
|
||||
<RecentlyPlayedSongs/>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="two-cols">
|
||||
<RecentlyAddedAlbums/>
|
||||
<RecentlyAddedSongs/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="two-cols">
|
||||
<MostPlayedSongs/>
|
||||
<RecentlyPlayedSongs/>
|
||||
</div>
|
||||
|
||||
<MostPlayedArtists/>
|
||||
<MostPlayedAlbums/>
|
||||
<div class="two-cols">
|
||||
<RecentlyAddedAlbums/>
|
||||
<RecentlyAddedSongs/>
|
||||
</div>
|
||||
|
||||
<ToTopButton/>
|
||||
<MostPlayedArtists/>
|
||||
<MostPlayedAlbums/>
|
||||
|
||||
<ToTopButton/>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -26,8 +38,8 @@ import { sample } from 'lodash'
|
|||
import { computed } from 'vue'
|
||||
|
||||
import { eventBus, noop } from '@/utils'
|
||||
import { overviewStore, userStore } from '@/stores'
|
||||
import { useInfiniteScroll } from '@/composables'
|
||||
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'
|
||||
|
|
@ -36,9 +48,12 @@ 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!',
|
||||
|
|
@ -52,6 +67,7 @@ const greetings = [
|
|||
]
|
||||
|
||||
const greeting = computed(() => sample(greetings)!.replace('%s', userStore.current?.name))
|
||||
const libraryEmpty = computed(() => commonStore.state.song_length === 0)
|
||||
|
||||
let initialized = false
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<section>
|
||||
<h1>Top Albums</h1>
|
||||
<ol class="two-cols top-album-list">
|
||||
<ol v-if="albums.length" class="two-cols top-album-list">
|
||||
<li v-for="album in albums" :key="album.id">
|
||||
<AlbumCard :album="album" layout="compact"/>
|
||||
</li>
|
||||
</ol>
|
||||
<p v-else class="text-secondary">No albums found.</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { toRef } from 'vue'
|
||||
import { overviewStore } from '@/stores'
|
||||
|
||||
import AlbumCard from '@/components/album/AlbumCard.vue'
|
||||
|
||||
const albums = toRef(overviewStore.state, 'mostPlayedAlbums')
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<section>
|
||||
<h1>Top Artists</h1>
|
||||
<ol class="two-cols top-artist-list">
|
||||
<ol v-if="artists.length" class="two-cols top-artist-list">
|
||||
<li v-for="artist in artists" :key="artist.id">
|
||||
<ArtistCard :artist="artist" layout="compact"/>
|
||||
</li>
|
||||
</ol>
|
||||
<p v-else class="text-secondary">No artists found.</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<section v-if="songs.length">
|
||||
<h1>Most Played</h1>
|
||||
|
||||
<ol class="top-song-list">
|
||||
<ol v-if="songs.length" class="top-song-list">
|
||||
<li v-for="song in songs" :key="song.id">
|
||||
<SongCard :song="song"/>
|
||||
</li>
|
||||
</ol>
|
||||
<p v-else class="text-secondary">You don’t seem to have been playing.</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
<template>
|
||||
<section>
|
||||
<h1>New Albums</h1>
|
||||
<ol class="recently-added-album-list">
|
||||
<ol v-if="albums.length" class="recently-added-album-list">
|
||||
<li v-for="album in albums" :key="album.id">
|
||||
<AlbumCard :album="album" layout="compact"/>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p v-else class="text-secondary">No albums added yet.</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<section>
|
||||
<h1>New Songs</h1>
|
||||
<ol v-show="songs.length" class="recently-added-song-list">
|
||||
<ol v-if="songs.length" class="recently-added-song-list">
|
||||
<li v-for="song in songs" :key="song.id">
|
||||
<SongCard :song="song"/>
|
||||
</li>
|
||||
</ol>
|
||||
<p v-else class="text-secondary">No songs added so far.</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<h1>
|
||||
Recently Played
|
||||
<Btn
|
||||
v-if="songs.length"
|
||||
data-testid="home-view-all-recently-played-btn"
|
||||
@click.prevent="goToRecentlyPlayedScreen"
|
||||
rounded
|
||||
|
|
@ -19,10 +20,7 @@
|
|||
</li>
|
||||
</ol>
|
||||
|
||||
<p v-show="!songs.length" class="text-secondary">
|
||||
Your recently played songs will be displayed here.<br/>
|
||||
Start listening!
|
||||
</p>
|
||||
<p v-else class="text-secondary">No songs played as of late.</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue