1128 lines
36 KiB
Vue
1128 lines
36 KiB
Vue
<template lang="pug">
|
||
div(:class="$style.container" @click="handleContainerClick")
|
||
div(:class="$style.lists" ref="dom_lists")
|
||
div(:class="$style.listHeader")
|
||
h2(:class="$style.listsTitle") {{$t('core.aside.my_list')}}
|
||
button(:class="$style.listsAdd" @click="handleShowNewList" :tips="$t('view.list.lists_new_list_btn')")
|
||
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='70%' viewBox='0 0 24 24' space='preserve')
|
||
use(xlink:href='#icon-list-add')
|
||
ul.scroll(:class="$style.listsContent" ref="dom_lists_list")
|
||
li(:class="[$style.listsItem, defaultList.id == listId ? $style.active : null]" :tips="defaultList.name" @click="handleListToggle(defaultList.id)")
|
||
span(:class="$style.listsLabel") {{defaultList.name}}
|
||
li(:class="[$style.listsItem, loveList.id == listId ? $style.active : null]" :tips="loveList.name" @click="handleListToggle(loveList.id)")
|
||
span(:class="$style.listsLabel") {{loveList.name}}
|
||
li.user-list(
|
||
:class="[$style.listsItem, item.id == listId ? $style.active : null, listsData.rightClickItemIndex == index ? $style.clicked : null, fetchingListStatus[item.id] ? $style.fetching : null]"
|
||
@contextmenu="handleListsItemRigthClick($event, index)"
|
||
:tips="item.name" v-for="(item, index) in userList" :key="item.id")
|
||
span(:class="$style.listsLabel" @click="handleListToggle(item.id, index + 2)") {{item.name}}
|
||
input.key-bind(:class="$style.listsInput" @contextmenu.stop type="text" @keyup.enter="handleListsSave(index, $event)" @blur="handleListsSave(index, $event)" :value="item.name" :placeholder="item.name")
|
||
transition(enter-active-class="animated-fast slideInLeft" leave-active-class="animated-fast fadeOut" @after-leave="handleListsNewAfterLeave")
|
||
li(:class="[$style.listsItem, $style.listsNew, listsData.isNewLeave ? $style.newLeave : null]" v-if="listsData.isShowNewList")
|
||
input.key-bind(:class="$style.listsInput" @contextmenu.stop ref="dom_listsNewInput" type="text" @keyup.enter="handleListsCreate" @blur="handleListsCreate" :placeholder="$t('view.list.lists_new_list_input')")
|
||
div(:class="$style.list")
|
||
//- transition
|
||
div(:class="$style.thead")
|
||
table
|
||
thead
|
||
tr
|
||
th.nobreak.center(style="width: 5%;") #
|
||
th.nobreak {{$t('view.list.name')}}
|
||
th.nobreak(style="width: 22%;") {{$t('view.list.singer')}}
|
||
th.nobreak(style="width: 22%;") {{$t('view.list.album')}}
|
||
th.nobreak(style="width: 9%;") {{$t('view.list.time')}}
|
||
th.nobreak(style="width: 15%;") {{$t('view.list.action')}}
|
||
div(v-if="delayShow && list.length" :class="$style.content")
|
||
div.scroll(:class="$style.tbody" @scroll="handleScroll" ref="dom_scrollContent")
|
||
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]")
|
||
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}}
|
||
span(:class="[$style.labelSource, $style.noSelect]" v-if="isShowSource") {{item.source}}
|
||
//- span.badge.badge-light(v-if="item._types['128k']") 128K
|
||
//- span.badge.badge-light(v-if="item._types['192k']") 192K
|
||
//- span.badge.badge-secondary(v-if="item._types['320k']") 320K
|
||
//- span.badge.badge-theme-info(v-if="item._types.ape") APE
|
||
//- span.badge.badge-theme-success(v-if="item._types.flac") FLAC
|
||
td.break(style="width: 22%;")
|
||
span.select {{item.singer}}
|
||
td.break(style="width: 22%;")
|
||
span.select {{item.albumName}}
|
||
td(style="width: 9%;")
|
||
span(:class="[$style.time, $style.noSelect]") {{item.interval || '--/--'}}
|
||
td(style="width: 15%; padding-left: 0; padding-right: 0;")
|
||
material-list-buttons(:index="index" @btn-click="handleListBtnClick")
|
||
//- button.btn-info(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k'] || item._types.flac" @click.stop='openDownloadModal(index)') 下载
|
||
//- button.btn-secondary(type='button' v-if="item._types['128k'] || item._types['192k'] || item._types['320k']" @click.stop='testPlay(index)') 试听
|
||
//- button.btn-secondary(type='button' @click.stop='handleRemove(index)') 删除
|
||
//- button.btn-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋
|
||
div(:class="$style.noItem" v-else)
|
||
p(v-text="list.length ? $t('view.list.loding_list') : $t('view.list.no_item')")
|
||
material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
|
||
material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdListDetailData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
|
||
//- material-flow-btn(:show="isShowEditBtn" :play-btn="false" @btn-click="handleFlowBtnClick")
|
||
material-list-add-modal(:show="isShowListAdd" :is-move="isMove" :from-list-id="listData.id" :musicInfo="musicInfo" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
|
||
material-list-add-multiple-modal(:show="isShowListAddMultiple" :is-move="isMoveMultiple" :from-list-id="listData.id" :musicList="selectdListDetailData" :exclude-list-id="excludeListId" @close="handleListAddMultipleModalClose")
|
||
material-menu(:menus="listsItemMenu" :location="listsData.menuLocation" item-name="name" :isShow="listsData.isShowItemMenu" @menu-click="handleListsItemMenuClick")
|
||
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
|
||
material-search-list(:list="list" @action="handleMusicSearchAction" :visible="isVisibleMusicSearch")
|
||
</template>
|
||
|
||
<script>
|
||
import { mapMutations, mapGetters, mapActions } from 'vuex'
|
||
import { throttle, scrollTo, clipboardWriteText, assertApiSupport, openUrl } from '../utils'
|
||
import musicSdk from '../utils/music'
|
||
export default {
|
||
name: 'List',
|
||
data() {
|
||
return {
|
||
listId: null,
|
||
clickTime: window.performance.now(),
|
||
clickIndex: -1,
|
||
isShowDownload: false,
|
||
musicInfo: null,
|
||
selectdListDetailData: [],
|
||
selectdListData: [],
|
||
// isShowEditBtn: false,
|
||
isShowDownloadMultiple: false,
|
||
delayShow: false,
|
||
isShowListAdd: false,
|
||
isShowListAddMultiple: false,
|
||
delayTimeout: null,
|
||
isToggleList: true,
|
||
focusTarget: 'listDetail',
|
||
keyEvent: {
|
||
isShiftDown: false,
|
||
isModDown: false,
|
||
},
|
||
lastSelectIndex: 0,
|
||
listsData: {
|
||
isShowItemMenu: false,
|
||
itemMenuControl: {
|
||
rename: true,
|
||
sync: false,
|
||
moveup: true,
|
||
movedown: true,
|
||
remove: true,
|
||
},
|
||
rightClickItemIndex: -1,
|
||
menuLocation: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
isShowNewList: false,
|
||
isNewLeave: false,
|
||
},
|
||
listMenu: {
|
||
isShowItemMenu: false,
|
||
itemMenuControl: {
|
||
play: true,
|
||
copyName: true,
|
||
addTo: true,
|
||
moveTo: true,
|
||
download: true,
|
||
remove: true,
|
||
sourceDetail: true,
|
||
},
|
||
menuLocation: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
},
|
||
isMove: false,
|
||
isMoveMultiple: false,
|
||
isVisibleMusicSearch: false,
|
||
fetchingListStatus: {},
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['userInfo', 'setting']),
|
||
...mapGetters('list', ['isInitedList', 'defaultList', 'loveList', 'userList']),
|
||
...mapGetters('player', {
|
||
playerListId: 'listId',
|
||
playIndex: 'playIndex',
|
||
}),
|
||
isPlayList() {
|
||
return this.playerListId == this.listId
|
||
},
|
||
list() {
|
||
return this.listData.list
|
||
},
|
||
listData() {
|
||
if (!this.listId) return this.defaultList
|
||
let targetList
|
||
switch (this.listId) {
|
||
case 'default':
|
||
targetList = this.defaultList
|
||
break
|
||
case 'love':
|
||
targetList = this.loveList
|
||
break
|
||
default:
|
||
targetList = this.userList.find(l => l.id === this.listId)
|
||
break
|
||
}
|
||
if (targetList) return targetList
|
||
this.handleListToggle(this.defaultList.id)
|
||
return this.defaultList
|
||
},
|
||
excludeListId() {
|
||
return [this.listId]
|
||
},
|
||
lists() {
|
||
return [this.defaultList, this.loveList, ...this.userList]
|
||
},
|
||
isShowSource() {
|
||
return this.setting.list.isShowSource
|
||
},
|
||
listsItemMenu() {
|
||
return [
|
||
{
|
||
name: this.$t('view.list.lists_rename'),
|
||
action: 'rename',
|
||
disabled: !this.listsData.itemMenuControl.rename,
|
||
},
|
||
{
|
||
name: this.$t('view.list.lists_sync'),
|
||
action: 'sync',
|
||
disabled: !this.listsData.itemMenuControl.sync,
|
||
},
|
||
{
|
||
name: this.$t('view.list.lists_moveup'),
|
||
action: 'moveup',
|
||
disabled: !this.listsData.itemMenuControl.moveup,
|
||
},
|
||
{
|
||
name: this.$t('view.list.lists_movedown'),
|
||
action: 'movedown',
|
||
disabled: !this.listsData.itemMenuControl.movedown,
|
||
},
|
||
{
|
||
name: this.$t('view.list.lists_remove'),
|
||
action: 'remove',
|
||
disabled: !this.listsData.itemMenuControl.remove,
|
||
},
|
||
]
|
||
},
|
||
listItemMenu() {
|
||
return [
|
||
{
|
||
name: this.$t('view.list.list_play'),
|
||
action: 'play',
|
||
disabled: !this.listMenu.itemMenuControl.play,
|
||
},
|
||
{
|
||
name: this.$t('view.list.list_download'),
|
||
action: 'download',
|
||
disabled: !this.listMenu.itemMenuControl.download,
|
||
},
|
||
{
|
||
name: this.$t('view.list.list_copy_name'),
|
||
action: 'copyName',
|
||
disabled: !this.listMenu.itemMenuControl.copyName,
|
||
},
|
||
{
|
||
name: this.$t('view.list.list_source_detail'),
|
||
action: 'sourceDetail',
|
||
disabled: !this.listMenu.itemMenuControl.sourceDetail,
|
||
},
|
||
{
|
||
name: this.$t('view.list.list_add_to'),
|
||
action: 'addTo',
|
||
disabled: !this.listMenu.itemMenuControl.addTo,
|
||
},
|
||
{
|
||
name: this.$t('view.list.list_move_to'),
|
||
action: 'moveTo',
|
||
disabled: !this.listMenu.itemMenuControl.moveTo,
|
||
},
|
||
{
|
||
name: this.$t('view.list.list_remove'),
|
||
action: 'remove',
|
||
disabled: !this.listMenu.itemMenuControl.remove,
|
||
},
|
||
]
|
||
},
|
||
},
|
||
watch: {
|
||
// selectdListDetailData(n) {
|
||
// const len = n.length
|
||
// if (len) {
|
||
// this.isShowEditBtn = true
|
||
// } else {
|
||
// this.isShowEditBtn = false
|
||
// }
|
||
// },
|
||
'listData.list'(n, o) {
|
||
if (n === o && n.length === o.length) return
|
||
this.removeAllSelectListDetail()
|
||
},
|
||
'$route.query.scrollIndex'(n) {
|
||
if (n == null || this.isToggleList) return
|
||
this.restoreScroll(this.$route.query.scrollIndex, true)
|
||
this.isToggleList = true
|
||
},
|
||
},
|
||
beforeRouteUpdate(to, from, next) {
|
||
this.setPrevSelectListId(to.query.id)
|
||
if (to.query.id == null) return
|
||
else if (to.query.id == this.listId) {
|
||
if (to.query.scrollIndex != null) this.isToggleList = false
|
||
return next()
|
||
}
|
||
this.delayShow = false
|
||
this.$nextTick(() => {
|
||
this.listId = to.query.id
|
||
this.$nextTick(() => {
|
||
this.handleDelayShow()
|
||
})
|
||
})
|
||
next()
|
||
},
|
||
// mounted() {
|
||
// console.log('mounted')
|
||
// if (this.$route.query.text === undefined) {
|
||
// let info = this.$store.getters['search/info']
|
||
// this.text = info.text
|
||
// this.page = info.page
|
||
// } else if (this.$route.query.text === '') {
|
||
// this.clearList()
|
||
// } else {
|
||
// this.text = this.$route.query.text
|
||
// this.page = 1
|
||
// this.handleSearch(this.text, this.page)
|
||
// }
|
||
// },
|
||
beforeRouteLeave(to, from, next) {
|
||
this.clearDelayTimeout()
|
||
this.setListScroll({ id: this.listId, location: (this.list.length && this.$refs.dom_scrollContent.scrollTop) || 0 })
|
||
next()
|
||
},
|
||
created() {
|
||
this.listId = this.$route.query.id || this.defaultList.id
|
||
this.setPrevSelectListId(this.listId)
|
||
this.handleSaveScroll = throttle((listId, location) => {
|
||
this.setListScroll({ id: listId, location })
|
||
}, 1000)
|
||
this.listenEvent()
|
||
},
|
||
mounted() {
|
||
this.handleDelayShow()
|
||
this.setListsScroll()
|
||
},
|
||
beforeDestroy() {
|
||
this.unlistenEvent()
|
||
this.setListScroll({ id: this.listId, location: (this.list.length && this.$refs.dom_scrollContent.scrollTop) || 0 })
|
||
},
|
||
methods: {
|
||
...mapMutations(['setPrevSelectListId']),
|
||
...mapMutations('list', [
|
||
'listRemove',
|
||
'listRemoveMultiple',
|
||
'setUserListName',
|
||
'createUserList',
|
||
'moveupUserList',
|
||
'movedownUserList',
|
||
'removeUserList',
|
||
'setListScroll',
|
||
'setList',
|
||
]),
|
||
...mapActions('songList', ['getListDetailAll']),
|
||
...mapActions('download', ['createDownload', 'createDownloadMultiple']),
|
||
...mapMutations('player', {
|
||
setPlayList: 'setList',
|
||
}),
|
||
listenEvent() {
|
||
window.eventHub.$on('key_shift_down', this.handle_key_shift_down)
|
||
window.eventHub.$on('key_shift_up', this.handle_key_shift_up)
|
||
window.eventHub.$on('key_mod_down', this.handle_key_mod_down)
|
||
window.eventHub.$on('key_mod_up', this.handle_key_mod_up)
|
||
window.eventHub.$on('key_mod+a_down', this.handle_key_mod_a_down)
|
||
window.eventHub.$on('key_mod+f_down', this.handle_key_mod_f_down)
|
||
},
|
||
unlistenEvent() {
|
||
window.eventHub.$off('key_shift_down', this.handle_key_shift_down)
|
||
window.eventHub.$off('key_shift_up', this.handle_key_shift_up)
|
||
window.eventHub.$off('key_mod_down', this.handle_key_mod_down)
|
||
window.eventHub.$off('key_mod_up', this.handle_key_mod_up)
|
||
window.eventHub.$off('key_mod+a_down', this.handle_key_mod_a_down)
|
||
window.eventHub.$off('key_mod+f_down', this.handle_key_mod_f_down)
|
||
},
|
||
handle_key_mod_f_down() {
|
||
this.isVisibleMusicSearch = true
|
||
},
|
||
handle_key_shift_down() {
|
||
if (!this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = true
|
||
},
|
||
handle_key_shift_up() {
|
||
if (this.keyEvent.isShiftDown) this.keyEvent.isShiftDown = false
|
||
},
|
||
handle_key_mod_down() {
|
||
if (!this.keyEvent.isModDown) this.keyEvent.isModDown = true
|
||
},
|
||
handle_key_mod_up() {
|
||
if (this.keyEvent.isModDown) this.keyEvent.isModDown = false
|
||
},
|
||
handle_key_mod_a_down({ event }) {
|
||
if (event.target.tagName == 'INPUT') return
|
||
event.preventDefault()
|
||
if (event.repeat) return
|
||
this.keyEvent.isModDown = false
|
||
this.handleSelectAllData()
|
||
},
|
||
handleDelayShow() {
|
||
this.clearDelayTimeout()
|
||
if (this.list.length > 150) {
|
||
this.delayTimeout = setTimeout(() => {
|
||
this.delayTimeout = null
|
||
this.delayShow = true
|
||
this.restoreScroll(this.$route.query.scrollIndex, false)
|
||
}, 200)
|
||
} else {
|
||
this.delayShow = true
|
||
this.restoreScroll(this.$route.query.scrollIndex, false)
|
||
}
|
||
},
|
||
handleScroll(e) {
|
||
this.handleSaveScroll(this.listId, e.target.scrollTop)
|
||
},
|
||
clearDelayTimeout() {
|
||
if (this.delayTimeout) {
|
||
clearTimeout(this.delayTimeout)
|
||
this.delayTimeout = null
|
||
}
|
||
},
|
||
handleScrollList(index, isAnimation, callback = () => {}) {
|
||
let location = this.getMusicLocation(index) - 150
|
||
if (location < 0) location = 0
|
||
if (isAnimation) {
|
||
scrollTo(this.$refs.dom_scrollContent, location, 300, callback)
|
||
} else {
|
||
this.$refs.dom_scrollContent.scrollTo(0, location)
|
||
callback()
|
||
}
|
||
},
|
||
restoreScroll(index, isAnimation) {
|
||
if (!this.list.length) return
|
||
if (index == null) {
|
||
let location = this.listData.location || 0
|
||
if (this.setting.list.isSaveScrollLocation && location) {
|
||
this.$nextTick(() => {
|
||
this.$refs.dom_scrollContent.scrollTo(0, location)
|
||
})
|
||
}
|
||
return
|
||
}
|
||
|
||
this.$nextTick(() => {
|
||
this.handleScrollList(index, isAnimation)
|
||
this.$router.replace({
|
||
path: 'list',
|
||
query: {
|
||
id: this.listId,
|
||
},
|
||
})
|
||
})
|
||
},
|
||
handleDoubleClick(event, index) {
|
||
if (event.target.classList.contains('select')) return
|
||
|
||
this.handleSelectListDetailData(event, index)
|
||
|
||
if (
|
||
window.performance.now() - this.clickTime > 400 ||
|
||
this.clickIndex !== index
|
||
) {
|
||
this.clickTime = window.performance.now()
|
||
this.clickIndex = index
|
||
return
|
||
}
|
||
this.testPlay(index)
|
||
this.clickTime = 0
|
||
this.clickIndex = -1
|
||
},
|
||
handleSelectListDetailData(event, clickIndex) {
|
||
if (this.focusTarget != 'listDetail' && this.selectdListDetailData.length) this.removeAllSelectListDetail()
|
||
|
||
if (this.keyEvent.isShiftDown) {
|
||
if (this.selectdListDetailData.length) {
|
||
let lastSelectIndex = this.lastSelectIndex
|
||
if (lastSelectIndex == clickIndex) return this.removeAllSelectListDetail()
|
||
this.removeAllSelectListDetail()
|
||
let isNeedReverse = false
|
||
if (clickIndex < lastSelectIndex) {
|
||
let temp = lastSelectIndex
|
||
lastSelectIndex = clickIndex
|
||
clickIndex = temp
|
||
isNeedReverse = true
|
||
}
|
||
this.selectdListDetailData = this.list.slice(lastSelectIndex, clickIndex + 1)
|
||
if (isNeedReverse) this.selectdListDetailData.reverse()
|
||
let nodes = this.$refs.dom_tbody.childNodes
|
||
do {
|
||
nodes[lastSelectIndex].classList.add('active')
|
||
lastSelectIndex++
|
||
} while (lastSelectIndex <= clickIndex)
|
||
} else {
|
||
event.currentTarget.classList.add('active')
|
||
this.selectdListDetailData.push(this.list[clickIndex])
|
||
this.lastSelectIndex = clickIndex
|
||
}
|
||
} else if (this.keyEvent.isModDown) {
|
||
this.lastSelectIndex = clickIndex
|
||
let item = this.list[clickIndex]
|
||
let index = this.selectdListDetailData.indexOf(item)
|
||
if (index < 0) {
|
||
this.selectdListDetailData.push(item)
|
||
event.currentTarget.classList.add('active')
|
||
} else {
|
||
this.selectdListDetailData.splice(index, 1)
|
||
event.currentTarget.classList.remove('active')
|
||
}
|
||
} else if (this.selectdListDetailData.length) this.removeAllSelectListDetail()
|
||
},
|
||
handleSelectListData(event, clickIndex) {
|
||
if (this.focusTarget != 'list' && this.selectdListData.length) this.removeAllSelectList()
|
||
|
||
if (this.keyEvent.isShiftDown) {
|
||
if (this.selectdListData.length) {
|
||
let lastSelectIndex = this.list.indexOf(this.selectdListData[this.selectdListData.length - 1])
|
||
if (lastSelectIndex == clickIndex) return this.removeAllSelectList()
|
||
this.removeAllSelectList()
|
||
let isNeedReverse = false
|
||
if (clickIndex < lastSelectIndex) {
|
||
let temp = lastSelectIndex
|
||
lastSelectIndex = clickIndex
|
||
clickIndex = temp
|
||
isNeedReverse = true
|
||
}
|
||
this.selectdListData = this.list.slice(lastSelectIndex, clickIndex + 1)
|
||
if (isNeedReverse) this.selectdListData.reverse()
|
||
let nodes = this.$refs.dom_tbody.childNodes
|
||
do {
|
||
nodes[lastSelectIndex].classList.add('active')
|
||
lastSelectIndex++
|
||
} while (lastSelectIndex <= clickIndex)
|
||
} else {
|
||
event.currentTarget.classList.add('active')
|
||
this.selectdListData.push(this.list[clickIndex])
|
||
}
|
||
} else if (this.keyEvent.isModDown) {
|
||
let item = this.list[clickIndex]
|
||
let index = this.selectdListData.indexOf(item)
|
||
if (index < 0) {
|
||
this.selectdListData.push(item)
|
||
event.currentTarget.classList.add('active')
|
||
} else {
|
||
this.selectdListData.splice(index, 1)
|
||
event.currentTarget.classList.remove('active')
|
||
}
|
||
} else if (this.selectdListData.length) this.removeAllSelectList()
|
||
},
|
||
removeAllSelectListDetail() {
|
||
this.selectdListDetailData = []
|
||
let dom_tbody = this.$refs.dom_tbody
|
||
if (!dom_tbody) return
|
||
let nodes = dom_tbody.querySelectorAll('.active')
|
||
for (const node of nodes) {
|
||
if (node.parentNode == dom_tbody) node.classList.remove('active')
|
||
}
|
||
},
|
||
removeAllSelectList() {
|
||
this.selectdListData = []
|
||
let dom_list = this.$refs.dom_lists_list
|
||
if (!dom_list) return
|
||
let nodes = dom_list.querySelectorAll('.selected')
|
||
for (const node of nodes) {
|
||
if (node.parentNode == dom_list) node.classList.remove('selected')
|
||
}
|
||
},
|
||
testPlay(index) {
|
||
if (!this.assertApiSupport(this.list[index].source)) return
|
||
this.setPlayList({ list: this.listData, index })
|
||
},
|
||
handleRemove(index) {
|
||
this.listRemove({ id: this.listId, index })
|
||
},
|
||
handleListBtnClick(info) {
|
||
switch (info.action) {
|
||
case 'download': {
|
||
const minfo = this.list[info.index]
|
||
if (!this.assertApiSupport(minfo.source)) return
|
||
this.musicInfo = minfo
|
||
this.$nextTick(() => {
|
||
this.isShowDownload = true
|
||
})
|
||
break
|
||
}
|
||
case 'play':
|
||
this.testPlay(info.index)
|
||
break
|
||
case 'remove':
|
||
this.handleRemove(info.index)
|
||
break
|
||
case 'listAdd':
|
||
this.musicInfo = this.list[info.index]
|
||
this.$nextTick(() => {
|
||
this.isShowListAdd = true
|
||
})
|
||
break
|
||
}
|
||
},
|
||
handleAddDownload(type) {
|
||
this.createDownload({ musicInfo: this.musicInfo, type })
|
||
this.isShowDownload = false
|
||
},
|
||
handleSelectAllData() {
|
||
this.removeAllSelectListDetail()
|
||
this.selectdListDetailData = [...this.list]
|
||
let nodes = this.$refs.dom_tbody.childNodes
|
||
for (const node of nodes) {
|
||
node.classList.add('active')
|
||
}
|
||
// asyncSetArray(this.selectdListDetailData, isSelect ? [...this.list] : [])
|
||
},
|
||
handleAddDownloadMultiple(type) {
|
||
const list = this.selectdListDetailData.filter(s => this.assertApiSupport(s.source))
|
||
this.createDownloadMultiple({ list, type })
|
||
this.removeAllSelectListDetail()
|
||
this.isShowDownloadMultiple = false
|
||
},
|
||
// handleFlowBtnClick(action) {
|
||
// switch (action) {
|
||
// case 'download':
|
||
// this.isShowDownloadMultiple = true
|
||
// break
|
||
// case 'remove':
|
||
// this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
|
||
// this.removeAllSelectListDetail()
|
||
// break
|
||
// case 'add':
|
||
// this.isShowListAddMultiple = true
|
||
// break
|
||
// }
|
||
// },
|
||
handleListAddModalClose() {
|
||
this.isShowListAdd = false
|
||
if (this.isMove) this.isMove = false
|
||
},
|
||
handleListAddMultipleModalClose(isClearSelect) {
|
||
if (isClearSelect) this.removeAllSelectListDetail()
|
||
this.isShowListAddMultiple = false
|
||
if (this.isMoveMultiple) this.isMoveMultiple = false
|
||
},
|
||
getMusicLocation(index) {
|
||
let dom = document.getElementById('mid_' + this.list[index].songmid)
|
||
return dom ? dom.offsetTop : 0
|
||
},
|
||
// handleScroll(e) {
|
||
// console.log(e.target.scrollTop)
|
||
// },
|
||
handleContextMenu(event) {
|
||
if (!event.target.classList.contains('select')) return
|
||
event.stopImmediatePropagation()
|
||
let classList = this.$refs.dom_scrollContent.classList
|
||
classList.add(this.$style.copying)
|
||
window.requestAnimationFrame(() => {
|
||
let str = window.getSelection().toString()
|
||
classList.remove(this.$style.copying)
|
||
str = str.trim()
|
||
if (!str.length) return
|
||
clipboardWriteText(str)
|
||
})
|
||
},
|
||
assertApiSupport(source) {
|
||
return assertApiSupport(source)
|
||
},
|
||
handleContainerClick(event) {
|
||
let isFocusList = event.target == this.$refs.dom_lists || this.$refs.dom_lists.contains(event.target)
|
||
this.focusTarget = isFocusList ? 'list' : 'listDetail'
|
||
},
|
||
handleListsSave(index, event) {
|
||
let dom_target = this.$refs.dom_lists_list.querySelector('.' + this.$style.editing)
|
||
if (dom_target) dom_target.classList.remove(this.$style.editing)
|
||
let name = event.target.value.trim()
|
||
if (name.length) return this.setUserListName({ index, name })
|
||
event.target.value = this.userList[index].name
|
||
},
|
||
handleListsCreate(event) {
|
||
if (event.target.readonly) return
|
||
let name = event.target.value.trim()
|
||
event.target.readonly = true
|
||
|
||
if (name == '') {
|
||
this.listsData.isShowNewList = false
|
||
return
|
||
}
|
||
|
||
this.listsData.isNewLeave = true
|
||
this.$nextTick(() => {
|
||
this.listsData.isShowNewList = false
|
||
})
|
||
|
||
this.createUserList({ name })
|
||
},
|
||
handleShowNewList() {
|
||
this.listsData.isShowNewList = true
|
||
this.$nextTick(() => {
|
||
this.$refs.dom_listsNewInput.focus()
|
||
})
|
||
},
|
||
handleListsNewAfterLeave() {
|
||
this.listsData.isNewLeave = false
|
||
},
|
||
setListsScroll() {
|
||
let target = this.$refs.dom_lists_list.querySelector('.' + this.$style.active)
|
||
if (!target) return
|
||
let offsetTop = target.offsetTop
|
||
let location = offsetTop - 150
|
||
if (location > 0) this.$refs.dom_lists_list.scrollTop = location
|
||
},
|
||
handleListToggle(id) {
|
||
if (id == this.listId) return
|
||
this.$router.push({
|
||
path: 'list',
|
||
query: { id },
|
||
}).catch(_ => _)
|
||
},
|
||
handleListsItemRigthClick(event, index) {
|
||
const source = this.userList[index].source
|
||
this.listsData.itemMenuControl.sync = !!source && !!musicSdk[source].songList
|
||
this.listsData.itemMenuControl.moveup = index > 0
|
||
this.listsData.itemMenuControl.movedown = index < this.userList.length - 1
|
||
this.listsData.rightClickItemIndex = index
|
||
this.listsData.menuLocation.x = event.currentTarget.offsetLeft + event.offsetX
|
||
this.listsData.menuLocation.y = event.currentTarget.offsetTop + event.offsetY - this.$refs.dom_lists_list.scrollTop
|
||
this.hideListMenu()
|
||
this.$nextTick(() => {
|
||
this.listsData.isShowItemMenu = true
|
||
})
|
||
},
|
||
handleListItemRigthClick(event, index) {
|
||
this.listMenu.itemMenuControl.sourceDetail = !!musicSdk[this.list[index].source].getMusicDetailPageUrl
|
||
this.listMenu.itemMenuControl.play =
|
||
this.listMenu.itemMenuControl.download =
|
||
this.assertApiSupport(this.list[index].source)
|
||
let dom_selected = this.$refs.dom_tbody.querySelector('tr.selected')
|
||
if (dom_selected) dom_selected.classList.remove('selected')
|
||
this.$refs.dom_tbody.querySelectorAll('tr')[index].classList.add('selected')
|
||
let dom_td = event.target.closest('td')
|
||
|
||
this.listMenu.rightClickItemIndex = index
|
||
this.listMenu.menuLocation.x = dom_td.offsetLeft + event.offsetX
|
||
this.listMenu.menuLocation.y = dom_td.offsetTop + event.offsetY - this.$refs.dom_scrollContent.scrollTop
|
||
this.hideListsMenu()
|
||
this.$nextTick(() => {
|
||
this.listMenu.isShowItemMenu = true
|
||
})
|
||
},
|
||
hideListsMenu() {
|
||
this.listsData.isShowItemMenu = false
|
||
this.listsData.rightClickItemIndex = -1
|
||
},
|
||
handleListsItemMenuClick(action) {
|
||
// console.log(action)
|
||
let index = this.listsData.rightClickItemIndex
|
||
this.hideListsMenu()
|
||
this.listsData.isShowItemMenu = false
|
||
let dom
|
||
switch (action && action.action) {
|
||
case 'rename':
|
||
dom = this.$refs.dom_lists_list.querySelectorAll('.user-list')[index]
|
||
this.$nextTick(() => {
|
||
dom.classList.add(this.$style.editing)
|
||
dom.querySelector('input').focus()
|
||
})
|
||
break
|
||
case 'sync':
|
||
this.handleSyncSourceList(index)
|
||
break
|
||
case 'moveup':
|
||
this.moveupUserList(index)
|
||
break
|
||
case 'movedown':
|
||
this.movedownUserList(index)
|
||
break
|
||
case 'remove':
|
||
this.removeUserList(index)
|
||
break
|
||
}
|
||
},
|
||
hideListMenu() {
|
||
let dom_selected = this.$refs.dom_tbody && this.$refs.dom_tbody.querySelector('tr.selected')
|
||
if (dom_selected) dom_selected.classList.remove('selected')
|
||
this.listMenu.isShowItemMenu = false
|
||
this.listMenu.rightClickItemIndex = -1
|
||
},
|
||
handleListItemMenuClick(action) {
|
||
// console.log(action)
|
||
let index = this.listMenu.rightClickItemIndex
|
||
this.hideListMenu()
|
||
let minfo
|
||
let url
|
||
switch (action && action.action) {
|
||
case 'play':
|
||
this.testPlay(index)
|
||
break
|
||
case 'copyName':
|
||
minfo = this.list[index]
|
||
clipboardWriteText(this.setting.download.fileName.replace('歌名', minfo.name).replace('歌手', minfo.singer))
|
||
break
|
||
case 'addTo':
|
||
if (this.selectdListDetailData.length) {
|
||
this.$nextTick(() => {
|
||
this.isShowListAddMultiple = true
|
||
})
|
||
} else {
|
||
this.musicInfo = this.list[index]
|
||
this.$nextTick(() => {
|
||
this.isShowListAdd = true
|
||
})
|
||
}
|
||
break
|
||
case 'moveTo':
|
||
if (this.selectdListDetailData.length) {
|
||
this.isMoveMultiple = true
|
||
this.$nextTick(() => {
|
||
this.isShowListAddMultiple = true
|
||
})
|
||
} else {
|
||
this.musicInfo = this.list[index]
|
||
this.isMove = true
|
||
this.$nextTick(() => {
|
||
this.isShowListAdd = true
|
||
})
|
||
}
|
||
break
|
||
case 'download':
|
||
if (this.selectdListDetailData.length) {
|
||
this.isShowDownloadMultiple = true
|
||
} else {
|
||
minfo = this.list[index]
|
||
if (!this.assertApiSupport(minfo.source)) return
|
||
this.musicInfo = minfo
|
||
this.$nextTick(() => {
|
||
this.isShowDownload = true
|
||
})
|
||
}
|
||
break
|
||
case 'remove':
|
||
if (this.selectdListDetailData.length) {
|
||
this.listRemoveMultiple({ id: this.listId, list: this.selectdListDetailData })
|
||
this.removeAllSelectListDetail()
|
||
} else {
|
||
this.handleRemove(index)
|
||
}
|
||
break
|
||
case 'sourceDetail':
|
||
minfo = this.list[index]
|
||
url = musicSdk[minfo.source].getMusicDetailPageUrl(minfo)
|
||
if (!url) return
|
||
openUrl(url)
|
||
}
|
||
},
|
||
handleMusicSearchAction({ action, data: { index, isPlay } = {} }) {
|
||
this.isVisibleMusicSearch = false
|
||
switch (action) {
|
||
case 'listClick':
|
||
if (index < 0) return
|
||
this.handleScrollList(index, true, () => {
|
||
let dom = document.getElementById('mid_' + this.list[index].songmid)
|
||
dom.classList.add('selected')
|
||
setTimeout(() => {
|
||
dom.classList.remove('selected')
|
||
if (isPlay) this.testPlay(index)
|
||
}, 600)
|
||
})
|
||
break
|
||
}
|
||
},
|
||
fetchList(id, source, sourceListId) {
|
||
if (this.fetchingListStatus[id] == null) {
|
||
this.$set(this.fetchingListStatus, id, true)
|
||
} else {
|
||
this.fetchingListStatus[id] = true
|
||
}
|
||
return this.getListDetailAll({ source, id: sourceListId }).catch(err => {
|
||
return Promise.reject(err)
|
||
}).finally(() => {
|
||
this.fetchingListStatus[id] = false
|
||
})
|
||
},
|
||
async handleSyncSourceList(index) {
|
||
const targetList = this.userList[index]
|
||
const list = await this.fetchList(targetList.id, targetList.source, targetList.sourceListId)
|
||
// console.log(targetList.list.length, list.length)
|
||
this.setList({
|
||
...targetList,
|
||
list,
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" module>
|
||
@import '../assets/styles/layout.less';
|
||
|
||
.container {
|
||
overflow: hidden;
|
||
height: 100%;
|
||
display: flex;
|
||
position: relative;
|
||
}
|
||
|
||
@lists-item-height: 36px;
|
||
.lists {
|
||
flex: none;
|
||
width: 16%;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
}
|
||
.listHeader {
|
||
position: relative;
|
||
&:hover {
|
||
.listsAdd {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
.listsTitle {
|
||
font-size: 12px;
|
||
line-height: 38px;
|
||
padding: 0 10px;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||
flex: none;
|
||
}
|
||
.listsAdd {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 8px;
|
||
background: none;
|
||
height: 30px;
|
||
border: none;
|
||
outline: none;
|
||
border-radius: @radius-border;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: opacity @transition-theme;
|
||
color: @color-btn;
|
||
svg {
|
||
vertical-align: bottom;
|
||
}
|
||
&:active {
|
||
opacity: .7 !important;
|
||
}
|
||
}
|
||
.listsContent {
|
||
flex: auto;
|
||
min-width: 0;
|
||
overflow-y: scroll;
|
||
overflow-x: hidden;
|
||
// border-right: 1px solid rgba(0, 0, 0, 0.12);
|
||
}
|
||
.listsItem {
|
||
position: relative;
|
||
transition: .3s ease;
|
||
transition-property: color, background-color, opacity;
|
||
background-color: transparent;
|
||
&:hover:not(.active) {
|
||
background-color: @color-theme_2-hover;
|
||
cursor: pointer;
|
||
}
|
||
&.active {
|
||
// background-color:
|
||
color: @color-theme;
|
||
}
|
||
&.selected {
|
||
background-color: @color-theme_2-active;
|
||
}
|
||
&.clicked {
|
||
background-color: @color-theme_2-hover;
|
||
}
|
||
&.fetching {
|
||
opacity: .5;
|
||
}
|
||
&.editing {
|
||
padding: 0 10px;
|
||
background-color: @color-theme_2-hover;
|
||
.listsLabel {
|
||
display: none;
|
||
}
|
||
.listsInput {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
.listsLabel {
|
||
display: block;
|
||
height: @lists-item-height;
|
||
padding: 0 10px;
|
||
font-size: 13px;
|
||
line-height: @lists-item-height;
|
||
.mixin-ellipsis-1;
|
||
}
|
||
.listsInput {
|
||
width: 100%;
|
||
height: @lists-item-height;
|
||
border: none;
|
||
padding: 0;
|
||
// padding-bottom: 1px;
|
||
line-height: @lists-item-height;
|
||
background: none;
|
||
outline: none;
|
||
font-size: 13px;
|
||
display: none;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.listsNew {
|
||
padding: 0 10px;
|
||
background-color: @color-theme_2-hover;
|
||
.listsInput {
|
||
display: block;
|
||
}
|
||
}
|
||
.newLeave {
|
||
margin-top: -@lists-item-height;
|
||
z-index: -1;
|
||
}
|
||
|
||
.list {
|
||
overflow: hidden;
|
||
height: 100%;
|
||
flex: auto;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
// .noItem {
|
||
|
||
// }
|
||
}
|
||
.content {
|
||
min-height: 0;
|
||
font-size: 14px;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
// table {
|
||
// position: relative;
|
||
// thead {
|
||
// position: fixed;
|
||
// width: 100%;
|
||
// th {
|
||
// width: 100%;
|
||
// }
|
||
// }
|
||
// }
|
||
}
|
||
.thead {
|
||
flex: none;
|
||
tr > th:first-child {
|
||
color: @color-theme_2-font-label;
|
||
// padding-left: 10px;
|
||
}
|
||
}
|
||
.tbody {
|
||
flex: auto;
|
||
overflow-y: auto;
|
||
|
||
tr {
|
||
&.active {
|
||
color: @color-btn;
|
||
}
|
||
}
|
||
td {
|
||
font-size: 12px;
|
||
|
||
&:first-child {
|
||
// padding-left: 10px;
|
||
font-size: 11px;
|
||
color: @color-theme_2-font-label;
|
||
}
|
||
}
|
||
|
||
&.copying {
|
||
.no-select {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.labelSource {
|
||
color: @color-theme;
|
||
padding: 5px;
|
||
font-size: .8em;
|
||
line-height: 1;
|
||
opacity: .75;
|
||
}
|
||
|
||
.disabled {
|
||
opacity: .5;
|
||
}
|
||
|
||
.no-item {
|
||
position: relative;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
p {
|
||
font-size: 24px;
|
||
color: @color-theme_2-font-label;
|
||
}
|
||
}
|
||
|
||
each(@themes, {
|
||
:global(#container.@{value}) {
|
||
.listsAdd {
|
||
color: ~'@{color-@{value}-btn}';
|
||
}
|
||
.listsItem {
|
||
&:hover:not(.active) {
|
||
background-color: ~'@{color-@{value}-theme_2-hover}';
|
||
}
|
||
&.active {
|
||
color: ~'@{color-@{value}-theme}';
|
||
}
|
||
&.select {
|
||
background-color: ~'@{color-@{value}-theme_2-active}';
|
||
}
|
||
&.clicked {
|
||
background-color: ~'@{color-@{value}-theme_2-hover}';
|
||
}
|
||
&.editing {
|
||
background-color: ~'@{color-@{value}-theme_2-hover}';
|
||
}
|
||
}
|
||
.listsNew {
|
||
background-color: ~'@{color-@{value}-theme_2-hover}';
|
||
}
|
||
.tbody {
|
||
tr {
|
||
&.active {
|
||
color: ~'@{color-@{value}-btn}';
|
||
}
|
||
}
|
||
td {
|
||
&:first-child {
|
||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||
}
|
||
}
|
||
}
|
||
.labelSource {
|
||
color: ~'@{color-@{value}-theme}';
|
||
}
|
||
.no-item {
|
||
p {
|
||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
</style>
|