64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<b-container>
|
||
|
|
<b-row>
|
||
|
|
<b-col>
|
||
|
|
<h1>Item</h1>
|
||
|
|
</b-col>
|
||
|
|
</b-row>
|
||
|
|
<big-chungus-loader text="Fetching item info..." v-if="processing"/>
|
||
|
|
<b-row v-else>
|
||
|
|
<b-col class="my-4">
|
||
|
|
<div>
|
||
|
|
<b-img-lazy blank-src="@/assets/music_placeholder.png"
|
||
|
|
:src="songInfo.cover_url || '@/assets/music_placeholder.png'"
|
||
|
|
id="cover-art"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="my-3">
|
||
|
|
<p><b>Artist:</b> {{ songInfo.artist }} </p>
|
||
|
|
<p><b>Album:</b> {{ songInfo.album }}</p>
|
||
|
|
<p><b>Title:</b> {{ songInfo.title }}</p>
|
||
|
|
</div>
|
||
|
|
<div class="my-3">
|
||
|
|
<b-button variant="success" :disabled="!songInfo.spotify_id">Play!</b-button>
|
||
|
|
</div>
|
||
|
|
</b-col>
|
||
|
|
</b-row>
|
||
|
|
</b-container>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import BigChungusLoader from "@/components/BigChungusLoader";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "Item",
|
||
|
|
components: {
|
||
|
|
BigChungusLoader
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
processing: true,
|
||
|
|
songInfo: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.$api.getItem(this.$route.params.id).then((data) => {
|
||
|
|
if (data) {
|
||
|
|
this.songInfo = data;
|
||
|
|
this.processing = false;
|
||
|
|
} else {
|
||
|
|
this.$showToast("Invalid response from server");
|
||
|
|
}
|
||
|
|
}).catch(({text}) => {
|
||
|
|
this.$showToast(text);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
#cover-art {
|
||
|
|
max-width: 100%;
|
||
|
|
width: 25vh;
|
||
|
|
}
|
||
|
|
</style>
|