yeah
This commit is contained in:
valere
@@ -1,399 +0,0 @@
|
||||
<template>
|
||||
<article class="box box-scene z-10" ref="scene">
|
||||
<div ref="domBox" class="box-object" :class="{ 'is-draggable': isDraggable }">
|
||||
<div class="face front relative" ref="frontFace">
|
||||
<img v-if="isCompilation" class="cover absolute" :src="`/${box.id}/${box.activeSide}/cover.jpg`" alt="" />
|
||||
<div v-else class="size-full flex flex-col justify-center items-center text-7xl text-black"
|
||||
v-html="box.description" />
|
||||
<CinemaScreen />
|
||||
</div>
|
||||
<div class="face back flex flex-row flex-wrap items-start p-4 overflow-hidden"
|
||||
:class="{ 'overflow-y-scroll': !isCompilation }" ref="backFace">
|
||||
<!-- <li class="list-none text-xxs w-1/2 flex flex-row"
|
||||
v-for="track in dataStore.getTracksByboxId(box.id, box.activeSide)" :key="track.id" :track="track">
|
||||
<span class="text-slate-700" v-if="isNotManifesto"> {{ track.order }}. </span>
|
||||
<p class="text-left text-slate-700">
|
||||
<i class="text-slate-950">
|
||||
{{ track.title }}
|
||||
</i>
|
||||
<br />
|
||||
{{ track.artist.name }}
|
||||
</p>
|
||||
</li> -->
|
||||
</div>
|
||||
<div class="face right" ref="rightFace" />
|
||||
<div class="face left" ref="leftFace" />
|
||||
<div class="face top" ref="topFace">
|
||||
<template v-if="isCompilation">
|
||||
<img class="logo h-full p-3" src="/logo.svg" alt="" />
|
||||
<img class="absolute block h-10" style="left: 5%" :src="`/${box.id}/${box.activeSide}/title.svg`" alt="" />
|
||||
</template>
|
||||
<template v-if="box.type === 'playlist'">
|
||||
<span class="absolute block h-1/2 right-6 text-black"> ♠♦♣♥</span>
|
||||
<span class="absolute block h-1/2 text-black" style="left: 5%">
|
||||
{{ box.name }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="face bottom" ref="bottomFace" />
|
||||
</div>
|
||||
<slot></slot>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
|
||||
import type { Box } from '~~/types/types'
|
||||
import { useDataStore } from '~/store/data'
|
||||
|
||||
interface Props {
|
||||
box: Box
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {})
|
||||
|
||||
const { $isMobile } = useNuxtApp()
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const isDraggable = computed(() => !['box-list', 'box-hidden'].includes(props.box.state))
|
||||
const isNotManifesto = computed(() => !props.box.id.startsWith('ES00'))
|
||||
const isCompilation = computed(() => props.box.type === 'compilation')
|
||||
|
||||
// --- Réfs ---
|
||||
const scene = ref<HTMLElement>()
|
||||
const domBox = ref<HTMLElement>()
|
||||
const frontFace = ref<HTMLElement>()
|
||||
const backFace = ref<HTMLElement>()
|
||||
const rightFace = ref<HTMLElement>()
|
||||
const leftFace = ref<HTMLElement>()
|
||||
const topFace = ref<HTMLElement>()
|
||||
const bottomFace = ref<HTMLElement>()
|
||||
|
||||
// --- Angles ---
|
||||
const rotateX = ref(0)
|
||||
const rotateY = ref(0)
|
||||
const rotateZ = ref(0)
|
||||
|
||||
// --- Drag + inertie ---
|
||||
let dragging = false
|
||||
let lastPointer = { x: 0, y: 0, time: 0 }
|
||||
let velocity = { x: 0, y: 0 }
|
||||
let raf: number | null = null
|
||||
|
||||
const sensitivity = $isMobile ? 0.5 : 0.15
|
||||
const friction = 0.95
|
||||
const minVelocity = 0.02
|
||||
const enableInertia = true
|
||||
|
||||
// --- Transformations ---
|
||||
function applyTransform(duration = 0.5) {
|
||||
if (!domBox.value) return
|
||||
rotateX.value = Math.round(rotateX.value)
|
||||
rotateY.value = Math.round(rotateY.value)
|
||||
rotateZ.value = Math.round(rotateZ.value)
|
||||
|
||||
domBox.value.style.transition = `transform ${duration}s ease`
|
||||
domBox.value.style.transform = `rotateX(${rotateX.value}deg) rotateY(${rotateY.value}deg) rotateZ(${rotateZ.value}deg)`
|
||||
}
|
||||
|
||||
// --- Gestion BoxState ---
|
||||
function applyBoxState() {
|
||||
switch (props.box.state) {
|
||||
case 'box-list':
|
||||
rotateX.value = 76
|
||||
rotateY.value = 0
|
||||
rotateZ.value = 150
|
||||
break
|
||||
case 'box-selected':
|
||||
rotateX.value = -20
|
||||
rotateY.value = 20
|
||||
rotateZ.value = 0
|
||||
break
|
||||
case 'box-hidden':
|
||||
rotateX.value = 76
|
||||
rotateY.value = 0
|
||||
rotateZ.value = 150
|
||||
break
|
||||
}
|
||||
applyTransform(0.8) // transition fluide
|
||||
}
|
||||
|
||||
// --- Couleurs ---
|
||||
function applyColor() {
|
||||
if (!frontFace.value || !backFace.value || !leftFace.value || !topFace.value || !bottomFace.value)
|
||||
return
|
||||
|
||||
frontFace.value.style.background = props.box.color2
|
||||
backFace.value.style.background = `linear-gradient(to top, ${props.box.color1}, ${props.box.color2})`
|
||||
leftFace.value.style.background = `linear-gradient(to top, ${props.box.color1}, ${props.box.color2})`
|
||||
rightFace.value.style.background = `linear-gradient(to top, ${props.box.color1}, ${props.box.color2})`
|
||||
topFace.value.style.background = `linear-gradient(to top, ${props.box.color2}, ${props.box.color2})`
|
||||
bottomFace.value.style.background = props.box.color1
|
||||
}
|
||||
|
||||
// --- Rotation complète ---
|
||||
function rotateBox() {
|
||||
if (!domBox.value) return
|
||||
|
||||
rotateX.value = -20
|
||||
|
||||
|
||||
rotateY.value = rotateY.value === 20 ? 380 : 20
|
||||
|
||||
applyTransform(0.8)
|
||||
}
|
||||
|
||||
// --- Inertie ---
|
||||
function tickInertia() {
|
||||
if (!enableInertia) return
|
||||
|
||||
velocity.x *= friction
|
||||
velocity.y *= friction
|
||||
|
||||
rotateX.value += velocity.y
|
||||
rotateY.value += velocity.x
|
||||
rotateX.value = Math.max(-80, Math.min(80, rotateX.value))
|
||||
|
||||
applyTransform(0.05) // court duration pour inertie fluide
|
||||
|
||||
if (Math.abs(velocity.x) > minVelocity || Math.abs(velocity.y) > minVelocity) {
|
||||
raf = requestAnimationFrame(tickInertia)
|
||||
} else {
|
||||
raf = null
|
||||
}
|
||||
}
|
||||
|
||||
// --- Pointer events ---
|
||||
let listenersAttached = false
|
||||
|
||||
const down = (ev: PointerEvent) => {
|
||||
ev.preventDefault()
|
||||
dragging = true
|
||||
domBox.value?.setPointerCapture(ev.pointerId)
|
||||
lastPointer = { x: ev.clientX, y: ev.clientY, time: performance.now() }
|
||||
velocity = { x: 0, y: 0 }
|
||||
if (raf) {
|
||||
cancelAnimationFrame(raf)
|
||||
raf = null
|
||||
}
|
||||
}
|
||||
|
||||
const move = (ev: PointerEvent) => {
|
||||
if (!dragging) return
|
||||
ev.preventDefault()
|
||||
const now = performance.now()
|
||||
const dx = ev.clientX - lastPointer.x
|
||||
const dy = ev.clientY - lastPointer.y
|
||||
const dt = Math.max(1, now - lastPointer.time)
|
||||
|
||||
rotateY.value += dx * sensitivity
|
||||
rotateX.value -= dy * sensitivity
|
||||
rotateX.value = Math.max(-80, Math.min(80, rotateX.value))
|
||||
|
||||
velocity.x = (dx / dt) * 16 * sensitivity
|
||||
velocity.y = (-dy / dt) * 16 * sensitivity
|
||||
|
||||
lastPointer = { x: ev.clientX, y: ev.clientY, time: now }
|
||||
applyTransform(0) // immédiat pendant drag
|
||||
}
|
||||
|
||||
const end = (ev: PointerEvent) => {
|
||||
if (!dragging) return
|
||||
dragging = false
|
||||
try {
|
||||
domBox.value?.releasePointerCapture(ev.pointerId)
|
||||
} catch { }
|
||||
if (enableInertia && (Math.abs(velocity.x) > minVelocity || Math.abs(velocity.y) > minVelocity)) {
|
||||
if (!raf) raf = requestAnimationFrame(tickInertia)
|
||||
}
|
||||
}
|
||||
|
||||
function addListeners() {
|
||||
if (!domBox.value || listenersAttached) return
|
||||
domBox.value.addEventListener('pointerdown', down)
|
||||
domBox.value.addEventListener('pointermove', move)
|
||||
domBox.value.addEventListener('pointerup', end)
|
||||
domBox.value.addEventListener('pointercancel', end)
|
||||
domBox.value.addEventListener('pointerleave', end)
|
||||
listenersAttached = true
|
||||
}
|
||||
|
||||
function removeListeners() {
|
||||
if (!domBox.value || !listenersAttached) return
|
||||
domBox.value.removeEventListener('pointerdown', down)
|
||||
domBox.value.removeEventListener('pointermove', move)
|
||||
domBox.value.removeEventListener('pointerup', end)
|
||||
domBox.value.removeEventListener('pointercancel', end)
|
||||
domBox.value.removeEventListener('pointerleave', end)
|
||||
listenersAttached = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
applyColor()
|
||||
applyBoxState()
|
||||
if (isDraggable.value) addListeners()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
cancelAnimationFrame(raf!)
|
||||
removeListeners()
|
||||
})
|
||||
|
||||
// --- Watchers ---
|
||||
watch(
|
||||
() => props.box.activeSide,
|
||||
() => rotateBox()
|
||||
)
|
||||
watch(
|
||||
() => props.box.state,
|
||||
() => applyBoxState()
|
||||
)
|
||||
watch(
|
||||
() => props.box,
|
||||
() => applyColor(),
|
||||
{ deep: true }
|
||||
)
|
||||
watch(
|
||||
isDraggable,
|
||||
(enabled) => (enabled ? addListeners() : removeListeners())
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
--size: 7px;
|
||||
--height: calc(var(--size) * (100 / 3));
|
||||
--width: calc(var(--size) * 50);
|
||||
--depth: calc(var(--size) * 10);
|
||||
transition:
|
||||
height 0.5s ease,
|
||||
opacity 0.5s ease;
|
||||
|
||||
&.box-list {
|
||||
height: calc(var(--size) * 20);
|
||||
@apply hover:scale-105 hover:z-20 focus-visible:scale-105 focus-visible:z-20 focus-visible:outline-none;
|
||||
transition: all 0.5s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
&.box-selected {
|
||||
height: calc(var(--size) * 34);
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
&-scene {
|
||||
perspective: 2000px;
|
||||
}
|
||||
|
||||
&.box-hidden {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&-object {
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
margin: auto;
|
||||
user-select: none;
|
||||
|
||||
.box-list & {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.box-selected & {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
.face {
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
backface-visibility: hidden;
|
||||
box-sizing: border-box;
|
||||
// border: 1px solid black;
|
||||
}
|
||||
|
||||
.front,
|
||||
.back {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.face.top,
|
||||
.face.bottom {
|
||||
width: var(--width);
|
||||
height: var(--depth);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.face.left,
|
||||
.face.right {
|
||||
width: var(--depth);
|
||||
height: var(--height);
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
.face.front {
|
||||
transform: translateX(0) translateY(0) translateZ(var(--depth));
|
||||
}
|
||||
|
||||
.face.back {
|
||||
transform: rotateY(180deg) translateX(0) translateY(0) translateZ(0);
|
||||
}
|
||||
|
||||
.face.right {
|
||||
transform: rotateY(90deg) translateX(calc(var(--depth) * -1)) translateY(0px) translateZ(var(--width));
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
transform: rotateY(-90deg) translateX(calc(var(--depth) / 2)) translateY(0) translateZ(calc(var(--depth) / 2));
|
||||
}
|
||||
|
||||
.face.top {
|
||||
transform: rotateX(90deg) translateX(0px) translateY(calc(var(--depth) / 2)) translateZ(calc(var(--depth) / 2));
|
||||
}
|
||||
|
||||
.face.top>* {
|
||||
@apply rotate-180;
|
||||
}
|
||||
|
||||
.face.bottom {
|
||||
transform: rotateX(-90deg) translateX(0px) translateY(calc(var(--depth) * -0.5)) translateZ(calc(var(--height) - var(--depth) / 2));
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Deck fade in/out purely in CSS */
|
||||
.box-page {
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.box-selected .box-page {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
:deep(.indice) {
|
||||
@apply text-xl p-2 relative bg-black/50 rounded-full backdrop-blur-md;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<div class="boxes" :class="{ 'box-selected': uiStore.isBoxSelected }">
|
||||
<box v-for="(box, i) in dataStore.boxes" :key="box.id" :tabindex="dataStore.boxes.length - i"
|
||||
:box="getBoxToDisplay(box)" @click="openBox(box)" class="text-center" :class="box.state" :id="box.id">
|
||||
<template v-if="box.state === 'box-selected'">
|
||||
<template v-if="box.type === 'compilation'">
|
||||
<playButton @click.stop="playSelectedBox(box)" :objectToPlay="box" class="relative z-40 m-auto" />
|
||||
<deckCompilation :box="getBoxToDisplay(box)" class="box-page" :key="`${box.id}-${box.activeSide}`"
|
||||
@click.stop />
|
||||
</template>
|
||||
<deckPlaylist :box="box" class="box-page" v-if="box.type === 'playlist'" @click.stop />
|
||||
</template>
|
||||
</box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Box } from '~~/types/types'
|
||||
import { useDataStore } from '~/store/data'
|
||||
import { usePlayerStore } from '~/store/player'
|
||||
import { useUiStore } from '~/store/ui'
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const playerStore = usePlayerStore()
|
||||
const uiStore = useUiStore()
|
||||
|
||||
// Retourne la box avec les propriétés du côté sélectionné si c'est une compilation
|
||||
function getBoxToDisplay(box: Box) {
|
||||
if (box.type !== 'compilation' || !('sides' in box)) return box
|
||||
|
||||
const side = box.sides?.[box.activeSide]
|
||||
if (!side) return box
|
||||
|
||||
return {
|
||||
...box,
|
||||
...side
|
||||
}
|
||||
}
|
||||
|
||||
function openBox(box: Box) {
|
||||
if (box.state !== 'box-selected') {
|
||||
uiStore.selectBox(box.id)
|
||||
// Scroll to the top smoothly
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function playSelectedBox(box: Box) {
|
||||
playerStore.playBox(box)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.boxes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
transition: margin-top 0.5s ease;
|
||||
min-height: 100vh;
|
||||
|
||||
&.box-selected {
|
||||
justify-content: flex-start;
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
.play-button {
|
||||
position: relative;
|
||||
z-index: 40;
|
||||
bottom: -50%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.box-selected .play-button {
|
||||
opacity: 1;
|
||||
z-index: 20;
|
||||
bottom: 20%;
|
||||
transition: bottom 0.7s ease, opacity 0.7s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,169 +0,0 @@
|
||||
<template>
|
||||
<div class="bucket" ref="bucket" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
|
||||
@dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
|
||||
<div v-if="tracks.length === 0" class="bucket-empty">
|
||||
Drop cards here
|
||||
</div>
|
||||
<draggable v-else v-model="tracks" item-key="id" class="bucket-cards" @start="handleDragStart" @end="handleDragEnd"
|
||||
:touch-start-threshold="50" :component-data="{
|
||||
tag: 'div',
|
||||
type: 'transition-group',
|
||||
name: 'list'
|
||||
}">
|
||||
<template #item="{ element: track }">
|
||||
<div class="bucket-card-wrapper">
|
||||
<card :track="track" tabindex="0" is-face-up class="bucket-card"
|
||||
@card-click="playerStore.playPlaylistTrack(track)" />
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineEmits, onMounted } from 'vue'
|
||||
import draggable from 'vuedraggable'
|
||||
import { useCardStore } from '~/store/card'
|
||||
import { usePlayerStore } from '~/store/player'
|
||||
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'card-dropped', track: any): void
|
||||
(e: 'update:modelValue', value: any[]): void
|
||||
}>()
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue?: any[]
|
||||
boxId?: string
|
||||
}>()
|
||||
|
||||
const cardStore = useCardStore()
|
||||
const playerStore = usePlayerStore()
|
||||
const isDragOver = ref(false)
|
||||
const drag = ref(false)
|
||||
const bucket = ref()
|
||||
|
||||
// Utilisation du bucket du store comme source de vérité
|
||||
const tracks = computed({
|
||||
get: () => cardStore.bucket,
|
||||
set: (value) => {
|
||||
// Update the store when the order changes
|
||||
cardStore.updateBucketOrder(value)
|
||||
}
|
||||
})
|
||||
|
||||
// Charger les données du localStorage au montage
|
||||
onMounted(() => {
|
||||
cardStore.loadBucketFromLocalStorage()
|
||||
})
|
||||
|
||||
// Gestion du drag and drop desktop
|
||||
const handleDragStart = (event: { item: HTMLElement }) => {
|
||||
drag.value = true
|
||||
// Émettre un événement personnalisé pour indiquer qu'un glisser a commencé depuis le bucket
|
||||
document.dispatchEvent(new CustomEvent('bucket-drag-start'))
|
||||
}
|
||||
|
||||
const handleDragEnd = (event: { item: HTMLElement; newIndex: number; oldIndex: number }) => {
|
||||
drag.value = false
|
||||
isDragOver.value = false
|
||||
// Update the store with the new order if the position changed
|
||||
if (event.newIndex !== event.oldIndex) {
|
||||
// The store will handle the reordering automatically through the v-model binding
|
||||
}
|
||||
}
|
||||
|
||||
const onDragEnter = (e: DragEvent) => {
|
||||
e.preventDefault()
|
||||
isDragOver.value = true
|
||||
}
|
||||
|
||||
const onDragOver = (e: DragEvent) => {
|
||||
e.preventDefault()
|
||||
isDragOver.value = true
|
||||
}
|
||||
|
||||
const onDragLeave = () => {
|
||||
isDragOver.value = false
|
||||
}
|
||||
|
||||
const onDrop = (e: DragEvent) => {
|
||||
isDragOver.value = false
|
||||
const cardData = e.dataTransfer?.getData('application/json')
|
||||
if (cardData) {
|
||||
try {
|
||||
const track = JSON.parse(cardData)
|
||||
cardStore.addToBucket(track)
|
||||
} catch (e) {
|
||||
console.error('Erreur lors du traitement de la carte déposée', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// Écouter aussi les événements tactiles personnalisés
|
||||
bucket.value?.addEventListener('card-dropped-touch', (e: CustomEvent) => {
|
||||
emit('card-dropped', e.detail)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bucket {
|
||||
min-height: 200px;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.bucket.drag-over {
|
||||
border-color: #4CAF50;
|
||||
background-color: rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.bucket-empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.bucket-cards {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bucket-card {
|
||||
transition: transform 0.2s;
|
||||
cursor: move;
|
||||
touch-action: none;
|
||||
/* Important pour le touch */
|
||||
}
|
||||
|
||||
.bucket-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.bucket-card:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.bucket-card-wrapper {
|
||||
width: 70px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.bucket:hover,
|
||||
.card-dragging {
|
||||
border: 2px dashed #ccc;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
|
||||
.bucket-card-wrapper {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +1,39 @@
|
||||
<template>
|
||||
<article v-bind="attrs" :role="props.role" :draggable="isFaceUp" :class="[
|
||||
<article :role="props.role" :class="[
|
||||
'card cursor-pointer',
|
||||
isFaceUp ? 'face-up' : 'face-down',
|
||||
{ 'current-track': playerStore.currentTrack?.id === track.id },
|
||||
{ 'is-dragging': isDragging }
|
||||
]" :tabindex="props.tabindex" :aria-disabled="false" @click.stop="handleClick" @keydown.enter.stop="handleClick"
|
||||
@keydown.space.prevent.stop="handleClick" @dragstart="handleDragStart" @dragend="handleDragEnd"
|
||||
@drag="handleDragMove" @touchstart.passive="!isFaceUp" @touchmove.passive="!isFaceUp">
|
||||
isFaceUp ? 'face-up' : 'face-down'
|
||||
]" :tabindex="props.tabindex" :aria-disabled="false" @click="$emit('click', $event)"
|
||||
@keydown.enter="$emit('click', $event)" @keydown.space.prevent="$emit('click', $event)">
|
||||
<div class="flip-inner" ref="cardElement">
|
||||
<!-- Face-Up -->
|
||||
<main
|
||||
class="face-up backdrop-blur-sm border-2 z-10 card w-56 h-80 p-3 hover:shadow-xl hover:scale-110 transition-all rounded-2xl shadow-lg flex flex-col overflow-hidden">
|
||||
|
||||
<div v-if="isPlaylistTrack" class="flex items-center justify-center size-7 absolute top-7 right-7"
|
||||
@click.stop="clickCardSymbol">
|
||||
<div class="flex items-center justify-center size-7 absolute top-7 right-7">
|
||||
<div class="suit text-7xl absolute"
|
||||
:class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]">
|
||||
<img draggable="false" :src="`/${props.track.card?.suit}.svg`" />
|
||||
:class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.card?.suit]">
|
||||
<img :src="`/${props.card?.suit}.svg`" />
|
||||
</div>
|
||||
<div class="rank text-white font-bold absolute -mt-1">
|
||||
{{ props.track.card?.rank }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex items-center justify-center size-7 absolute top-6 left-6">
|
||||
<div class="rank text-white font-bold absolute -mt-1">
|
||||
{{ props.track.order }}
|
||||
{{ props.card?.rank }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cover -->
|
||||
<figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-xl cursor-pointer">
|
||||
<playButton :objectToPlay="track" />
|
||||
<img draggable="false" v-if="isFaceUp" :src="coverUrl" alt="Pochette de l'album" loading="lazy"
|
||||
<playButton :objectToPlay="card" />
|
||||
<img v-if="isFaceUp" :src="props.card.url_image" alt="Pochette de l'album" loading="lazy"
|
||||
class="w-full h-full object-cover object-center" />
|
||||
</figure>
|
||||
|
||||
<!-- Body -->
|
||||
<div
|
||||
class="card-body p-3 text-center bg-white rounded-b-xl opacity-0 -mt-16 hover:opacity-100 hover:-mt-0 transition-all duration-300">
|
||||
<div v-if="isOrder" class="label">
|
||||
{{ props.track.order }}
|
||||
</div>
|
||||
<h2 class="select-text text-sm text-neutral-500 first-letter:uppercase truncate">
|
||||
{{ props.track.title || 'title' }}
|
||||
{{ props.card.title || 'title' }}
|
||||
</h2>
|
||||
<p v-if="isPlaylistTrack && track.artist && typeof track.artist === 'object'"
|
||||
class="select-text text-base text-neutral-800 font-bold capitalize truncate">
|
||||
{{ track.artist.name || 'artist' }}
|
||||
</p>
|
||||
<p v-else-if="isPlaylistTrack" class="select-text text-base text-neutral-800 font-bold capitalize truncate">
|
||||
{{ typeof track.artist === 'string' ? track.artist : 'artist' }}
|
||||
<p class="select-text text-base text-neutral-800 font-bold capitalize truncate">
|
||||
{{ props.card.artist || 'artist' }}
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
@@ -60,317 +43,35 @@
|
||||
class="face-down backdrop-blur-sm z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden select-none">
|
||||
<figure class="h-full flex text-center rounded-xl justify-center items-center"
|
||||
:style="{ backgroundColor: cardColor }">
|
||||
<playButton :objectToPlay="track" />
|
||||
<img draggable="false" src="/face-down.svg" />
|
||||
<playButton :objectToPlay="card" />
|
||||
<img src="/face-down.svg" />
|
||||
</figure>
|
||||
</footer>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Clone fantôme unifié pour drag souris ET tactile -->
|
||||
<Teleport to="body">
|
||||
<div v-if="isDragging && touchClone" ref="ghostElement"
|
||||
class="ghost-card fixed pointer-events-none z-[9999] w-56 h-80" :style="{
|
||||
left: touchClone.x + 'px',
|
||||
top: touchClone.y + 'px',
|
||||
transform: 'translate(-50%, -50%)'
|
||||
}">
|
||||
<div class="flip-inner">
|
||||
<main
|
||||
class="face-up backdrop-blur-sm border-2 z-10 card w-56 h-80 p-3 rounded-2xl shadow-2xl flex flex-col overflow-hidden bg-white bg-opacity-90">
|
||||
|
||||
<div v-if="isPlaylistTrack" class="flex items-center justify-center size-7 absolute top-7 left-7">
|
||||
<div class="suit text-7xl absolute"
|
||||
:class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]">
|
||||
<img draggable="false" :src="`/${props.track.card?.suit}.svg`" />
|
||||
</div>
|
||||
<div class="rank text-white font-bold absolute -mt-1">
|
||||
{{ props.track.card?.rank }}
|
||||
</div>
|
||||
</div>
|
||||
<figure class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-xl">
|
||||
<img draggable="false" :src="coverUrl" alt="Pochette de l'album"
|
||||
class="w-full h-full object-cover object-center" />
|
||||
</figure>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<!-- Modal de partage -->
|
||||
<ModalSharer v-if="showModalSharer" ref="modalSharer" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Track } from '~~/types/types'
|
||||
import { usePlayerStore } from '~/store/player'
|
||||
import { useDataStore } from '~/store/data'
|
||||
import { useNuxtApp } from '#app'
|
||||
import ModalSharer from '~/components/ui/ModalSharer.vue'
|
||||
import type { Card } from '~~/types/types'
|
||||
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
track: Track;
|
||||
card: Card;
|
||||
isFaceUp?: boolean;
|
||||
role?: string;
|
||||
tabindex?: string | number;
|
||||
'onUpdate:isFaceUp'?: (value: boolean) => void;
|
||||
}>(), {
|
||||
isFaceUp: true,
|
||||
isFaceUp: false,
|
||||
role: 'button',
|
||||
tabindex: '0'
|
||||
})
|
||||
|
||||
// Use useAttrs to get all other attributes
|
||||
const attrs = useAttrs()
|
||||
import { getYearColor } from '~/utils/colors'
|
||||
|
||||
const modalSharer = ref<InstanceType<typeof ModalSharer> | null>(null)
|
||||
const showModalSharer = ref(false)
|
||||
const cardColor = computed(() => getYearColor(props.card.year || 0))
|
||||
const isRedCard = computed(() => (props.card?.suit === '♥' || props.card?.suit === '♦'))
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:isFaceUp', value: boolean): void;
|
||||
(e: 'cardClick', track: Track): void;
|
||||
(e: 'clickCardSymbol', track: Track): void;
|
||||
(e: 'dragstart', event: DragEvent): void;
|
||||
(e: 'dragend', event: DragEvent): void;
|
||||
(e: 'drag', event: DragEvent): void;
|
||||
(e: 'click', event: MouseEvent): void;
|
||||
}>()
|
||||
|
||||
// Handle click events (mouse and keyboard)
|
||||
const handleClick = (event: MouseEvent | KeyboardEvent) => {
|
||||
if (!isDragging.value && !hasMovedDuringPress.value) {
|
||||
emit('cardClick', props.track);
|
||||
emit('click', event as MouseEvent);
|
||||
}
|
||||
hasMovedDuringPress.value = false;
|
||||
}
|
||||
|
||||
const clickCardSymbol = (event: MouseEvent) => {
|
||||
event.stopPropagation();
|
||||
|
||||
// Afficher la modale
|
||||
showModalSharer.value = true;
|
||||
|
||||
// Donner le focus à la modale après le rendu
|
||||
nextTick(() => {
|
||||
if (modalSharer.value) {
|
||||
modalSharer.value.open(props.track);
|
||||
}
|
||||
});
|
||||
|
||||
emit('clickCardSymbol', props.track);
|
||||
}
|
||||
|
||||
// Handle drag start with proper event emission
|
||||
const handleDragStart = (event: DragEvent) => {
|
||||
if (!props.isFaceUp) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
const { $bodyClass } = useNuxtApp()
|
||||
$bodyClass.add('card-dragging')
|
||||
dragStart(event);
|
||||
emit('dragstart', event);
|
||||
}
|
||||
|
||||
// Handle drag end with proper event emission
|
||||
const handleDragEnd = (event: DragEvent) => {
|
||||
if (!props.isFaceUp) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
const { $bodyClass } = useNuxtApp()
|
||||
$bodyClass.remove('card-dragging')
|
||||
dragEnd(event);
|
||||
emit('dragend', event);
|
||||
}
|
||||
|
||||
// Handle drag move with proper event emission
|
||||
const handleDragMove = (event: DragEvent) => {
|
||||
if (!props.isFaceUp) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
dragMove(event);
|
||||
emit('drag', event);
|
||||
}
|
||||
|
||||
const playerStore = usePlayerStore()
|
||||
const isManifesto = computed(() => props.track.boxId.startsWith('ES00'))
|
||||
const isOrder = computed(() => props.track.order && !isManifesto)
|
||||
const isPlaylistTrack = computed(() => props.track.type === 'playlist')
|
||||
const isRedCard = computed(() => (props.track.card?.suit === '♥' || props.track.card?.suit === '♦'))
|
||||
const dataStore = useDataStore()
|
||||
const cardColor = computed(() => dataStore.getYearColor(props.track.year || 0))
|
||||
const coverUrl = computed(() => props.track.coverId || '/card-dock.svg')
|
||||
|
||||
const isDragging = ref(false)
|
||||
const cardElement = ref<HTMLElement | null>(null)
|
||||
const ghostElement = ref<HTMLElement | null>(null)
|
||||
|
||||
// État unifié pour souris et tactile
|
||||
const touchClone = ref<{ x: number, y: number } | null>(null)
|
||||
const touchStartPos = ref<{ x: number, y: number } | null>(null)
|
||||
const longPressTimer = ref<number | null>(null)
|
||||
const LONG_PRESS_DURATION = 200 // ms
|
||||
const hasMovedDuringPress = ref(false)
|
||||
|
||||
|
||||
// Drag desktop - utilise maintenant ghostElement
|
||||
const dragStart = (event: DragEvent) => {
|
||||
if (event.dataTransfer && cardElement.value) {
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
event.dataTransfer.setData('application/json', JSON.stringify(props.track));
|
||||
|
||||
// Créer une image transparente pour masquer l'image par défaut du navigateur
|
||||
const img = new Image();
|
||||
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
|
||||
event.dataTransfer.setDragImage(img, 0, 0);
|
||||
|
||||
// Activer le clone fantôme
|
||||
isDragging.value = true
|
||||
touchClone.value = {
|
||||
x: event.clientX,
|
||||
y: event.clientY
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Nouveau: suivre le mouvement de la souris pendant le drag
|
||||
const dragMove = (event: DragEvent) => {
|
||||
if (isDragging.value && touchClone.value && event.clientX !== 0 && event.clientY !== 0) {
|
||||
touchClone.value = {
|
||||
x: event.clientX,
|
||||
y: event.clientY
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
const dragEnd = (event: DragEvent) => {
|
||||
isDragging.value = false
|
||||
touchClone.value = null
|
||||
|
||||
if (event.dataTransfer?.dropEffect === 'move' && instance?.vnode?.el?.parentNode) {
|
||||
instance.vnode.el.parentNode.removeChild(instance.vnode.el);
|
||||
const parent = instance.parent;
|
||||
if (parent?.update) {
|
||||
parent.update();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Touch events
|
||||
const touchStart = (event: TouchEvent) => {
|
||||
const touch = event.touches[0];
|
||||
if (!touch) return;
|
||||
|
||||
touchStartPos.value = { x: touch.clientX, y: touch.clientY };
|
||||
hasMovedDuringPress.value = false;
|
||||
|
||||
// Démarrer un timer pour le long press
|
||||
longPressTimer.value = window.setTimeout(() => {
|
||||
startTouchDrag(touch);
|
||||
}, LONG_PRESS_DURATION);
|
||||
}
|
||||
|
||||
const startTouchDrag = (touch: Touch) => {
|
||||
if (!touch) return;
|
||||
|
||||
isDragging.value = true;
|
||||
touchClone.value = {
|
||||
x: touch.clientX,
|
||||
y: touch.clientY
|
||||
};
|
||||
|
||||
// Vibration feedback si disponible
|
||||
if (navigator.vibrate) {
|
||||
navigator.vibrate(50);
|
||||
}
|
||||
}
|
||||
|
||||
const touchMove = (event: TouchEvent) => {
|
||||
const touch = event.touches[0];
|
||||
if (!touch || !longPressTimer.value) return;
|
||||
|
||||
// Annuler le long press si l'utilisateur bouge trop
|
||||
const dx = touch.clientX - (touchStartPos.value?.x || 0);
|
||||
const dy = touch.clientY - (touchStartPos.value?.y || 0);
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance > 10) { // Seuil de tolérance pour un tap
|
||||
clearTimeout(longPressTimer.value)
|
||||
longPressTimer.value = null
|
||||
hasMovedDuringPress.value = true
|
||||
}
|
||||
|
||||
if (isDragging.value && touchClone.value) {
|
||||
event.preventDefault()
|
||||
const touch = event.touches[0]
|
||||
touchClone.value = {
|
||||
x: touch.clientX,
|
||||
y: touch.clientY
|
||||
}
|
||||
|
||||
// Déterminer l'élément sous le doigt
|
||||
checkDropTarget(touch.clientX, touch.clientY)
|
||||
}
|
||||
}
|
||||
|
||||
const touchEnd = (event: TouchEvent) => {
|
||||
// Annuler le timer de long press
|
||||
if (longPressTimer.value) {
|
||||
clearTimeout(longPressTimer.value);
|
||||
longPressTimer.value = null;
|
||||
}
|
||||
|
||||
// Vérifier si c'était un tap simple (pas de déplacement)
|
||||
if (!hasMovedDuringPress.value && touchStartPos.value) {
|
||||
const touch = event.changedTouches[0];
|
||||
if (touch) {
|
||||
const dx = touch.clientX - touchStartPos.value.x;
|
||||
const dy = touch.clientY - touchStartPos.value.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < 10) { // Seuil de tolérance pour un tap
|
||||
handleClick(new MouseEvent('click'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Réinitialiser l'état de glisser-déposer
|
||||
if (isDragging.value) {
|
||||
// Vérifier si on est au-dessus d'une cible de dépôt
|
||||
const touch = event.changedTouches[0];
|
||||
if (touch) {
|
||||
checkDropTarget(touch.clientX, touch.clientY);
|
||||
}
|
||||
}
|
||||
|
||||
// Nettoyer
|
||||
isDragging.value = false;
|
||||
touchClone.value = null;
|
||||
touchStartPos.value = null;
|
||||
hasMovedDuringPress.value = false;
|
||||
}
|
||||
|
||||
const checkDropTarget = (x: number, y: number): HTMLElement | null => {
|
||||
const element = document.elementFromPoint(x, y);
|
||||
if (element) {
|
||||
const dropZone = element.closest('[data-drop-zone]');
|
||||
if (dropZone) {
|
||||
return dropZone as HTMLElement;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// Cleanup
|
||||
onUnmounted(() => {
|
||||
if (longPressTimer.value) {
|
||||
clearTimeout(longPressTimer.value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -391,7 +92,6 @@ onUnmounted(() => {
|
||||
.card {
|
||||
perspective: 1000px;
|
||||
@apply transition-all scale-100 w-56 h-80 min-w-56 min-h-80;
|
||||
touch-action: none;
|
||||
|
||||
.flip-inner {
|
||||
position: relative;
|
||||
@@ -440,7 +140,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.current-track {
|
||||
&.current-card {
|
||||
@apply z-50 scale-110;
|
||||
outline: none;
|
||||
|
||||
@@ -453,7 +153,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.current-track {
|
||||
&.current-card {
|
||||
.play-button {
|
||||
@apply opacity-100;
|
||||
}
|
||||
@@ -474,7 +174,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.play-button {
|
||||
@apply absolute bottom-1/2 top-24 opacity-0 hover:opacity-100;
|
||||
@apply absolute bottom-1/2 top-28 opacity-0 hover:opacity-100;
|
||||
}
|
||||
|
||||
.pochette:active,
|
||||
@@ -498,22 +198,4 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Ghost card styles - maintenant unifié pour souris et tactile */
|
||||
.ghost-card {
|
||||
transition: none;
|
||||
|
||||
.card {
|
||||
@apply shadow-2xl scale-95 rotate-6;
|
||||
|
||||
.play-button,
|
||||
.card-body {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.flip-inner {
|
||||
perspective: 1000px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,3 +0,0 @@
|
||||
<template>
|
||||
<video class="h-full w-full object-cover" ref="video" muted autoplay src=""></video>
|
||||
</template>
|
||||
@@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="data.isLoading" class="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div class="absolute inset-0 bg-black/60 backdrop-blur-md" />
|
||||
<img src="/loader.svg" alt="Loading" class="border-esyellow/30 border-4 relative h-40 w-40 p-6 rounded-full">
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDataStore } from '~/store/data'
|
||||
const data = useDataStore()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +0,0 @@
|
||||
<template>
|
||||
<header class="py-4">
|
||||
<img class="logo w-80" src="/logo.svg" alt="" >
|
||||
<h1 class="text-center">mix-tapes</h1>
|
||||
</header>
|
||||
</template>
|
||||
@@ -1,198 +0,0 @@
|
||||
<template>
|
||||
<div class="platine pointer-events-none" :class="{ 'loading': platineStore.isLoadingTrack, 'mounted': isMounted }"
|
||||
ref="platine">
|
||||
<img class="cover" :src="platineStore.currentTrack?.coverId" />
|
||||
<div class="disc pointer-events-auto fixed bg-transparent" ref="discRef" id="disc">
|
||||
<div class="bobine"
|
||||
:style="{ height: platineStore.progressPercentage + '%', width: platineStore.progressPercentage + '%' }"></div>
|
||||
|
||||
|
||||
<div class="disc-label rounded-full bg-cover bg-center">
|
||||
<img src="/favicon.svg" class="size-1/2 bg-black rounded-full p-5">
|
||||
<div v-if="platineStore.isLoadingTrack" class="loading-indicator">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!platineStore.isLoadingTrack" class="absolute top-1/2 right-8 size-1/12 rounded-full bg-esyellow">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="w-full h-1/5 text-base">
|
||||
{{ platineStore.currentTrack?.title }}
|
||||
<br>
|
||||
{{ platineStore.currentTrack?.artist?.name }}
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue'
|
||||
import { usePlatineStore } from '~/store/platine'
|
||||
import type { Track } from '~~/types/types'
|
||||
|
||||
const props = defineProps<{ track?: Track }>()
|
||||
const platineStore = usePlatineStore()
|
||||
const discRef = ref<HTMLElement>()
|
||||
const platine = ref<HTMLElement>()
|
||||
const isMounted = ref(false)
|
||||
|
||||
// Initialisation du lecteur
|
||||
onMounted(() => {
|
||||
isMounted.value = true
|
||||
if (discRef.value) {
|
||||
platineStore.initPlatine(discRef.value)
|
||||
}
|
||||
})
|
||||
|
||||
// Nettoyage
|
||||
onUnmounted(() => {
|
||||
isMounted.value = false
|
||||
platineStore.cleanup()
|
||||
})
|
||||
|
||||
// Surveillance des changements de piste
|
||||
watch(() => props.track, (newTrack) => {
|
||||
if (newTrack) {
|
||||
platineStore.loadTrack(newTrack)
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.platine {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.card {
|
||||
position: absolute !important;
|
||||
top: -20%;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.disc {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
cursor: grab;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
|
||||
|
||||
.loading & {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.disc.is-scratching {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.disc-label {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
width: 45%;
|
||||
aspect-ratio: 1/1;
|
||||
// background: no-repeat url(/favicon.svg) center center;
|
||||
background-size: 30%;
|
||||
border-radius: 50%;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.disc-middle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: rgb(26, 26, 26);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.button {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: rgb(69, 69, 69);
|
||||
font-size: 0.75rem;
|
||||
padding: 0.4rem;
|
||||
color: #fff;
|
||||
line-height: 1.3;
|
||||
cursor: pointer;
|
||||
will-change: box-shadow;
|
||||
transition:
|
||||
box-shadow 0.2s ease-out,
|
||||
transform 0.05s ease-in;
|
||||
}
|
||||
|
||||
.power.is-active {
|
||||
transform: translate(1px, 2px);
|
||||
color: red;
|
||||
}
|
||||
|
||||
.button[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 100%;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: opacity 3s ease;
|
||||
|
||||
.loading & {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.bobine {
|
||||
@apply bg-slate-900 bg-opacity-50 backdrop-blur absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full;
|
||||
}
|
||||
</style>
|
||||
@@ -12,25 +12,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { usePlatineStore } from '~/store/platine'
|
||||
import type { Box, Track } from '~/../types/types'
|
||||
|
||||
const platineStore = usePlatineStore()
|
||||
const props = defineProps<{ objectToPlay: Box | Track }>()
|
||||
|
||||
const isCurrentTrack = computed(() => {
|
||||
if (!('activeSide' in props.objectToPlay)) {
|
||||
return platineStore.currentTrack?.id === props.objectToPlay.id
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
const isPlaying = computed(() => {
|
||||
return platineStore.isPlaying && isCurrentTrack.value
|
||||
})
|
||||
|
||||
const isLoading = computed(() => {
|
||||
return platineStore.isLoadingTrack && isCurrentTrack.value
|
||||
const props = withDefaults(defineProps<{
|
||||
isLoading?: boolean;
|
||||
isPlaying?: boolean;
|
||||
}>(), {
|
||||
isLoading: false,
|
||||
isPlaying: false
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<div class="player fixed left-0 z-50 w-full h-20"
|
||||
:class="playerStore.currentTrack ? '-bottom-0 opacity-100' : '-bottom-32 opacity-0'">
|
||||
<div class="flex items-center gap-3 p-2">
|
||||
<NuxtLink v-if="playerStore.currentTrack" :to="`/track/${playerStore.currentTrack.id}`">
|
||||
<img v-if="playerStore.getCurrentCoverUrl" :src="playerStore.getCurrentCoverUrl as string" alt="Current cover"
|
||||
class="size-16 object-cover object-center rounded">
|
||||
</NuxtLink>
|
||||
<audio ref="audioRef" class="flex-1" controls />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { usePlayerStore } from '~/store/player'
|
||||
|
||||
const playerStore = usePlayerStore()
|
||||
const audioRef = ref<HTMLAudioElement | null>(null)
|
||||
|
||||
onMounted(() => {
|
||||
if (audioRef.value) {
|
||||
playerStore.attachAudio(audioRef.value)
|
||||
audioRef.value.addEventListener('timeupdate', playerStore.updateTime)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (audioRef.value) {
|
||||
audioRef.value.removeEventListener('timeupdate', playerStore.updateTime)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.player {
|
||||
transition: all 1s ease-in-out;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
</style>
|
||||
@@ -1,192 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<button @click="closeDatBox" v-if="uiStore.isBoxSelected"
|
||||
class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
|
||||
aria-label="close the box">
|
||||
close
|
||||
</button>
|
||||
<div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
|
||||
<card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
|
||||
:is-face-up="isCardRevealed(track.id)" />
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<button @click="backToBox">backToBox</button>
|
||||
<button @click="toggleCards">toggleCards</button>
|
||||
<button @click="switchSide">Face {{ box.activeSide }}</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDataStore } from '~/store/data'
|
||||
import { useCardStore } from '~/store/card'
|
||||
import { usePlayerStore } from '~/store/player'
|
||||
import { useUiStore } from '~/store/ui'
|
||||
import type { Box } from '~~/types/types'
|
||||
|
||||
const uiStore = useUiStore()
|
||||
|
||||
const props = defineProps<{
|
||||
box: Box
|
||||
}>()
|
||||
|
||||
const cardStore = useCardStore()
|
||||
const dataStore = useDataStore()
|
||||
const playerStore = usePlayerStore()
|
||||
|
||||
const deck = ref()
|
||||
const tracks = computed(() =>
|
||||
dataStore.getTracksByboxId(props.box.id, props.box.activeSide).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
|
||||
)
|
||||
|
||||
const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
|
||||
|
||||
const distribute = () => {
|
||||
deck.value.querySelectorAll('.card').forEach((card: HTMLElement, index: number) => {
|
||||
setTimeout(() => {
|
||||
card.classList.remove('half-outside')
|
||||
card.classList.add('outside')
|
||||
}, index * 12)
|
||||
})
|
||||
}
|
||||
|
||||
const halfOutside = () => {
|
||||
deck.value.querySelectorAll('.card').forEach((card: HTMLElement) => {
|
||||
card.classList.remove('outside')
|
||||
card.classList.add('half-outside')
|
||||
})
|
||||
}
|
||||
|
||||
const backToBox = () => {
|
||||
deck.value.querySelectorAll('.card').forEach((card: HTMLElement) => {
|
||||
card.classList.remove('half-outside', 'outside')
|
||||
})
|
||||
}
|
||||
|
||||
const toggleCards = () => {
|
||||
if (document.querySelector('.card.outside')) {
|
||||
halfOutside()
|
||||
} else {
|
||||
distribute()
|
||||
}
|
||||
}
|
||||
|
||||
const initDeck = () => {
|
||||
setTimeout(() => {
|
||||
if (!playerStore.isCurrentBox(props.box)) {
|
||||
halfOutside()
|
||||
}
|
||||
}, 800)
|
||||
if (playerStore.isCurrentBox(props.box)) {
|
||||
distribute()
|
||||
}
|
||||
}
|
||||
// Fonction pour sélectionner un côté (A ou B)
|
||||
const switchSide = () => {
|
||||
dataStore.setActiveSideByBoxId(props.box.id, props.box.activeSide === 'A' ? 'B' : 'A')
|
||||
initDeck()
|
||||
}
|
||||
|
||||
const closeDatBox = () => {
|
||||
backToBox()
|
||||
setTimeout(() => {
|
||||
uiStore.closeBox()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// if is a track change do not init
|
||||
|
||||
initDeck()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.deck {
|
||||
@apply h-screen w-screen fixed top-0 left-0 -z-10 overflow-hidden;
|
||||
|
||||
.card {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(50% - 120px);
|
||||
z-index: 1;
|
||||
transition: all 0.5s ease;
|
||||
will-change: transform;
|
||||
display: block;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
translate: 0 0;
|
||||
transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(40px, 0, 0);
|
||||
|
||||
// half outside the box
|
||||
&.half-outside {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
|
||||
&:nth-child(1) {
|
||||
translate: 120px 20px;
|
||||
transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, -100px, 0);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
translate: 150px 20px;
|
||||
transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, -40px, 0);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
translate: 190px 20px;
|
||||
transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 30px, 0);
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
translate: 240px 20px;
|
||||
transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 120px, 0);
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
translate: 280px 20px;
|
||||
transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg) translate3d(0, 200px, 0);
|
||||
}
|
||||
|
||||
&:nth-child(6),
|
||||
&:nth-child(7),
|
||||
&:nth-child(8),
|
||||
&:nth-child(9),
|
||||
&:nth-child(10),
|
||||
&:nth-child(11) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.current-track {
|
||||
@apply shadow-none
|
||||
}
|
||||
}
|
||||
|
||||
// outside the box
|
||||
&.outside {
|
||||
opacity: 1;
|
||||
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 0);
|
||||
top: 50%;
|
||||
right: calc(50% + 320px);
|
||||
@apply translate-y-40;
|
||||
|
||||
&:hover {
|
||||
@apply z-40 translate-y-32;
|
||||
}
|
||||
|
||||
&.current-track {
|
||||
@apply z-30 translate-y-28;
|
||||
}
|
||||
|
||||
@for $i from 0 through 10 {
|
||||
&:nth-child(#{$i + 1}) {
|
||||
translate: calc(#{$i + 1} * 33%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,177 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-col fixed right-0 top-0 z-50" :class="props.class">
|
||||
<button @click="closeDatBox" v-if="uiStore.isBoxSelected"
|
||||
class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50" aria-label="close the box">
|
||||
close
|
||||
</button>
|
||||
</div>
|
||||
<div class="controls flex justify-center z-50 relative" v-bind="attrs">
|
||||
<SearchInput @search="onSearch" />
|
||||
<SelectCardRank @change="onRankChange" />
|
||||
<SelectCardSuit @change="onSuitChange" />
|
||||
</div>
|
||||
<div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }"
|
||||
@dragover.prevent @drop.prevent="handleGlobalDrop">
|
||||
<card v-for="(track, i) in filteredTracks" :key="track.id" :track="track" :tabindex="i"
|
||||
@card-click="playerStore.playPlaylistTrack(track)" :is-face-up="isCardRevealed(track.id)"
|
||||
@click-card-symbol="openCardSharer()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useDataStore } from '~/store/data'
|
||||
import { useCardStore } from '~/store/card'
|
||||
import { usePlayerStore } from '~/store/player'
|
||||
import { useUiStore } from '~/store/ui'
|
||||
import type { Box, Track } from '~~/types/types'
|
||||
import SelectCardSuit from '~/components/ui/SelectCardSuit.vue'
|
||||
import SelectCardRank from '~/components/ui/SelectCardRank.vue'
|
||||
import SearchInput from '~/components/ui/SearchInput.vue'
|
||||
|
||||
// Define the events this component emits
|
||||
const emit = defineEmits<{
|
||||
(e: 'click', event: MouseEvent): void;
|
||||
}>()
|
||||
|
||||
const props = defineProps<{
|
||||
box: Box;
|
||||
class?: string;
|
||||
}>()
|
||||
|
||||
// Use useAttrs to get all other attributes
|
||||
const attrs = useAttrs()
|
||||
|
||||
const cardStore = useCardStore()
|
||||
const dataStore = useDataStore()
|
||||
const playerStore = usePlayerStore()
|
||||
const uiStore = useUiStore()
|
||||
|
||||
const deck = ref()
|
||||
const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
|
||||
|
||||
// Suivre si un glisser est en cours depuis le bucket
|
||||
const isDraggingFromBucket = ref(false)
|
||||
|
||||
// Gérer le dépôt d'une carte en dehors du bucket
|
||||
const handleGlobalDrop = (e: DragEvent) => {
|
||||
if (isDraggingFromBucket.value) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
// Récupérer les données de la carte glissée
|
||||
const cardData = e.dataTransfer?.getData('application/json')
|
||||
if (cardData) {
|
||||
try {
|
||||
const track = JSON.parse(cardData)
|
||||
// Retirer la carte du panier
|
||||
cardStore.removeFromBucket(track.id)
|
||||
// La carte réapparaîtra automatiquement dans la playlist
|
||||
// grâce à la computed property filteredTracks
|
||||
} catch (e) {
|
||||
console.error('Erreur lors du traitement de la carte glissée', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
isDraggingFromBucket.value = false
|
||||
}
|
||||
|
||||
// Gérer le début du glisser depuis le bucket
|
||||
const handleBucketDragStart = () => {
|
||||
isDraggingFromBucket.value = true
|
||||
}
|
||||
|
||||
// Configurer les écouteurs d'événements
|
||||
onMounted(() => {
|
||||
document.addEventListener('drop', handleGlobalDrop)
|
||||
document.addEventListener('dragover', (e) => e.preventDefault()) // Nécessaire pour permettre le drop
|
||||
document.addEventListener('bucket-drag-start', handleBucketDragStart)
|
||||
})
|
||||
|
||||
// Nettoyer les écouteurs d'événements
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('drop', handleGlobalDrop)
|
||||
document.removeEventListener('dragover', (e) => e.preventDefault())
|
||||
document.removeEventListener('bucket-drag-start', handleBucketDragStart)
|
||||
})
|
||||
|
||||
// Utiliser une computed property pour filteredTracks qui réagit aux changements
|
||||
const filteredTracks = computed(() => {
|
||||
let result = [...tracks.value]
|
||||
|
||||
// Exclure les pistes déjà dans le panier
|
||||
result = result.filter(track => !cardStore.isInBucket(track.id))
|
||||
|
||||
// Appliquer les autres filtres
|
||||
if (selectedSuit.value) {
|
||||
result = result.filter(track => track.card?.suit === selectedSuit.value)
|
||||
}
|
||||
|
||||
if (selectedRank.value) {
|
||||
result = result.filter(track => track.card?.rank === selectedRank.value)
|
||||
}
|
||||
|
||||
if (searchQuery.value) {
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
result = result.filter(track => {
|
||||
const artistName = typeof track.artist === 'object' ? track.artist?.name : String(track.artist || '')
|
||||
return (
|
||||
track.title?.toLowerCase().includes(query) ||
|
||||
artistName.toLowerCase().includes(query) ||
|
||||
String(track.year || '').includes(query)
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
|
||||
// Variables réactives pour les filtres
|
||||
const selectedSuit = ref('')
|
||||
const selectedRank = ref('')
|
||||
const searchQuery = ref('')
|
||||
|
||||
const isCardRevealed = (trackId: number) => {
|
||||
// Si une recherche est en cours, révéler automatiquement les cartes correspondantes
|
||||
if (searchQuery.value || (selectedRank.value && selectedSuit.value)) return true
|
||||
return cardStore.isCardRevealed(trackId)
|
||||
}
|
||||
|
||||
const closeDatBox = (event: MouseEvent) => {
|
||||
uiStore.closeBox()
|
||||
emit('click', event)
|
||||
}
|
||||
|
||||
const openCardSharer = () => {
|
||||
uiStore.openCardSharer()
|
||||
}
|
||||
|
||||
const onSuitChange = (suit: string) => {
|
||||
selectedSuit.value = suit
|
||||
applyFilters()
|
||||
}
|
||||
|
||||
const onRankChange = (rank: string) => {
|
||||
selectedRank.value = rank
|
||||
applyFilters()
|
||||
}
|
||||
|
||||
const onSearch = (query: string) => {
|
||||
searchQuery.value = query
|
||||
applyFilters()
|
||||
}
|
||||
|
||||
// Applique tous les filtres (couleur, rang et recherche)
|
||||
// La computed property filteredTracks se mettra automatiquement à jour
|
||||
// car elle dépend des mêmes réactifs que cette fonction
|
||||
const applyFilters = () => {
|
||||
// Cette fonction ne fait plus que déclencher la réévaluation des dépendances
|
||||
// La computed property filteredTracks fera le reste
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.deck {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<div draggable="true" @dragstart="onDragStart" @dragend="onDragEnd"
|
||||
:class="['draggable', { 'is-dragging': isDragging }]">
|
||||
<slot :is-dragging="isDragging" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
data: any
|
||||
type?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['dragStart', 'dragEnd'])
|
||||
|
||||
const isDragging = ref(false)
|
||||
|
||||
const onDragStart = (e: DragEvent) => {
|
||||
isDragging.value = true
|
||||
e.dataTransfer?.setData('application/json', JSON.stringify(props.data))
|
||||
emit('dragStart', props.data)
|
||||
}
|
||||
|
||||
const onDragEnd = () => {
|
||||
isDragging.value = false
|
||||
emit('dragEnd')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.draggable {
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.draggable.is-dragging {
|
||||
opacity: 0.5;
|
||||
cursor: grabbing;
|
||||
}
|
||||
</style>
|
||||
@@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<div @dragover.prevent="onDragOver" @dragenter.prevent="onDragEnter" @dragleave="onDragLeave" @drop.prevent="onDrop"
|
||||
:class="['droppable', { 'is-drag-over': isDragOver }]">
|
||||
<slot :is-dragging-over="isDragOver" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
accept?: string
|
||||
onDrop: (data: any) => void
|
||||
}>()
|
||||
|
||||
const isDragOver = ref(false)
|
||||
|
||||
const onDragOver = (e: DragEvent) => {
|
||||
if (!isDragOver.value) isDragOver.value = true
|
||||
}
|
||||
|
||||
const onDragEnter = (e: DragEvent) => {
|
||||
isDragOver.value = true
|
||||
}
|
||||
|
||||
const onDragLeave = () => {
|
||||
isDragOver.value = false
|
||||
}
|
||||
|
||||
const onDrop = (e: DragEvent) => {
|
||||
isDragOver.value = false
|
||||
const data = e.dataTransfer?.getData('application/json')
|
||||
if (data) {
|
||||
try {
|
||||
props.onDrop(JSON.parse(data))
|
||||
} catch (e) {
|
||||
console.error('Erreur lors du drop', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.droppable {
|
||||
min-height: 100px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.droppable.is-drag-over {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border: 2px dashed #4CAF50;
|
||||
}
|
||||
</style>
|
||||
@@ -1,221 +0,0 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="ui.showSearch" class="fixed inset-0 z-50 flex items-center justify-center transition-all">
|
||||
<div class="absolute inset-0 bg-black/60 backdrop-blur-md" @click="close"></div>
|
||||
<div
|
||||
class="relative w-full max-w-2xl rounded-xl bg-white shadow-xl ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-slate-700"
|
||||
role="dialog" aria-modal="true" @keydown.esc.prevent.stop="close">
|
||||
<div class="flex items-center gap-2 dark:border-slate-700">
|
||||
<svg class="ml-4 h-7 w-7 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="m21 21-4.3-4.3" />
|
||||
</svg>
|
||||
<input ref="inputRef" v-model="ui.searchQuery" type="text" placeholder="Rechercher boxes, artistes, tracks..."
|
||||
class="flex-1 bg-transparent px-2 py-2 text-slate-900 text-3xl placeholder-slate-400 outline-none dark:text-slate-100"
|
||||
@keydown.down.prevent="move(1)" @keydown.up.prevent="move(-1)" @keydown.enter.prevent="confirm" />
|
||||
</div>
|
||||
|
||||
<div class="max-h-72 overflow-auto results-scroll">
|
||||
<template v-if="results.length">
|
||||
<ul class="divide-y divide-slate-100 dark:divide-slate-800">
|
||||
<li v-for="(resultItem, idx) in results" :key="resultItem.key" :class="[
|
||||
'flex cursor-pointer items-center justify-between gap-3 px-2 py-3 hover:bg-slate-50 dark:hover:bg-slate-800',
|
||||
idx === activeIndex ? 'bg-slate-100 dark:bg-slate-800' : ''
|
||||
]" @mouseenter="activeIndex = idx" @click="selectResult(resultItem)">
|
||||
<div class="flex items-center gap-3">
|
||||
<img v-if="coverUrlFor(resultItem)" :src="coverUrlFor(resultItem)" alt="" loading="lazy"
|
||||
class="h-10 w-10 rounded object-cover ring-1 ring-slate-200 dark:ring-slate-700" />
|
||||
<span
|
||||
class="inline-flex min-w-[68px] items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold uppercase text-slate-600 dark:text-slate-300 dark:border-slate-600">{{
|
||||
resultItem.type }}</span>
|
||||
<span class="text-slate-900 dark:text-slate-100">{{ resultItem.label }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span v-if="resultItem.sublabel" class="text-sm text-slate-500 dark:text-slate-400">{{
|
||||
resultItem.sublabel }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<div v-else-if="ui.searchQuery" class="px-2 py-6 text-center text-slate-500 dark:text-slate-400">
|
||||
Aucun résultat
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onMounted, ref, watch } from 'vue'
|
||||
import { useUiStore } from '~/store/ui'
|
||||
import { useDataStore } from '~/store/data'
|
||||
import { usePlayerStore } from '~/store/player'
|
||||
|
||||
const ui = useUiStore()
|
||||
const data = useDataStore()
|
||||
const player = usePlayerStore()
|
||||
const inputRef = ref<HTMLInputElement | null>(null)
|
||||
const activeIndex = ref(0)
|
||||
|
||||
const close = () => ui.closeSearch()
|
||||
|
||||
const normalized = (s: string) =>
|
||||
s
|
||||
.normalize('NFD')
|
||||
.replace(/\p{Diacritic}/gu, '')
|
||||
.toLowerCase()
|
||||
|
||||
type ResultItem = {
|
||||
key: string
|
||||
type: 'BOX' | 'ARTIST' | 'TRACK'
|
||||
label: string
|
||||
sublabel?: string
|
||||
payload: any
|
||||
}
|
||||
|
||||
const results = computed<ResultItem[]>(() => {
|
||||
const q = normalized(ui.searchQuery || '')
|
||||
if (!q) return []
|
||||
|
||||
const out: ResultItem[] = []
|
||||
|
||||
for (const b of data.boxes) {
|
||||
const label = `${b.id}`
|
||||
if (normalized(label).includes(q)) {
|
||||
out.push({ key: `box:${b.id}`, type: 'BOX', label, payload: b })
|
||||
}
|
||||
}
|
||||
for (const a of data.artists) {
|
||||
if (normalized(a.name).includes(q)) {
|
||||
out.push({
|
||||
key: `artist:${a.id}`,
|
||||
type: 'ARTIST',
|
||||
label: a.name,
|
||||
payload: a
|
||||
})
|
||||
}
|
||||
}
|
||||
for (const track of data.tracks) {
|
||||
const artistName =
|
||||
typeof track.artist === 'object' && track.artist
|
||||
? ((track.artist as any).name ?? '')
|
||||
: String(track.artist)
|
||||
const label = track.title
|
||||
const sub = artistName
|
||||
if (normalized(label).includes(q) || normalized(sub).includes(q)) {
|
||||
out.push({ key: `track:${track.id}`, type: 'TRACK', label, sublabel: sub, payload: track })
|
||||
}
|
||||
}
|
||||
|
||||
return out.slice(0, 100)
|
||||
})
|
||||
|
||||
const move = (delta: number) => {
|
||||
if (!results.value.length) return
|
||||
activeIndex.value = (activeIndex.value + delta + results.value.length) % results.value.length
|
||||
}
|
||||
|
||||
const coverUrlFor = (ResultItem: ResultItem): string | undefined => {
|
||||
if (ResultItem.type === 'BOX') {
|
||||
return `/${ResultItem.payload.id}/cover.jpg`
|
||||
}
|
||||
if (ResultItem.type === 'TRACK') {
|
||||
const track = ResultItem.payload
|
||||
if (track && track.type === 'playlist' && track.coverId) return track.coverId as string
|
||||
if (track && track.coverId) return track.coverId as string
|
||||
return `/${track.boxId}/cover.jpg`
|
||||
}
|
||||
if (ResultItem.type === 'ARTIST') {
|
||||
const tracks = data.getTracksByArtistId(ResultItem.payload.id)
|
||||
if (tracks && tracks.length) {
|
||||
const track = tracks[0]!
|
||||
if (track.type === 'playlist' && track.coverId) return track.coverId as string
|
||||
if (track.coverId) return track.coverId as string
|
||||
return `/${track.boxId}/cover.jpg`
|
||||
}
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
const selectResult = (ResultItem: ResultItem) => {
|
||||
if (ResultItem.type === 'BOX') {
|
||||
ui.selectBox(ResultItem.payload.id)
|
||||
nextTick(() => ui.scrollToBox(ResultItem.payload))
|
||||
} else if (ResultItem.type === 'ARTIST') {
|
||||
const tracks = data.getTracksByArtistId(ResultItem.payload.id)
|
||||
if (tracks && tracks.length) {
|
||||
const track = tracks[0]!
|
||||
const box = data.getBoxById(track.boxId)
|
||||
if (box) {
|
||||
ui.selectBox(box.id)
|
||||
}
|
||||
}
|
||||
} else if (ResultItem.type === 'TRACK') {
|
||||
const track = ResultItem.payload
|
||||
const box = data.getBoxById(track.boxId)
|
||||
if (box) {
|
||||
ui.selectBox(box.id)
|
||||
player.playTrack(track)
|
||||
}
|
||||
}
|
||||
close()
|
||||
}
|
||||
|
||||
const confirm = () => {
|
||||
const ResultItem = results.value[activeIndex.value]
|
||||
if (ResultItem) selectResult(ResultItem)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => ui.showSearch,
|
||||
async (open) => {
|
||||
if (open) {
|
||||
activeIndex.value = 0
|
||||
await nextTick()
|
||||
inputRef.value?.focus()
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.results-scroll {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(100, 116, 139, 0.6) transparent;
|
||||
}
|
||||
|
||||
.results-scroll::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.results-scroll::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.results-scroll::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(100, 116, 139, 0.6);
|
||||
border-radius: 9999px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
.dark .results-scroll {
|
||||
scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
|
||||
}
|
||||
|
||||
.dark .results-scroll::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(148, 163, 184, 0.5);
|
||||
}
|
||||
</style>
|
||||
@@ -1,127 +0,0 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="fade" mode="out-in">
|
||||
<div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
|
||||
@click.self="close">
|
||||
<div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-xl font-bold text-gray-900">Partager cette carte</h2>
|
||||
<button @click="close" class="text-gray-400 hover:text-gray-500">
|
||||
<span class="sr-only">Fermer</span>
|
||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="currentTrack" class="space-y-4">
|
||||
<div class="flex items-center space-x-4 p-3 bg-gray-50 rounded-lg">
|
||||
<img :src="currentTrack.coverId || '/card-dock.svg'" :alt="currentTrack.title"
|
||||
class="w-12 h-12 rounded-md object-cover">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-medium text-gray-900 truncate">{{ currentTrack.title }}</p>
|
||||
<p class="text-sm text-gray-500 truncate">{{ typeof currentTrack.artist === 'object' ?
|
||||
currentTrack.artist?.name : currentTrack.artist || 'Artiste inconnu' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="share-link" class="block text-sm font-medium text-gray-700">Lien de partage</label>
|
||||
<div class="flex rounded-md shadow-sm">
|
||||
<input type="text" id="share-link" readonly :value="shareLink"
|
||||
class="flex-1 min-w-0 block w-full px-3 py-2 rounded-l-md border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
||||
@focus="selectText">
|
||||
<button @click="copyToClipboard"
|
||||
class="inline-flex items-center px-3 py-2 border border-l-0 border-gray-300 bg-gray-50 text-gray-700 text-sm font-medium rounded-r-md hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-3 pt-2">
|
||||
<button @click="close"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
Fermer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useUiStore } from '~/store/ui'
|
||||
import type { Track } from '~~/types/types'
|
||||
|
||||
const uiStore = useUiStore()
|
||||
const currentTrack = ref<Track | null>(null)
|
||||
|
||||
// Utilisation d'une ref locale pour éviter les réactivités inutiles
|
||||
const isOpen = ref(false)
|
||||
|
||||
// Mise à jour de l'état uniquement quand nécessaire
|
||||
watch(() => uiStore.showCardSharer, (newVal) => {
|
||||
isOpen.value = newVal
|
||||
})
|
||||
|
||||
const shareLink = computed(() => {
|
||||
if (!currentTrack.value) return ''
|
||||
return `${window.location.origin}/track/${currentTrack.value.id}`
|
||||
})
|
||||
|
||||
const open = (track: Track) => {
|
||||
currentTrack.value = track
|
||||
isOpen.value = true
|
||||
uiStore.openCardSharer()
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
isOpen.value = false
|
||||
uiStore.showCardSharer = false
|
||||
// Nettoyage différé pour permettre l'animation
|
||||
setTimeout(() => {
|
||||
if (!isOpen.value) {
|
||||
currentTrack.value = null
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const copyToClipboard = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(shareLink.value)
|
||||
// Vous pourriez ajouter un toast ou une notification ici
|
||||
console.log('Lien copié dans le presse-papier')
|
||||
} catch (err) {
|
||||
console.error('Erreur lors de la copie :', err)
|
||||
}
|
||||
}
|
||||
|
||||
const selectText = (event: Event) => {
|
||||
const input = event.target as HTMLInputElement
|
||||
input.select()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<div class="relative">
|
||||
<input v-model="searchQuery" type="text" placeholder="Rechercher..."
|
||||
class="px-4 py-2 pl-10 w-48 m-4 h-12 font-bold text-black bg-esyellow border border-none rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-estyellow-dark focus:border-estyellow-dark"
|
||||
@input="handleSearch">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-6 pointer-events-none">
|
||||
<svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const emit = defineEmits(['search'])
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
const handleSearch = () => {
|
||||
emit('search', searchQuery.value.trim().toLowerCase())
|
||||
}
|
||||
</script>
|
||||
@@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<select v-model="selectedRank" @change="handleChange"
|
||||
class="px-4 py-2 m-4 font-bold h-12 border-none text-center bg-esyellow transition-colors border border-esyellow-dark rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-estyellow-dark focus:border-estyellow-dark cursor-pointer appearance-none">
|
||||
<option value="">rank</option>
|
||||
<option v-for="rank in ranks" :key="rank.value" :value="rank.value">
|
||||
{{ rank.label }}
|
||||
</option>
|
||||
</select>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const emit = defineEmits(['change'])
|
||||
|
||||
const ranks = [
|
||||
{ value: 'A', label: 'Ace' },
|
||||
{ value: '2', label: '2' },
|
||||
{ value: '3', label: '3' },
|
||||
{ value: '4', label: '4' },
|
||||
{ value: '5', label: '5' },
|
||||
{ value: '6', label: '6' },
|
||||
{ value: '7', label: '7' },
|
||||
{ value: '8', label: '8' },
|
||||
{ value: '9', label: '9' },
|
||||
{ value: '10', label: '10' },
|
||||
{ value: 'J', label: 'Jack' },
|
||||
{ value: 'Q', label: 'Queen' },
|
||||
{ value: 'K', label: 'King' }
|
||||
]
|
||||
|
||||
const selectedRank = ref('')
|
||||
|
||||
const handleChange = () => {
|
||||
emit('change', selectedRank.value)
|
||||
}
|
||||
</script>
|
||||
@@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<select v-model="selectedSuit" @change="handleChange"
|
||||
class="px-4 py-2 m-4 text-black font-bold h-12 border-none text-center hover:text-black bg-esyellow transition-colors border border-esyellow-dark rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-esyellow-dark focus:border-esyellow-dark cursor-pointer appearance-none">
|
||||
<option value="">♠♣♦♥</option>
|
||||
<option v-for="suit in suits" :key="suit.value" :value="suit.value">
|
||||
{{ suit.label }}
|
||||
</option>
|
||||
</select>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const emit = defineEmits(['change'])
|
||||
|
||||
const suits = [
|
||||
{ value: '♥', label: '♥' },
|
||||
{ value: '♦', label: '♦' },
|
||||
{ value: '♣', label: '♣' },
|
||||
{ value: '♠', label: '♠' }
|
||||
]
|
||||
|
||||
const selectedSuit = ref('')
|
||||
|
||||
const handleChange = () => {
|
||||
emit('change', selectedSuit.value)
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user