mirror of
https://github.com/GiriNeko/YesPlayMusic.git
synced 2025-12-18 06:07:48 +00:00
feat: create/delete playlist, add/remove track from playlist
This commit is contained in:
qier222
parent
44df6f5531
commit
d1a080eb8f
9 changed files with 466 additions and 97 deletions
181
src/components/ModalAddTrackToPlaylist.vue
Normal file
181
src/components/ModalAddTrackToPlaylist.vue
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
<template>
|
||||
<Modal
|
||||
class="add-track-to-playlist-modal"
|
||||
:show="show"
|
||||
:close="close"
|
||||
:showFooter="false"
|
||||
title="添加到歌单"
|
||||
width="25vw"
|
||||
>
|
||||
<template slot="default">
|
||||
<div class="new-playlist-button" @click="newPlaylist"
|
||||
><svg-icon icon-class="plus" />新建歌单</div
|
||||
>
|
||||
<div
|
||||
class="playlist"
|
||||
v-for="playlist in ownPlaylists"
|
||||
:key="playlist.id"
|
||||
@click="addTrackToPlaylist(playlist.id)"
|
||||
>
|
||||
<img :src="playlist.coverImgUrl | resizeImage(224)" />
|
||||
<div class="info">
|
||||
<div class="title">{{ playlist.name }}</div>
|
||||
<div class="track-count">{{ playlist.trackCount }} 首</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapMutations, mapState } from "vuex";
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import { userPlaylist } from "@/api/user";
|
||||
import { addOrRemoveTrackFromPlaylist } from "@/api/playlist";
|
||||
|
||||
export default {
|
||||
name: "ModalAddTrackToPlaylist",
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
playlists: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["modals", "data"]),
|
||||
show: {
|
||||
get() {
|
||||
return this.modals.addTrackToPlaylistModal.show;
|
||||
},
|
||||
set(value) {
|
||||
this.updateModal({
|
||||
modalName: "addTrackToPlaylistModal",
|
||||
key: "show",
|
||||
value,
|
||||
});
|
||||
},
|
||||
},
|
||||
ownPlaylists() {
|
||||
return this.playlists.filter(
|
||||
(p) =>
|
||||
p.creator.userId === this.data.user.userId &&
|
||||
p.id !== this.data.likedSongPlaylistID
|
||||
);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getUserPlaylists();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["updateModal"]),
|
||||
...mapActions(["showToast"]),
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
getUserPlaylists() {
|
||||
userPlaylist({
|
||||
timestamp: new Date().getTime(),
|
||||
limit: 1000,
|
||||
uid: this.data.user.userId,
|
||||
}).then((data) => {
|
||||
this.playlists = data.playlist;
|
||||
});
|
||||
},
|
||||
addTrackToPlaylist(playlistID) {
|
||||
addOrRemoveTrackFromPlaylist({
|
||||
op: "add",
|
||||
pid: playlistID,
|
||||
tracks: this.modals.addTrackToPlaylistModal.selectedTrackID,
|
||||
}).then((data) => {
|
||||
if (data.body.code === 200) {
|
||||
this.show = false;
|
||||
this.showToast("已添加到歌单");
|
||||
} else {
|
||||
this.showToast(data.body.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
newPlaylist() {
|
||||
this.updateModal({
|
||||
modalName: "newPlaylistModal",
|
||||
key: "afterCreateAddTrackID",
|
||||
value: this.modals.addTrackToPlaylistModal.selectedTrackID,
|
||||
});
|
||||
this.close();
|
||||
this.updateModal({
|
||||
modalName: "newPlaylistModal",
|
||||
key: "show",
|
||||
value: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.new-playlist-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
background: var(--color-secondary-bg-for-transparent);
|
||||
border-radius: 8px;
|
||||
height: 48px;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 6px;
|
||||
margin-left: 6px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
.svg-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-bg-for-transparent);
|
||||
}
|
||||
}
|
||||
.playlist {
|
||||
display: flex;
|
||||
padding: 6px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: var(--color-secondary-bg-for-transparent);
|
||||
}
|
||||
img {
|
||||
border-radius: 8px;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
margin-right: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
padding-right: 16px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
.track-count {
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
opacity: 0.68;
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
144
src/components/ModalNewPlaylist.vue
Normal file
144
src/components/ModalNewPlaylist.vue
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<Modal
|
||||
class="add-playlist-modal"
|
||||
:show="show"
|
||||
:close="close"
|
||||
title="新建歌单"
|
||||
width="25vw"
|
||||
>
|
||||
<template slot="default">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="歌单标题"
|
||||
maxlength="40"
|
||||
v-model="title"
|
||||
/>
|
||||
<div class="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="checkbox-private"
|
||||
v-model="privatePlaylist"
|
||||
/>
|
||||
<label for="checkbox-private">设置为隐私歌单</label>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<button class="primary block" @click="createPlaylist">创建</button>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import { mapMutations, mapState } from "vuex";
|
||||
import { createPlaylist, addOrRemoveTrackFromPlaylist } from "@/api/playlist";
|
||||
|
||||
export default {
|
||||
name: "ModalNewPlaylist",
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
privatePlaylist: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["modals"]),
|
||||
show: {
|
||||
get() {
|
||||
return this.modals.newPlaylistModal.show;
|
||||
},
|
||||
set(value) {
|
||||
this.updateModal({
|
||||
modalName: "newPlaylistModal",
|
||||
key: "show",
|
||||
value,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["updateModal"]),
|
||||
close() {
|
||||
this.show = false;
|
||||
this.title = "";
|
||||
this.privatePlaylist = false;
|
||||
this.resetAfterCreateAddTrackID();
|
||||
},
|
||||
createPlaylist() {
|
||||
let params = { name: this.title };
|
||||
if (this.private) params.type = 10;
|
||||
createPlaylist(params).then((data) => {
|
||||
if (data.code === 200) {
|
||||
if (this.modals.newPlaylistModal.afterCreateAddTrackID !== 0) {
|
||||
addOrRemoveTrackFromPlaylist({
|
||||
op: "add",
|
||||
pid: data.id,
|
||||
tracks: this.modals.newPlaylistModal.afterCreateAddTrackID,
|
||||
}).then((data) => {
|
||||
if (data.body.code === 200) {
|
||||
this.showToast("已添加到歌单");
|
||||
} else {
|
||||
this.showToast(data.body.message);
|
||||
}
|
||||
this.resetAfterCreateAddTrackID();
|
||||
});
|
||||
}
|
||||
this.close();
|
||||
this.showToast("成功创建歌单");
|
||||
}
|
||||
});
|
||||
},
|
||||
resetAfterCreateAddTrackID() {
|
||||
this.updateModal({
|
||||
modalName: "newPlaylistModal",
|
||||
key: "AfterCreateAddTrackID",
|
||||
value: 0,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-playlist-modal {
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
input {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
input[type="text"] {
|
||||
width: calc(100% - 24px);
|
||||
flex: 1;
|
||||
background: var(--color-secondary-bg-for-transparent);
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
margin-top: -1px;
|
||||
color: var(--color-text);
|
||||
&:focus {
|
||||
background: var(--color-primary-bg-for-transparent);
|
||||
opacity: 1;
|
||||
}
|
||||
[data-theme="light"] &:focus {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
.checkbox {
|
||||
input[type="checkbox" i] {
|
||||
margin: 3px 3px 3px 4px;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,6 +17,13 @@
|
|||
<div class="item" @click="like" v-show="isRightClickedTrackLiked">
|
||||
{{ $t("contextMenu.removeFromMyLikedSongs") }}
|
||||
</div>
|
||||
<div class="item" @click="addTrackToPlaylist">添加到歌单</div>
|
||||
<div
|
||||
v-if="extraContextMenuItem.includes('removeTrackFromPlaylist')"
|
||||
class="item"
|
||||
@click="removeTrackFromPlaylist"
|
||||
>从歌单中删除</div
|
||||
>
|
||||
</ContextMenu>
|
||||
<TrackListItem
|
||||
v-for="track in tracks"
|
||||
|
|
@ -37,6 +44,7 @@ import {
|
|||
playAList,
|
||||
appendTrackToPlayerList,
|
||||
} from "@/utils/play";
|
||||
import { addOrRemoveTrackFromPlaylist } from "@/api/playlist";
|
||||
import { isAccountLoggedIn } from "@/utils/auth";
|
||||
|
||||
import TrackListItem from "@/components/TrackListItem.vue";
|
||||
|
|
@ -70,6 +78,12 @@ export default {
|
|||
};
|
||||
},
|
||||
},
|
||||
extraContextMenuItem: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []; // 'removeTrackFromPlaylist'
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -93,7 +107,7 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["updateLikedSongs"]),
|
||||
...mapMutations(["updateLikedSongs", "updateModal"]),
|
||||
...mapActions(["nextTrack", "playTrackOnListByID", "showToast"]),
|
||||
openMenu(e, track) {
|
||||
if (!track.playable) {
|
||||
|
|
@ -160,6 +174,39 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
addTrackToPlaylist() {
|
||||
if (!isAccountLoggedIn()) {
|
||||
this.showToast("此操作需要登录网易云账号");
|
||||
return;
|
||||
}
|
||||
this.updateModal({
|
||||
modalName: "addTrackToPlaylistModal",
|
||||
key: "show",
|
||||
value: true,
|
||||
});
|
||||
this.updateModal({
|
||||
modalName: "addTrackToPlaylistModal",
|
||||
key: "selectedTrackID",
|
||||
value: this.rightClickedTrack.id,
|
||||
});
|
||||
},
|
||||
removeTrackFromPlaylist() {
|
||||
if (!isAccountLoggedIn()) {
|
||||
this.showToast("此操作需要登录网易云账号");
|
||||
return;
|
||||
}
|
||||
let trackID = this.rightClickedTrack.id;
|
||||
addOrRemoveTrackFromPlaylist({
|
||||
op: "del",
|
||||
pid: this.id,
|
||||
tracks: trackID,
|
||||
}).then((data) => {
|
||||
this.showToast(
|
||||
data.body.code === 200 ? "已从歌单中删除" : data.body.message
|
||||
);
|
||||
this.$parent.removeTrack(trackID);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue