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

fix

Browse Source
This commit is contained in:
Folltoshe 2022-11-09 23:09:09 +08:00
parent 3384b36570
commit cc9fc7a250
1 changed files with 85 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,40 +9,93 @@
<img v-if="musicInfo.pic" :src="musicInfo.pic" loading="lazy" decoding="async" @error="imgError" /> <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.infoContent"> <div :class="$style.progressContent">
<div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)"> <div :class="$style.timeContent">
{{ title }} <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.status" :aria-label="statusText">{{ statusText }}</div>
</div> </div>
<div :class="$style.timeContent"> <div :class="$style.mainContent">
<span>{{ nowPlayTimeStr }}</span> <div :class="$style.infoContent">
<div :class="$style.progress"> <div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)">
<common-progress-bar v-if="!isShowPlayerDetail" :class-name="$style.progressBar" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" /> {{ title }}
</div>
<div :class="$style.status" :aria-label="statusText + $t('copy_tip')" @click="handleCopy(statusText)">
{{ statusText }}
</div>
</div> </div>
<!-- <span style="margin: 0 1px;">/</span> --> <div :class="$style.rightContent">
<span>{{ maxPlayTimeStr }}</span> <div :class="$style.rightBtn">
</div> <div :class="$style.playBtnContent">
<!-- <play-progress /> --> <control-btns />
<control-btns /> <div
<div :class="$style.playBtnContent"> :class="$style.playBtn"
<div :class="$style.playBtn" :aria-label="$t('player__prev')" style="transform: rotate(180deg);" @click="playPrev()"> :aria-label="$t('player__prev')"
<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"> style="transform: rotate(180deg)"
<use xlink:href="#icon-nextMusic" /> @click="playPrev()"
</svg> >
</div> <svg
<div :class="$style.playBtn" :aria-label="isPlay ? $t('player__pause') : $t('player__play')" @click="togglePlay"> version="1.1"
<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"> xmlns="http://www.w3.org/2000/svg"
<use xlink:href="#icon-pause" /> xlink="http://www.w3.org/1999/xlink"
</svg> height="100%"
<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"> viewBox="0 0 220.847 220.847"
<use xlink:href="#icon-play" /> space="preserve"
</svg> >
</div> <use xlink:href="#icon-nextMusic" />
<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"> </div>
<use xlink:href="#icon-nextMusic" /> <div
</svg> :class="$style.playBtn"
: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" />
</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"
>
<use xlink:href="#icon-play" />
</svg>
</div>
<div :class="$style.playBtn" :aria-label="$t('player__next')" @click="playNext()">
<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" />
</svg>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -108,7 +161,7 @@ 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(() => {
@ -228,11 +281,6 @@ export default {
top: 0px; top: 0px;
width: calc(100% - 65px - 10px); width: calc(100% - 65px - 10px);
justify-content: center; justify-content: center;
align-items: flex-start;
font-size: 13px;
color: var(--color-font);
min-width: 0;
line-height: 1.5;
} }
.timeContent { .timeContent {
width: 100%; width: 100%;