initiation librodrome
This commit is contained in:
Yvv
61
app/components/player/PlayerControls.vue
Normal file
61
app/components/player/PlayerControls.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<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>
|
||||
53
app/components/player/PlayerModeToggle.vue
Normal file
53
app/components/player/PlayerModeToggle.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="flex items-center gap-2 rounded-full bg-surface-200 p-1">
|
||||
<button
|
||||
class="mode-btn"
|
||||
:class="{ active: store.isGuidedMode }"
|
||||
@click="setMode('guided')"
|
||||
>
|
||||
<div class="i-lucide-book-open h-3.5 w-3.5" />
|
||||
<span class="hidden sm:inline">Guidé</span>
|
||||
</button>
|
||||
<button
|
||||
class="mode-btn"
|
||||
:class="{ active: !store.isGuidedMode }"
|
||||
@click="setMode('free')"
|
||||
>
|
||||
<div class="i-lucide-headphones h-3.5 w-3.5" />
|
||||
<span class="hidden sm:inline">Libre</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PlayerMode } from '~/types/player'
|
||||
|
||||
const store = usePlayerStore()
|
||||
|
||||
function setMode(mode: PlayerMode) {
|
||||
store.setMode(mode)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mode-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: hsl(0 0% 100% / 0.5);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.mode-btn:hover {
|
||||
color: hsl(0 0% 100% / 0.8);
|
||||
}
|
||||
|
||||
.mode-btn.active {
|
||||
background: hsl(12 76% 48%);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
159
app/components/player/PlayerPersistent.vue
Normal file
159
app/components/player/PlayerPersistent.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<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>
|
||||
52
app/components/player/PlayerPlaylist.vue
Normal file
52
app/components/player/PlayerPlaylist.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="max-h-80 overflow-y-auto p-4">
|
||||
<h3 class="mb-3 font-display text-sm font-semibold uppercase tracking-wider text-white/50">
|
||||
Playlist
|
||||
</h3>
|
||||
<ul class="flex flex-col gap-1">
|
||||
<li
|
||||
v-for="song in store.playlist"
|
||||
:key="song.id"
|
||||
class="flex cursor-pointer items-center gap-3 rounded-lg p-2 transition-colors hover:bg-white/5"
|
||||
:class="{ 'bg-primary/10 text-primary': song.id === store.currentSong?.id }"
|
||||
@click="playSong(song)"
|
||||
>
|
||||
<span class="font-mono text-xs text-white/30 w-6 text-right">
|
||||
{{ store.playlist.indexOf(song) + 1 }}
|
||||
</span>
|
||||
<div
|
||||
v-if="song.id === store.currentSong?.id && store.isPlaying"
|
||||
class="i-lucide-volume-2 h-4 w-4 flex-shrink-0 text-primary"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="i-lucide-music h-4 w-4 flex-shrink-0 text-white/30"
|
||||
/>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm">{{ song.title }}</p>
|
||||
<p class="truncate text-xs text-white/40">{{ song.artist }}</p>
|
||||
</div>
|
||||
<span class="font-mono text-xs text-white/30">
|
||||
{{ formatDuration(song.duration) }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Song } from '~/types/song'
|
||||
|
||||
const store = usePlayerStore()
|
||||
const { playSongFromPlaylist } = usePlaylist()
|
||||
|
||||
function playSong(song: Song) {
|
||||
playSongFromPlaylist(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>
|
||||
48
app/components/player/PlayerProgress.vue
Normal file
48
app/components/player/PlayerProgress.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div
|
||||
class="player-progress group relative h-1 w-full cursor-pointer rounded-full bg-white/10 transition-all hover:h-2"
|
||||
@click="handleSeek"
|
||||
@mousedown="startDrag"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-y-0 left-0 rounded-full bg-primary transition-[width] duration-75"
|
||||
:style="{ width: `${store.progress}%` }"
|
||||
/>
|
||||
<div
|
||||
class="absolute top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-white opacity-0 shadow-md transition-opacity group-hover:opacity-100"
|
||||
:style="{ left: `calc(${store.progress}% - 6px)` }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const store = usePlayerStore()
|
||||
const { seek } = useAudioPlayer()
|
||||
|
||||
function handleSeek(e: MouseEvent) {
|
||||
const el = e.currentTarget as HTMLElement
|
||||
const rect = el.getBoundingClientRect()
|
||||
const percent = (e.clientX - rect.left) / rect.width
|
||||
const time = percent * store.duration
|
||||
seek(time)
|
||||
}
|
||||
|
||||
function startDrag(e: MouseEvent) {
|
||||
const el = e.currentTarget as HTMLElement
|
||||
|
||||
const onMove = (ev: MouseEvent) => {
|
||||
const rect = el.getBoundingClientRect()
|
||||
const percent = Math.max(0, Math.min(1, (ev.clientX - rect.left) / rect.width))
|
||||
const time = percent * store.duration
|
||||
seek(time)
|
||||
}
|
||||
|
||||
const onUp = () => {
|
||||
document.removeEventListener('mousemove', onMove)
|
||||
document.removeEventListener('mouseup', onUp)
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', onMove)
|
||||
document.addEventListener('mouseup', onUp)
|
||||
}
|
||||
</script>
|
||||
34
app/components/player/PlayerTrackInfo.vue
Normal file
34
app/components/player/PlayerTrackInfo.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<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>
|
||||
91
app/components/player/PlayerVisualizer.vue
Normal file
91
app/components/player/PlayerVisualizer.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<canvas
|
||||
ref="canvasRef"
|
||||
class="h-12 w-full rounded-lg opacity-60"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
||||
const store = usePlayerStore()
|
||||
const { getAudio } = useAudioPlayer()
|
||||
|
||||
let audioContext: AudioContext | null = null
|
||||
let analyser: AnalyserNode | null = null
|
||||
let source: MediaElementAudioSourceNode | null = null
|
||||
let animId: number | null = null
|
||||
let connected = false
|
||||
|
||||
function initAnalyser() {
|
||||
if (connected || !canvasRef.value) return
|
||||
|
||||
try {
|
||||
const audio = getAudio()
|
||||
audioContext = new AudioContext()
|
||||
analyser = audioContext.createAnalyser()
|
||||
analyser.fftSize = 64
|
||||
source = audioContext.createMediaElementSource(audio)
|
||||
source.connect(analyser)
|
||||
analyser.connect(audioContext.destination)
|
||||
connected = true
|
||||
}
|
||||
catch {
|
||||
// Web Audio API might not be available
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
if (!canvasRef.value || !analyser) {
|
||||
animId = requestAnimationFrame(draw)
|
||||
return
|
||||
}
|
||||
|
||||
const canvas = canvasRef.value
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) return
|
||||
|
||||
const bufferLength = analyser.frequencyBinCount
|
||||
const dataArray = new Uint8Array(bufferLength)
|
||||
analyser.getByteFrequencyData(dataArray)
|
||||
|
||||
canvas.width = canvas.offsetWidth * window.devicePixelRatio
|
||||
canvas.height = canvas.offsetHeight * window.devicePixelRatio
|
||||
ctx.scale(window.devicePixelRatio, window.devicePixelRatio)
|
||||
|
||||
const width = canvas.offsetWidth
|
||||
const height = canvas.offsetHeight
|
||||
|
||||
ctx.clearRect(0, 0, width, height)
|
||||
|
||||
const barWidth = width / bufferLength
|
||||
const gap = 2
|
||||
|
||||
for (let i = 0; i < bufferLength; i++) {
|
||||
const barHeight = (dataArray[i] / 255) * height
|
||||
const x = i * (barWidth + gap)
|
||||
|
||||
const gradient = ctx.createLinearGradient(0, height, 0, height - barHeight)
|
||||
gradient.addColorStop(0, 'hsl(12, 76%, 48%)')
|
||||
gradient.addColorStop(1, 'hsl(36, 80%, 52%)')
|
||||
|
||||
ctx.fillStyle = gradient
|
||||
ctx.fillRect(x, height - barHeight, barWidth, barHeight)
|
||||
}
|
||||
|
||||
animId = requestAnimationFrame(draw)
|
||||
}
|
||||
|
||||
watch(() => store.isPlaying, (playing) => {
|
||||
if (playing) {
|
||||
initAnalyser()
|
||||
if (!animId) draw()
|
||||
if (audioContext?.state === 'suspended') {
|
||||
audioContext.resume()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (animId) cancelAnimationFrame(animId)
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user