mirror of
https://github.com/koel/koel
synced 2024-11-23 20:53:05 +00:00
fix: loading state for Playlist (#1862)
This commit is contained in:
parent
54d5a6b493
commit
08d74f292a
13 changed files with 49 additions and 41 deletions
|
@ -14,7 +14,7 @@
|
|||
<Icon :icon="faCompactDisc" />
|
||||
</template>
|
||||
No albums found.
|
||||
<span class="secondary d-block">
|
||||
<span class="secondary block">
|
||||
{{ isAdmin ? 'Have you set up your library yet?' : 'Contact your administrator to set up your library.' }}
|
||||
</span>
|
||||
</ScreenEmptyState>
|
||||
|
|
|
@ -49,7 +49,7 @@
|
|||
Your library is empty.
|
||||
<a
|
||||
v-if="isPlus && ownSongsOnly"
|
||||
class="d-block secondary"
|
||||
class="block secondary"
|
||||
role="button"
|
||||
@click.prevent="showSongsFromOthers"
|
||||
>
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
<Icon :icon="faMicrophoneSlash" />
|
||||
</template>
|
||||
No artists found.
|
||||
<span class="secondary d-block">
|
||||
<span class="secondary block">
|
||||
{{ isAdmin ? 'Have you set up your library yet?' : 'Contact your administrator to set up your library.' }}
|
||||
</span>
|
||||
</ScreenEmptyState>
|
||||
|
|
|
@ -51,7 +51,7 @@
|
|||
<Icon :icon="faHeartBroken" />
|
||||
</template>
|
||||
No favorites yet.
|
||||
<span class="secondary d-block">
|
||||
<span class="secondary block">
|
||||
Click the
|
||||
<Icon :icon="faHeart" />
|
||||
icon to mark a song as favorite.
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<GuitarIcon size="96" />
|
||||
</template>
|
||||
No genres found.
|
||||
<span class="secondary d-block">
|
||||
<span class="secondary block">
|
||||
{{ isAdmin ? 'Have you set up your library yet?' : 'Contact your administrator to set up your library.' }}
|
||||
</span>
|
||||
</ScreenEmptyState>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<Icon :icon="faVolumeOff" />
|
||||
</template>
|
||||
No songs found.
|
||||
<span class="secondary d-block">
|
||||
<span class="secondary block">
|
||||
{{ isAdmin ? 'Have you set up your library yet?' : 'Contact your administrator to set up your library.' }}
|
||||
</span>
|
||||
</ScreenEmptyState>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<ScreenBase v-if="playlist">
|
||||
<ScreenBase v-if="playlistId">
|
||||
<template #header>
|
||||
<ScreenHeader :disabled="loading" :layout="songs.length === 0 ? 'collapsed' : headerLayout">
|
||||
<ScreenHeader v-if="playlist" :disabled="loading" :layout="songs.length === 0 ? 'collapsed' : headerLayout">
|
||||
{{ playlist.name }}
|
||||
<ControlsToggle v-if="songs.length" v-model="showingControls" />
|
||||
|
||||
|
@ -37,36 +37,41 @@
|
|||
/>
|
||||
</template>
|
||||
</ScreenHeader>
|
||||
<ScreenHeaderSkeleton v-else />
|
||||
</template>
|
||||
|
||||
<SongListSkeleton v-show="loading" class="-m-6" />
|
||||
<SongList
|
||||
v-if="!loading && songs.length"
|
||||
ref="songList"
|
||||
class="-m-6"
|
||||
@reorder="onReorder"
|
||||
@sort="sort"
|
||||
@press:delete="removeSelected"
|
||||
@press:enter="onPressEnter"
|
||||
@scroll-breakpoint="onScrollBreakpoint"
|
||||
/>
|
||||
<SongListSkeleton v-if="loading" class="-m-6" />
|
||||
<template v-else>
|
||||
<SongList
|
||||
v-if="songs.length"
|
||||
ref="songList"
|
||||
class="-m-6"
|
||||
@reorder="onReorder"
|
||||
@sort="sort"
|
||||
@press:delete="removeSelected"
|
||||
@press:enter="onPressEnter"
|
||||
@scroll-breakpoint="onScrollBreakpoint"
|
||||
/>
|
||||
|
||||
<ScreenEmptyState v-if="!songs.length && !loading">
|
||||
<template #icon>
|
||||
<Icon :icon="faFile" />
|
||||
</template>
|
||||
<ScreenEmptyState v-else>
|
||||
<template #icon>
|
||||
<Icon :icon="faFile" />
|
||||
</template>
|
||||
|
||||
<template v-if="playlist?.is_smart">
|
||||
No songs match the playlist's
|
||||
<a @click.prevent="editPlaylist">criteria</a>.
|
||||
</template>
|
||||
<template v-else>
|
||||
The playlist is currently empty.
|
||||
<span class="d-block secondary">
|
||||
Drag songs into its name in the sidebar or use the "Add To…" button to fill it up.
|
||||
</span>
|
||||
</template>
|
||||
</ScreenEmptyState>
|
||||
<template v-if="playlist?.is_smart">
|
||||
<p>
|
||||
No songs match the playlist's
|
||||
<a class="inline" @click.prevent="editPlaylist">criteria</a>.
|
||||
</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
The playlist is currently empty.
|
||||
<span class="block secondary">
|
||||
Drag songs into its name in the sidebar or use the "Add To…" button to fill it up.
|
||||
</span>
|
||||
</template>
|
||||
</ScreenEmptyState>
|
||||
</template>
|
||||
</ScreenBase>
|
||||
</template>
|
||||
|
||||
|
@ -93,6 +98,7 @@ import SongListSkeleton from '@/components/ui/skeletons/SongListSkeleton.vue'
|
|||
import CollaboratorsBadge from '@/components/playlist/PlaylistCollaboratorsBadge.vue'
|
||||
import PlaylistThumbnail from '@/components/ui/PlaylistThumbnail.vue'
|
||||
import ScreenBase from '@/components/screens/ScreenBase.vue'
|
||||
import ScreenHeaderSkeleton from '@/components/ui/skeletons/ScreenHeaderSkeleton.vue'
|
||||
|
||||
const { currentUser } = useAuthorization()
|
||||
const { triggerNotFound, getRouteParam, onScreenActivated } = useRouter()
|
||||
|
@ -152,7 +158,9 @@ const fetchDetails = async (refresh = false) => {
|
|||
}
|
||||
|
||||
try {
|
||||
[songs.value, collaborators.value] = await Promise.all([
|
||||
loading.value = true
|
||||
|
||||
;[songs.value, collaborators.value] = await Promise.all([
|
||||
songStore.fetchForPlaylist(playlist.value!, refresh),
|
||||
playlist.value!.is_collaborative
|
||||
? playlistCollaborationService.fetchCollaborators(playlist.value!)
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
<Icon :icon="faPodcast" />
|
||||
</template>
|
||||
No podcasts found.
|
||||
<span class="secondary d-block">Add a podcast to get started.</span>
|
||||
<span class="secondary block">Add a podcast to get started.</span>
|
||||
</ScreenEmptyState>
|
||||
|
||||
<div v-else v-koel-overflow-fade class="-m-6 p-6 overflow-auto space-y-3 min-h-full">
|
||||
|
|
|
@ -44,7 +44,7 @@
|
|||
</template>
|
||||
|
||||
No songs queued.
|
||||
<span v-if="libraryNotEmpty" class="d-block secondary">
|
||||
<span v-if="libraryNotEmpty" class="block secondary">
|
||||
How about
|
||||
<a class="start" @click.prevent="shuffleSome">playing some random songs</a>?
|
||||
</span>
|
||||
|
|
|
@ -41,7 +41,7 @@
|
|||
<Icon :icon="faClock" />
|
||||
</template>
|
||||
No songs recently played.
|
||||
<span class="secondary d-block">Start playing to populate this playlist.</span>
|
||||
<span class="secondary block">Start playing to populate this playlist.</span>
|
||||
</ScreenEmptyState>
|
||||
</ScreenBase>
|
||||
</template>
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
<Icon :icon="faSearch" />
|
||||
</template>
|
||||
Find songs, artists, and albums,
|
||||
<span class="secondary d-block">all in one place.</span>
|
||||
<span class="secondary block">all in one place.</span>
|
||||
</ScreenEmptyState>
|
||||
</ScreenBase>
|
||||
</template>
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
<li @click="addToFavorites">Favorites</li>
|
||||
</template>
|
||||
<li v-if="normalPlaylists.length" class="separator" />
|
||||
<template class="d-block">
|
||||
<template class="block">
|
||||
<ul v-if="normalPlaylists.length" v-koel-overflow-fade class="relative max-h-48 overflow-y-auto">
|
||||
<li v-for="p in normalPlaylists" :key="p.id" @click="addToExistingPlaylist(p)">{{ p.name }}</li>
|
||||
</ul>
|
||||
|
|
|
@ -135,7 +135,7 @@ export const useSongList = (
|
|||
const applyFilter = throttle((keywords: string) => (filterKeywords.value = keywords), 200)
|
||||
|
||||
const filteredPlayables = computed(() => {
|
||||
if (!fuzzy) {
|
||||
if (!fuzzy || !filterKeywords.value) {
|
||||
return playables.value
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue