Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-14 00:17:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: loading state for Playlist (#1862)

Browse source
This commit is contained in:
Phan An 2024-10-25 17:32:40 +07:00 committed by GitHub
parent 54d5a6b493
commit 08d74f292a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 49 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/assets/js/components/screens/AlbumListScreen.vue
View file

@ -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>

2
resources/assets/js/components/screens/AllSongsScreen.vue
View file

@ -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"
>

2
resources/assets/js/components/screens/ArtistListScreen.vue
View file

@ -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>

2
resources/assets/js/components/screens/FavoritesScreen.vue
View file

@ -51,7 +51,7 @@
<Icon :icon="faHeartBroken" />
</template>
No favorites yet.
<span class="secondary d-block">
<span class="secondary block">
Click the&nbsp;
<Icon :icon="faHeart" />&nbsp;
icon to mark a song as favorite.

2
resources/assets/js/components/screens/GenreListScreen.vue
View file

@ -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>

2
resources/assets/js/components/screens/HomeScreen.vue
View file

@ -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>

24
resources/assets/js/components/screens/PlaylistScreen.vue
View file

@ -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,11 +37,13 @@
/>
</template>
</ScreenHeader>
<ScreenHeaderSkeleton v-else />
</template>
<SongListSkeleton v-show="loading" class="-m-6" />
<SongListSkeleton v-if="loading" class="-m-6" />
<template v-else>
<SongList
v-if="!loading && songs.length"
v-if="songs.length"
ref="songList"
class="-m-6"
@reorder="onReorder"
@ -51,22 +53,25 @@
@scroll-breakpoint="onScrollBreakpoint"
/>
<ScreenEmptyState v-if="!songs.length && !loading">
<ScreenEmptyState v-else>
<template #icon>
<Icon :icon="faFile" />
</template>
<template v-if="playlist?.is_smart">
<p>
No songs match the playlist's
<a @click.prevent="editPlaylist">criteria</a>.
<a class="inline" @click.prevent="editPlaylist">criteria</a>.
</p>
</template>
<template v-else>
The playlist is currently empty.
<span class="d-block secondary">
<span class="block secondary">
Drag songs into its name in the sidebar or use the &quot;Add To…&quot; 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!)

2
resources/assets/js/components/screens/PodcastListScreen.vue
View file

@ -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">

2
resources/assets/js/components/screens/QueueScreen.vue
View file

@ -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>

2
resources/assets/js/components/screens/RecentlyPlayedScreen.vue
View file

@ -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>

2
resources/assets/js/components/screens/search/SearchExcerptsScreen.vue
View file

@ -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>

2
resources/assets/js/components/song/PlayableContextMenu.vue
View file

@ -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>

2
resources/assets/js/composables/useSongList.ts
View file

@ -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
}