71 lines
1.3 KiB
Vue
71 lines
1.3 KiB
Vue
<template>
|
|
<aside>
|
|
<header>
|
|
<h3 class="text-gray-600 font-medium">Previous song</h3>
|
|
<playlist-card class="mt-4" :song="previousSong"></playlist-card>
|
|
</header>
|
|
|
|
<div class="playlist">
|
|
<h3 class="text-gray-600 font-medium">Up next</h3>
|
|
<div class="playlist-list_container mt-4">
|
|
<playlist-card v-for="song in nextSongs" :key="song.id" :song="song" @click="startSong(song)"></playlist-card>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent } from "vue"
|
|
import PlaylistCard from "./PlaylistCard.vue"
|
|
|
|
export default defineComponent({
|
|
emits: [
|
|
'startSong'
|
|
],
|
|
|
|
props: {
|
|
playlistSongs: Array,
|
|
},
|
|
|
|
components: {
|
|
PlaylistCard,
|
|
},
|
|
|
|
setup(props, {emit}) {
|
|
let previousSong = {}
|
|
|
|
return { previousSong }
|
|
},
|
|
|
|
beforeMount() {},
|
|
|
|
mounted() {},
|
|
|
|
data() {
|
|
return {}
|
|
},
|
|
|
|
computed: {
|
|
nextSongs() {
|
|
return this.playlistSongs.slice(0, 4)
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
startSong(song) {
|
|
console.log('Playlist: starting an arbitrary song...')
|
|
this.$emit('startSong', song)
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.playlist-list_container {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: repeat(4, min-content);
|
|
gap: 2em 0em;
|
|
}
|
|
</style>
|