mirror of
https://github.com/GiriNeko/YesPlayMusic.git
synced 2025-12-16 21:28:06 +00:00
增加收藏歌曲和收藏歌单功能，优化播放器逻辑，修复bug以及体验优化
This commit is contained in:
qier222
parent
5f0ef06786
commit
7f75758b73
28 changed files with 486 additions and 270 deletions
|
|
@ -27,18 +27,10 @@ button {
|
|||
margin-left: 0;
|
||||
}
|
||||
&:hover {
|
||||
// background: #eaeffd;
|
||||
// .svg-icon {
|
||||
// color: #335eea;
|
||||
// }
|
||||
background: #f5f5f7;
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
// background: #eaeffd;
|
||||
// .svg-icon {
|
||||
// color: #335eea;
|
||||
// }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<button :style="{ padding: `8px ${horizontalPadding}px` }" :class="color">
|
||||
<button :style="buttonStyle" :class="color">
|
||||
<svg-icon
|
||||
v-if="iconClass !== null"
|
||||
:iconClass="iconClass"
|
||||
|
|
@ -29,6 +29,20 @@ export default {
|
|||
type: String,
|
||||
default: "blue",
|
||||
},
|
||||
shape: {
|
||||
type: String,
|
||||
default: "square",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
buttonStyle() {
|
||||
return {
|
||||
borderRadius: this.shape === "round" ? "50%" : "8px",
|
||||
padding: `8px ${this.horizontalPadding}px`,
|
||||
height: "38px",
|
||||
width: this.shape === "round" ? "38px" : "auto",
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -37,11 +51,11 @@ export default {
|
|||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
background-color: rgba(51, 94, 234, 0.1);
|
||||
color: #335eea;
|
||||
border-radius: 8px;
|
||||
margin-right: 12px;
|
||||
transition: 0.2s;
|
||||
.svg-icon {
|
||||
|
|
@ -59,4 +73,7 @@ button.grey {
|
|||
background-color: #f5f5f7;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
button.transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,28 +17,35 @@
|
|||
</div>
|
||||
<div class="controls">
|
||||
<div class="playing">
|
||||
<router-link :to="`/album/${player.currentTrack.album.id}`"
|
||||
><img :src="player.currentTrack.album.picUrl | resizeImage" />
|
||||
<router-link :to="`/album/${currentTrack.al.id}`"
|
||||
><img :src="currentTrack.al.picUrl | resizeImage" />
|
||||
</router-link>
|
||||
<div class="track-info">
|
||||
<div class="name">
|
||||
<router-link
|
||||
:to="'/' + player.listInfo.type + '/' + player.listInfo.id"
|
||||
>{{ player.currentTrack.name }}</router-link
|
||||
>{{ currentTrack.name }}</router-link
|
||||
>
|
||||
</div>
|
||||
<div class="artist">
|
||||
<span
|
||||
v-for="(ar, index) in player.currentTrack.artists"
|
||||
:key="ar.id"
|
||||
>
|
||||
<span v-for="(ar, index) in currentTrack.ar" :key="ar.id">
|
||||
<router-link :to="`/artist/${ar.id}`">{{ ar.name }}</router-link>
|
||||
<span v-if="index !== player.currentTrack.artists.length - 1"
|
||||
>,
|
||||
</span>
|
||||
<span v-if="index !== currentTrack.ar.length - 1">, </span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="like-button" v-show="isLoggedIn">
|
||||
<button-icon @click.native="likeCurrentSong">
|
||||
<svg-icon
|
||||
icon-class="heart"
|
||||
v-show="!liked.songs.includes(currentTrack.id)"
|
||||
></svg-icon>
|
||||
<svg-icon
|
||||
icon-class="heart-solid"
|
||||
v-show="liked.songs.includes(currentTrack.id)"
|
||||
></svg-icon>
|
||||
</button-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-control-buttons">
|
||||
<button-icon @click.native="previous" title="Previous Song"
|
||||
|
|
@ -106,6 +113,9 @@
|
|||
<script>
|
||||
import { updateMediaSessionMetaData } from "@/utils/mediaSession";
|
||||
import { mapState, mapMutations, mapActions } from "vuex";
|
||||
import { isLoggedIn } from "@/utils/auth";
|
||||
import { userLikedSongsIDs } from "@/api/user";
|
||||
import { likeATrack } from "@/api/track";
|
||||
import "@/assets/css/slider.css";
|
||||
|
||||
import ButtonIcon from "@/components/ButtonIcon.vue";
|
||||
|
|
@ -128,9 +138,17 @@ export default {
|
|||
setInterval(() => {
|
||||
this.progress = ~~this.howler.seek();
|
||||
}, 1000);
|
||||
if (this.isLoggedIn) {
|
||||
userLikedSongsIDs(this.settings.user.userId).then((data) => {
|
||||
this.updateLikedSongs(data.ids);
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(["player", "howler", "Howler"]),
|
||||
...mapState(["player", "howler", "Howler", "settings", "liked"]),
|
||||
currentTrack() {
|
||||
return this.player.currentTrack;
|
||||
},
|
||||
volume: {
|
||||
get() {
|
||||
return this.player.volume;
|
||||
|
|
@ -147,9 +165,12 @@ export default {
|
|||
return this.howler.playing();
|
||||
},
|
||||
progressMax() {
|
||||
let max = ~~(this.player.currentTrack.time / 1000);
|
||||
let max = ~~(this.currentTrack.dt / 1000);
|
||||
return max > 1 ? max - 1 : max;
|
||||
},
|
||||
isLoggedIn() {
|
||||
return isLoggedIn();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
|
|
@ -158,6 +179,7 @@ export default {
|
|||
"shuffleTheList",
|
||||
"updatePlayerState",
|
||||
"updateRepeatStatus",
|
||||
"updateLikedSongs",
|
||||
]),
|
||||
...mapActions([
|
||||
"nextTrack",
|
||||
|
|
@ -170,22 +192,22 @@ export default {
|
|||
this.howler.pause();
|
||||
} else {
|
||||
if (this.howler.state() === "unloaded") {
|
||||
this.playTrackOnListByID(this.player.currentTrack.id);
|
||||
this.playTrackOnListByID(this.currentTrack.id);
|
||||
}
|
||||
this.howler.play();
|
||||
if (this.howler._onend.length === 0) {
|
||||
this.addNextTrackEvent();
|
||||
updateMediaSessionMetaData(this.player.currentTrack);
|
||||
updateMediaSessionMetaData(this.currentTrack);
|
||||
}
|
||||
}
|
||||
},
|
||||
next() {
|
||||
this.nextTrack(true);
|
||||
this.progress = 0;
|
||||
this.nextTrack(true);
|
||||
},
|
||||
previous() {
|
||||
this.previousTrack();
|
||||
this.progress = 0;
|
||||
this.previousTrack();
|
||||
},
|
||||
shuffle() {
|
||||
if (this.player.shuffle === true) {
|
||||
|
|
@ -228,6 +250,20 @@ export default {
|
|||
let sec = (~~(value % 60)).toString().padStart(2, "0");
|
||||
return `${min}:${sec}`;
|
||||
},
|
||||
likeCurrentSong() {
|
||||
let id = this.currentTrack.id;
|
||||
let like = true;
|
||||
if (this.liked.songs.includes(id)) like = false;
|
||||
likeATrack({ id, like }).then(() => {
|
||||
if (like === false) {
|
||||
this.updateLikedSongs(this.liked.songs.filter((d) => d !== id));
|
||||
} else {
|
||||
let newLikeSongs = this.liked.songs;
|
||||
newLikeSongs.push(id);
|
||||
this.updateLikedSongs(newLikeSongs);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -289,6 +325,7 @@ export default {
|
|||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -300,6 +337,7 @@ export default {
|
|||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
a {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
|
|
@ -319,11 +357,11 @@ export default {
|
|||
margin: 0 8px;
|
||||
}
|
||||
.play {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
.svg-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -351,4 +389,8 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.like-button {
|
||||
margin-left: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from "vuex";
|
||||
import { mapActions, mapState } from "vuex";
|
||||
import {
|
||||
playPlaylistByID,
|
||||
playAlbumByID,
|
||||
|
|
@ -42,7 +42,7 @@ export default {
|
|||
},
|
||||
dbclickTrackFunc: {
|
||||
type: String,
|
||||
default: "none",
|
||||
default: "default",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
|
@ -55,8 +55,11 @@ export default {
|
|||
if (this.type === "tracklist")
|
||||
this.listStyles = { display: "flex", flexWrap: "wrap" };
|
||||
},
|
||||
computed: {
|
||||
...mapState(["liked"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["nextTrack"]),
|
||||
...mapActions(["nextTrack", "playTrackOnListByID"]),
|
||||
openMenu(e, track) {
|
||||
if (!track.playable) {
|
||||
return;
|
||||
|
|
@ -65,24 +68,31 @@ export default {
|
|||
this.$refs.menu.openMenu(e);
|
||||
},
|
||||
playThisList(trackID) {
|
||||
if (this.dbclickTrackFunc === "default") {
|
||||
this.playThisListDefault(trackID);
|
||||
} else if (this.dbclickTrackFunc === "none") {
|
||||
// do nothing
|
||||
} else if (this.dbclickTrackFunc === "playTrackOnListByID") {
|
||||
this.playTrackOnListByID(trackID);
|
||||
} else if (this.dbclickTrackFunc === "playPlaylistByID") {
|
||||
playPlaylistByID(this.id, trackID);
|
||||
}
|
||||
},
|
||||
playThisListDefault(trackID) {
|
||||
if (this.type === "playlist") {
|
||||
playPlaylistByID(this.id, trackID);
|
||||
} else if (this.type === "album") {
|
||||
playAlbumByID(this.id, trackID);
|
||||
} else if (this.type === "tracklist") {
|
||||
if (this.dbclickTrackFunc === "none") {
|
||||
playAList(this.tracks, this.tracks[0].ar[0].id, "artist", trackID);
|
||||
} else {
|
||||
if (this.dbclickTrackFunc === "playPlaylistByID")
|
||||
playPlaylistByID(this.id, trackID);
|
||||
}
|
||||
let trackIDs = this.tracks.map((t) => t.id);
|
||||
playAList(trackIDs, this.tracks[0].ar[0].id, "artist", trackID);
|
||||
}
|
||||
},
|
||||
play() {
|
||||
appendTrackToPlayerList(this.clickTrack, true);
|
||||
appendTrackToPlayerList(this.clickTrack.id, true);
|
||||
},
|
||||
playNext() {
|
||||
appendTrackToPlayerList(this.clickTrack);
|
||||
appendTrackToPlayerList(this.clickTrack.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,22 @@
|
|||
<template>
|
||||
<div class="track" :class="trackClass" :style="trackStyle">
|
||||
<div
|
||||
class="track"
|
||||
:class="trackClass"
|
||||
:style="trackStyle"
|
||||
@mouseover="focus = true"
|
||||
@mouseleave="focus = false"
|
||||
>
|
||||
<img :src="imgUrl | resizeImage" v-if="!isAlbum" @click="goToAlbum" />
|
||||
<div class="no" v-if="isAlbum">{{ track.no }}</div>
|
||||
<div class="no" v-if="isAlbum">
|
||||
<button
|
||||
class="play-button"
|
||||
v-show="focus && track.playable"
|
||||
@click="playTrack"
|
||||
>
|
||||
<svg-icon icon-class="play"></svg-icon>
|
||||
</button>
|
||||
<span v-show="!focus">{{ track.no }}</span>
|
||||
</div>
|
||||
<div class="title-and-artist">
|
||||
<div class="container">
|
||||
<div class="title">
|
||||
|
|
@ -18,7 +33,7 @@
|
|||
<span
|
||||
v-if="track.mark === 1318912"
|
||||
class="explicit-symbol before-artist"
|
||||
><ExplicitSymbol
|
||||
><ExplicitSymbol :size="15"
|
||||
/></span>
|
||||
<ArtistsInLine :artists="artists" />
|
||||
</div>
|
||||
|
|
@ -26,13 +41,23 @@
|
|||
<div></div>
|
||||
</div>
|
||||
<div class="album" v-if="!isTracklist && !isAlbum">
|
||||
<div class="container">
|
||||
<router-link :to="`/album/${track.al.id}`">{{
|
||||
track.al.name
|
||||
}}</router-link>
|
||||
</div>
|
||||
<router-link :to="`/album/${track.al.id}`">{{
|
||||
track.al.name
|
||||
}}</router-link>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="actions" v-if="!isTracklist">
|
||||
<button v-if="isLoggedIn" @click="likeThisSong">
|
||||
<svg-icon
|
||||
icon-class="heart"
|
||||
:style="{
|
||||
visibility:
|
||||
focus && !isLiked && track.playable ? 'visible' : 'hidden',
|
||||
}"
|
||||
></svg-icon>
|
||||
<svg-icon icon-class="heart-solid" v-show="isLiked"></svg-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="time" v-if="!isTracklist">
|
||||
{{ track.dt | formatTime }}
|
||||
</div>
|
||||
|
|
@ -40,6 +65,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { isLoggedIn } from "@/utils/auth";
|
||||
import { likeATrack } from "@/api/track";
|
||||
|
||||
import ArtistsInLine from "@/components/ArtistsInLine.vue";
|
||||
import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
|
||||
|
||||
|
|
@ -50,16 +78,7 @@ export default {
|
|||
track: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
trackClass: [],
|
||||
trackStyle: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.trackClass.push(this.type);
|
||||
if (!this.track.playable) this.trackClass.push("disable");
|
||||
if (this.$parent.itemWidth !== -1)
|
||||
this.trackStyle = { width: this.$parent.itemWidth + "px" };
|
||||
return { focus: false, trackStyle: {} };
|
||||
},
|
||||
computed: {
|
||||
imgUrl() {
|
||||
|
|
@ -84,16 +103,82 @@ export default {
|
|||
isPlaylist() {
|
||||
return this.type === "playlist";
|
||||
},
|
||||
isLiked() {
|
||||
return this.$parent.liked.songs.includes(this.track.id);
|
||||
},
|
||||
isPlaying() {
|
||||
return this.$store.state.player.currentTrack.id === this.track.id;
|
||||
},
|
||||
trackClass() {
|
||||
let trackClass = [this.type];
|
||||
if (!this.track.playable) trackClass.push("disable");
|
||||
if (this.isPlaying) trackClass.push("playing");
|
||||
return trackClass;
|
||||
},
|
||||
isLoggedIn() {
|
||||
return isLoggedIn();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
goToAlbum() {
|
||||
this.$router.push({ path: "/album/" + this.track.al.id });
|
||||
},
|
||||
playTrack() {
|
||||
this.$parent.playThisList(this.track.id);
|
||||
},
|
||||
likeThisSong() {
|
||||
let id = this.track.id;
|
||||
let like = true;
|
||||
let likedSongs = this.$parent.liked.songs;
|
||||
if (likedSongs.includes(id)) like = false;
|
||||
likeATrack({ id, like }).then(() => {
|
||||
if (like === false) {
|
||||
this.$store.commit(
|
||||
"updateLikedSongs",
|
||||
likedSongs.filter((d) => d !== id)
|
||||
);
|
||||
} else {
|
||||
likedSongs.push(id);
|
||||
this.$store.commit("updateLikedSongs", likedSongs);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.$parent.itemWidth !== -1)
|
||||
this.trackStyle = { width: this.$parent.itemWidth + "px" };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
background: transparent;
|
||||
border-radius: 25%;
|
||||
transition: transform 0.2s;
|
||||
.svg-icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: #335eea;
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
}
|
||||
|
||||
button.play-button {
|
||||
opacity: 1;
|
||||
.svg-icon {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
color: #335eea;
|
||||
}
|
||||
}
|
||||
|
||||
.track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -182,20 +267,12 @@ export default {
|
|||
.album {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
}
|
||||
.time {
|
||||
font-size: 16px;
|
||||
|
|
@ -247,4 +324,32 @@ export default {
|
|||
.track.album {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 80px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.track.playing {
|
||||
background: #eaeffd;
|
||||
color: #335eea;
|
||||
.title,
|
||||
.album {
|
||||
color: #335eea;
|
||||
}
|
||||
.title .featured,
|
||||
.artist {
|
||||
color: #335eea;
|
||||
opacity: 0.88;
|
||||
}
|
||||
.no span {
|
||||
color: #335eea;
|
||||
opacity: 0.78;
|
||||
}
|
||||
.explicit-symbol {
|
||||
color: #335eea;
|
||||
opacity: 0.88;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue