playlists support v1

2025-10-09 22:47:30 +02:00
parent c86e345117
commit e2c5693948
30 changed files with 620 additions and 554 deletions
--- a/app/components/card.vue
+++ b/app/components/card.vue
@@ -0,0 +1,105 @@
+<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>