新增“稍后播放”功能

This commit is contained in:
lyswhut
2021-01-21 14:39:37 +08:00
parent 43b06a686b
commit 085e45a50f
25 changed files with 435 additions and 218 deletions
+51 -34
View File
@@ -45,7 +45,7 @@ export default {
return {
clickTime: window.performance.now(),
clickIndex: -1,
selectdData: [],
selectedData: [],
isShowDownloadMultiple: false,
tabId: 'all',
keyEvent: {
@@ -59,6 +59,7 @@ export default {
play: true,
start: true,
pause: true,
playLater: true,
file: true,
search: true,
remove: true,
@@ -74,13 +75,13 @@ export default {
computed: {
...mapGetters(['setting']),
...mapGetters('download', ['list', 'downloadStatus']),
...mapGetters('player', ['listId', 'playIndex']),
...mapGetters('player', ['playInfo']),
isPlayList() {
return this.listId == 'download'
return this.playInfo.listId == 'download'
},
playListIndex() {
if (this.listId != 'download' || !this.list.length) return
let info = this.list[this.playIndex]
if (this.playInfo.listId != 'download' || !this.list.length) return
let info = this.list[this.playInfo.playIndex]
if (!info) return -1
let key = info.key
return this.showList.findIndex(i => i.key == key)
@@ -140,6 +141,11 @@ export default {
action: 'pause',
hide: !this.listMenu.itemMenuControl.pause,
},
{
name: this.$t('view.download.menu_play_later'),
action: 'playLater',
hide: !this.listMenu.itemMenuControl.playLater,
},
{
name: this.$t('view.download.menu_file'),
action: 'file',
@@ -229,7 +235,7 @@ export default {
},
handleSelectData(event, clickIndex) {
if (this.keyEvent.isShiftDown) {
if (this.selectdData.length) {
if (this.selectedData.length) {
let lastSelectIndex = this.lastSelectIndex
this.removeAllSelect()
if (lastSelectIndex != clickIndex) {
@@ -240,8 +246,8 @@ export default {
clickIndex = temp
isNeedReverse = true
}
this.selectdData = this.showList.slice(lastSelectIndex, clickIndex + 1)
if (isNeedReverse) this.selectdData.reverse()
this.selectedData = this.showList.slice(lastSelectIndex, clickIndex + 1)
if (isNeedReverse) this.selectedData.reverse()
let nodes = this.$refs.dom_tbody.childNodes
do {
nodes[lastSelectIndex].classList.add('active')
@@ -250,24 +256,24 @@ export default {
}
} else {
event.currentTarget.classList.add('active')
this.selectdData.push(this.showList[clickIndex])
this.selectedData.push(this.showList[clickIndex])
this.lastSelectIndex = clickIndex
}
} else if (this.keyEvent.isModDown) {
this.lastSelectIndex = clickIndex
let item = this.showList[clickIndex]
let index = this.selectdData.indexOf(item)
let index = this.selectedData.indexOf(item)
if (index < 0) {
this.selectdData.push(item)
this.selectedData.push(item)
event.currentTarget.classList.add('active')
} else {
this.selectdData.splice(index, 1)
this.selectedData.splice(index, 1)
event.currentTarget.classList.remove('active')
}
} else if (this.selectdData.length) this.removeAllSelect()
} else if (this.selectedData.length) this.removeAllSelect()
},
removeAllSelect() {
this.selectdData = []
this.selectedData = []
let dom_tbody = this.$refs.dom_tbody
if (!dom_tbody) return
let nodes = dom_tbody.querySelectorAll('.active')
@@ -306,6 +312,14 @@ export default {
case 'remove':
this.removeTask(item)
break
case 'playLater':
if (this.selectedData.length) {
this.setTempPlayList(this.selectedData.map(s => ({ listId: 'download', musicInfo: s })))
this.removeAllSelect()
} else {
this.setTempPlayList([{ listId: 'download', musicInfo: item }])
}
break
case 'file':
this.handleOpenFolder(item.filePath)
break
@@ -316,7 +330,7 @@ export default {
},
handleSelectAllData() {
this.removeAllSelect()
this.selectdData = [...this.showList]
this.selectedData = [...this.showList]
let nodes = this.$refs.dom_tbody.childNodes
for (const node of nodes) {
@@ -324,19 +338,19 @@ export default {
}
},
// async handleFlowBtnClick(action) {
// let selectdData = [...this.selectdData]
// let selectedData = [...this.selectedData]
// this.removeAllSelect()
// await this.$nextTick()
// switch (action) {
// case 'start':
// this.startTasks(selectdData)
// this.startTasks(selectedData)
// break
// case 'pause':
// this.pauseTasks(selectdData)
// this.pauseTasks(selectedData)
// break
// case 'remove':
// this.removeTasks(selectdData)
// this.removeTasks(selectedData)
// break
// }
// },
@@ -353,7 +367,7 @@ export default {
})
},
handleTabChange() {
this.selectdData = []
this.selectedData = []
},
handleListItemRigthClick(event, index) {
this.listMenu.itemMenuControl.sourceDetail = !!musicSdk[this.showList[index].musicInfo.source].getMusicDetailPageUrl
@@ -368,16 +382,19 @@ export default {
let item = this.showList[index]
if (item.isComplate) {
this.listMenu.itemMenuControl.play =
this.listMenu.itemMenuControl.playLater =
this.listMenu.itemMenuControl.file = true
this.listMenu.itemMenuControl.start =
this.listMenu.itemMenuControl.pause = false
} else if (item.status === this.downloadStatus.ERROR || item.status === this.downloadStatus.PAUSE) {
this.listMenu.itemMenuControl.play =
this.listMenu.itemMenuControl.pause =
this.listMenu.itemMenuControl.file = false
this.listMenu.itemMenuControl.start = true
// } else if (item.status === this.downloadStatus.ERROR || item.status === this.downloadStatus.PAUSE) {
// this.listMenu.itemMenuControl.play =
// this.listMenu.itemMenuControl.playLater =
// this.listMenu.itemMenuControl.pause =
// this.listMenu.itemMenuControl.file = false
// this.listMenu.itemMenuControl.start = true
} else {
this.listMenu.itemMenuControl.play =
this.listMenu.itemMenuControl.playLater =
this.listMenu.itemMenuControl.start =
this.listMenu.itemMenuControl.file = false
this.listMenu.itemMenuControl.pause = true
@@ -407,10 +424,10 @@ export default {
if (item) this.handlePlay(item)
break
case 'start':
if (this.selectdData.length) {
let selectdData = [...this.selectdData]
if (this.selectedData.length) {
let selectedData = [...this.selectedData]
this.removeAllSelect()
this.startTasks(selectdData)
this.startTasks(selectedData)
} else {
item = this.showList[index]
if (item) this.startTask(item)
@@ -420,10 +437,10 @@ export default {
}
break
case 'pause':
if (this.selectdData.length) {
let selectdData = [...this.selectdData]
if (this.selectedData.length) {
let selectedData = [...this.selectedData]
this.removeAllSelect()
this.pauseTasks(selectdData)
this.pauseTasks(selectedData)
} else {
item = this.showList[index]
if (item) this.pauseTask(item)
@@ -443,10 +460,10 @@ export default {
if (item) this.handleSearch(item.musicInfo)
break
case 'remove':
if (this.selectdData.length) {
let selectdData = [...this.selectdData]
if (this.selectedData.length) {
let selectedData = [...this.selectedData]
this.removeAllSelect()
this.removeTasks(selectdData)
this.removeTasks(selectedData)
} else {
item = this.showList[index]
if (item) this.removeTask(item)
+9 -1
View File
@@ -77,7 +77,7 @@ export default {
...mapActions('leaderboard', ['getBoardsList', 'getList']),
...mapActions('download', ['createDownload', 'createDownloadMultiple']),
...mapMutations('list', ['listAdd', 'listAddMultiple']),
...mapMutations('player', ['setList']),
...mapMutations('player', ['setList', 'setTempPlayList']),
handleListBtnClick(info) {
switch (info.action) {
case 'download':
@@ -121,6 +121,14 @@ export default {
}
this.testPlay(info.index)
break
case 'playLater':
if (this.selectedData.length) {
this.setTempPlayList(this.selectedData.map(s => ({ listId: '__temp__', musicInfo: s })))
this.resetSelect()
} else {
this.setTempPlayList([{ listId: '__temp__', musicInfo: this.list[info.index] }])
}
break
case 'search':
this.handleSearch(info.index)
break
+22 -6
View File
@@ -37,7 +37,7 @@
table
tbody(@contextmenu.capture="handleContextMenu" ref="dom_tbody")
tr(v-for='(item, index) in list' :key='item.songmid' :id="'mid_' + item.songmid" @contextmenu="handleListItemRigthClick($event, index)"
@click="handleDoubleClick($event, index)" :class="[isPlayList && playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]")
@click="handleDoubleClick($event, index)" :class="[isPlayList && playInfo.playIndex === index ? $style.active : '', assertApiSupport(item.source) ? null : $style.disabled]")
td.nobreak.center(style="width: 5%; padding-left: 3px; padding-right: 3px;" :class="$style.noSelect" @click.stop) {{index + 1}}
td.break
span.select {{item.name}}
@@ -122,6 +122,7 @@ export default {
isShowItemMenu: false,
itemMenuControl: {
play: true,
playLater: true,
copyName: true,
addTo: true,
moveTo: true,
@@ -145,12 +146,12 @@ export default {
computed: {
...mapGetters(['userInfo', 'setting']),
...mapGetters('list', ['isInitedList', 'defaultList', 'loveList', 'userList']),
...mapGetters('player', {
playerListId: 'listId',
playIndex: 'playIndex',
}),
...mapGetters('player', ['playInfo']),
playerListId() {
return this.playInfo.listId
},
isPlayList() {
return this.playerListId == this.listId
return this.playInfo.listId == this.listId
},
list() {
return this.listData.list
@@ -223,6 +224,11 @@ export default {
action: 'download',
disabled: !this.listMenu.itemMenuControl.download,
},
{
name: this.$t('view.list.list_play_later'),
action: 'playLater',
disabled: !this.listMenu.itemMenuControl.playLater,
},
{
name: this.$t('view.list.list_add_to'),
action: 'addTo',
@@ -355,6 +361,7 @@ export default {
...mapActions('download', ['createDownload', 'createDownloadMultiple']),
...mapMutations('player', {
setPlayList: 'setList',
setTempPlayList: 'setTempPlayList',
}),
listenEvent() {
window.eventHub.$on('key_shift_down', this.handle_key_shift_down)
@@ -726,6 +733,7 @@ export default {
handleListItemRigthClick(event, index) {
this.listMenu.itemMenuControl.sourceDetail = !!musicSdk[this.list[index].source].getMusicDetailPageUrl
this.listMenu.itemMenuControl.play =
this.listMenu.itemMenuControl.playLater =
this.listMenu.itemMenuControl.download =
this.assertApiSupport(this.list[index].source)
let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
@@ -789,6 +797,14 @@ export default {
case 'play':
this.testPlay(index)
break
case 'playLater':
if (this.selectdListDetailData.length) {
this.setTempPlayList(this.selectdListDetailData.map(s => ({ listId: this.listId, musicInfo: s })))
this.removeAllSelectListDetail()
} else {
this.setTempPlayList([{ listId: this.listId, musicInfo: this.list[index] }])
}
break
case 'copyName':
minfo = this.list[index]
clipboardWriteText(this.setting.download.fileName.replace('歌名', minfo.name).replace('歌手', minfo.singer))
+16 -1
View File
@@ -93,6 +93,7 @@ export default {
isShowItemMenu: false,
itemMenuControl: {
play: true,
playLater: true,
addTo: true,
download: true,
sourceDetail: true,
@@ -181,6 +182,11 @@ export default {
action: 'download',
disabled: !this.listMenu.itemMenuControl.download,
},
{
name: this.$t('view.search.list_play_later'),
action: 'playLater',
disabled: !this.listMenu.itemMenuControl.playLater,
},
{
name: this.$t('view.search.list_add_to'),
action: 'addTo',
@@ -206,7 +212,7 @@ export default {
...mapActions('download', ['createDownload', 'createDownloadMultiple']),
...mapMutations('search', ['clearList', 'setPage', 'removeHistory', 'clearHistory']),
...mapMutations('list', ['listAdd', 'listAddMultiple']),
...mapMutations('player', ['setList']),
...mapMutations('player', ['setList', 'setTempPlayList']),
...mapActions('hotSearch', {
getHotSearch: 'getList',
}),
@@ -283,6 +289,14 @@ export default {
case 'play':
this.testPlay(info.index)
break
case 'playLater':
if (this.selectedData.length) {
this.setTempPlayList(this.selectedData.map(s => ({ listId: '__temp__', musicInfo: s })))
this.resetSelect()
} else {
this.setTempPlayList([{ listId: '__temp__', musicInfo: this.list[info.index] }])
}
break
case 'listAdd':
this.musicInfo = this.listInfo.list[info.index]
this.$nextTick(() => {
@@ -432,6 +446,7 @@ export default {
handleListItemRigthClick(event, index) {
this.listMenu.itemMenuControl.sourceDetail = !!musicSdk[this.listInfo.list[index].source].getMusicDetailPageUrl
this.listMenu.itemMenuControl.play =
this.listMenu.itemMenuControl.playLater =
this.listMenu.itemMenuControl.download =
this.assertApiSupport(this.listInfo.list[index].source)
let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
+9
View File
@@ -183,6 +183,7 @@ export default {
...mapMutations('list', ['listAdd', 'listAddMultiple', 'createUserList']),
...mapMutations('player', {
setPlayList: 'setList',
setTempPlayList: 'setTempPlayList',
}),
listenEvent() {
window.eventHub.$on('key_backspace_down', this.handle_key_backspace_down)
@@ -243,6 +244,14 @@ export default {
}
this.testPlay(info.index)
break
case 'playLater':
if (this.selectedData.length) {
this.setTempPlayList(this.selectedData.map(s => ({ listId: '__temp__', musicInfo: s })))
this.resetSelect()
} else {
this.setTempPlayList([{ listId: '__temp__', musicInfo: this.listDetail.list[info.index] }])
}
break
case 'search':
this.handleSearch(info.index)
break