koel/resources/assets/js/components/song/SongCard.vue

168 lines
3.5 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
<article
2022-06-10 10:47:46 +00:00
:class="{ playing: song.playback_state === 'Playing' || song.playback_state === 'Paused' }"
2022-04-23 22:15:08 +00:00
draggable="true"
2022-04-15 14:24:30 +00:00
tabindex="0"
@dragstart="onDragStart"
2022-04-30 11:55:54 +00:00
@contextmenu.prevent="requestContextMenu"
2022-04-23 22:15:08 +00:00
@dblclick.prevent="play"
2022-04-15 14:24:30 +00:00
>
2022-12-02 16:17:37 +00:00
<SongThumbnail :song="song" />
2022-07-30 15:08:20 +00:00
<main>
<div class="details">
2024-01-04 10:24:40 +00:00
<h3>
<span class="external-mark" v-if="external">
<Icon :icon="faSquareUpRight" />
</span>
{{ song.title }}
</h3>
2022-07-30 15:08:20 +00:00
<p class="by text-secondary">
<a :href="`#/artist/${song.artist_id}`">{{ song.artist_name }}</a>
2022-07-30 15:08:20 +00:00
- {{ pluralize(song.play_count, 'play') }}
</p>
</div>
2022-12-02 16:17:37 +00:00
<LikeButton :song="song" />
2022-07-30 15:08:20 +00:00
</main>
2022-04-15 14:24:30 +00:00
</article>
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
2024-01-04 10:24:40 +00:00
import {faSquareUpRight} from '@fortawesome/free-solid-svg-icons'
import { computed, toRefs } from 'vue'
import { eventBus, pluralize } from '@/utils'
2022-04-15 14:24:30 +00:00
import { queueStore } from '@/stores'
2022-04-24 08:50:45 +00:00
import { playbackService } from '@/services'
2024-01-08 16:59:05 +00:00
import { useAuthorization, useDraggable, useKoelPlus } from '@/composables'
2022-04-15 14:24:30 +00:00
import SongThumbnail from '@/components/song/SongThumbnail.vue'
import LikeButton from '@/components/song/SongLikeButton.vue'
2022-04-15 14:24:30 +00:00
2022-07-30 15:08:20 +00:00
const props = defineProps<{ song: Song }>()
const { song } = toRefs(props)
2022-04-15 14:24:30 +00:00
2024-01-08 16:59:05 +00:00
const { isPlus } = useKoelPlus()
2024-01-04 10:24:40 +00:00
const { currentUser } = useAuthorization()
const { startDragging } = useDraggable('songs')
2024-01-08 16:59:05 +00:00
const external = computed(() => isPlus.value && song.value.owner_id !== currentUser.value?.id)
2024-01-04 10:24:40 +00:00
2022-04-15 17:00:08 +00:00
const requestContextMenu = (event: MouseEvent) => eventBus.emit('SONG_CONTEXT_MENU_REQUESTED', event, song.value)
const onDragStart = (event: DragEvent) => startDragging(event, [song.value])
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
const play = () => {
queueStore.queueIfNotQueued(song.value)
2022-04-24 08:50:45 +00:00
playbackService.play(song.value)
2022-04-15 17:00:08 +00:00
}
2022-04-15 14:24:30 +00:00
</script>
<style lang="scss" scoped>
article {
display: flex;
gap: 12px;
padding: 8px 12px 8px 8px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-bg-secondary);
border-radius: 5px;
align-items: center;
2024-01-24 22:39:47 +00:00
transition: border-color .2s ease-in-out;
2022-04-15 14:24:30 +00:00
&:focus, &:focus-within {
box-shadow: 0 0 1px 1px var(--color-accent);
}
2022-04-15 14:24:30 +00:00
&.playing {
color: var(--color-accent);
2022-04-15 14:24:30 +00:00
}
2022-07-30 15:08:20 +00:00
button {
2022-10-13 15:18:47 +00:00
color: var(--color-text-secondary);
opacity: 0;
}
&:hover {
2024-01-24 22:39:47 +00:00
border-color: rgba(255, 255, 255, .15);
2022-07-30 15:08:20 +00:00
button {
opacity: 1;
}
}
@media (hover: none) {
button {
opacity: 1;
}
2022-10-27 17:06:49 +00:00
:deep(.cover) {
.control {
display: flex;
}
&::before {
opacity: .7;
}
}
}
// show the thumbnail's playback control on the whole card focus and hover
2022-10-27 17:06:49 +00:00
&:hover :deep(.cover), &:focus :deep(.cover) {
2022-04-15 14:24:30 +00:00
.control {
2022-07-15 07:23:55 +00:00
display: flex;
2022-04-15 14:24:30 +00:00
}
&::before {
opacity: .7;
}
}
2022-07-30 15:08:20 +00:00
main {
2022-08-03 21:01:47 +00:00
flex: 1 1 auto;
min-width: 0;
2022-04-15 14:24:30 +00:00
display: flex;
2022-07-30 15:08:20 +00:00
align-items: flex-start;
gap: 8px;
2022-04-15 14:24:30 +00:00
.play-count {
background: rgba(255, 255, 255, 0.08);
position: absolute;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.by {
font-size: .9rem;
opacity: .8;
a {
color: var(--color-text-primary);
&:hover {
color: var(--color-accent);
2022-04-15 14:24:30 +00:00
}
}
}
.details {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
2022-08-03 21:01:47 +00:00
overflow: hidden;
2024-01-04 10:24:40 +00:00
.external-mark {
margin-right: .2rem;
opacity: .5;
}
2022-04-15 14:24:30 +00:00
}
}
2022-08-03 21:01:47 +00:00
h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
2022-04-15 14:24:30 +00:00
}
</style>