66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<template>
|
|
<div
|
|
class="card-surface flex cursor-pointer items-center gap-4"
|
|
:class="{ 'border-primary/40! shadow-primary/10!': isCurrent }"
|
|
@click="handlePlay"
|
|
>
|
|
<!-- Play indicator / cover -->
|
|
<div
|
|
class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg bg-surface-200"
|
|
:class="{ 'animate-glow-pulse': isCurrent && store.isPlaying }"
|
|
>
|
|
<div
|
|
v-if="isCurrent && store.isPlaying"
|
|
class="i-lucide-volume-2 h-5 w-5 text-primary"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="i-lucide-play h-5 w-5 text-white/40 transition-colors group-hover:text-primary"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Info -->
|
|
<div class="min-w-0 flex-1">
|
|
<p class="truncate text-sm font-medium" :class="isCurrent ? 'text-primary' : 'text-white'">
|
|
{{ song.title }}
|
|
</p>
|
|
<p class="truncate text-xs text-white/40">
|
|
{{ song.artist }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Duration -->
|
|
<span class="font-mono text-xs text-white/30 flex-shrink-0">
|
|
{{ formatDuration(song.duration) }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Song } from '~/types/song'
|
|
|
|
const props = defineProps<{
|
|
song: Song
|
|
}>()
|
|
|
|
const store = usePlayerStore()
|
|
const { loadAndPlay, togglePlayPause } = useAudioPlayer()
|
|
|
|
const isCurrent = computed(() => store.currentSong?.id === props.song.id)
|
|
|
|
function handlePlay() {
|
|
if (isCurrent.value) {
|
|
togglePlayPause()
|
|
}
|
|
else {
|
|
loadAndPlay(props.song)
|
|
}
|
|
}
|
|
|
|
function formatDuration(seconds: number): string {
|
|
const mins = Math.floor(seconds / 60)
|
|
const secs = Math.floor(seconds % 60)
|
|
return `${mins}:${secs.toString().padStart(2, '0')}`
|
|
}
|
|
</script>
|