<template>
  <div class="mix">
    <Platine :track="track1" />
    <Platine :track="track2" />
  </div>
</template>

<script setup>
import { useDataStore } from '~/store/data'

const dataStore = useDataStore()
const track1 = ref(null)
const track2 = ref(null)

// Configuration du layout
definePageMeta({
  layout: 'empty'
})

onMounted(async () => {
  await dataStore.loadData()
  track1.value = dataStore.getRandomPlaylistTrack()
  track2.value = dataStore.getRandomPlaylistTrack()
})
</script>

<style>
.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>
