2f438d9d7a
- Source unique : supprime app/data/librodrome.config.yml, renomme site/ en bookplayer.config.yml - Morceaux : renommés avec slugs lisibles, fichiers audio renommés, inversion ch2↔ch3 corrigée - Chapitres : 11 fichiers .md réécrits avec le vrai contenu du livre (synthèse fidèle du PDF) - Routes : /lire → /modele-eco, /ecouter → /en-musique, redirections 301 - Admin chapitres : champs structurés (titre, description, temps lecture), compteur mots - Éditeur markdown : mode split, plein écran, support Tab, meilleur rendu aperçu - Admin morceaux : drag & drop, ajout/suppression, gestion playlist - Light mode : palettes printemps/été plus saturées et contrastées, teintes primary - Raccourcis clavier player : espace, flèches gauche/droite - Paroles : toggle supprimé, toujours visibles et scrollables - Nouvelles pages : autonomie, evenement Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
93 lines
2.3 KiB
Vue
93 lines
2.3 KiB
Vue
<template>
|
|
<div class="song-item-wrapper">
|
|
<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>
|
|
|
|
<!-- Lyrics panel (always visible) -->
|
|
<div v-if="song.lyrics" class="lyrics-panel">
|
|
<pre class="lyrics-text">{{ song.lyrics }}</pre>
|
|
</div>
|
|
</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>
|
|
|
|
<style scoped>
|
|
.lyrics-panel {
|
|
margin-top: 0.25rem;
|
|
padding: 1rem 1.25rem;
|
|
border-radius: 0.75rem;
|
|
background: hsl(var(--color-surface));
|
|
border: 1px solid hsl(var(--color-text) / 0.08);
|
|
max-height: 24rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.lyrics-text {
|
|
white-space: pre-wrap;
|
|
font-family: inherit;
|
|
font-size: 0.875rem;
|
|
line-height: 1.7;
|
|
color: hsl(var(--color-text) / 0.6);
|
|
}
|
|
</style>
|