Implemented item view

This commit is contained in:
Pünkösd Marcell 2020-11-26 19:48:43 +01:00
parent 6a63392b09
commit 60f026b6d9
8 changed files with 103 additions and 29 deletions

View File

@ -9,6 +9,11 @@
<div id="footer"> <div id="footer">
<footer-nav/> <footer-nav/>
<div id="player-spacer" v-if="$store.state.playerActive"></div>
</div>
<div id="player-holder" v-if="$store.state.playerActive">
asdasdasdasdasd
</div> </div>
</div> </div>
@ -92,4 +97,16 @@ export default {
#loading-screen { #loading-screen {
margin: 45vh auto 0 auto; margin: 45vh auto 0 auto;
} }
#player-holder {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 60px;
}
#player-spacer {
height: 60px;
}
</style> </style>

View File

@ -131,8 +131,8 @@ export default new class {
return this._performApiCall('get', `/lists/${id}`, null, true, 200); return this._performApiCall('get', `/lists/${id}`, null, true, 200);
} }
getTrackFromList(listid, trackid) { getItem(id) {
return this._performApiCall('get', `/lists/${listid}/${trackid}`, null, true, 200); return this._performApiCall('get', `/items/${id}`, null, true, 200);
} }
} }

BIN
src/assets/spotify.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

View File

@ -2,7 +2,7 @@ import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Collections from '@/views/Collections.vue' import Collections from '@/views/Collections.vue'
import Collection from "@/views/Collection"; import Collection from "@/views/Collection";
import Track from "@/views/Track"; import Item from "@/views/Item";
import Login from "@/views/Login"; import Login from "@/views/Login";
@ -32,9 +32,9 @@ const routes = [
} }
}, },
{ {
path: '/track/:id', path: '/item/:id',
name: 'Track', name: 'Item',
component: Track, component: Item,
meta: { meta: {
allowVisit(authorized) { allowVisit(authorized) {
return authorized; return authorized;

View File

@ -8,7 +8,8 @@ export default new Vuex.Store({
userdata: { userdata: {
name: null name: null
}, },
appReady: false appReady: false,
playerActive: false
}, },
mutations: { mutations: {
storeUserData(state, username) { storeUserData(state, username) {

View File

@ -9,17 +9,16 @@
<b-row v-else> <b-row v-else>
<b-col class="my-4"> <b-col class="my-4">
<b-table :items="tracklist" :fields="fields" hover borderless> <b-table :items="tracklist" :fields="fields" hover borderless @row-clicked="rowClicked" tbody-tr-class="clickable-table-row-thing">
<template #cell(cover_url)="data"> <template #cell(cover_url)="data">
<b-img-lazy :src="data.cover_url" height="45px" blank-src="@/assets/music_placeholder.png" <b-img-lazy :src="data.item.cover_url_small" height="45px" blank-src="@/assets/music_placeholder.png"
v-if="!!data.cover_url"/> v-if="!!data.item.cover_url_small"/>
<b-img src="@/assets/music_placeholder.png" height="45px" v-else/> <b-img src="@/assets/music_placeholder.png" height="45px" v-else/>
</template> </template>
<template #cell(id)="data"> <template #cell(id)="data">
<div class="text-right"> <div class="text-right">
<b-button :asd="data">Open</b-button>&nbsp; <b-button variant="success" :disabled="!data.item.spotify_id">Play</b-button>
<b-button variant="success" :disabled="!data.spotify_id">Play</b-button>
</div> </div>
</template> </template>
</b-table> </b-table>
@ -58,6 +57,11 @@ export default {
tracklist: [] tracklist: []
} }
}, },
methods: {
rowClicked(data) {
this.$router.push({name: 'Item', params: {id: data.id}});
}
},
mounted() { mounted() {
this.$api.getList(this.$route.params.id).then((data) => { this.$api.getList(this.$route.params.id).then((data) => {
if (data) { if (data) {
@ -75,6 +79,9 @@ export default {
} }
</script> </script>
<style scoped> <style>
/* Should be scoped, but that could not change row style*/
.clickable-table-row-thing {
cursor: pointer;
}
</style> </style>

64
src/views/Item.vue Normal file
View File

@ -0,0 +1,64 @@
<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>

View File

@ -1,15 +0,0 @@
<template>
<div>
asd
</div>
</template>
<script>
export default {
name: "Track"
}
</script>
<style scoped>
</style>