player can switch between compilation

2024-09-08 18:53:20 +02:00
parent 431fc4912b
commit 0c0074ccc1
9 changed files with 419 additions and 280 deletions
--- a/assets/css/main.css
+++ b/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;
+}
--- a/components/zero-a.vue
+++ b/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%;
 }
--- a/components/zero-b.vue
+++ b/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);
-
-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);
-  });
-});
+const atropos = ref(null)
 </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%;
  }
--- a/pages/index.vue
+++ b/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()">
-        <svg width="40px" height="30px">
-          <polygon points="0,0 0,30 30,15" />
-        </svg>
+      <button class="button button--screened relative top-16 flex justify-center items-center" @click="scrollDown()">
+        ↓
      </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="https://files.erudi.fr/evilspins/zero-a-sd.mp4" type="video/webm"
-          media="all and (max-width: 640px)">
+        <source :src="mixPlayerSourceHD" type="video/mp4">
+        <source :src="mixPlayerSourceSD" type="video/mp4" media="all and (max-width: 640px)">
      </video>
-      <button class="button button--close flex justify-center items-center" @click="closePlayer()">
-        <svg width="40px" height="30px">
+      <button class="button button--close m-4 flex justify-center items-center" @click="closePlayer()">
+        <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">
-    <zero-a>
-      <button class="button flex justify-center items-center" @click="play()">
+  <section class="flex bg-black">
+    <zero-a @click="play('ES00A')">
+      <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 {
-  position: relative;
-  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;
-  }
+.mixPlayer {
+  background: black;
 }

 .hide {
--- a/public/play.svg
+++ b/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>
--- a/server/api/artists.ts
+++ b/server/api/artists.ts
@@ -1,70 +1,70 @@
 export default eventHandler(() => {
-    return [
-        {
-            id: 0,
-            name: "L'efondras",
-            link: "https://leffondras.bandcamp.com/music",
-            style: [0, 1, 2]
-        },
-        {
-            id: 1,
-            name: "The kundalini genie",
-            link: "https://the-kundalini-genie.bandcamp.com",
-            style: [0, 1, 2]
-        },
-        {
-            id: 2,
-            name: "Fontaines D.C.",
-            link: "https://fontainesdc.bandcamp.com",
-            style: [0, 1, 2]
-        },
-        {
-            id: 3,
-            name: "Fontanarosa",
-            link: "https://fontanarosa.bandcamp.com",
-            style: [0, 1, 2]
-        },
-        {
-            id: 4,
-            name: "Johnny mafia",
-            link: "https://johnnymafia.bandcamp.com",
-            style: [0, 1, 2]
-        },
-        {
-            id: 5,
-            name: "New candys",
-            link: "https://newcandys.bandcamp.com",
-            style: [0, 1, 2]
-        },
-        {
-            id: 6,
-            name: "Magic shoppe",
-            link: "https://magicshoppe.bandcamp.com",
-            style: [0, 1, 2]
-        },
-        {
-            id: 7,
-            name: "Les jaguars",
-            link: "https://radiomartiko.bandcamp.com/album/surf-qu-b-cois",
-            style: [0, 1, 2]
-        },
-        {
-            id: 8,
-            name: "TRAAMS",
-            link: "https://traams.bandcamp.com",
-            style: [0, 1, 2]
-        },
-        {
-            id: 9,
-            name: "Blue orchid",
-            link: "https://blue-orchid.bandcamp.com",
-            style: [0, 1, 2]
-        },
-        {
-            id: 10,
-            name: "I love UFO",
-            link: "https://bruitblanc.bandcamp.com",
-            style: [0, 1, 2]
-        }
-    ]
+  return [
+    {
+      id: 0,
+      name: "L'efondras",
+      link: "https://leffondras.bandcamp.com/music",
+      style: [0, 1, 2]
+    },
+    {
+      id: 1,
+      name: "The kundalini genie",
+      link: "https://the-kundalini-genie.bandcamp.com",
+      style: [0, 1, 2]
+    },
+    {
+      id: 2,
+      name: "Fontaines D.C.",
+      link: "https://fontainesdc.bandcamp.com",
+      style: [0, 1, 2]
+    },
+    {
+      id: 3,
+      name: "Fontanarosa",
+      link: "https://fontanarosa.bandcamp.com",
+      style: [0, 1, 2]
+    },
+    {
+      id: 4,
+      name: "Johnny mafia",
+      link: "https://johnnymafia.bandcamp.com",
+      style: [0, 1, 2]
+    },
+    {
+      id: 5,
+      name: "New candys",
+      link: "https://newcandys.bandcamp.com",
+      style: [0, 1, 2]
+    },
+    {
+      id: 6,
+      name: "Magic shoppe",
+      link: "https://magicshoppe.bandcamp.com",
+      style: [0, 1, 2]
+    },
+    {
+      id: 7,
+      name: "Les jaguars",
+      link: "https://radiomartiko.bandcamp.com/album/surf-qu-b-cois",
+      style: [0, 1, 2]
+    },
+    {
+      id: 8,
+      name: "TRAAMS",
+      link: "https://traams.bandcamp.com",
+      style: [0, 1, 2]
+    },
+    {
+      id: 9,
+      name: "Blue orchid",
+      link: "https://blue-orchid.bandcamp.com",
+      style: [0, 1, 2]
+    },
+    {
+      id: 10,
+      name: "I love UFO",
+      link: "https://bruitblanc.bandcamp.com",
+      style: [0, 1, 2]
+    }
+  ]
 })
--- a/server/api/compilations.ts
+++ b/server/api/compilations.ts
@@ -1,12 +1,12 @@
 export default eventHandler(() => {
-    return [
-        {
-            id: 'ES00',
-            name: 'Zero'
-        },
-        {
-            id: 'ES01',
-            name: 'Zero B-Side'
-        }
-    ]
+  return [
+    {
+      id: 'ES00A',
+      name: 'Zero'
+    },
+    {
+      id: 'ES00B',
+      name: 'Zero B-Side'
+    }
+  ]
 })
--- a/server/api/styles.ts
+++ b/server/api/styles.ts
@@ -1,16 +1,16 @@
 export default eventHandler(() => {
-    return [
+  return [
    {
-        "id": 0,
-        "name": "post-rock"
+      "id": 0,
+      "name": "post-rock"
    },
    {
-        "id": 1,
-        "name": "math-rock"
+      "id": 1,
+      "name": "math-rock"
    },
    {
-        "id": 2,
-        "name": "indie-pop"
+      "id": 2,
+      "name": "indie-pop"
    }
-]
+  ]
 })
--- a/server/api/tracks.ts
+++ b/server/api/tracks.ts
@@ -1,114 +1,224 @@
 export default eventHandler(() => {
-    return [
-        {
-            id: 0,
-            number: 1,
-            compilation: 'ES00',
-            title: 'The grinding wheel',
-            artist: 0,
-            duration: 392,
-            bpm: 0,
-            link: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel'
-        },
-        {
-            id: 1,
-            number: 2,
-            compilation: 'ES00',
-            title: 'Bleach',
-            artist: 1,
-            duration: 500,
-            bpm: 0,
-            link: 'https://the-kundalini-genie.bandcamp.com/track/bleach-2'
-        },
-        {
-            id: 2,
-            number: 3,
-            compilation: 'ES00',
-            title: 'Televised mind',
-            artist: 2,
-            duration: 0,
-            bpm: 0,
-            link: 'https://fontainesdc.bandcamp.com/track/televised-mind'
-        },
-        {
-            id: 3,
-            number: 4,
-            compilation: 'ES00',
-            title: 'In it',
-            artist: 3,
-            duration: 0,
-            bpm: 0,
-            link: 'https://howlinbananarecords.bandcamp.com/track/in-it'
-        },
-        {
-            id: 4,
-            number: 5,
-            compilation: 'ES00',
-            title: 'Bad michel',
-            artist: 4,
-            duration: 0,
-            bpm: 0,
-            link: 'https://johnnymafia.bandcamp.com/track/bad-michel-3'
-        },
-        {
-            id: 5,
-            number: 6,
-            compilation: 'ES00',
-            title: 'Overall',
-            artist: 5,
-            duration: 0,
-            bpm: 0,
-            link: 'https://newcandys.bandcamp.com/track/overall'
-        },
-        {
-            id: 6,
-            number: 6,
-            compilation: 'ES00',
-            title: 'Guitar jet',
-            artist: 5,
-            duration: 0,
-            bpm: 0,
-            link: 'https://radiomartiko.bandcamp.com/track/guitare-jet'
-        },
-        {
-            id: 7,
-            number: 6,
-            compilation: 'ES00',
-            title: 'Blowup',
-            artist: 5,
-            duration: 0,
-            bpm: 0,
-            link: 'https://magicshoppe.bandcamp.com/track/blowup'
-        },
-        {
-            id: 8,
-            number: 6,
-            compilation: 'ES00',
-            title: 'Intercontinental radio waves',
-            artist: 5,
-            duration: 0,
-            bpm: 0,
-            link: 'https://traams.bandcamp.com/track/intercontinental-radio-waves'
-        },
-        {
-            id: 9,
-            number: 6,
-            compilation: 'ES00',
-            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: 'ES00',
-            title: 'Like in the movies',
-            artist: 5,
-            duration: 0,
-            bpm: 0,
-            link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2'
-        },
-    ]
+  return [
+    {
+      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,
+      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,
+      bpm: 0,
+      link: 'https://bruitblanc.bandcamp.com/track/like-in-the-movies-2'
+    },
+  ]
 })