77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
<template>
|
|
<div class="boxes" :class="{ 'box-selected': uiStore.isBoxSelected }">
|
|
<button @click="uiStore.closeBox" v-if="uiStore.isBoxSelected"
|
|
class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
|
|
aria-label="close the box">
|
|
close
|
|
</button>
|
|
<box v-for="(box, i) in dataStore.boxes.slice()" :key="box.id" :tabindex="dataStore.boxes.length - i" :box="box"
|
|
@click="openBox(box)" class="text-center" :class="box.state" :id="box.id">
|
|
<playButton @click.stop="playSelectedBox(box)" :objectToPlay="box" class="relative z-40 m-auto" />
|
|
<template v-if="box.state === 'box-selected'">
|
|
<deckCompilation :box="box" class="box-page" v-if="box.type === 'compilation'" @click.stop />
|
|
<deckPlaylist :box="box" class="box-page" v-if="box.type === 'playlist'" @click.stop />
|
|
</template>
|
|
</box>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Box } from '~~/types/types'
|
|
import { useDataStore } from '~/store/data'
|
|
import { usePlayerStore } from '~/store/player'
|
|
import { useUiStore } from '~/store/ui'
|
|
|
|
const dataStore = useDataStore()
|
|
const playerStore = usePlayerStore()
|
|
const uiStore = useUiStore()
|
|
|
|
function openBox(box: Box) {
|
|
if (box.state !== 'box-selected') {
|
|
uiStore.selectBox(box.id)
|
|
// Scroll to the top smoothly
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
})
|
|
}
|
|
}
|
|
|
|
function playSelectedBox(box: Box) {
|
|
playerStore.playBox(box)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.boxes {
|
|
@apply flex flex-col items-center justify-center text-center w-full;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin-top: 250px;
|
|
transition: margin-top .5s ease;
|
|
|
|
&.box-selected {
|
|
margin-top: 0;
|
|
|
|
.box {
|
|
@apply w-full;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
.play-button {
|
|
@apply relative z-40 -bottom-1/2 opacity-0;
|
|
}
|
|
|
|
&.box-selected .play-button {
|
|
@apply opacity-100 z-20;
|
|
bottom: 20%;
|
|
transition:
|
|
bottom 0.7s ease,
|
|
opacity 0.7s ease;
|
|
}
|
|
}
|
|
}
|
|
</style>
|