player can switch between compilation

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 {