feat: add clear queue button to next page

master
qier222 4 years ago
parent ba4d211ee7
commit b05a686180
No known key found for this signature in database
GPG Key ID: 9C85007ED905F14D

@ -10,7 +10,15 @@
</div> </div>
<hr /> <hr />
<div class="item" @click="play">{{ $t('contextMenu.play') }}</div> <div class="item" @click="play">{{ $t('contextMenu.play') }}</div>
<div class="item" @click="playNext">{{ $t('contextMenu.playNext') }}</div> <div class="item" @click="addToQueue">{{
$t('contextMenu.addToQueue')
}}</div>
<div
v-if="extraContextMenuItem.includes('removeTrackFromQueue')"
class="item"
@click="removeTrackFromQueue"
>从队列删除</div
>
<hr /> <hr />
<div v-show="!isRightClickedTrackLiked" class="item" @click="like"> <div v-show="!isRightClickedTrackLiked" class="item" @click="like">
{{ $t('contextMenu.saveToMyLikedSongs') }} {{ $t('contextMenu.saveToMyLikedSongs') }}
@ -33,7 +41,7 @@
:track="track" :track="track"
:highlight-playing-track="highlightPlayingTrack" :highlight-playing-track="highlightPlayingTrack"
@dblclick.native="playThisList(track.id)" @dblclick.native="playThisList(track.id)"
@click.right.native="openMenu($event, track)" @click.right.native="openMenu($event, track, index)"
/> />
</div> </div>
</div> </div>
@ -74,7 +82,10 @@ export default {
extraContextMenuItem: { extraContextMenuItem: {
type: Array, type: Array,
default: () => { default: () => {
return []; // 'removeTrackFromPlaylist' return [
// 'removeTrackFromPlaylist'
// 'removeTrackFromQueue'
];
}, },
}, },
columnNumber: { columnNumber: {
@ -98,11 +109,12 @@ export default {
ar: [{ name: '' }], ar: [{ name: '' }],
al: { picUrl: '' }, al: { picUrl: '' },
}, },
rightClickedTrackIndex: -1,
listStyles: {}, listStyles: {},
}; };
}, },
computed: { computed: {
...mapState(['liked']), ...mapState(['liked', 'player']),
isRightClickedTrackLiked() { isRightClickedTrackLiked() {
return this.liked.songs.includes(this.rightClickedTrack?.id); return this.liked.songs.includes(this.rightClickedTrack?.id);
}, },
@ -119,8 +131,9 @@ export default {
methods: { methods: {
...mapMutations(['updateModal']), ...mapMutations(['updateModal']),
...mapActions(['nextTrack', 'showToast', 'likeATrack']), ...mapActions(['nextTrack', 'showToast', 'likeATrack']),
openMenu(e, track) { openMenu(e, track, index = -1) {
this.rightClickedTrack = track; this.rightClickedTrack = track;
this.rightClickedTrackIndex = index;
this.$refs.menu.openMenu(e); this.$refs.menu.openMenu(e);
}, },
closeMenu() { closeMenu() {
@ -130,6 +143,7 @@ export default {
ar: [{ name: '' }], ar: [{ name: '' }],
al: { picUrl: '' }, al: { picUrl: '' },
}; };
this.rightClickedTrackIndex = -1;
}, },
playThisList(trackID) { playThisList(trackID) {
if (this.dbclickTrackFunc === 'default') { if (this.dbclickTrackFunc === 'default') {
@ -137,50 +151,32 @@ export default {
} else if (this.dbclickTrackFunc === 'none') { } else if (this.dbclickTrackFunc === 'none') {
// do nothing // do nothing
} else if (this.dbclickTrackFunc === 'playTrackOnListByID') { } else if (this.dbclickTrackFunc === 'playTrackOnListByID') {
this.$store.state.player.playTrackOnListByID(trackID); this.player.playTrackOnListByID(trackID);
} else if (this.dbclickTrackFunc === 'playPlaylistByID') { } else if (this.dbclickTrackFunc === 'playPlaylistByID') {
this.$store.state.player.playPlaylistByID(this.id, trackID); this.player.playPlaylistByID(this.id, trackID);
} else if (this.dbclickTrackFunc === 'playAList') { } else if (this.dbclickTrackFunc === 'playAList') {
let trackIDs = this.tracks.map(t => t.id); let trackIDs = this.tracks.map(t => t.id);
this.$store.state.player.replacePlaylist( this.player.replacePlaylist(trackIDs, this.id, 'artist', trackID);
trackIDs,
this.id,
'artist',
trackID
);
} else if (this.dbclickTrackFunc === 'dailyTracks') { } else if (this.dbclickTrackFunc === 'dailyTracks') {
let trackIDs = this.tracks.map(t => t.id); let trackIDs = this.tracks.map(t => t.id);
this.$store.state.player.replacePlaylist( this.player.replacePlaylist(trackIDs, '/daily/songs', 'url', trackID);
trackIDs,
'/daily/songs',
'url',
trackID
);
} }
}, },
playThisListDefault(trackID) { playThisListDefault(trackID) {
if (this.type === 'playlist') { if (this.type === 'playlist') {
this.$store.state.player.playPlaylistByID(this.id, trackID); this.player.playPlaylistByID(this.id, trackID);
} else if (this.type === 'album') { } else if (this.type === 'album') {
this.$store.state.player.playAlbumByID(this.id, trackID); this.player.playAlbumByID(this.id, trackID);
} else if (this.type === 'tracklist') { } else if (this.type === 'tracklist') {
let trackIDs = this.tracks.map(t => t.id); let trackIDs = this.tracks.map(t => t.id);
this.$store.state.player.replacePlaylist( this.player.replacePlaylist(trackIDs, this.id, 'artist', trackID);
trackIDs,
this.id,
'artist',
trackID
);
} }
}, },
play() { play() {
this.$store.state.player.addTrackToPlayNext( this.player.addTrackToPlayNext(this.rightClickedTrack.id, true);
this.rightClickedTrack.id,
true
);
}, },
playNext() { addToQueue() {
this.$store.state.player.addTrackToPlayNext(this.rightClickedTrack.id); this.player.addTrackToPlayNext(this.rightClickedTrack.id);
}, },
like() { like() {
this.likeATrack(this.rightClickedTrack.id); this.likeATrack(this.rightClickedTrack.id);
@ -220,6 +216,11 @@ export default {
}); });
} }
}, },
removeTrackFromQueue() {
this.$store.state.player.removeTrackFromQueue(
this.rightClickedTrackIndex
);
},
}, },
}; };
</script> </script>

