zhangxiang/lx-music-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

再次更新播放栏UI x2

Browse Source
This commit is contained in:
Folltoshe 2022-11-10 13:32:47 +08:00
parent cc9fc7a250
commit 51b84b3973
2 changed files with 95 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/components/layout/PlayBar/ControlBtns.vue
View File

@ -55,12 +55,12 @@ export default {
@import '@renderer/assets/styles/layout.less'; @import '@renderer/assets/styles/layout.less';
.controlBtn { .controlBtn {
padding-left: 20px; // padding-left: 20px;
padding-right: 10px; // padding-right: 10px;
flex: none; flex: none;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
gap: 10px; gap: 25px;
button { button {
color: var(--color-button-font); color: var(--color-button-font);

220
src/renderer/components/layout/PlayBar/index.vue
View File

@ -1,96 +1,46 @@
<template> <template>
<div :class="$style.player"> <div :class="$style.player">
<div <div :class="$style.picContent" :aria-label="$t('player__pic_tip')" @contextmenu="handleToMusicLocation" @click="showPlayerDetail">
:class="$style.picContent" <img v-if="musicInfo.pic" :src="musicInfo.pic" loading="lazy" decoding="async" @error="imgError">
:aria-label="$t('player__pic_tip')"
@contextmenu="handleToMusicLocation"
@click="showPlayerDetail"
>
<img v-if="musicInfo.pic" :src="musicInfo.pic" loading="lazy" decoding="async" @error="imgError" />
<div v-else :class="$style.emptyPic">L<span>X</span></div> <div v-else :class="$style.emptyPic">L<span>X</span></div>
</div> </div>
<div :class="$style.progressContent">
<div :class="$style.timeContent">
<span>{{ nowPlayTimeStr }}</span>
<div :class="$style.progress">
<common-progress-bar
v-if="!isShowPlayerDetail"
:class-name="$style.progressBar"
:progress="progress"
:handle-transition-end="handleTransitionEnd"
:is-active-transition="isActiveTransition"
/>
</div>
<span>{{ maxPlayTimeStr }}</span>
</div>
</div>
<div :class="$style.mainContent"> <div :class="$style.mainContent">
<div :class="$style.infoContent"> <div :class="$style.infoContent">
<div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)"> <div :class="$style.title" :aria-label=" title + $t('copy_tip')" @click="handleCopy(title)">{{ title }}</div>
{{ title }} <div :class="$style.status" :aria-label=" statusText + $t('copy_tip')" @click="handleCopy(statusText)">{{ statusText }}</div>
</div>
<div :class="$style.status" :aria-label="statusText + $t('copy_tip')" @click="handleCopy(statusText)">
{{ statusText }}
</div>
</div> </div>
<div :class="$style.rightContent"> <div :class="$style.rightContent">
<div :class="$style.rightBtn"> <div :class="$style.rightContentMain">
<div :class="$style.playBtnContent"> <div :class="$style.rightContentMainProgress">
<div :class="$style.timeContent">
<span>{{ nowPlayTimeStr }}</span>
<div :class="$style.progress">
<common-progress-bar v-if="!isShowPlayerDetail" :class-name="$style.progressBar" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
</div>
<span>{{ maxPlayTimeStr }}</span>
</div>
</div>
<div :class="$style.rightContentMainBtn">
<control-btns /> <control-btns />
<div </div>
:class="$style.playBtn" </div>
:aria-label="$t('player__prev')" <div :class="$style.rightContentBtn">
style="transform: rotate(180deg)" <div :class="$style.playBtnContent">
@click="playPrev()" <div :class="$style.playBtn" :aria-label="$t('player__prev')" style="transform: rotate(180deg);" @click="playPrev()">
> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 220.847 220.847" space="preserve">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
height="100%"
viewBox="0 0 220.847 220.847"
space="preserve"
>
<use xlink:href="#icon-nextMusic" /> <use xlink:href="#icon-nextMusic" />
</svg> </svg>
</div> </div>
<div <div :class="$style.playBtn" :aria-label="isPlay ? $t('player__pause') : $t('player__play')" @click="togglePlay">
:class="$style.playBtn" <svg v-if="isPlay" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 277.338 277.338" space="preserve">
:aria-label="isPlay ? $t('player__pause') : $t('player__play')"
@click="togglePlay"
>
<svg
v-if="isPlay"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
height="100%"
viewBox="0 0 277.338 277.338"
space="preserve"
>
<use xlink:href="#icon-pause" /> <use xlink:href="#icon-pause" />
</svg> </svg>
<svg <svg v-else version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 170 170" space="preserve">
v-else
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
height="100%"
viewBox="0 0 170 170"
space="preserve"
>
<use xlink:href="#icon-play" /> <use xlink:href="#icon-play" />
</svg> </svg>
</div> </div>
<div :class="$style.playBtn" :aria-label="$t('player__next')" @click="playNext()"> <div :class="$style.playBtn" :aria-label="$t('player__next')" @click="playNext()">
<svg <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 220.847 220.847" space="preserve">
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
height="100%"
viewBox="0 0 220.847 220.847"
space="preserve"
>
<use xlink:href="#icon-nextMusic" /> <use xlink:href="#icon-nextMusic" />
</svg> </svg>
</div> </div>
@ -117,10 +67,12 @@ import {
playInfo, playInfo,
playMusicInfo, playMusicInfo,
} from '@renderer/store/player/state' } from '@renderer/store/player/state'
import { setMusicInfo, setShowPlayerDetail } from '@renderer/store/player/action' import {
setMusicInfo,
setShowPlayerDetail,
} from '@renderer/store/player/action'
import { appSetting } from '@renderer/store/setting' import { appSetting } from '@renderer/store/setting'
import { togglePlay, playNext, playPrev } from '@renderer/core/player' import { togglePlay, playNext, playPrev } from '@renderer/core/player'
export default { export default {
name: 'CorePlayBar', name: 'CorePlayBar',
components: { components: {
@ -129,22 +81,24 @@ export default {
}, },
setup() { setup() {
const router = useRouter() const router = useRouter()
const {
const { nowPlayTimeStr, maxPlayTimeStr, progress, isActiveTransition, handleTransitionEnd } = usePlayProgress() nowPlayTimeStr,
maxPlayTimeStr,
progress,
isActiveTransition,
handleTransitionEnd,
} = usePlayProgress()
const showPlayerDetail = () => { const showPlayerDetail = () => {
if (!playMusicInfo.musicInfo) return if (!playMusicInfo.musicInfo) return
setShowPlayerDetail(true) setShowPlayerDetail(true)
} }
const handleCopy = text => { const handleCopy = (text) => {
clipboardWriteText(text) clipboardWriteText(text)
} }
const imgError = () => { const imgError = () => {
// console.log(e) // console.log(e)
setMusicInfo({ pic: null }) setMusicInfo({ pic: null })
} }
const handleToMusicLocation = () => { const handleToMusicLocation = () => {
const listId = playMusicInfo.listId const listId = playMusicInfo.listId
if (!listId || listId == '__temp__' || listId == 'download' || !playMusicInfo.musicInfo) return if (!listId || listId == '__temp__' || listId == 'download' || !playMusicInfo.musicInfo) return
@ -157,17 +111,14 @@ export default {
}, },
}) })
} }
const title = computed(() => { const title = computed(() => {
return musicInfo.name return musicInfo.name
? appSetting['download.fileName'].replace('歌名', musicInfo.name).replace('歌手', musicInfo.singer) ? appSetting['download.fileName'].replace('歌名', musicInfo.name).replace('歌手', musicInfo.singer)
: '^-^' : '^-^'
}) })
// onBeforeUnmount(() => { // onBeforeUnmount(() => {
// window.eventHub.emit(eventPlayerNames.setTogglePlay) // window.eventHub.emit(eventPlayerNames.setTogglePlay)
// }) // })
return { return {
musicInfo, musicInfo,
nowPlayTimeStr, nowPlayTimeStr,
@ -191,9 +142,9 @@ export default {
} }
</script> </script>
<style lang="less" module> <style lang="less" module>
@import '@renderer/assets/styles/layout.less'; @import '@renderer/assets/styles/layout.less';
.player { .player {
position: relative; position: relative;
height: @height-player; height: @height-player;
@ -209,7 +160,6 @@ export default {
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
&:before { &:before {
.mixin-after; .mixin-after;
left: 0; left: 0;
@ -217,19 +167,17 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--color-main-background); background-color: var(--color-main-background);
opacity: 0.9; opacity: .9;
z-index: -1; z-index: -1;
} }
} }
.mainContent { .mainContent {
position: relative; position: relative;
display: flex; display: flex;
margin-top: 14px; // margin-top: 14px;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.picContent { .picContent {
height: 100%; height: 100%;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
@ -242,7 +190,7 @@ export default {
// align-items: center; // align-items: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 0.8; opacity: .8;
} }
img { img {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
@ -253,7 +201,6 @@ export default {
border-radius: @radius-border; border-radius: @radius-border;
// border: 2px solid @color-theme_2-background_1; // border: 2px solid @color-theme_2-background_1;
} }
.emptyPic { .emptyPic {
background-color: var(--color-primary-light-900-alpha-200); background-color: var(--color-primary-light-900-alpha-200);
border-radius: @radius-border; border-radius: @radius-border;
@ -265,30 +212,18 @@ export default {
color: var(--color-primary-light-400-alpha-200); color: var(--color-primary-light-400-alpha-200);
user-select: none; user-select: none;
font-size: 20px; font-size: 20px;
font-family: Consolas, 'Courier New', monospace; font-family: Consolas, "Courier New", monospace;
span { span {
padding-left: 3px; padding-left: 3px;
} }
} }
} }
.progressContent {
position: absolute;
cursor: pointer;
left: 68px;
right: 10px;
top: 0px;
width: calc(100% - 65px - 10px);
justify-content: center;
}
.timeContent { .timeContent {
width: 100%; width: 100%;
position: relative; position: relative;
flex: none; flex: none;
color: var(--color-300); color: var(--color-300);
font-size: 12px; font-size: 12px;
padding-right: 10px;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: center;
@ -297,7 +232,7 @@ export default {
flex: auto; flex: auto;
position: relative; position: relative;
margin: 0 8px; margin: 0 8px;
padding: 8px 0; padding: 10px 0;
} }
.time { .time {
display: flex; display: flex;
@ -307,8 +242,9 @@ export default {
.infoContent { .infoContent {
padding-left: 10px; padding-left: 10px;
margin-top: 2px; height: 100%;
height: calc(100% - 9px); line-height: 2.8;
text-align: center;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: center; justify-content: center;
@ -316,30 +252,30 @@ export default {
font-size: 12px; font-size: 12px;
color: var(--color-font); color: var(--color-font);
min-width: 0; min-width: 0;
max-width: 45%;
}
.title {
line-height: 2.2; line-height: 2.2;
max-width: 60%; color: var(--color-font);
max-width: 100%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} font-size: 15.5px;
.title {
.mixin-ellipsis-1;
color: var(--color-font);
font-size: 14px;
max-width: 100%;
} }
.status { .status {
.mixin-ellipsis-1;
color: var(--color-font-lable); color: var(--color-font-lable);
font-size: 12px;
max-width: 100%; max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 12.5px;
} }
.rightContent { .rightContent {
position: absolute; position: absolute;
margin-top: 10px;
height: 100%; height: 100%;
width: 35.7%; width: 52%;
right: 0; right: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -347,23 +283,50 @@ export default {
color: var(--color-font); color: var(--color-font);
float: right; float: right;
} }
.rightContentMain {
.rightBtn {
position: absolute; position: absolute;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-top: 8px; right: 37%;
padding-right: 20px; height: 100%;
width: 100%; width: 68%;
}
.rightContentMainProgress {
position: absolute;
cursor: pointer;
height: 50%; height: 50%;
top: 0;
width: 100%;
}
.rightContentMainBtn {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 50%;
height: 50%;
width: 50%;
gap: 25px;
}
.rightContentBtn {
position: absolute;
right: 0;
width: 35%;
height: 100%;
} }
.playBtnContent { .playBtnContent {
position: absolute; position: absolute;
display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display: flex; top: 0;
height: 100%; bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 60%;
width: 100%; width: 100%;
gap: 25px; gap: 25px;
} }
@ -387,4 +350,5 @@ export default {
opacity: 0.6; opacity: 0.6;
} }
} }
</style> </style>