kunkka
4 years ago
commit
309ca88c34
|
After Width: | Height: | Size: 29 KiB |
@ -0,0 +1,57 @@
|
||||
import axios from "axios";
|
||||
import localforage from "localforage";
|
||||
import { getMP3 } from "@/api/track";
|
||||
|
||||
export function cacheTrack(id) {
|
||||
let tracks = localforage.createInstance({
|
||||
name: "tracks",
|
||||
});
|
||||
|
||||
// TODO: limit cache songs number
|
||||
// tracks.length().then(function (length) {
|
||||
// if (length > 2) {
|
||||
// tracks.keys().then(function (keys) {
|
||||
// tracks.removeItem(keys[keys.length - 2]);
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
|
||||
// TODO: cache track details
|
||||
return getMP3(id).then((data) => {
|
||||
return axios
|
||||
.get(data.data[0].url.replace(/^http:/, "https:"), {
|
||||
responseType: "blob",
|
||||
})
|
||||
.then((data) => {
|
||||
tracks.setItem(`${id}`, { mp3: data.data });
|
||||
return { mp3: data.data };
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function countDBSize(dbName) {
|
||||
let db = localforage.createInstance({
|
||||
name: dbName,
|
||||
});
|
||||
let trackSizes = [];
|
||||
return db
|
||||
.iterate((value) => {
|
||||
trackSizes.push(value.mp3.size);
|
||||
})
|
||||
.then(() => {
|
||||
return {
|
||||
bytes: trackSizes.reduce((s1, s2) => s1 + s2),
|
||||
length: trackSizes.length,
|
||||
};
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
export function clearDB(dbName) {
|
||||
let db = localforage.createInstance({
|
||||
name: dbName,
|
||||
});
|
||||
return db.clear();
|
||||
}
|
||||
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div v-show="show">
|
||||
<h1>
|
||||
<img class="avatar" :src="artist.img1v1Url | resizeImage(1024)" />{{
|
||||
artist.name
|
||||
}}'s Music Videos
|
||||
</h1>
|
||||
<MvRow :mvs="mvs" subtitle="publishTime" />
|
||||
<div class="load-more">
|
||||
<ButtonTwoTone v-show="hasMore" @click.native="loadMVs" color="grey">{{
|
||||
$t("explore.loadMore")
|
||||
}}</ButtonTwoTone>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { artistMv, getArtist } from "@/api/artist";
|
||||
import NProgress from "nprogress";
|
||||
|
||||
import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
|
||||
import MvRow from "@/components/MvRow.vue";
|
||||
|
||||
export default {
|
||||
name: "artistMV",
|
||||
components: {
|
||||
MvRow,
|
||||
ButtonTwoTone,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: 0,
|
||||
show: false,
|
||||
hasMore: true,
|
||||
artist: {},
|
||||
mvs: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
getArtist(this.id).then((data) => {
|
||||
this.artist = data.artist;
|
||||
});
|
||||
this.loadMVs();
|
||||
},
|
||||
loadMVs() {
|
||||
artistMv({ id: this.id, limit: 100, offset: this.mvs.length + 1 }).then(
|
||||
(data) => {
|
||||
this.mvs.push(...data.mvs);
|
||||
this.hasMore = data.hasMore;
|
||||
NProgress.done();
|
||||
this.show = true;
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.id = this.$route.params.id;
|
||||
this.loadData();
|
||||
},
|
||||
activated() {
|
||||
if (this.$route.params.id !== this.id) {
|
||||
this.id = this.$route.params.id;
|
||||
this.mvs = [];
|
||||
this.artist = {};
|
||||
this.show = false;
|
||||
this.hasMore = true;
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
NProgress.start();
|
||||
this.id = to.params.id;
|
||||
this.loadData();
|
||||
next();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
color: var(--color-text);
|
||||
.avatar {
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
vertical-align: -7px;
|
||||
border-radius: 50%;
|
||||
border: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
.load-more {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue