新增桌面歌词

This commit is contained in:
lyswhut
2020-06-11 21:16:59 +08:00
parent 25fc0226aa
commit 2a81d41c2c
107 changed files with 6935 additions and 1543 deletions
+14 -17
View File
@@ -14,11 +14,11 @@
li(:class="[$style.listsItem, item.id == tabId ? $style.active : null]" :title="item.name" v-for="item in boardList" :key="item.id" @click="handleToggleList(item.id)")
span(:class="$style.listsLabel") {{item.name}}
div(:class="$style.list")
material-song-list(v-model="selectdData" :rowWidth="{r1: '5%', r2: 'auto', r3: '22%', r4: '22%', r5: '9%', r6: '15%'}" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.total" :noItem="$t('material.song_list.loding_list')" :list="list")
material-song-list(v-model="selectedData" :rowWidth="{r1: '5%', r2: 'auto', r3: '22%', r4: '22%', r5: '9%', r6: '15%'}" @action="handleSongListAction" :source="source" :page="page" :limit="info.limit" :total="info.total" :noItem="$t('material.song_list.loding_list')" :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-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectedData" @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")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectedData" @close="handleListAddModalClose")
</template>
<script>
@@ -32,7 +32,7 @@ export default {
page: 1,
isShowDownload: false,
musicInfo: null,
selectdData: [],
selectedData: [],
isShowDownloadMultiple: false,
isShowListAdd: false,
isShowListAddMultiple: false,
@@ -101,7 +101,7 @@ export default {
handleMenuClick(info) {
switch (info.action) {
case 'download':
if (this.selectdData.length) {
if (this.selectedData.length) {
this.isShowDownloadMultiple = true
} else {
this.musicInfo = this.list[info.index]
@@ -111,13 +111,17 @@ export default {
}
break
case 'play':
if (this.selectedData.length) {
this.listAddMultiple({ id: 'default', list: this.selectedData })
this.resetSelect()
}
this.testPlay(info.index)
break
case 'search':
this.handleSearch(info.index)
break
case 'addTo':
if (this.selectdData.length) {
if (this.selectedData.length) {
this.$nextTick(() => {
this.isShowListAddMultiple = true
})
@@ -131,15 +135,8 @@ export default {
}
},
testPlay(index) {
let targetSong
if (index == null) {
targetSong = this.selectdData[0]
this.listAddMultiple({ id: 'default', list: this.selectdData })
this.resetSelect()
} else {
targetSong = this.list[index]
this.listAdd({ id: 'default', musicInfo: targetSong })
}
let targetSong = this.list[index]
this.listAdd({ id: 'default', musicInfo: targetSong })
let targetIndex = this.defaultList.list.findIndex(
s => s.songmid === targetSong.songmid,
)
@@ -170,7 +167,7 @@ export default {
},
handleAddDownloadMultiple(type) {
if (this.source == 'xm' && type == 'flac') type = 'wav'
this.createDownloadMultiple({ list: [...this.selectdData], type })
this.createDownloadMultiple({ list: [...this.selectedData], type })
this.isShowDownloadMultiple = false
this.resetSelect()
},
@@ -212,7 +209,7 @@ export default {
this.tabId = id
},
resetSelect() {
this.selectdData = []
this.selectedData = []
},
},
}
+8 -5
View File
@@ -777,6 +777,8 @@ export default {
display: flex;
position: relative;
}
@lists-item-height: 36px;
.lists {
flex: none;
width: 16%;
@@ -857,18 +859,19 @@ export default {
}
.listsLabel {
display: block;
height: 36px;
height: @lists-item-height;
padding: 0 10px;
font-size: 13px;
line-height: 36px;
line-height: @lists-item-height;
.mixin-ellipsis-1;
}
.listsInput {
width: 100%;
height: 36px;
height: @lists-item-height;
border: none;
padding: 0;
line-height: 36px;
// padding-bottom: 1px;
line-height: @lists-item-height;
background: none;
outline: none;
font-size: 13px;
@@ -884,7 +887,7 @@ export default {
}
}
.newLeave {
margin-top: -36px;
margin-top: -@lists-item-height;
z-index: -1;
}
+25 -27
View File
@@ -52,10 +52,10 @@
div(v-else :class="$style.noitem_list")
p {{$t('view.search.no_item')}}
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-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectedData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
//- material-flow-btn(:show="isShowEditBtn && (searchSourceId == 'all' || assertApiSupport(searchSourceId))" :remove-btn="false" @btn-click="handleFlowBtnClick")
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="handleListAddModalClose")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddMultipleModalClose")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectedData" @close="handleListAddMultipleModalClose")
material-menu(:menus="listItemMenu" :location="listMenu.menuLocation" item-name="name" :isShow="listMenu.isShowItemMenu" @menu-click="handleListItemMenuClick")
</template>
@@ -73,7 +73,7 @@ export default {
clickIndex: -1,
isShowDownload: false,
musicInfo: null,
selectdData: [],
selectedData: [],
// isShowEditBtn: false,
isShowDownloadMultiple: false,
searchSourceId: null,
@@ -133,7 +133,7 @@ export default {
this.handleGetHotSearch()
},
watch: {
// selectdData(n) {
// selectedData(n) {
// const len = n.length
// if (len) {
// this.isShowEditBtn = true
@@ -277,8 +277,8 @@ export default {
},
handleSelectData(event, clickIndex) {
if (this.keyEvent.isShiftDown) {
if (this.selectdData.length) {
let lastSelectIndex = this.listInfo.list.indexOf(this.selectdData[this.selectdData.length - 1])
if (this.selectedData.length) {
let lastSelectIndex = this.listInfo.list.indexOf(this.selectedData[this.selectedData.length - 1])
this.removeAllSelect()
if (lastSelectIndex != clickIndex) {
let isNeedReverse = false
@@ -288,8 +288,8 @@ export default {
clickIndex = temp
isNeedReverse = true
}
this.selectdData = this.listInfo.list.slice(lastSelectIndex, clickIndex + 1)
if (isNeedReverse) this.selectdData.reverse()
this.selectedData = this.listInfo.list.slice(lastSelectIndex, clickIndex + 1)
if (isNeedReverse) this.selectedData.reverse()
let nodes = this.$refs.dom_tbody.childNodes
do {
nodes[lastSelectIndex].classList.add('active')
@@ -298,22 +298,22 @@ export default {
}
} else {
event.currentTarget.classList.add('active')
this.selectdData.push(this.listInfo.list[clickIndex])
this.selectedData.push(this.listInfo.list[clickIndex])
}
} else if (this.keyEvent.isModDown) {
let item = this.listInfo.list[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')
@@ -322,15 +322,9 @@ export default {
}
},
testPlay(index) {
let targetSong
if (index == null) {
targetSong = this.selectdData[0]
this.listAddMultiple({ id: 'default', list: this.filterList(this.selectdData) })
} else {
if (!this.assertApiSupport(this.listInfo.list[index].source)) return
targetSong = this.listInfo.list[index]
this.listAdd({ id: 'default', musicInfo: targetSong })
}
let targetSong = this.listInfo.list[index]
// if (!targetSong || !this.assertApiSupport(targetSong.source)) return
this.listAdd({ id: 'default', musicInfo: targetSong })
let targetIndex = this.defaultList.list.findIndex(
s => s.songmid === targetSong.songmid,
)
@@ -349,13 +343,13 @@ export default {
this.isShowDownload = false
},
handleAddDownloadMultiple(type) {
this.createDownloadMultiple({ list: this.filterList(this.selectdData), type })
this.createDownloadMultiple({ list: this.filterList(this.selectedData), type })
this.removeAllSelect()
this.isShowDownloadMultiple = false
},
handleSelectAllData() {
this.removeAllSelect()
this.selectdData = [...this.listInfo.list]
this.selectedData = [...this.listInfo.list]
let nodes = this.$refs.dom_tbody.childNodes
for (const node of nodes) {
node.classList.add('active')
@@ -441,10 +435,14 @@ export default {
let minfo
switch (action && action.action) {
case 'play':
if (this.selectedData.length) {
this.listAddMultiple({ id: 'default', list: this.filterList(this.selectedData) })
this.removeAllSelect()
}
this.testPlay(index)
break
case 'addTo':
if (this.selectdData.length) {
if (this.selectedData.length) {
this.$nextTick(() => {
this.isShowListAddMultiple = true
})
@@ -456,7 +454,7 @@ export default {
}
break
case 'download':
if (this.selectdData.length) {
if (this.selectedData.length) {
this.isShowDownloadMultiple = true
} else {
minfo = this.listInfo.list[index]
+37 -15
View File
@@ -25,7 +25,7 @@ div.scroll(:class="$style.setting")
dd(:title="$t('view.setting.basic_to_tray_title')")
h3 {{$t('view.setting.basic_to_tray')}}
div
material-checkbox(id="setting_to_tray" v-model="current_setting.tray.isToTray" @change="handleToTrayChange" :label="$t('view.setting.is_enable')")
material-checkbox(id="setting_to_tray" v-model="current_setting.tray.isToTray" :label="$t('view.setting.is_enable')")
dd(:title="$t('view.setting.basic_window_size_title')")
h3 {{$t('view.setting.basic_window_size')}}
@@ -68,7 +68,14 @@ div.scroll(:class="$style.setting")
h3 {{$t('view.setting.play_mediaDevice')}}
div
material-selection(:list="mediaDevices" :class="$style.gapLeft" v-model="current_setting.player.mediaDeviceId" item-key="deviceId" item-name="label")
dt {{$t('view.setting.desktop_lyric')}}
dd
div(:class="$style.gapTop")
material-checkbox(id="setting_desktop_lyric_enable" v-model="current_setting.desktopLyric.enable" :label="$t('view.setting.desktop_lyric_enable')")
div(:class="$style.gapTop")
material-checkbox(id="setting_desktop_lyric_lock" v-model="current_setting.desktopLyric.isLock" :label="$t('view.setting.desktop_lyric_lock')")
div(:class="$style.gapTop")
material-checkbox(id="setting_desktop_lyric_alwaysOnTop" v-model="current_setting.desktopLyric.isAlwaysOnTop" :label="$t('view.setting.desktop_lyric_always_on_top')")
dt {{$t('view.setting.search')}}
dd(:title="$t('view.setting.search_hot_title')")
h3 {{$t('view.setting.search_hot')}}
@@ -221,7 +228,6 @@ import {
openDirInExplorer,
selectDir,
openSaveDir,
updateSetting,
openUrl,
clipboardWriteText,
getCacheSize,
@@ -229,8 +235,9 @@ import {
sizeFormate,
setWindowSize,
} from '../utils'
import { rendererSend } from '../../common/ipc'
import apiSource from '../config/api-source'
import { rendererSend, NAMES } from '../../common/ipc'
import { mergeSetting } from '../../common/utils'
import apiSourceInfo from '../utils/music/api-source-info'
import fs from 'fs'
import languageList from '@/lang/languages.json'
@@ -268,7 +275,7 @@ export default {
]
},
apiSources() {
return apiSource.map(api => ({
return apiSourceInfo.map(api => ({
id: api.id,
label: this.$t('view.setting.basic_source_' + api.id) || api.name,
disabled: api.disabled,
@@ -314,6 +321,20 @@ export default {
mediaDeviceId: 'default',
isMediaDeviceRemovedStopPlay: false,
},
desktopLyric: {
enable: false,
isLock: false,
width: 600,
height: 700,
x: -1,
y: -1,
theme: '',
style: {
fontSize: 125,
opacity: 80,
isZoomActiveLrc: true,
},
},
list: {
isShowAlbumName: true,
isShowSource: true,
@@ -366,6 +387,7 @@ export default {
current_setting: {
handler(n, o) {
if (!this.settingVersion) return
if (JSON.stringify(this.setting) === JSON.stringify(n)) return
this.setSetting(JSON.parse(JSON.stringify(n)))
},
deep: true,
@@ -379,7 +401,7 @@ export default {
'current_setting.player.isShowTaskProgess'(n) {
if (n) return
this.$nextTick(() => {
rendererSend('progress', {
rendererSend(NAMES.mainWindow.progress, {
status: -1,
mode: 'normal',
})
@@ -388,10 +410,12 @@ export default {
},
mounted() {
navigator.mediaDevices.addEventListener('devicechange', this.getMediaDevice)
window.eventHub.$on('set_config', this.handleUpdateSetting)
this.init()
},
beforeDestroy() {
navigator.mediaDevices.removeEventListener('devicechange', this.getMediaDevice)
window.eventHub.$off('set_config', this.handleUpdateSetting)
},
methods: {
...mapMutations(['setSetting', 'setSettingVersion', 'setVersionModalVisible']),
@@ -424,7 +448,7 @@ export default {
return
}
if (settingData.type !== 'setting') return
const { version: settingVersion, setting } = updateSetting(settingData.data)
const { version: settingVersion, setting } = mergeSetting(settingData.data)
setting.isAgreePact = false
this.refreshSetting(setting, settingVersion)
},
@@ -478,7 +502,7 @@ export default {
return
}
if (allData.type !== 'allData') return
const { version: settingVersion, setting } = updateSetting(allData.setting)
const { version: settingVersion, setting } = mergeSetting(allData.setting)
setting.isAgreePact = false
this.refreshSetting(setting, settingVersion)
@@ -610,7 +634,6 @@ export default {
}
this.init()
this.handleLangChange(this.current_setting.langId)
this.handleToTrayChange()
},
handleLangChange(id) {
this.$i18n.locale = id
@@ -621,13 +644,12 @@ export default {
this.mediaDevices = audioDevices
// console.log(this.mediaDevices)
},
handleToTrayChange(isToTray) {
if (isToTray != null) this.current_setting.tray.isShow = isToTray
rendererSend('changeTray', this.current_setting.tray)
},
handleShowPact() {
window.globalObj.isShowPact = true
},
handleUpdateSetting(config) {
this.current_setting = JSON.parse(JSON.stringify(config))
},
},
}
</script>
@@ -737,7 +759,7 @@ export default {
height: 100%;
border-radius: @radius-border;
background-position: center;
background-size: auto 100%;
background-size: cover;
background-repeat: no-repeat;
}
}
+62 -47
View File
@@ -3,8 +3,8 @@
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(:class="$style.songListDetailContent" v-if="isVisibleListDetail")
div(:class="$style.songListHeader")
div(:class="$style.songListHeaderLeft")
img(:src="listDetail.info.img || selectListInfo.img")
div(:class="$style.songListHeaderLeft" :style="{ backgroundImage: 'url('+(selectListInfo.img || listDetail.info.img)+')' }")
//- img(:src="listDetail.info.img || selectListInfo.img")
span(:class="$style.playNum" v-if="listDetail.info.play_count || selectListInfo.play_count") {{listDetail.info.play_count || selectListInfo.play_count}}
div(:class="$style.songListHeaderMiddle")
h3(:title="listDetail.info.name || selectListInfo.name") {{listDetail.info.name || selectListInfo.name}}
@@ -15,7 +15,7 @@
//- material-btn(:class="$style.closeDetailButton" :disabled="detailLoading" @click="playSongListDetail") 播放
//- | &nbsp;
material-btn(:class="$style.closeDetailButton" @click="hideListDetail") {{$t('view.song_list.back')}}
material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="listDetail.page" :limit="listDetail.limit"
material-song-list(v-model="selectedData" @action="handleSongListAction" :source="source" :page="listDetail.page" :limit="listDetail.limit"
:total="listDetail.total" :noItem="isGetDetailFailed ? $t('view.song_list.loding_list_fail') : $t('view.song_list.loding_list')" :list="listDetail.list")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
div(:class="$style.songListContainer" v-if="!isVisibleListDetail")
@@ -30,12 +30,13 @@
div.scroll(:class="$style.songList" v-if="sortId !== 'importSongList'" ref="dom_scrollContent")
ul
li(:class="$style.item" v-for="(item, index) in listData.list" @click="handleItemClick(index)")
div(:class="$style.left")
img(:src="item.img")
div(:class="$style.left" :style="{ backgroundImage: 'url('+item.img+')' }")
//- img(:src="item.img")
div(:class="$style.right" :src="item.img")
h4(:title="item.name") {{item.name}}
p(:title="item.desc") {{item.desc}}
li(:class="$style.item" style="cursor: default;" v-if="listData.list && listData.list.length && listData.list.length % 3 == 2")
p(:class="$style.play_count") {{item.play_count}}
p(:class="$style.author") {{item.author}}
li(:class="$style.item" style="cursor: default;" v-for="i in spaceNum")
div(:class="$style.pagination")
material-pagination(:count="listData.total" :limit="listData.limit" :page="listData.page" @btn-click="handleToggleListPage")
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
@@ -53,9 +54,9 @@
div(v-show="!listData.list.length" :class="$style.noitem")
p {{$t('view.song_list.loding_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-download-multiple-modal(:show="isShowDownloadMultiple" :list="selectedData" @select="handleAddDownloadMultiple" @close="isShowDownloadMultiple = false")
material-list-add-modal(:show="isShowListAdd" :musicInfo="musicInfo" @close="isShowListAdd = false" :list-name="listDetail.info.name")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectdData" @close="handleListAddModalClose" :list-name="listDetail.info.name")
material-list-add-multiple-modal(:show="isShowListAddMultiple" :musicList="selectedData" @close="handleListAddModalClose" :list-name="listDetail.info.name")
</template>
<script>
@@ -74,7 +75,7 @@ export default {
source: null,
isShowDownload: false,
musicInfo: null,
selectdData: [],
selectedData: [],
isShowDownloadMultiple: false,
isToggleSource: false,
isShowListAdd: false,
@@ -112,6 +113,10 @@ export default {
let tagInfo = this.tags[this.source]
return tagInfo ? [{ name: '热门标签', list: [...tagInfo.hotTag] }, ...tagInfo.tags] : []
},
spaceNum() {
let num = this.listData.list ? this.listData.list.length % 3 : 0
return num > 0 ? 3 - num : 0
},
},
watch: {
sortId(n, o) {
@@ -200,7 +205,7 @@ export default {
handleMenuClick(info) {
switch (info.action) {
case 'download':
if (this.selectdData.length) {
if (this.selectedData.length) {
this.isShowDownloadMultiple = true
} else {
this.musicInfo = this.listDetail.list[info.index]
@@ -210,13 +215,17 @@ export default {
}
break
case 'play':
if (this.selectedData.length) {
this.listAddMultiple({ id: 'default', list: this.filterList(this.selectedData) })
this.resetSelect()
}
this.testPlay(info.index)
break
case 'search':
this.handleSearch(info.index)
break
case 'addTo':
if (this.selectdData.length) {
if (this.selectedData.length) {
this.$nextTick(() => {
this.isShowListAddMultiple = true
})
@@ -230,16 +239,9 @@ export default {
}
},
testPlay(index) {
let targetSong
if (index == null) {
targetSong = this.selectdData[0]
this.listAddMultiple({ id: 'default', list: this.filterList(this.selectdData) })
this.resetSelect()
} else {
targetSong = this.listDetail.list[index]
if (!this.assertApiSupport(targetSong.source)) return
this.listAdd({ id: 'default', musicInfo: targetSong })
}
let targetSong = this.listDetail.list[index]
// if (!this.assertApiSupport(targetSong.source)) return
this.listAdd({ id: 'default', musicInfo: targetSong })
let targetIndex = this.defaultList.list.findIndex(
s => s.songmid === targetSong.songmid,
)
@@ -279,7 +281,7 @@ export default {
},
handleAddDownloadMultiple(type) {
if (this.source == 'xm' && type == 'flac') type = 'wav'
this.createDownloadMultiple({ list: this.filterList(this.selectdData), type })
this.createDownloadMultiple({ list: this.filterList(this.selectedData), type })
this.resetSelect()
this.isShowDownloadMultiple = false
},
@@ -321,7 +323,7 @@ export default {
}
},
resetSelect() {
this.selectdData = []
this.selectedData = []
},
hideListDetail() {
setTimeout(async() => {
@@ -441,11 +443,14 @@ export default {
flex: none;
margin-left: 5px;
width: 60px;
height: 60px;
position: relative;
img {
max-width: 100%;
max-height: 100%;
}
overflow: hidden;
border-radius: 4px;
background-position: center;
background-size: cover;
opacity: .9;
.play-num {
position: absolute;
bottom: 0;
@@ -515,36 +520,46 @@ export default {
}
.left {
flex: none;
width: 66px;
height: 66px;
width: 88px;
height: 88px;
display: flex;
img {
max-width: 100%;
max-height: 100%;
}
background-position: center;
background-size: cover;
border-radius: 4px;
overflow: hidden;
opacity: .9;
// box-shadow: 0 0 2px 0 rgba(0,0,0,.2);
}
.right {
flex: auto;
padding: 5px 15px 5px 7px;
padding: 3px 15px 5px 7px;
overflow: hidden;
h4 {
font-size: 14px;
height: 2.6em;
text-align: justify;
line-height: 1.2;
.mixin-ellipsis-1;
}
p {
margin-top: 12px;
font-size: 12px;
line-height: 1.3;
.mixin-ellipsis-2;
text-align: justify;
line-height: 1.2;
// text-indent: 24px;
color: @color-theme_2-font-label;
}
}
.play_count {
margin-top: 12px;
font-size: 12px;
.mixin-ellipsis-1;
text-align: justify;
line-height: 1.2;
// text-indent: 24px;
color: @color-theme_2-font-label;
}
.author {
margin-top: 6px;
font-size: 12px;
.mixin-ellipsis-1;
text-align: justify;
line-height: 1.2;
// text-indent: 24px;
color: @color-theme_2-font-label;
}
.pagination {
text-align: center;
padding: 15px 0;