player can switch between compilation

assets/css/main.css

@@ -1,3 +1,42 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.button {
+  text-decoration: none;
+  box-shadow: 0 8px 0 0 black;
+  transition: all .3s;
+  border: 8px black solid;
+  line-height: 100%;
+  height: 70px;
+  width: 70px;
+  border-width: 2px;
+  border-radius: 100px;
+  cursor: pointer;
+  color: black;
+  font-size: 26px;
+  background-color: #ffffff59;
+}
+
+.button:hover {
+  background-color: #fdec50ff;
+}
+
+.button:active {
+  box-shadow: 0 0 0 0 black;
+}
+
+.button--close {
+  right: 24px;
+  padding-top: 10px;
+  position: absolute;
+}
+
+.button--screened {
+  top: 74px;
+}
+
+.compilation {
+  cursor: pointer;
+  max-width: 420px;
+}

components/zero-a.vue

@@ -1,40 +1,27 @@
 <template>
-  <div class="container mx-auto p-4 inline-flex">
+  <div class="compilation mx-auto p-4 inline-flex">
     <atropos-component ref="atropos" class="my-atropos" active-offset="80" shadow-scale="1.05">
       <img src="/zero/sky-a.jpg" data-atropos-offset="-8" />
       <img src="/zero/propeller-a.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
       <img src="/zero/zero-a.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" />
-      <slot class="absolute" ></slot>
     </atropos-component>
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue'
 
-const atropos = ref(null);
+const atropos = ref(null)
 
 onMounted(() => {
-  atropos.value.addEventListener('enter', () => {
+
-    console.log('Entered');
+})
-  });
-  atropos.value.addEventListener('leave', () => {
-    console.log('Left');
-  });
-  atropos.value.addEventListener('rotate', (event) => {
-    console.log('Rotate', event.detail);
-  });
-});
 </script>
 
 <style scoped>
-/* .my-atropos {
-  width: 320px;
-  height: 160px;
-} */
 .logo {
-  filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.8));
+  filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.5));
   left: 14%;
   top: 10%;
 }

components/zero-b.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto p-4 inline-flex">
+  <div class="compilation mx-auto p-4 inline-flex">
     <atropos-component ref="atropos" class="my-atropos" active-offset="80" shadow-scale="1.05">
       <img src="/zero/sky-b.jpg" data-atropos-offset="-8" />
       <img src="/zero/propeller-b.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
@@ -10,21 +10,9 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue'
 
-const atropos = ref(null);
+const atropos = ref(null)
-
-onMounted(() => {
-  atropos.value.addEventListener('enter', () => {
-    console.log('Entered');
-  });
-  atropos.value.addEventListener('leave', () => {
-    console.log('Left');
-  });
-  atropos.value.addEventListener('rotate', (event) => {
-    console.log('Rotate', event.detail);
-  });
-});
 </script>
 
 <style scoped>
@@ -33,7 +21,7 @@ onMounted(() => {
   height: 160px;
 } */
 .logo {
-    filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.8));
+    filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.5));
     left: 14%;
     top: 10%;
   }

pages/index.vue

@@ -9,10 +9,8 @@
           </li>
         </ul> -->
       <img class="logo" src="/logo.svg">
-      <button class="button flex justify-center items-center" @click="play()">
+      <button class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()">
-        <svg width="40px" height="30px">
+        ↓
-          <polygon points="0,0 0,30 30,15" />
-        </svg>
       </button>
     </figure>
     <div class="shadow screen" />
@@ -23,27 +21,26 @@
     </video>
     <div class="mix screen hide">
       <video class="mixPlayer screen" controls ref="mixPlayer">
-        <source src="https://files.erudi.fr/evilspins/zero-a-hd.mp4" type="video/mp4">
+        <source :src="mixPlayerSourceHD" type="video/mp4">
-        <source src="https://files.erudi.fr/evilspins/zero-a-sd.mp4" type="video/webm"
+        <source :src="mixPlayerSourceSD" type="video/mp4" media="all and (max-width: 640px)">
-          media="all and (max-width: 640px)">
       </video>
-      <button class="button button--close flex justify-center items-center" @click="closePlayer()">
+      <button class="button button--close m-4 flex justify-center items-center" @click="closePlayer()">
-        <svg width="40px" height="30px">
+        <svg width="20px" height="30px">
           <line x1="0" y1="0" x2="20" y2="20" stroke="black" stroke-width="2" />
           <line x1="0" y1="20" x2="20" y2="0" stroke="black" stroke-width="2" />
         </svg>
       </button>
     </div>
   </section>
