PLATINE drag to play & random tracks

app/pages/mix.vue

@@ -1,16 +1,16 @@
 <template>
-  <Platine :track="track1" />
-  <!-- <card v-if="track1" :track="track1" is-face-up /> -->
-  <Platine :track="track2" />
-  <!-- <card v-if="track2" :track="track2" is-face-up /> -->
+  <div class="mix">
+    <Platine :track="track1" />
+    <Platine :track="track2" />
+  </div>
 </template>
 
 <script setup>
 import { useDataStore } from '~/store/data'
 
 const dataStore = useDataStore()
-const track1 = computed(() => dataStore.getTrackById(2023322))
-const track2 = computed(() => dataStore.getTrackById(2023329))
+const track1 = ref(null)
+const track2 = ref(null)
 
 // Configuration du layout
 definePageMeta({
@@ -18,13 +18,43 @@ definePageMeta({
 })
 
 onMounted(async () => {
-  const dataStore = useDataStore()
   await dataStore.loadData()
+  track1.value = dataStore.getRandomPlaylistTrack()
+  track2.value = dataStore.getRandomPlaylistTrack()
 })
 </script>
 
 <style>
-.logo {
-  filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 0.7));
+.mix {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+}
+
+/* Écran portrait (plus haut que large) */
+@media (orientation: portrait) {
+  .mix {
+    flex-direction: column;
+  }
+
+  .platine {
+    height: 50vh;
+
+    .disc {
+      height: 100%;
+      width: auto;
+    }
+  }
+}
+
+/* Écran paysage (plus large que haut) */
+@media (orientation: landscape) {
+  .mix {
+    flex-direction: row;
+  }
+
+  .platine {
+    width: 50vw;
+  }
 }
 </style>