完成我喜欢播放列表

This commit is contained in:
lyswhut
2019-10-03 18:11:21 +08:00
parent 4204b62f8f
commit 7a91e6efef
12 changed files with 336 additions and 42 deletions
+1 -1
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)
+15 -4
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
}
},
+38 -14
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)
// },
+15 -4
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>
+27 -9
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)
+15 -4
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>