-  <section class="flex">
+  <section class="flex bg-black">
-    <zero-a>
+    <zero-a @click="play('ES00A')">
-      <button class="button flex justify-center items-center" @click="play()">
+      <button class="button absolute object-center p-4 flex justify-center items-center">
         <svg width="40px" height="30px">
           <polygon points="0,0 0,30 30,15" />
         </svg>
       </button>
     </zero-a>
-    <zero-b></zero-b>
+    <zero-b @click="play('ES00B')"></zero-b>
   </section>
 </template>
 <script setup lang="ts">
@@ -59,13 +56,19 @@ useSeoMeta({
 
 // animate player
 const mixPlayer = ref()
+const mixPlayerSourceHD = ref()
+const mixPlayerSourceSD = ref()
+
+const play = (id: string) => {
+  mixPlayerSourceHD.value = 'https://files.erudi.fr/evilspins/'+id+'-HD.mp4'
+  mixPlayerSourceSD.value = 'https://files.erudi.fr/evilspins/'+id+'-SD.mp4'
 
-const play = () => {
   fadeOut(document.querySelector('.button'))
   fadeOut(document.querySelector('.logo'))
   fadeOut(document.querySelector('.animation'))
   fadeIn(document.querySelector('.mix'))
   fadeOut(document.querySelector('.shadow'))
+  mixPlayer.value.load()
   mixPlayer.value.play()
   mixPlayer.value.focus()
 }
@@ -86,6 +89,10 @@ const fadeIn = (elt: HTMLElement) => {
   elt.classList.remove('hide')
 }
 
+const scrollDown = function() {
+  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth'})
+}
+
 // load data
 const { data: artists } = await useFetch('/api/artists')
 const { data: styles, status: statusStyles } = await useFetch('/api/styles', { lazy: true })
@@ -130,6 +137,7 @@ body {
 
 .mix {
   z-index: 4;
+  position: fixed;
 }
 
 .shadow {
@@ -154,39 +162,8 @@ body {
   filter: drop-shadow(8px 8px 0 rgb(0 0 0 / 0.8));
 }
 
-.button {
+.mixPlayer {
-  position: relative;
+  background: black;
-  top: 70px;
-  padding-left: 16px;
-  text-decoration: none;
-  box-shadow: 0 8px 0 0 black;
-  transition: all .3s;
-  border: 8px black solid;
-  line-height: 100%;
-  height: 70px;
-  width: 70px;
-  border-width: 2px;
-  border-radius: 100px;
-  cursor: pointer;
-  color: #fdec50ff;
-  font-size: 26px;
-  background-color: #ffffff59;
-
-  &:hover {
-    background-color: #fdec50ff;
-    color: black;
-  }
-
-  &:active {
-    top: 64px;
-    box-shadow: 0 0 0 0 black;
-  }
-
-  &--close {
-    right: 24px;
-    padding-top: 10px;
-    position: absolute;
-  }
 }
 
 .hide {

public/play.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="play.svg"
+   width="25.177818"
+   height="31.875"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:zoom="1.9448516"
+     inkscape:cx="202.07197"
+     inkscape:cy="136.00009"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     style="font-size:64px;line-height:0.6;font-family:'Noto Sans Rejang';-inkscape-font-specification:'Noto Sans Rejang';letter-spacing:0.03px;word-spacing:0.16px;stroke-width:5.38174;stroke-miterlimit:2.3;stroke-dasharray:1.07635, 5.91989"
+     d="M 0,31.875 V 0 l 25.177818,15.9375 z"
+     id="text1"
+     aria-label="▸" />
+</svg>

server/api/compilations.ts

@@ -1,11 +1,11 @@
 export default eventHandler(() => {
   return [
     {
-            id: 'ES00',
+      id: 'ES00A',
       name: 'Zero'
     },
     {
-            id: 'ES01',
+      id: 'ES00B',
       name: 'Zero B-Side'
     }
   ]

server/api/styles.ts

@@ -12,5 +12,5 @@ export default eventHandler(() => {
       "id": 2,
       "name": "indie-pop"
     }
-]
+  ]
 })

server/api/tracks.ts

@@ -3,7 +3,7 @@ export default eventHandler(() => {
     {
       id: 0,
       number: 1,
-            compilation: 'ES00',
+      compilation: 'ES00A',
       title: 'The grinding wheel',
       artist: 0,
       duration: 392,
@@ -13,7 +13,7 @@ export default eventHandler(() => {
     {
       id: 1,
       number: 2,
-            compilation: 'ES00',
+      compilation: 'ES00A',
       title: 'Bleach',
       artist: 1,
       duration: 500,
@@ -23,7 +23,7 @@ export default eventHandler(() => {
     {
       id: 2,
       number: 3,
-            compilation: 'ES00',
+      compilation: 'ES00A',
       title: 'Televised mind',
       artist: 2,
       duration: 0,
@@ -33,7 +33,7 @@ export default eventHandler(() => {
     {
       id: 3,
       number: 4,
-            compilation: 'ES00',
+      compilation: 'ES00A',
       title: 'In it',
       artist: 3,
       duration: 0,
@@ -43,7 +43,7 @@ export default eventHandler(() => {
     {
       id: 4,
       number: 5,
-            compilation: 'ES00',
+      compilation: 'ES00A',
       title: 'Bad michel',
       artist: 4,
       duration: 0,
@@ -53,7 +53,7 @@ export default eventHandler(() => {
     {
       id: 5,
       number: 6,
-            compilation: 'ES00',
+      compilation: 'ES00A',
       title: 'Overall',
       artist: 5,
       duration: 0,
@@ -63,7 +63,7 @@ export default eventHandler(() => {
     {
       id: 6,
       number: 6,
-            compilation: 'ES00',
+      compilation: 'ES00A',
       title: 'Guitar jet',
       artist: 5,
       duration: 0,
@@ -73,7 +73,7 @@ export default eventHandler(() => {
     {
       id: 7,
       number: 6,
-            compilation: 'ES00',
+      compilation: 'ES00A',
       title: 'Blowup',
       artist: 5,
       duration: 0,
@@ -83,7 +83,7 @@ export default eventHandler(() => {
     {
       id: 8,
       number: 6,
-            compilation: 'ES00',
+      compilation: 'ES00A',
       title: 'Intercontinental radio waves',
       artist: 5,
       duration: 0,
@@ -93,7 +93,7 @@ export default eventHandler(() => {
     {
       id: 9,
       number: 6,
-            compilation: 'ES00',
+      compilation: 'ES00A',
       title: 'Here comes the sun',
       artist: 5,
       duration: 0,
@@ -103,7 +103,117 @@ export default eventHandler(() => {
     {
       id: 10,
       number: 11,
-            compilation: 'ES00',
+      compilation: 'ES00A',
+      title: 'Like in the movies',
+      artist: 5,
+      duration: 0,
+      bpm: 0,
+      link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2'
+    },
+    {
+      id: 0,
+      number: 1,
+      compilation: 'ES00A',
+      title: 'The grinding wheel',
+      artist: 0,
+      duration: 392,
+      bpm: 0,
+      link: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel'
+    },
+    {
+      id: 1,
+      number: 2,
+      compilation: 'ES00A',
+      title: 'Bleach',
+      artist: 1,
+      duration: 500,
+      bpm: 0,
+      link: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2'
+    },
+    {
+      id: 2,
+      number: 3,
+      compilation: 'ES00A',
+      title: 'Televised mind',
+      artist: 2,
+      duration: 0,
+      bpm: 0,
+      link: 'https://fontainesdc.bandcamp.com/track/televised-mind'
+    },
+    {
+      id: 3,
+      number: 4,
+      compilation: 'ES00A',
+      title: 'In it',
+      artist: 3,
+      duration: 0,
+      bpm: 0,
+      link: 'https://howlinbananarecords.bandcamp.com/track/in-it'
+    },
+    {
+      id: 4,
+      number: 5,
+      compilation: 'ES00A',
+      title: 'Bad michel',
+      artist: 4,
+      duration: 0,
+      bpm: 0,
+      link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3'
+    },
+    {
+      id: 5,
+      number: 6,
+      compilation: 'ES00A',
+      title: 'Overall',
+      artist: 5,
+      duration: 0,
+      bpm: 0,
+      link: 'https://newcandys.bandcamp.com/track/overall'
+    },
+    {
+      id: 6,
+      number: 6,
+      compilation: 'ES00A',
+      title: 'Guitar jet',
+      artist: 5,
+      duration: 0,
+      bpm: 0,
+      link: 'https://radiomartiko.bandcamp.com/track/guitare-jet'
+    },
+    {
+      id: 7,
+      number: 6,
+      compilation: 'ES00A',
+      title: 'Blowup',
+      artist: 5,
+      duration: 0,
+      bpm: 0,
+      link: 'https://magicshoppe.bandcamp.com/track/blowup'
+    },
+    {
+      id: 8,
+      number: 6,
+      compilation: 'ES00A',
+      title: 'Intercontinental radio waves',
+      artist: 5,
+      duration: 0,
+      bpm: 0,
+      link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves'
+    },
+    {
+      id: 9,
+      number: 6,
+      compilation: 'ES00A',
+      title: 'Here comes the sun',
+      artist: 5,
+      duration: 0,
+      bpm: 0,
+      link: 'https://blue-orchid.bandcamp.com/track/here-come-the-sun'
+    },
+    {
+      id: 10,
+      number: 11,
+      compilation: 'ES00A',
       title: 'Like in the movies',
       artist: 5,
       duration: 0,