mirror of
https://github.com/koel/koel
synced 2024-12-20 09:33:23 +00:00
62 lines
2 KiB
Vue
62 lines
2 KiB
Vue
<template>
|
|
<FooterButton
|
|
:title="playing ? 'Pause' : 'Play or resume'"
|
|
class="!w-[3rem] rounded-full border-2 border-solid aspect-square !transition-transform hover:scale-125 !text-2xl
|
|
has-[.icon-play]:indent-[0.23rem]"
|
|
@click.prevent="toggle"
|
|
>
|
|
<Icon v-if="playing" :icon="faPause" />
|
|
<Icon v-else :icon="faPlay" class="icon-play" />
|
|
</FooterButton>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { faPause, faPlay } from '@fortawesome/free-solid-svg-icons'
|
|
import { computed, ref } from 'vue'
|
|
import { playbackService } from '@/services'
|
|
import { commonStore, favoriteStore, queueStore, recentlyPlayedStore, songStore } from '@/stores'
|
|
import { requireInjection } from '@/utils'
|
|
import { useRouter } from '@/composables'
|
|
import { CurrentPlayableKey } from '@/symbols'
|
|
import FooterButton from '@/components/layout/app-footer/FooterButton.vue'
|
|
|
|
const { getCurrentScreen, getRouteParam, go } = useRouter()
|
|
const song = requireInjection(CurrentPlayableKey, ref())
|
|
|
|
const libraryEmpty = computed(() => commonStore.state.song_count === 0)
|
|
const playing = computed(() => song.value?.playback_state === 'Playing')
|
|
|
|
const initiatePlayback = async () => {
|
|
if (libraryEmpty.value) {
|
|
return
|
|
}
|
|
|
|
let playables: Playable[]
|
|
|
|
switch (getCurrentScreen()) {
|
|
case 'Album':
|
|
playables = await songStore.fetchForAlbum(Number.parseInt(getRouteParam('id')!))
|
|
break
|
|
case 'Artist':
|
|
playables = await songStore.fetchForArtist(Number.parseInt(getRouteParam('id')!))
|
|
break
|
|
case 'Playlist':
|
|
playables = await songStore.fetchForPlaylist(getRouteParam('id')!)
|
|
break
|
|
case 'Favorites':
|
|
playables = await favoriteStore.fetch()
|
|
break
|
|
case 'RecentlyPlayed':
|
|
playables = await recentlyPlayedStore.fetch()
|
|
break
|
|
default:
|
|
playables = await queueStore.fetchRandom()
|
|
break
|
|
}
|
|
|
|
await playbackService.queueAndPlay(playables)
|
|
go('queue')
|
|
}
|
|
|
|
const toggle = async () => song.value ? playbackService.toggle() : initiatePlayback()
|
|
</script>
|