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

83 lines
2.4 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
<section id="artistsWrapper">
2022-07-16 15:44:45 +00:00
<ScreenHeader layout="collapsed">
2022-04-15 14:24:30 +00:00
Artists
<template v-slot:controls>
2022-05-29 21:36:45 +00:00
<ViewModeSwitch v-model="viewMode"/>
2022-04-15 14:24:30 +00:00
</template>
2022-04-15 17:00:08 +00:00
</ScreenHeader>
2022-04-15 14:24:30 +00:00
2022-07-11 17:30:51 +00:00
<div
ref="scroller"
:class="`as-${viewMode}`"
class="artists main-scroll-wrap"
data-testid="artist-list"
@scroll="scrolling"
>
2022-07-30 15:08:20 +00:00
<template v-if="showSkeletons">
<ArtistCardSkeleton v-for="i in 10" :key="i" :layout="itemLayout"/>
</template>
<template v-else>
<ArtistCard v-for="artist in artists" :key="artist.id" :artist="artist" :layout="itemLayout"/>
<ToTopButton/>
</template>
2022-04-15 14:24:30 +00:00
</div>
</section>
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
import { computed, ref, toRef, watch } from 'vue'
2022-06-10 10:47:46 +00:00
import { eventBus } from '@/utils'
2022-04-15 14:24:30 +00:00
import { artistStore, preferenceStore as preferences } from '@/stores'
2022-04-15 17:00:08 +00:00
import { useInfiniteScroll } from '@/composables'
2022-04-15 14:24:30 +00:00
import ArtistCard from '@/components/artist/ArtistCard.vue'
2022-07-30 15:08:20 +00:00
import ArtistCardSkeleton from '@/components/ui/skeletons/ArtistAlbumCardSkeleton.vue'
import ScreenHeader from '@/components/ui/ScreenHeader.vue'
import ViewModeSwitch from '@/components/ui/ViewModeSwitch.vue'
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
const viewMode = ref<ArtistAlbumViewMode>('thumbnails')
const artists = toRef(artistStore.state, 'artists')
2022-04-15 14:24:30 +00:00
2022-06-10 10:47:46 +00:00
const {
ToTopButton,
scroller,
scrolling,
makeScrollable
} = useInfiniteScroll(async () => await fetchArtists())
2022-04-15 17:00:08 +00:00
watch(viewMode, () => preferences.artistsViewMode = viewMode.value)
2022-04-15 14:24:30 +00:00
2022-06-10 10:47:46 +00:00
let initialized = false
2022-07-30 15:08:20 +00:00
const loading = ref(false)
2022-06-10 10:47:46 +00:00
const page = ref<number | null>(1)
2022-07-30 15:08:20 +00:00
const itemLayout = computed<ArtistAlbumCardLayout>(() => viewMode.value === 'thumbnails' ? 'full' : 'compact')
2022-06-10 10:47:46 +00:00
const moreArtistsAvailable = computed(() => page.value !== null)
2022-07-30 15:08:20 +00:00
const showSkeletons = computed(() => loading.value && artists.value.length === 0)
2022-06-10 10:47:46 +00:00
const fetchArtists = async () => {
2022-07-30 15:08:20 +00:00
if (loading.value || !moreArtistsAvailable.value) return
2022-06-10 10:47:46 +00:00
2022-07-30 15:08:20 +00:00
loading.value = true
2022-07-22 22:03:25 +00:00
page.value = await artistStore.paginate(page.value!)
2022-07-30 15:08:20 +00:00
loading.value = false
2022-06-10 10:47:46 +00:00
}
eventBus.on('ACTIVATE_SCREEN', async (screen: ScreenName) => {
if (screen === 'Artists' && !initialized) {
2022-07-11 17:30:51 +00:00
viewMode.value = preferences.artistsViewMode || 'thumbnails'
2022-06-10 10:47:46 +00:00
await makeScrollable()
initialized = true
2022-04-15 14:24:30 +00:00
}
})
</script>
<style lang="scss">
#artistsWrapper {
.artists {
@include artist-album-wrapper();
}
}
</style>