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/molecule/box.vue
+++ b/app/components/molecule/box.vue
@@ -2,26 +2,52 @@
  <article class="box box-scene z-10" ref="scene">
    <div class="box-object" ref="box">
      <div class="face front relative" ref="frontFace">
-        <img class="cover absolute" :src="`/${compilation.id}/cover.jpg`" alt="">
+        <img v-if="compilation.duration" class="cover absolute" :src="`/${compilation.id}/cover.jpg`" alt="">
+        <div class="size-full flex justify-center items-center text-7xl" v-else>
+          {{ compilation.description }}
+        </div>
      </div>
-      <div class="face back" ref="backFace">
-        {{ compilation.description }}
+      <div class="face back flex flex-col flex-wrap items-start p-4 overflow-hidden" ref="backFace">
+        <li class="list-none text-xxs w-1/2 flex flex-row"
+          v-for="track in dataStore.getTracksByCompilationId(compilation.id).slice(0, -1)" :key="track.id"
+          :track="track">
+          <span class="" 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">
-        <img class="logo h-full p-1" src="/logo.svg" alt="">
-        <img class="absolute block h-1/2" style="left:5%;" :src="`/${compilation.id}/title.svg`" alt="">
+        <template v-if="compilation.duration !== 0">
+          <img class="logo h-full p-1" src="/logo.svg" alt="">
+          <img class="absolute block h-1/2" style="left:5%;" :src="`/${compilation.id}/title.svg`" alt="">
+        </template>
+        <template v-else>
+          <span class="absolute block h-1/2 right-6">
+            playlist
+          </span>
+          <img class="logo h-full p-1" src="/favicon.svg" alt="">
+          <span class="absolute block h-1/2" style="left:5%;">
+            {{ compilation.name }}
+          </span>
+        </template>
      </div>
      <div class="face bottom" ref="bottomFace" />
    </div>
-    <OrganismCompilationPage :compilation="compilation" class="box-page" v-if="props.BoxState === 'selected'" />
+    <slot></slot>
  </article>
 </template>

 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import type { Compilation, BoxState } from '~~/types/types'
