github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

完成我喜欢播放列表

pull/96/head
lyswhut 2019-10-03 18:11:21 +08:00
parent 4204b62f8f
commit 7a91e6efef
12 changed files with 336 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
publish/changeLog.md
View File

@ -0,0 +1,3 @@
#### 新增
- 新增我喜欢播放列表

7
src/renderer/components/material/ListButtons.vue
View File

@ -3,6 +3,9 @@ div(:class="$style.btns")
button(type="button" v-if="playBtn" title="播放" @click.stop="handleClick('play')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 287.386 287.386' space='preserve')
use(xlink:href='#icon-testPlay')
button(type="button" v-if="listAddBtn" title="添加到..." @click.stop="handleClick('listAdd')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 42 42' space='preserve')
use(xlink:href='#icon-addTo')
button(type="button" v-if="downloadBtn" title="下载" @click.stop="handleClick('download')")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 475.078 475.077' space='preserve')
use(xlink:href='#icon-download')
@ -56,6 +59,10 @@ export default {
type: Boolean,
default: true,
},
listAddBtn: {
type: Boolean,
default: true,
},
searchBtn: {
type: Boolean,
default: false,

14
src/renderer/components/material/SongList.vue
View File

@ -11,8 +11,8 @@ div(:class="$style.songList")
:indeterminate="isIndeterminate" :title="isSelectAll && !isIndeterminate ? '全不选' : '全选'")
th.nobreak(style="width: 25%;") 歌曲名
th.nobreak(style="width: 20%;") 歌手
th.nobreak(style="width: 22%;") 专辑
th.nobreak(style="width: 18%;") 操作
th.nobreak(style="width: 20%;") 专辑
th.nobreak(style="width: 20%;") 操作
th.nobreak(style="width: 10%;") 时长
div.scroll(:class="$style.tbody" ref="dom_scrollContent")
table
@ -25,9 +25,13 @@ div(:class="$style.songList")
span.badge.badge-info(v-if="item._types['320k']") 高品质
span.badge.badge-success(v-if="item._types.ape || item._types.flac") 无损
td.break(style="width: 20%;") {{item.singer}}
td.break(style="width: 22%;") {{item.albumName}}
td(style="width: 18%;")
material-list-buttons(:index="index" :search-btn="true" :play-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')" :download-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')" :remove-btn="false" @btn-click="handleListBtnClick")
td.break(style="width: 20%;") {{item.albumName}}
td(style="width: 20%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :search-btn="true"
:remove-btn="false" @btn-click="handleListBtnClick"
:listAdd-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')"
:play-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')"
:download-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')")
//- 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-success(type='button' v-if="(item._types['128k'] || item._types['192k'] || item._types['320k']) && userInfo" @click.stop='showListModal(index)') ＋

103
src/renderer/components/material/listAddModal.vue Normal file
View File

@ -0,0 +1,103 @@
<template lang="pug">
material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main(:class="$style.main")
h2
| 添加&nbsp;
span(:class="$style.name") {{this.musicInfo && `${musicInfo.name}`}}
| &nbsp;到...
material-btn(:class="$style.btn" :title="`把该歌曲添加到 ${item.name}`" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
props: {
show: {
type: Boolean,
default: false,
},
musicInfo: {
type: Object,
},
bgClose: {
type: Boolean,
default: true,
},
excludeListId: {
type: Array,
default() {
return []
},
},
},
computed: {
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
lists() {
return [
this.defaultList,
this.loveList,
...this.userList,
].filter(l => !this.excludeListId.includes(l.id))
},
},
methods: {
...mapMutations('list', ['listAdd']),
handleClick(index) {
this.listAdd({ id: this.lists[index].id, musicInfo: this.musicInfo })
this.$nextTick(() => {
this.handleClose()
})
},
handleClose() {
this.$emit('close')
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.main {
padding: 15px;
max-width: 300px;
min-width: 200px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
h2 {
font-size: 13px;
color: @color-theme_2-font;
line-height: 1.3;
text-align: center;
margin-bottom: 15px;
}
}
.name {
color: @color-theme;
}
.btn {
display: block;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
each(@themes, {
:global(#container.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';
}
}
.name {
color: ~'@{color-@{value}-theme}';
}
}
})
</style>

97
src/renderer/components/material/listAddMultipleModal.vue Normal file
View File

@ -0,0 +1,97 @@
<template lang="pug">
material-modal(:show="show" :bg-close="bgClose" @close="handleClose")
main(:class="$style.main")
h2 添加已选的 {{musicList.length}} 首歌曲到...
material-btn(:class="$style.btn" :title="`把该歌曲添加到 ${item.name}`" :key="item.id" @click="handleClick(index)" v-for="(item, index) in lists") {{item.name}}
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
props: {
show: {
type: Boolean,
default: false,
},
musicList: {
type: Array,
default() {
return []
},
},
bgClose: {
type: Boolean,
default: true,
},
excludeListId: {
type: Array,
default() {
return []
},
},
},
computed: {
...mapGetters('list', ['defaultList', 'loveList', 'userList']),
lists() {
return [
this.defaultList,
this.loveList,
...this.userList,
].filter(l => !this.excludeListId.includes(l.id))
},
},
methods: {
...mapMutations('list', ['listAddMultiple']),
handleClick(index) {
this.listAddMultiple({ id: this.lists[index].id, list: this.musicList })
this.$nextTick(() => {
this.handleClose(true)
})
},
handleClose(isSelect = false) {
this.$emit('close', isSelect)
},
},
}
</script>
<style lang="less" module>
@import '../../assets/styles/layout.less';
.main {
padding: 15px;
max-width: 300px;
min-width: 200px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
h2 {
font-size: 13px;
color: @color-theme_2-font;
line-height: 1.3;
text-align: center;
margin-bottom: 15px;
}
}
.btn {
display: block;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
each(@themes, {
:global(#container.@{value}) {
.main {
h2 {
color: ~'@{color-@{value}-theme_2-font}';
}
}
}
})
</style>

7
src/renderer/store/modules/list.js
View File

@ -44,7 +44,12 @@ const getList = (state, id) => {
// mitations
const mutations = {
initList(state, { defaultList, loveList }) {
if (defaultList !== undefined) state.defaultList = defaultList
if (defaultList !== undefined) {
// 处理0.6.2及以前的版本默认列表没有ID的兼容问题
if (!defaultList.id) defaultList.id = 'default'
state.defaultList = defaultList
}
if (loveList !== undefined) state.loveList = loveList
},
setList(state, { id, list }) {

2
src/renderer/views/Download.vue
View File

@ -26,7 +26,7 @@ div(:class="$style.download")
td.break(style="width: 10%;") {{item.type && item.type.toUpperCase()}}
td(style="width: 20%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :download-btn="false" :file-btn="true" :start-btn="!item.isComplate && item.status != downloadStatus.WAITING && (item.status != downloadStatus.RUN)"
:pause-btn="!item.isComplate && (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING)"
:pause-btn="!item.isComplate && (item.status == downloadStatus.RUN || item.status == downloadStatus.WAITING)" :list-add-btn="false"
:play-btn="item.status == downloadStatus.COMPLETED" @btn-click="handleListBtnClick")
material-flow-btn(:show="isShowEditBtn" :play-btn="false" :download-btn="false" :add-btn="false" :start-btn="true" :pause-btn="true" @btn-click="handleFlowBtnClick")
div(:class="$style.noItem" v-else)

19
src/renderer/views/Leaderboard.vue
View File

@ -6,6 +6,8 @@
material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.total" :list="list")
material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose")
</template>
<script>
@ -21,6 +23,8 @@ export default {
musicInfo: null,
selectdData: [],
isShowDownloadMultiple: false,
isShowListAdd: false,
isShowListAddMultiple: false,
}
},
computed: {
@ -72,8 +76,12 @@ export default {
case 'search':
this.handleSearch(info.index)
break
// case 'add':
// break
case 'listAdd':
this.musicInfo = this.list[info.index]
this.$nextTick(() => {
this.isShowListAdd = true
})
break
}
},
testPlay(index) {
@ -125,6 +133,10 @@ export default {
this.isShowDownloadMultiple = false
this.resetSelect()
},
handleListAddModalClose(isSelect) {
if (isSelect) this.resetSelect()
this.isShowListAddMultiple = false
},
handleFlowBtnClick(action) {
switch (action) {
case 'download':
@ -134,8 +146,7 @@ export default {
this.testPlay()
break
case 'add':
this.listAddMultiple({ id: 'default', list: this.selectdData })
this.resetSelect()
this.isShowListAddMultiple = true
break
}
},

52
src/renderer/views/List.vue
View File

@ -40,7 +40,9 @@
p(v-text="list.length ? '加载中...' : '列表竟然是空的...'")
material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
material-flow-btn(:show="isShowEditBtn" :add-btn="false" :play-btn="false" @btn-click="handleFlowBtnClick")
material-flow-btn(:show="isShowEditBtn" :play-btn="false" @btn-click="handleFlowBtnClick")
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" :exclude-list-id="excludeListId" @close="isShowListAdd = false")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" :exclude-list-id="excludeListId" @close="handleListAddModalClose")
</template>
<script>
@ -62,6 +64,8 @@ export default {
isShowDownloadMultiple: false,
delayShow: false,
routeLeaveLocation: null,
isShowListAdd: false,
isShowListAddMultiple: false,
}
},
computed: {
@ -72,21 +76,16 @@ export default {
playIndex: 'playIndex',
}),
isPlayList() {
return this.playerListId != 'download' && (
((!this.$route.query.id || this.$route.query.id == 'test') && this.playerListId == 'test') ||
this.$route.query.id == this.playerListId
)
return this.playerListId == this.listId
},
list() {
return !this.$route.query.id || this.$route.query.id == 'test'
? this.defaultList.list
: this.userList.find(l => l._id == this.$route.query.id) || []
return this.listData.list
},
isAPITemp() {
return this.setting.apiSource == 'temp'
},
listData() {
if (this.listId == null) return this.defaultList
if (!this.listId) return this.defaultList
let targetList
switch (this.listId) {
case 'default':
@ -101,6 +100,9 @@ export default {
}
return targetList
},
excludeListId() {
return [this.listId]
},
},
watch: {
selectdData(n) {
@ -120,7 +122,13 @@ export default {
},
beforeRouteUpdate(to, from, next) {
if (to.query.id === undefined) return
this.listId = to.query.id
this.delayShow = false
this.$nextTick(() => {
this.listId = to.query.id
this.$nextTick(() => {
this.handleDelayShow()
})
})
next()
},
// mounted() {
@ -142,6 +150,7 @@ export default {
next()
},
created() {
this.listId = this.$route.query.id
this.handleScroll = throttle(e => {
if (this.routeLeaveLocation) {
this.setListScroll(this.routeLeaveLocation)
@ -157,7 +166,9 @@ export default {
...mapMutations(['setListScroll']),
...mapMutations('list', ['listRemove', 'listRemoveMultiple']),
...mapActions('download', ['createDownload', 'createDownloadMultiple']),
...mapMutations('player', ['setList']),
...mapMutations('player', {
setPlayList: 'setList',
}),
handleDelayShow() {
if (this.list.length > 150) {
setTimeout(() => {
@ -185,10 +196,10 @@ export default {
},
testPlay(index) {
if ((this.isAPITemp && this.list[index].source != 'kw') || this.list[index].source == 'tx' || this.list[index].source == 'wy') return
this.setList({ list: this.list, listId: 'test', index })
this.setPlayList({ list: this.list, listId: this.listId, index })
},
handleRemove(index) {
this.listRemove({ id: 'default', index })
this.listRemove({ id: this.listId, index })
},
handleListBtnClick(info) {
switch (info.action) {
@ -207,6 +218,12 @@ export default {
case 'remove':
this.handleRemove(info.index)
break
case 'listAdd':
this.musicInfo = this.list[info.index]
this.$nextTick(() => {
this.isShowListAdd = true
})
break
}
},
handleAddDownload(type) {
@ -232,11 +249,18 @@ export default {
this.isShowDownloadMultiple = true
break
case 'remove':
this.listRemoveMultiple({ id: 'default', list: this.selectdData })
this.listRemoveMultiple({ id: this.listId, list: this.selectdData })
this.resetSelect()
break
case 'add':
this.isShowListAddMultiple = true
break
}
},
handleListAddModalClose(isSelect) {
if (isSelect) this.resetSelect()
this.isShowListAddMultiple = false
},
// handleScroll(e) {
// console.log(e.target.scrollTop)
// },

19
src/renderer/views/Search.vue
View File

@ -28,7 +28,7 @@
span.badge.badge-success(v-if="item._types.ape || item._types.flac") 无损
td.break(style="width: 20%;") {{item.singer}}
td.break(style="width: 25%;") {{item.albumName}}
td(style="width: 15%;")
td(style="width: 15%; padding-left: 0; padding-right: 0;")
material-list-buttons(:index="index" :remove-btn="false" :class="$style.listBtn"
:play-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')"
:download-btn="item.source == 'kw' || (!isAPITemp && item.source != 'tx' && item.source != 'wy')"
@ -41,6 +41,8 @@
material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
material-flow-btn(:show="isShowEditBtn && (searchSourceId == 'kw' || searchSourceId == 'all' || !isAPITemp)" :remove-btn="false" @btn-click="handleFlowBtnClick")
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose")
</template>
<script>
@ -63,6 +65,8 @@ export default {
isShowEditBtn: false,
isShowDownloadMultiple: false,
searchSourceId: null,
isShowListAdd: false,
isShowListAddMultiple: false,
}
},
beforeRouteUpdate(to, from, next) {
@ -164,7 +168,11 @@ export default {
case 'play':
this.testPlay(info.index)
break
case 'add':
case 'listAdd':
this.musicInfo = this.listInfo.list[info.index]
this.$nextTick(() => {
this.isShowListAdd = true
})
break
}
},
@ -218,14 +226,17 @@ export default {
this.resetSelect()
break
case 'add':
this.listAddMultiple({ id: 'default', list: this.filterList(this.selectdData) })
this.resetSelect()
this.isShowListAddMultiple = true
break
}
},
filterList(list) {
return this.setting.apiSource == 'temp' ? list.filter(s => s.source == 'kw') : list.filter(s => s.source != 'tx' && s.source != 'wy')
},
handleListAddModalClose(isSelect) {
if (isSelect) this.resetSelect()
this.isShowListAddMultiple = false
},
},
}
</script>

36
src/renderer/views/Setting.vue
View File

@ -162,7 +162,7 @@ export default {
name: 'Setting',
computed: {
...mapGetters(['setting', 'themes', 'version']),
...mapGetters('list', ['defaultList']),
...mapGetters('list', ['defaultList', 'loveList']),
isLatestVer() {
return this.version.newVersion && this.version.version === this.version.newVersion.version
},
@ -325,19 +325,30 @@ export default {
})
},
importPlayList(path) {
let defautlList
let listData
try {
defautlList = JSON.parse(fs.readFileSync(path, 'utf8'))
listData = JSON.parse(fs.readFileSync(path, 'utf8'))
} catch (error) {
return
}
if (defautlList.type !== 'defautlList') return
this.setList({ id: 'default', list: defautlList.data.list })
console.log(listData.type)
// 兼容0.6.2及以前版本的列表数据
if (listData.type === 'defautlList') return this.setList({ id: 'default', list: listData.data.list })
if (listData.type !== 'playList') return
for (const list of listData.data) {
this.setList({ id: list.id, list: list.list })
}
},
exportPlayList(path) {
const data = {
type: 'defautlList',
data: this.defaultList,
type: 'playList',
data: [
this.defaultList,
this.loveList,
],
}
fs.writeFile(path, JSON.stringify(data, null, 2), 'utf8', err => {
console.log(err)
@ -353,13 +364,20 @@ export default {
if (allData.type !== 'allData') return
this.setSetting(updateSetting(allData.setting))
this.init()
this.setList({ id: 'default', list: allData.defaultList.list })
if (allData.defaultList) return this.setList({ id: 'default', list: allData.defaultList.list })
for (const list of allData.playList) {
this.setList({ id: list.id, list: list.list })
}
},
exportAllData(path) {
let allData = {
type: 'allData',
setting: this.setting,
defaultList: this.defaultList,
playList: [
this.defaultList,
this.loveList,
],
}
fs.writeFile(path, JSON.stringify(allData, null, 2), 'utf8', err => {
console.log(err)

19
src/renderer/views/SongList.vue
View File

@ -31,6 +31,8 @@
material-pagination(:count="listData.total" :limit="listData.limit" :page="listData.page" @btn-click="handleToggleListPage")
material-download-modal(:show="isShowDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="isShowDownload = false")
material-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectdData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose")
</template>
<script>
@ -52,6 +54,8 @@ export default {
selectdData: [],
isShowDownloadMultiple: false,
isToggleSource: false,
isShowListAdd: false,
isShowListAddMultiple: false,
}
},
computed: {
@ -137,8 +141,12 @@ export default {
case 'search':
this.handleSearch(info.index)
break
// case 'add':
// break
case 'listAdd':
this.musicInfo = this.listDetail.list[info.index]
this.$nextTick(() => {
this.isShowListAdd = true
})
break
}
},
testPlay(index) {
@ -216,8 +224,7 @@ export default {
this.testPlay()
break
case 'add':
this.listAddMultiple({ id: 'default', list: this.selectdData })
this.resetSelect()
this.isShowListAddMultiple = true
break
}
},
@ -241,6 +248,10 @@ export default {
hideListDetail() {
setTimeout(() => this.setVisibleListDetail(false), 50)
},
handleListAddModalClose(isSelect) {
if (isSelect) this.resetSelect()
this.isShowListAddMultiple = false
},
},
}
</script>