105 lines
3.1 KiB
Vue
105 lines
3.1 KiB
Vue
<template>
|
|
<article @click="() => playerStore.playTrack(props.track).catch(err => console.error(err))"
|
|
class="card flip-card w-56 h-80" :class="isFaceUp ? 'face-up' : 'face-down'">
|
|
<div class="flip-inner">
|
|
<main
|
|
class="flip-front backdrop-blur-sm border-2 -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-40 hover:bg-opacity-80 hover:shadow-xl transition-all bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
|
|
<!-- Cover -->
|
|
<figure class="flex-1 overflow-hidden rounded-t-xl cursor-pointer">
|
|
<img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
|
|
</figure>
|
|
|
|
<!-- Body -->
|
|
<div class="p-3 text-center bg-white rounded-b-xl">
|
|
<div class="label" v-if="isOrder">
|
|
{{ props.track.order }}
|
|
</div>
|
|
<h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2>
|
|
<p class="text-sm text-neutral-500 truncate">
|
|
<template v-if="isPlaylistTrack">
|
|
{{ props.track.artist.name }}
|
|
</template>
|
|
<div class="order" v-if="isPlaylistTrack">
|
|
{{ props.track.card?.rank }}
|
|
{{ props.track.card?.suit }}
|
|
</div>
|
|
</p>
|
|
</div>
|
|
</main>
|
|
|
|
<footer
|
|
class="flip-back backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
|
|
<!-- Back -->
|
|
<div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
|
|
<img src="/favicon.svg" />
|
|
<div class="label label--id" v-if="isOrder">
|
|
{{ props.track.order }}
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Track } from '~~/types/types'
|
|
import { usePlayerStore } from '~/store/player'
|
|
|
|
const props = withDefaults(defineProps<{ track: Track; isFaceUp?: boolean }>(), {
|
|
isFaceUp: false
|
|
})
|
|
const playerStore = usePlayerStore()
|
|
const isManifesto = computed(() => props.track.compilationId.startsWith('ES00'))
|
|
const isOrder = computed(() => props.track.order && !isManifesto)
|
|
const isPlaylistTrack = computed(() => props.track.compilationId.length === 6)
|
|
const coverUrl = props.track.coverId.startsWith('http')
|
|
? props.track.coverId
|
|
: `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`;
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.label {
|
|
@apply rounded-full size-7 p-2 bg-esyellow leading-3 -mt-6;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Flip effect */
|
|
.flip-card {
|
|
perspective: 1000px;
|
|
|
|
.flip-inner {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 0.6s;
|
|
transform-style: preserve-3d;
|
|
|
|
.face-down & {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.face-up & {
|
|
transform: rotateY(0deg);
|
|
}
|
|
}
|
|
|
|
.flip-front,
|
|
.flip-back {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
will-change: transform;
|
|
}
|
|
|
|
.flip-front {
|
|
transform: rotateY(0deg);
|
|
}
|
|
|
|
.flip-back {
|
|
transform: rotateY(180deg);
|
|
}
|
|
}
|
|
</style> |