82 lines
1.7 KiB
Vue
82 lines
1.7 KiB
Vue
<template>
|
|
<div class="radio grid grid-cols-2 gap-x-8 p-8">
|
|
<player
|
|
class="col-span-1 py-4 bg-green-400"
|
|
:currentSong="currentSong"
|
|
@start-next-song="startNextSong"
|
|
@start-prev-song="startPrevSong"
|
|
></player>
|
|
|
|
<playlist
|
|
class="col-span-1 py-4 px-6 bg-blue-400"
|
|
:playlistSongs="playlistSongs"
|
|
@start-song="startSong"
|
|
></playlist>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent } from "vue"
|
|
import Player from "./Components/Player.vue"
|
|
import Playlist from "./Components/Playlist.vue"
|
|
|
|
export default defineComponent({
|
|
emits: [],
|
|
|
|
props: {},
|
|
|
|
components: {
|
|
Player,
|
|
Playlist,
|
|
},
|
|
|
|
setup(props, {emit}) {
|
|
let currentSong = {
|
|
title: 'Childhood Memories',
|
|
artist: 'mell-ø x Ambulo',
|
|
album: 'Afloat Again EP',
|
|
release_date: '2020',
|
|
cover_art_url: 'https://music.ditoforge.test/images/mell-ø - Afloat Again EP (2020).webp',
|
|
file_url: 'https://music.ditoforge.test/storage/music/mell-ø - Childhood Memories.mp3',
|
|
}
|
|
|
|
let playlistSongs = [currentSong, currentSong, currentSong]
|
|
|
|
return { currentSong, playlistSongs }
|
|
},
|
|
|
|
beforeMount() {},
|
|
|
|
mounted() {},
|
|
|
|
data() {
|
|
return {}
|
|
},
|
|
|
|
computed: {},
|
|
|
|
methods: {
|
|
startNextSong() {
|
|
console.log('App: starting the next song...')
|
|
},
|
|
|
|
startPrevSong() {
|
|
console.log('App: starting the previous song...')
|
|
},
|
|
|
|
startSong(song) {
|
|
console.log('App: starting an arbitrary song...')
|
|
console.log("App: here's the song:", song)
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.radio {
|
|
min-width: 1024px;
|
|
max-width: 1128px;
|
|
width: 100%;
|
|
}
|
|
</style>
|