88 lines
2.9 KiB
Vue
88 lines
2.9 KiB
Vue
<template>
|
|
<div style='overflow-x: hidden;'>
|
|
<!-- Loading & Error -->
|
|
<v-overlay opacity='0.95' z-index='0' v-if='loading || error'>
|
|
<v-progress-circular indeterminate v-if='loading'></v-progress-circular>
|
|
<v-icon class='red--text' v-if='error'>
|
|
mdi-alert-circle
|
|
</v-icon>
|
|
</v-overlay>
|
|
|
|
|
|
<div v-if='data'>
|
|
<div v-for='(section, sectionIndex) in data.sections' :key='"section"+sectionIndex' class='mb-8'>
|
|
|
|
<h1 class='py-2'>{{section.title}}</h1>
|
|
<div class='d-flex' style='overflow-x: auto; overflow-y: hidden;'>
|
|
<div v-for='(item, index) in section.items' :key='"item"+index' class='mr-4 my-2'>
|
|
<PlaylistTile v-if='item.type == "playlist"' :playlist='item.data' card></PlaylistTile>
|
|
<ArtistTile v-if='item.type == "artist"' :artist='item.data' card></ArtistTile>
|
|
<DeezerChannel v-if='item.type == "channel"' :channel='item.data'></DeezerChannel>
|
|
<AlbumTile v-if='item.type == "album"' :album='item.data' card></AlbumTile>
|
|
<SmartTrackList v-if='item.type == "smarttracklist" || item.type == "flow"' :stl='item.data'></SmartTrackList>
|
|
</div>
|
|
<div v-if='section.hasMore' class='mx-2 align-center justify-center d-flex'>
|
|
<v-btn @click='showMore(section)' color='primary'>
|
|
{{$t("Show more")}}
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PlaylistTile from '@/components/PlaylistTile.vue';
|
|
import ArtistTile from '@/components/ArtistTile.vue';
|
|
import DeezerChannel from '@/components/DeezerChannel.vue';
|
|
import AlbumTile from '@/components/AlbumTile.vue';
|
|
import SmartTrackList from '@/components/SmartTrackList.vue';
|
|
|
|
export default {
|
|
name: 'DeezerPage',
|
|
components: {PlaylistTile, ArtistTile, DeezerChannel, AlbumTile, SmartTrackList},
|
|
props: {
|
|
target: String
|
|
},
|
|
data() {
|
|
return {
|
|
data: null,
|
|
loading: true,
|
|
error: false,
|
|
Ctarget: this.target
|
|
}
|
|
},
|
|
methods: {
|
|
//Load data
|
|
async load() {
|
|
this.loading = true;
|
|
this.data = null;
|
|
let data = await this.$axios.get(`/page?target=${this.target}`);
|
|
this.data = data.data;
|
|
this.loading = false;
|
|
},
|
|
//Show more items
|
|
showMore(section) {
|
|
this.$router.push({
|
|
path: '/page',
|
|
query: {target: section.target}
|
|
});
|
|
}
|
|
},
|
|
//Load data on load
|
|
created() {
|
|
this.load();
|
|
},
|
|
watch: {
|
|
//Check if target changed to not use cached version
|
|
target() {
|
|
if (this.target == this.Ctarget) return;
|
|
this.Ctarget = this.target;
|
|
this.load();
|
|
}
|
|
}
|
|
}
|
|
</script> |