89 lines
2.3 KiB
Vue
89 lines
2.3 KiB
Vue
<template>
|
|
<article class="flip-card w-56 h-80">
|
|
<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 @click="playerStore.playTrack(props.track)" 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">
|
|
{{ 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">
|
|
{{ props.track.artist.name }}
|
|
</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">
|
|
{{ 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 = defineProps<{ track: Track }>()
|
|
const playerStore = usePlayerStore()
|
|
const coverUrl = props.track.coverId.startsWith('http')
|
|
? props.track.coverId
|
|
: `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`;
|
|
</script>
|
|
|
|
<style>
|
|
.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;
|
|
}
|
|
|
|
.flipped .flip-inner {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.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> |