@ -161,7 +161,7 @@ export default {
}, },
contextMenu: { contextMenu: {
play: 'Play', play: 'Play',
playNext: 'Play Next', addToQueue: 'Add to queue',
saveToMyLikedSongs: 'Save to my Liked Songs', saveToMyLikedSongs: 'Save to my Liked Songs',
removeFromMyLikedSongs: 'Remove from my Liked Songs', removeFromMyLikedSongs: 'Remove from my Liked Songs',
}, },

@ -160,7 +160,7 @@ export default {
}, },
contextMenu: { contextMenu: {
play: 'Oynat', play: 'Oynat',
playNext: 'Sonrakini Oynat', addToQueue: 'Sonrakini Oynat',
saveToMyLikedSongs: 'Beğendiğim Müziklere Kaydet', saveToMyLikedSongs: 'Beğendiğim Müziklere Kaydet',
removeFromMyLikedMüzikler: 'Beğendiğim Müziklerden Kaldır', removeFromMyLikedMüzikler: 'Beğendiğim Müziklerden Kaldır',
}, },

@ -162,7 +162,7 @@ export default {
}, },
contextMenu: { contextMenu: {
play: '播放', play: '播放',
playNext: '下一首播放', addToQueue: '添加到队列',
saveToMyLikedSongs: '添加到我喜欢的音乐', saveToMyLikedSongs: '添加到我喜欢的音乐',
removeFromMyLikedSongs: '从喜欢的音乐中删除', removeFromMyLikedSongs: '从喜欢的音乐中删除',
}, },

@ -620,4 +620,11 @@ export default class {
switchShuffle() { switchShuffle() {
this.shuffle = !this.shuffle; this.shuffle = !this.shuffle;
} }
clearPlayNextList() {
this._playNextList = [];
}
removeTrackFromQueue(index) {
this._playNextList.splice(index, 1);
}
} }

@ -114,7 +114,7 @@
</p> </p>
</Modal> </Modal>
<ContextMenu ref="albumMenu"> <ContextMenu ref="albumMenu">
<div class="item">{{ $t('contextMenu.playNext') }}</div> <!-- <div class="item">{{ $t('contextMenu.addToQueue') }}</div> -->
<div class="item" @click="likeAlbum(true)">{{ <div class="item" @click="likeAlbum(true)">{{
dynamicDetail.isSub ? '从音乐库删除' : '保存到音乐库' dynamicDetail.isSub ? '从音乐库删除' : '保存到音乐库'
}}</div> }}</div>

@ -6,7 +6,10 @@
type="playlist" type="playlist"
dbclick-track-func="none" dbclick-track-func="none"
/> />
<h1 v-show="playNextList.length > 0"></h1> <h1 v-show="playNextList.length > 0"
>插队播放
<button @click="player.clearPlayNextList()"></button>
</h1>
<TrackList <TrackList
v-show="playNextList.length > 0" v-show="playNextList.length > 0"
:tracks="playNextTracks" :tracks="playNextTracks"
@ -14,6 +17,7 @@
:highlight-playing-track="false" :highlight-playing-track="false"
dbclick-track-func="playTrackOnListByID" dbclick-track-func="playTrackOnListByID"
item-key="id+index" item-key="id+index"
:extra-context-menu-item="['removeTrackFromQueue']"
/> />
<h1>{{ $t('next.nextUp') }}</h1> <h1>{{ $t('next.nextUp') }}</h1>
<TrackList <TrackList
@ -112,5 +116,26 @@ h1 {
margin-bottom: 18px; margin-bottom: 18px;
cursor: default; cursor: default;
color: var(--color-text); color: var(--color-text);
display: flex;
justify-content: space-between;
button {
color: var(--color-text);
border-radius: 8px;
padding: 0 14px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.2s;
opacity: 0.68;
font-weight: 500;
&:hover {
opacity: 1;
background: var(--color-secondary-bg);
}
&:active {
opacity: 1;
transform: scale(0.92);
}
}
} }
</style> </style>

@ -184,7 +184,7 @@
> >
<ContextMenu ref="playlistMenu"> <ContextMenu ref="playlistMenu">
<div class="item">{{ $t('contextMenu.playNext') }}</div> <!-- <div class="item">{{ $t('contextMenu.addToQueue') }}</div> -->
<div class="item" @click="likePlaylist(true)">{{ <div class="item" @click="likePlaylist(true)">{{
playlist.subscribed ? '从音乐库删除' : '保存到音乐库' playlist.subscribed ? '从音乐库删除' : '保存到音乐库'
}}</div> }}</div>

Loading…
Cancel
Save