koel/resources/assets/js/components/song/SongListItem.vue
2022-07-15 16:48:06 +02:00

90 lines
2.4 KiB
Vue

<template>
<div
:class="{ playing, selected: item.selected }"
class="song-item"
data-testid="song-item"
@dblclick.prevent.stop="play"
>
<span v-if="columns.includes('track')" class="track-number text-secondary">{{ song.track || '' }}</span>
<span v-if="columns.includes('title')" class="title">{{ song.title }}</span>
<span v-if="columns.includes('artist')" class="artist">{{ song.artist_name }}</span>
<span v-if="columns.includes('album')" class="album">{{ song.album_name }}</span>
<span v-if="columns.includes('length')" class="time text-secondary">{{ fmtLength }}</span>
<span class="favorite">
<LikeButton :song="song"/>
</span>
<span class="play" data-testid="song-item-play" role="button" @click.stop="doPlayback">
<icon v-if="song.playback_state === 'Playing'" :icon="faCirclePause"/>
<icon v-else :icon="faCirclePlay"/>
</span>
</div>
</template>
<script lang="ts" setup>
import { faCirclePause, faCirclePlay } from '@fortawesome/free-solid-svg-icons'
import { computed, toRefs } from 'vue'
import { playbackService } from '@/services'
import { queueStore } from '@/stores'
import { secondsToHis } from '@/utils'
import LikeButton from '@/components/song/SongLikeButton.vue'
const props = defineProps<{ item: SongRow, columns: SongListColumn[] }>()
const { item, columns } = toRefs(props)
const song = computed(() => item.value.song)
const playing = computed(() => ['Playing', 'Paused'].includes(song.value.playback_state!))
const fmtLength = secondsToHis(song.value.length)
const play = () => {
queueStore.queueIfNotQueued(song.value)
playbackService.play(song.value)
}
const doPlayback = () => {
switch (song.value.playback_state) {
case 'Playing':
playbackService.pause()
break
case 'Paused':
playbackService.resume()
break
default:
play()
break
}
}
</script>
<style lang="scss">
.song-item {
border-bottom: 1px solid var(--color-bg-secondary);
max-width: 100% !important; // overriding .item
height: 35px;
display: flex;
&:hover {
background: rgba(255, 255, 255, .05);
}
.play {
i {
font-size: 1.5rem;
}
}
.favorite .fa-heart, .favorite:hover .fa-heart-o {
color: var(--color-maroon);
}
&.selected {
background-color: rgba(255, 255, 255, .08);
}
&.playing span {
color: var(--color-highlight);
}
}
</style>