|
|
@ -17,7 +17,10 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="controls">
|
|
|
|
<div class="controls">
|
|
|
|
<div class="playing">
|
|
|
|
<div class="playing">
|
|
|
|
<img :src="currentTrack.al.picUrl | resizeImage" @click="goToAlbum" />
|
|
|
|
<img
|
|
|
|
|
|
|
|
:src="currentTrack.al.picUrl | resizeImage(224)"
|
|
|
|
|
|
|
|
@click="goToAlbum"
|
|
|
|
|
|
|
|
/>
|
|
|
|
<div class="track-info">
|
|
|
|
<div class="track-info">
|
|
|
|
<div class="name" @click="goToList">
|
|
|
|
<div class="name" @click="goToList">
|
|
|
|
{{ currentTrack.name }}
|
|
|
|
{{ currentTrack.name }}
|
|
|
@ -125,13 +128,13 @@ export default {
|
|
|
|
name: "Player",
|
|
|
|
name: "Player",
|
|
|
|
components: {
|
|
|
|
components: {
|
|
|
|
ButtonIcon,
|
|
|
|
ButtonIcon,
|
|
|
|
VueSlider,
|
|
|
|
VueSlider
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
interval: null,
|
|
|
|
interval: null,
|
|
|
|
progress: 0,
|
|
|
|
progress: 0,
|
|
|
|
oldVolume: 0.5,
|
|
|
|
oldVolume: 0.5
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
created() {
|
|
|
@ -139,7 +142,7 @@ export default {
|
|
|
|
this.progress = ~~this.howler.seek();
|
|
|
|
this.progress = ~~this.howler.seek();
|
|
|
|
}, 1000);
|
|
|
|
}, 1000);
|
|
|
|
if (this.isLoggedIn) {
|
|
|
|
if (this.isLoggedIn) {
|
|
|
|
userLikedSongsIDs(this.settings.user.userId).then((data) => {
|
|
|
|
userLikedSongsIDs(this.settings.user.userId).then(data => {
|
|
|
|
this.updateLikedSongs(data.ids);
|
|
|
|
this.updateLikedSongs(data.ids);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -156,7 +159,7 @@ export default {
|
|
|
|
set(value) {
|
|
|
|
set(value) {
|
|
|
|
this.updatePlayerState({ key: "volume", value });
|
|
|
|
this.updatePlayerState({ key: "volume", value });
|
|
|
|
Howler.volume(value);
|
|
|
|
Howler.volume(value);
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
playing() {
|
|
|
|
playing() {
|
|
|
|
if (this.howler.state() === "loading") {
|
|
|
|
if (this.howler.state() === "loading") {
|
|
|
@ -170,7 +173,7 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
isLoggedIn() {
|
|
|
|
isLoggedIn() {
|
|
|
|
return isLoggedIn();
|
|
|
|
return isLoggedIn();
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
...mapMutations([
|
|
|
|
...mapMutations([
|
|
|
@ -178,13 +181,13 @@ export default {
|
|
|
|
"turnOffShuffleMode",
|
|
|
|
"turnOffShuffleMode",
|
|
|
|
"updatePlayerState",
|
|
|
|
"updatePlayerState",
|
|
|
|
"updateRepeatStatus",
|
|
|
|
"updateRepeatStatus",
|
|
|
|
"updateLikedSongs",
|
|
|
|
"updateLikedSongs"
|
|
|
|
]),
|
|
|
|
]),
|
|
|
|
...mapActions([
|
|
|
|
...mapActions([
|
|
|
|
"nextTrack",
|
|
|
|
"nextTrack",
|
|
|
|
"previousTrack",
|
|
|
|
"previousTrack",
|
|
|
|
"playTrackOnListByID",
|
|
|
|
"playTrackOnListByID",
|
|
|
|
"addNextTrackEvent",
|
|
|
|
"addNextTrackEvent"
|
|
|
|
]),
|
|
|
|
]),
|
|
|
|
play() {
|
|
|
|
play() {
|
|
|
|
if (this.playing) {
|
|
|
|
if (this.playing) {
|
|
|
@ -253,7 +256,7 @@ export default {
|
|
|
|
if (this.liked.songs.includes(id)) like = false;
|
|
|
|
if (this.liked.songs.includes(id)) like = false;
|
|
|
|
likeATrack({ id, like }).then(() => {
|
|
|
|
likeATrack({ id, like }).then(() => {
|
|
|
|
if (like === false) {
|
|
|
|
if (like === false) {
|
|
|
|
this.updateLikedSongs(this.liked.songs.filter((d) => d !== id));
|
|
|
|
this.updateLikedSongs(this.liked.songs.filter(d => d !== id));
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
let newLikeSongs = this.liked.songs;
|
|
|
|
let newLikeSongs = this.liked.songs;
|
|
|
|
newLikeSongs.push(id);
|
|
|
|
newLikeSongs.push(id);
|
|
|
@ -266,7 +269,7 @@ export default {
|
|
|
|
this.$router.push({ path: "/library/liked-songs" });
|
|
|
|
this.$router.push({ path: "/library/liked-songs" });
|
|
|
|
else
|
|
|
|
else
|
|
|
|
this.$router.push({
|
|
|
|
this.$router.push({
|
|
|
|
path: "/" + this.player.listInfo.type + "/" + this.player.listInfo.id,
|
|
|
|
path: "/" + this.player.listInfo.type + "/" + this.player.listInfo.id
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
goToAlbum() {
|
|
|
|
goToAlbum() {
|
|
|
@ -274,8 +277,8 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
goToArtist(id) {
|
|
|
|
goToArtist(id) {
|
|
|
|
this.$router.push({ path: "/artist/" + id });
|
|
|
|
this.$router.push({ path: "/artist/" + id });
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|