160 lines
3.8 KiB
Vue
160 lines
3.8 KiB
Vue
<template>
|
|
<Transition name="player-slide">
|
|
<div
|
|
v-if="store.currentSong"
|
|
class="player-bar fixed inset-x-0 bottom-0 z-70 border-t border-white/8 bg-surface-600/80 backdrop-blur-xl"
|
|
>
|
|
<!-- Expanded panel -->
|
|
<Transition name="panel-expand">
|
|
<div v-if="store.isExpanded" class="border-b border-white/8">
|
|
<div class="container-content grid gap-4 p-4 md:grid-cols-2">
|
|
<PlayerVisualizer />
|
|
<PlayerPlaylist />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
|
|
<!-- Progress bar (top of player) -->
|
|
<PlayerProgress />
|
|
|
|
<!-- Main player bar -->
|
|
<div class="container-content flex items-center gap-4 px-4 py-2">
|
|
<!-- Track info -->
|
|
<div class="flex-1 min-w-0">
|
|
<PlayerTrackInfo />
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<div class="flex items-center gap-4">
|
|
<PlayerControls />
|
|
</div>
|
|
|
|
<!-- Right section: mode + volume + expand -->
|
|
<div class="hidden md:flex items-center gap-3 flex-shrink-0">
|
|
<PlayerModeToggle />
|
|
|
|
<!-- Volume -->
|
|
<div class="flex items-center gap-2">
|
|
<button class="btn-ghost !p-1" @click="toggleMute">
|
|
<div :class="volumeIcon" class="h-4 w-4" />
|
|
</button>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
:value="store.volume"
|
|
class="volume-slider w-20"
|
|
@input="handleVolumeChange"
|
|
>
|
|
</div>
|
|
|
|
<!-- Time display -->
|
|
<span class="font-mono text-xs text-white/40 w-24 text-center">
|
|
{{ store.formattedCurrentTime }} / {{ store.formattedDuration }}
|
|
</span>
|
|
|
|
<!-- Expand toggle -->
|
|
<button
|
|
class="btn-ghost !p-2"
|
|
:aria-label="store.isExpanded ? 'Réduire' : 'Développer'"
|
|
@click="store.toggleExpanded()"
|
|
>
|
|
<div :class="store.isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'" class="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const store = usePlayerStore()
|
|
const { setVolume } = useAudioPlayer()
|
|
|
|
// Initialize media session
|
|
useMediaSession()
|
|
|
|
let previousVolume = 0.8
|
|
|
|
const volumeIcon = computed(() => {
|
|
if (store.volume === 0) return 'i-lucide-volume-x'
|
|
if (store.volume < 0.3) return 'i-lucide-volume'
|
|
if (store.volume < 0.7) return 'i-lucide-volume-1'
|
|
return 'i-lucide-volume-2'
|
|
})
|
|
|
|
function handleVolumeChange(e: Event) {
|
|
const value = parseFloat((e.target as HTMLInputElement).value)
|
|
setVolume(value)
|
|
}
|
|
|
|
function toggleMute() {
|
|
if (store.volume > 0) {
|
|
previousVolume = store.volume
|
|
setVolume(0)
|
|
}
|
|
else {
|
|
setVolume(previousVolume)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.player-slide-enter-active,
|
|
.player-slide-leave-active {
|
|
transition: transform 0.3s var(--ease-out-expo);
|
|
}
|
|
|
|
.player-slide-enter-from,
|
|
.player-slide-leave-to {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
.panel-expand-enter-active,
|
|
.panel-expand-leave-active {
|
|
transition: all 0.3s var(--ease-out-expo);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel-expand-enter-from,
|
|
.panel-expand-leave-to {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.panel-expand-enter-to,
|
|
.panel-expand-leave-from {
|
|
max-height: 400px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.volume-slider {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: 4px;
|
|
background: hsl(0 0% 100% / 0.15);
|
|
border-radius: 2px;
|
|
outline: none;
|
|
}
|
|
|
|
.volume-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.volume-slider::-moz-range-thumb {
|
|
width: 12px;
|
|
height: 12px;
|
|
background: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|