+import { useDataStore } from '~/store/data'

 const props = withDefaults(
  defineProps<{
@@ -30,8 +56,9 @@ const props = withDefaults(
  }>(),
  { BoxState: 'list' }
 )
-
+const dataStore = useDataStore()
 const isDraggable = computed(() => !['list', 'hidden'].includes(BoxState.value()))
+const isNotManifesto = computed(() => !props.compilation.id.startsWith('ES00'))

 // --- Réfs ---
 const scene = ref<HTMLElement>()
@@ -250,10 +277,6 @@ watch(() => isDraggable, (enabled) => enabled ? addListeners() : removeListeners

  .face {
    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
    color: white;
    font-weight: 600;
    backface-visibility: hidden;
@@ -271,6 +294,10 @@ watch(() => isDraggable, (enabled) => enabled ? addListeners() : removeListeners
  .face.bottom {
    width: var(--width);
    height: var(--depth);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
  }

  .face.left,
--- a/app/components/molecule/card.vue
+++ b/app/components/molecule/card.vue
@@ -1,21 +1,28 @@
 <template>
-  <article class="flip-card w-56 h-80">
+  <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 @click="playerStore.playTrack(props.track)" class="flex-1 overflow-hidden rounded-t-xl cursor-pointer">
+        <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">
+          <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">
-            {{ props.track.artist.name }}
+            <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>
@@ -25,7 +32,7 @@
        <!-- Back -->
        <div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
          <img src="/favicon.svg" />
-          <div class="label label--id">
+          <div class="label label--id" v-if="isOrder">
            {{ props.track.order }}
          </div>
        </div>
@@ -39,14 +46,19 @@
 import type { Track } from '~~/types/types'
 import { usePlayerStore } from '~/store/player'

-const props = defineProps<{ track: Track }>()
+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>
+<style lang="scss">
 .label {
  @apply rounded-full size-7 p-2 bg-esyellow leading-3 -mt-6;
  font-weight: bold;
@@ -56,34 +68,38 @@ const coverUrl = props.track.coverId.startsWith('http')
 /* Flip effect */
 .flip-card {
  perspective: 1000px;
-}

-.flip-inner {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  transition: transform 0.6s;
-  transform-style: preserve-3d;
-}
+  .flip-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;

-.flipped .flip-inner {
-  transform: rotateY(180deg);
-}
+    .face-down & {
+      transform: rotateY(180deg);
+    }

-.flip-front,
-.flip-back {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-  will-change: transform;
-}
+    .face-up & {
+      transform: rotateY(0deg);
+    }
+  }

-.flip-front {
-  transform: rotateY(0deg);
-}
+  .flip-front,
+  .flip-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    will-change: transform;
+  }

-.flip-back {
-  transform: rotateY(180deg);
+  .flip-front {
+    transform: rotateY(0deg);
+  }
+
+  .flip-back {
+    transform: rotateY(180deg);
+  }
 }
 </style>
--- a/app/components/organism/compilationList.vue
+++ b/app/components/organism/compilationList.vue
@@ -1,23 +1,35 @@
 <template>
  <div class="flex flex-col-reverse mt-16">
-    <molecule-box v-for="compilation in dataStore.getAllCompilations.slice().reverse()" :key="compilation.id"
-      :compilation="compilation" :BoxState="boxStates[compilation.id]" @click="() => openCompilation(compilation.id)"
-      :class="boxStates[compilation.id]" />
+    <box v-for="compilation in dataStore.getAllCompilations.slice()" :key="compilation.id" :compilation="compilation"
+      :BoxState="boxStates[compilation.id]" @click="() => openCompilation(compilation.id)"
+      :class="boxStates[compilation.id]" class="text-center">
+      <button @click="playerStore.playCompilation(compilation.id)" v-if="boxStates[compilation.id] === 'selected'"
+        class="relative z-40 rounded-full size-24 bottom-1/2 text-2xl">▶</button>
+      <deck :compilation="compilation" class="box-page" v-if="boxStates[compilation.id] === 'selected'" />
+    </box>
  </div>
 </template>

 <script setup lang="ts">
 import { useDataStore } from '~/store/data'
 import type { BoxState } from '~~/types/types'
+import { usePlayerStore } from '~/store/player'

 const dataStore = useDataStore()
 const boxStates = ref<Record<string, BoxState>>({})
+const playerStore = usePlayerStore()

 function openCompilation(id: string) {
  if (boxStates.value[id] === 'list') {
    for (const key in boxStates.value) {
      boxStates.value[key] = (key === id) ? 'selected' : 'hide'
    }
+    // Scroll to the top smoothly
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+
  }
 }

--- a/app/components/deck.vue
+++ b/app/components/deck.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <div class="hidden tools fixed top-0 -left-0">
+      <button @click="setDisplay('pile')">pile</button>
+      <button @click="setDisplay('plateau')">plateau</button>
+      <button @click="setDisplay('holdem')">holdem</button>
+    </div>
+    <div ref="deck" class="deck flex flex-wrap justify-center gap-4">
+      <card v-if="compilation.duration" v-for="track in dataStore.getTracksByCompilationId(compilation.id)"
+        :key="track.id" :track="track" />
+      <card v-else v-for="track in dataStore.getPlaylistTracksByCompilationId(compilation.id)" :track="track" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDataStore } from '~/store/data'
+import type { Compilation } from '~~/types/types'
+
+const props = defineProps<{
+  compilation: Compilation
+}>()
+const dataStore = useDataStore()
+const deck = ref()
+
+function setDisplay(displayMode) {
+  deck.value.classList.remove('pile', 'plateau', 'holdem')
+  deck.value.classList.add(displayMode)
+}
+</script>
+
+<style lang="scss">
+.deck {
+  @apply transition-all;
+
+  &.pile {
+    @apply relative;
+
+    .card {
+      @apply absolute top-0;
+    }
+  }
+
+  &.plateau {
+    @apply mt-8 p-8 w-full flex flex-wrap justify-around;
+  }
+
+  &.holdem {
+    /* style holdem */
+  }
+}
+</style>
--- a/app/components/logo.vue
+++ b/app/components/logo.vue
@@ -0,0 +1,8 @@
+<template>
+  <header class="py-4">
+    <img class="logo p-1 w-80" src="/logo.svg" alt="">
+    <h1 class="dark:text-white text-center">
+      mix-tapes
+    </h1>
+  </header>
+</template>
--- a/app/components/molecule/atropos.vue
+++ b/app/components/molecule/atropos.vue
@@ -1,126 +0,0 @@
-<template>
-  <div class="w-96 m-6">
-    <atropos-component class="atropos game-box atropos-rotate-touch-scroll-y" rotate-touch="scroll-y" rotate-x-max="24"
-      rotate-y-max="24">
-
-      <div class="atropos-inner relative">
-        <div class="game-box-bg bg-gradient-to-t from-slate-800 to-zinc-900 h-96 relative" data-atropos-offset="-8" />
-        <img :src="id + '/object.png'" data-atropos-offset="-3" class="absolute bottom-0 inset-0 h-96 object-cover">
-        <img :src="id + '/name.png'" data-atropos-offset="0" class="absolute inset-0 self-end justify-self-end p-4">
-        <img src="/logo.svg" data-atropos-offset="0" width="70%"
-          class="logo absolute inset-0 self-center justify-self-center">
-        <!-- <img src="/play.svg" width="20%" class="absolute play"> -->
-      </div>
-      <span class="game-box-t" />
-      <span class="game-box-r" />
-      <span class="game-box-b" />
-      <span class="game-box-l" />
-    </atropos-component>
-  </div>
-</template>
-
-<script setup>
-const id = 'ES01A'
-</script>
-
-<style>
-.game-box .logo {
-  filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.8));
-}
-
-.game-box {
-  --side-color: #004297;
-  --side-size: 32px;
-  aspect-ratio: 526 / 656;
-}
-
-.atropos-rotate {
-  position: relative;
-}
-
-.game-box .atropos-rotate:before {
-  content: "";
-  position: absolute;
-  left: 0;
-  width: calc(100% + 8px);
-  height: calc(100% + 16px);
-  top: -8px;
-  background: #086ef4;
-  z-index: 1;
-}
-
-.atropos-inner {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  transform-style: preserve-3d;
-  transform: translateZ(0);
-  display: block;
-  z-index: 1;
-  position: relative;
-}
-
-.game-box-t,
-.game-box-r,
-.game-box-b,
-.game-box-l {
-  transform-style: preserve-3d;
-  backface-visibility: hidden;
-  position: absolute;
-  /* display: none; */
-}
-
-.game-box-t {
-  width: calc(100% + 8px);
-  height: var(--side-size);
-  background: var(--side-color);
-  left: 0;
-  top: -8px;
-  transform: translate3d(0, 0, -32px) rotateX(90deg);
-  transform-origin: center top;
-  top: -8px;
-  transform: translateZ(-32px) rotateX(90deg);
-  transform-origin: center top;
-}
-
-.game-box-b {
-  width: calc(100% + 8px);
-  height: var(--side-size);
-  background: var(--side-color);
-  left: 0;
-  bottom: -8px;
-  transform: translate3d(0, 0, -32px) rotateX(-90deg);
-  transform-origin: center bottom;
-}
-
-.game-box-r {
-  width: var(--side-size);
-  height: calc(100% + 16px);
-  background: var(--side-color);
-  right: -8px;
-  top: -8px;
-  transform: translate3d(0, 0, -32px) rotateY(90deg);
-  transform-origin: right center;
-}
-
-.game-box-l {
-  width: var(--side-size);
-  height: calc(100% + 16px);
-  background: var(--side-color);
-  left: 0px;
-  top: -8px;
-  transform: translate3d(0, 0, -32px) rotateY(-90deg);
-  transform-origin: left center;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 10.4%;
-    background: #a5a5a5;
-    left: 0;
-    top: 9px;
-  }
-}
-</style>
--- a/app/components/molecule/theObject.vue
+++ b/app/components/molecule/theObject.vue
@@ -1,103 +0,0 @@
-<template>
-  <h1 class="flex items-center justify-center min-h-screen">
-    <atropos-component class="my-atropos">
-      <span class="game-box-t" />
-      <span class="game-box-r" />
-      <span class="game-box-b" />
-      <span class="game-box-l" />
-      <div class="game-box-bg bg-gradient-to-t from-slate-800 to-zinc-900 h-60" data-atropos-offset="-8" />
-      <img :src="id + '/object.png'" data-atropos-offset="-3" class="absolute inset-0 object-cover">
-      <img :src="id + '/name.png'" data-atropos-offset="0" class="absolute inset-0 object-cover">
-      <img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0">
-      <img src="/play.svg" width="20%" class="absolute play">
-    </atropos-component>
-  </h1>
-</template>
-
-<script setup>
-const id = 'ES01A'
-</script>
-
-<style>
-/* .atropos-inner,
-.game-box-bg {
-  width: 300px;
-  height: 300px;
-} */
-
-.game-box-t,
-.game-box-r,
-.game-box-b,
-.game-box-l {
-  transform-style: preserve-3d;
-  backface-visibility: hidden;
-  position: absolute;
-  /* display: none; */
-}
-
-.game-box-t {
-  width: calc(100% + 8px);
-  height: var(--side-size);
-  background: var(--side-color);
-  left: 0;
-  top: -8px;
-  transform: translate3d(0, 0, -32px) rotateX(90deg);
-  transform-origin: center top;
-}
-
-.game-box-b {
-  width: calc(100% + 8px);
-  height: var(--side-size);
-  background: var(--side-color);
-  left: 0;
-  bottom: -8px;
-  transform: translate3d(0, 0, -32px) rotateX(-90deg);
-  transform-origin: center bottom;
-}
-
-.game-box-r {
-  width: var(--side-size);
-  height: calc(100% + 16px);
-  background: var(--side-color);
-  right: -8px;
-  top: -8px;
-  transform: translate3d(0, 0, -32px) rotateY(90deg);
-  transform-origin: right center;
-}
-
-.game-box-l {
-  width: var(--side-size);
-  height: calc(100% + 16px);
-  background: var(--side-color);
-  left: 0px;
-  top: -8px;
-  transform: translate3d(0, 0, -32px) rotateY(-90deg);
-  transform-origin: left center;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 10.4%;
-    background: #a5a5a5;
-    left: 0;
-    top: 9px;
-  }
-}
-
-.atropos-rotate {
-  position: relative;
-}
-
-.atropos-rotate:before {
-  content: "";
-  position: absolute;
-  left: 0;
-  width: calc(100% + 8px);
-  height: calc(100% + 16px);
-  top: -8px;
-  background: #086ef4;
-  z-index: 1;
-}
-</style>
--- a/app/components/newsletter.vue
+++ b/app/components/newsletter.vue
@@ -0,0 +1,11 @@
+<template>
+  <form class="h-screen flex justify-center items-center flex-col absolute top-0 left-1/2 -translate-x-1/2">
+    <label for="email" class="block text-xl">
+      be notify when's evilSpins open :
+    </label>
+    <div>
+      <input type="email" name="" id="email" placeholder="email">
+      <button>ok</button>
+    </div>
+  </form>
+</template>
--- a/app/components/organism/compilationPage.vue
+++ b/app/components/organism/compilationPage.vue
@@ -1,16 +0,0 @@
-<template>
-  <div class="mt-8 p-8 w-full flex flex-wrap justify-around">
-    <MoleculeCard v-for="track in dataStore.getTracksByCompilationId(compilation.id)" :key="track.id" :track="track" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useDataStore } from '~/store/data'
-import type { Compilation } from '~~/types/types'
-
-const props = defineProps<{
-  compilation: Compilation
-}>()
-
-const dataStore = useDataStore()
-</script>
--- a/app/components/molecule/player.vue
+++ b/app/components/molecule/player.vue
@@ -1,13 +1,12 @@
 <template>
  <div class="fixed left-0 bottom-0 opacity-1 z-50 w-full bg-white transition-all"
    :class="{ '-bottom-20 opacity-0': !playerStore.currentTrack }">
-    <!-- <p class="hidden">
+    <!-- <p>
      {{ Math.round(currentTime) }}
      {{ Math.round(currentProgression) }}%
    </p> -->
-    <audio ref="audioRef" class="w-full"
-      :src="playerStore.currentTrack ? playerStore.getCompilationUrlFromTrack(playerStore.currentTrack) : ''"
-      controls />
+    {{ playerStore.currentTrack?.url }}
+    <audio ref="audioRef" class="w-full" :src="playerStore.currentTrack?.url || ''" controls />
  </div>
 </template>