62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
<template>
|
|
<div class="flex items-center gap-2">
|
|
<!-- Shuffle -->
|
|
<button
|
|
class="btn-ghost !p-2"
|
|
:class="{ 'text-primary!': store.isShuffled }"
|
|
aria-label="Mélanger"
|
|
@click="toggleShuffle"
|
|
>
|
|
<div class="i-lucide-shuffle h-4 w-4" />
|
|
</button>
|
|
|
|
<!-- Previous -->
|
|
<button
|
|
class="btn-ghost !p-2"
|
|
:disabled="!store.hasPrev"
|
|
aria-label="Précédent"
|
|
@click="playPrev"
|
|
>
|
|
<div class="i-lucide-skip-back h-5 w-5" />
|
|
</button>
|
|
|
|
<!-- Play/Pause -->
|
|
<button
|
|
class="flex h-10 w-10 items-center justify-center rounded-full bg-white text-surface-bg transition-transform hover:scale-110 active:scale-95"
|
|
:aria-label="store.isPlaying ? 'Pause' : 'Lecture'"
|
|
@click="togglePlayPause"
|
|
>
|
|
<div :class="store.isPlaying ? 'i-lucide-pause' : 'i-lucide-play'" class="h-5 w-5" />
|
|
</button>
|
|
|
|
<!-- Next -->
|
|
<button
|
|
class="btn-ghost !p-2"
|
|
:disabled="!store.hasNext"
|
|
aria-label="Suivant"
|
|
@click="playNext"
|
|
>
|
|
<div class="i-lucide-skip-forward h-5 w-5" />
|
|
</button>
|
|
|
|
<!-- Repeat -->
|
|
<button
|
|
class="btn-ghost !p-2"
|
|
:class="{ 'text-primary!': store.repeatMode !== 'none' }"
|
|
aria-label="Répéter"
|
|
@click="store.toggleRepeat()"
|
|
>
|
|
<div
|
|
:class="store.repeatMode === 'one' ? 'i-lucide-repeat-1' : 'i-lucide-repeat'"
|
|
class="h-4 w-4"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const store = usePlayerStore()
|
|
const { togglePlayPause, playNext, playPrev } = useAudioPlayer()
|
|
const { toggleShuffle } = usePlaylist()
|
|
</script>
|