35 lines
1.1 KiB
Vue
35 lines
1.1 KiB
Vue
<template>
|
|
<div v-if="store.currentSong" class="flex items-center gap-3 min-w-0">
|
|
<div
|
|
class="h-10 w-10 flex-shrink-0 rounded-lg bg-surface-200 flex items-center justify-center overflow-hidden"
|
|
:class="{ 'animate-glow-pulse': store.isPlaying }"
|
|
>
|
|
<img
|
|
v-if="store.currentSong.coverImage"
|
|
:src="store.currentSong.coverImage"
|
|
:alt="store.currentSong.title"
|
|
class="h-full w-full object-cover"
|
|
>
|
|
<div v-else class="i-lucide-music h-5 w-5 text-primary" />
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p class="truncate text-sm font-medium text-white">
|
|
{{ store.currentSong.title }}
|
|
</p>
|
|
<p class="truncate text-xs text-white/50">
|
|
{{ store.currentSong.artist }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div v-else class="flex items-center gap-3 text-white/40">
|
|
<div class="h-10 w-10 flex-shrink-0 rounded-lg bg-surface-200 flex items-center justify-center">
|
|
<div class="i-lucide-music h-5 w-5" />
|
|
</div>
|
|
<p class="text-sm">Aucune piste sélectionnée</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const store = usePlayerStore()
|
|
</script>
|