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

166 lines
4.4 KiB
Vue
Raw Normal View History

2022-10-21 20:06:43 +00:00
<template>
2024-04-04 22:20:42 +00:00
<ScreenBase>
<template #header>
<ScreenHeader v-if="genre" :layout="headerLayout">
Genre: <span class="text-thin">{{ decodeURIComponent(name!) }}</span>
<ControlsToggle v-if="songs.length" v-model="showingControls" />
2022-10-21 20:06:43 +00:00
2024-04-04 22:20:42 +00:00
<template #thumbnail>
<ThumbnailStack :thumbnails="thumbnails" />
</template>
2022-10-21 20:06:43 +00:00
2024-04-04 22:20:42 +00:00
<template v-if="genre" #meta>
<span>{{ pluralize(genre.song_count, 'song') }}</span>
<span>{{ duration }}</span>
</template>
2022-10-21 20:06:43 +00:00
2024-04-04 22:20:42 +00:00
<template #controls>
<SongListControls
v-if="!isPhone || showingControls"
:config="config"
@play-all="playAll"
@play-selected="playSelected"
/>
</template>
</ScreenHeader>
<ScreenHeaderSkeleton v-else />
</template>
2022-10-21 20:06:43 +00:00
2024-04-04 22:20:42 +00:00
<SongListSkeleton v-if="showSkeletons" class="-m-6" />
2022-10-21 20:06:43 +00:00
<SongList
v-else
ref="songList"
2024-04-04 22:20:42 +00:00
class="-m-6"
2022-10-21 20:06:43 +00:00
@sort="sort"
@press:enter="onPressEnter"
@scroll-breakpoint="onScrollBreakpoint"
@scrolled-to-end="fetch"
/>
<ScreenEmptyState v-if="!songs.length && !loading">
2022-12-02 16:17:37 +00:00
<template #icon>
2023-11-10 13:16:06 +00:00
<Icon :icon="faTags" />
2022-10-21 20:06:43 +00:00
</template>
No songs in this genre.
</ScreenEmptyState>
2024-04-04 22:20:42 +00:00
</ScreenBase>
2022-10-21 20:06:43 +00:00
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import { faTags } from '@fortawesome/free-solid-svg-icons'
import { eventBus, pluralize, secondsToHumanReadable } from '@/utils'
import { playbackService } from '@/services'
2022-10-21 20:06:43 +00:00
import { genreStore, songStore } from '@/stores'
import { useErrorHandler, useRouter, useSongList, useSongListControls } from '@/composables'
2022-10-21 20:06:43 +00:00
import ScreenHeader from '@/components/ui/ScreenHeader.vue'
import ScreenEmptyState from '@/components/ui/ScreenEmptyState.vue'
import SongListSkeleton from '@/components/ui/skeletons/SongListSkeleton.vue'
import ScreenHeaderSkeleton from '@/components/ui/skeletons/ScreenHeaderSkeleton.vue'
2024-04-04 22:20:42 +00:00
import ScreenBase from '@/components/screens/ScreenBase.vue'
2022-10-21 20:06:43 +00:00
const {
SongList,
ControlsToggle,
ThumbnailStack,
headerLayout,
songs,
songList,
thumbnails,
showingControls,
isPhone,
onPressEnter,
playSelected,
onScrollBreakpoint
2024-03-25 22:59:38 +00:00
} = useSongList(ref<Song[]>([]), { type: 'Genre' })
2022-10-21 20:06:43 +00:00
2024-01-18 11:13:05 +00:00
const { SongListControls, config } = useSongListControls('Genre')
2022-11-18 18:44:20 +00:00
const { getRouteParam, go, onRouteChanged } = useRouter()
2022-10-21 20:06:43 +00:00
let sortField: SongListSortField = 'title'
let sortOrder: SortOrder = 'asc'
const randomSongCount = 500
const name = ref<string | null>(null)
const genre = ref<Genre | null>(null)
const loading = ref(false)
const page = ref<number | null>(1)
const moreSongsAvailable = computed(() => page.value !== null)
const showSkeletons = computed(() => loading.value && songs.value.length === 0)
const duration = computed(() => secondsToHumanReadable(genre.value?.length ?? 0))
2022-10-21 20:06:43 +00:00
const sort = async (field: SongListSortField, order: SortOrder) => {
page.value = 1
songs.value = []
sortField = field
sortOrder = order
await fetch()
}
const fetch = async () => {
if (!moreSongsAvailable.value || loading.value) return
loading.value = true
try {
let fetched
[genre.value, fetched] = await Promise.all([
genreStore.fetchOne(name.value!),
songStore.paginateForGenre(name.value!, {
sort: sortField,
order: sortOrder,
page: page.value!,
})
2022-10-21 20:06:43 +00:00
])
page.value = fetched.nextPage
songs.value.push(...fetched.songs)
} catch (error: unknown) {
useErrorHandler('dialog').handleHttpError(error)
2022-10-21 20:06:43 +00:00
} finally {
loading.value = false
}
}
const refresh = async () => {
genre.value = null
page.value = 1
songs.value = []
await fetch()
}
2022-11-18 18:44:20 +00:00
const getNameFromRoute = () => getRouteParam('name') ?? null
2022-10-21 20:06:43 +00:00
2022-11-18 18:44:20 +00:00
onRouteChanged(route => {
2022-10-21 20:06:43 +00:00
if (route.screen !== 'Genre') return
name.value = getNameFromRoute()
})
const playAll = async () => {
if (!genre.value) return
// we ignore the queueAndPlay's await to avoid blocking the UI
if (genre.value!.song_count <= randomSongCount) {
playbackService.queueAndPlay(songs.value, true)
} else {
playbackService.queueAndPlay(await songStore.fetchRandomForGenre(genre.value!, randomSongCount))
}
2022-11-18 18:44:20 +00:00
go('queue')
2022-10-21 20:06:43 +00:00
}
onMounted(() => (name.value = getNameFromRoute()))
watch(name, async () => name.value && await refresh())
// We can't really tell how/if the genres have been updated, so we just refresh the list
eventBus.on('SONGS_UPDATED', async () => genre.value && await refresh())
2022-10-21 20:06:43 +00:00
</script>