From b05a686180dab5d5367b7cac56569d76b984af32 Mon Sep 17 00:00:00 2001 From: qier222 Date: Mon, 17 May 2021 23:31:44 +0800 Subject: [PATCH] feat: add clear queue button to next page --- src/components/TrackList.vue | 67 ++++++++++++++++++------------------ src/locale/lang/en.js | 2 +- src/locale/lang/tr.js | 2 +- src/locale/lang/zh-CN.js | 2 +- src/utils/Player.js | 7 ++++ src/views/album.vue | 2 +- src/views/next.vue | 27 ++++++++++++++- src/views/playlist.vue | 2 +- 8 files changed, 72 insertions(+), 39 deletions(-) diff --git a/src/components/TrackList.vue b/src/components/TrackList.vue index 712b875..d77093f 100644 --- a/src/components/TrackList.vue +++ b/src/components/TrackList.vue @@ -10,7 +10,15 @@
{{ $t('contextMenu.play') }}
-
{{ $t('contextMenu.playNext') }}
+
{{ + $t('contextMenu.addToQueue') + }}
+
从队列删除
{{ $t('contextMenu.saveToMyLikedSongs') }} @@ -33,7 +41,7 @@ :track="track" :highlight-playing-track="highlightPlayingTrack" @dblclick.native="playThisList(track.id)" - @click.right.native="openMenu($event, track)" + @click.right.native="openMenu($event, track, index)" />
@@ -74,7 +82,10 @@ export default { extraContextMenuItem: { type: Array, default: () => { - return []; // 'removeTrackFromPlaylist' + return [ + // 'removeTrackFromPlaylist' + // 'removeTrackFromQueue' + ]; }, }, columnNumber: { @@ -98,11 +109,12 @@ export default { ar: [{ name: '' }], al: { picUrl: '' }, }, + rightClickedTrackIndex: -1, listStyles: {}, }; }, computed: { - ...mapState(['liked']), + ...mapState(['liked', 'player']), isRightClickedTrackLiked() { return this.liked.songs.includes(this.rightClickedTrack?.id); }, @@ -119,8 +131,9 @@ export default { methods: { ...mapMutations(['updateModal']), ...mapActions(['nextTrack', 'showToast', 'likeATrack']), - openMenu(e, track) { + openMenu(e, track, index = -1) { this.rightClickedTrack = track; + this.rightClickedTrackIndex = index; this.$refs.menu.openMenu(e); }, closeMenu() { @@ -130,6 +143,7 @@ export default { ar: [{ name: '' }], al: { picUrl: '' }, }; + this.rightClickedTrackIndex = -1; }, playThisList(trackID) { if (this.dbclickTrackFunc === 'default') { @@ -137,50 +151,32 @@ export default { } else if (this.dbclickTrackFunc === 'none') { // do nothing } else if (this.dbclickTrackFunc === 'playTrackOnListByID') { - this.$store.state.player.playTrackOnListByID(trackID); + this.player.playTrackOnListByID(trackID); } else if (this.dbclickTrackFunc === 'playPlaylistByID') { - this.$store.state.player.playPlaylistByID(this.id, trackID); + this.player.playPlaylistByID(this.id, trackID); } else if (this.dbclickTrackFunc === 'playAList') { let trackIDs = this.tracks.map(t => t.id); - this.$store.state.player.replacePlaylist( - trackIDs, - this.id, - 'artist', - trackID - ); + this.player.replacePlaylist(trackIDs, this.id, 'artist', trackID); } else if (this.dbclickTrackFunc === 'dailyTracks') { let trackIDs = this.tracks.map(t => t.id); - this.$store.state.player.replacePlaylist( - trackIDs, - '/daily/songs', - 'url', - trackID - ); + this.player.replacePlaylist(trackIDs, '/daily/songs', 'url', trackID); } }, playThisListDefault(trackID) { if (this.type === 'playlist') { - this.$store.state.player.playPlaylistByID(this.id, trackID); + this.player.playPlaylistByID(this.id, trackID); } else if (this.type === 'album') { - this.$store.state.player.playAlbumByID(this.id, trackID); + this.player.playAlbumByID(this.id, trackID); } else if (this.type === 'tracklist') { let trackIDs = this.tracks.map(t => t.id); - this.$store.state.player.replacePlaylist( - trackIDs, - this.id, - 'artist', - trackID - ); + this.player.replacePlaylist(trackIDs, this.id, 'artist', trackID); } }, play() { - this.$store.state.player.addTrackToPlayNext( - this.rightClickedTrack.id, - true - ); + this.player.addTrackToPlayNext(this.rightClickedTrack.id, true); }, - playNext() { - this.$store.state.player.addTrackToPlayNext(this.rightClickedTrack.id); + addToQueue() { + this.player.addTrackToPlayNext(this.rightClickedTrack.id); }, like() { this.likeATrack(this.rightClickedTrack.id); @@ -220,6 +216,11 @@ export default { }); } }, + removeTrackFromQueue() { + this.$store.state.player.removeTrackFromQueue( + this.rightClickedTrackIndex + ); + }, }, }; diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js index 53d476b..4d27618 100644 --- a/src/locale/lang/en.js +++ b/src/locale/lang/en.js @@ -161,7 +161,7 @@ export default { }, contextMenu: { play: 'Play', - playNext: 'Play Next', + addToQueue: 'Add to queue', saveToMyLikedSongs: 'Save to my Liked Songs', removeFromMyLikedSongs: 'Remove from my Liked Songs', }, diff --git a/src/locale/lang/tr.js b/src/locale/lang/tr.js index 71fd59e..21179c2 100644 --- a/src/locale/lang/tr.js +++ b/src/locale/lang/tr.js @@ -160,7 +160,7 @@ export default { }, contextMenu: { play: 'Oynat', - playNext: 'Sonrakini Oynat', + addToQueue: 'Sonrakini Oynat', saveToMyLikedSongs: 'Beğendiğim Müziklere Kaydet', removeFromMyLikedMüzikler: 'Beğendiğim Müziklerden Kaldır', }, diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js index 135d11f..859b933 100644 --- a/src/locale/lang/zh-CN.js +++ b/src/locale/lang/zh-CN.js @@ -162,7 +162,7 @@ export default { }, contextMenu: { play: '播放', - playNext: '下一首播放', + addToQueue: '添加到队列', saveToMyLikedSongs: '添加到我喜欢的音乐', removeFromMyLikedSongs: '从喜欢的音乐中删除', }, diff --git a/src/utils/Player.js b/src/utils/Player.js index f70f37f..74b7242 100644 --- a/src/utils/Player.js +++ b/src/utils/Player.js @@ -620,4 +620,11 @@ export default class { switchShuffle() { this.shuffle = !this.shuffle; } + + clearPlayNextList() { + this._playNextList = []; + } + removeTrackFromQueue(index) { + this._playNextList.splice(index, 1); + } } diff --git a/src/views/album.vue b/src/views/album.vue index e2078f9..cb78932 100644 --- a/src/views/album.vue +++ b/src/views/album.vue @@ -114,7 +114,7 @@

-
{{ $t('contextMenu.playNext') }}
+
{{ dynamicDetail.isSub ? '从音乐库删除' : '保存到音乐库' }}
diff --git a/src/views/next.vue b/src/views/next.vue index de3e155..7f19451 100644 --- a/src/views/next.vue +++ b/src/views/next.vue @@ -6,7 +6,10 @@ type="playlist" dbclick-track-func="none" /> -

插队播放

+

插队播放 + +

{{ $t('next.nextUp') }}

diff --git a/src/views/playlist.vue b/src/views/playlist.vue index ce7bef9..9345e9a 100644 --- a/src/views/playlist.vue +++ b/src/views/playlist.vue @@ -184,7 +184,7 @@ > -
{{ $t('contextMenu.playNext') }}
+
{{ playlist.subscribed ? '从音乐库删除' : '保存到音乐库' }}