添加进度条样式设置
lyswhut
parent
f80d03ed15
commit
0d10d1f95b
|
|
@ -21,6 +21,7 @@
|
||||||
- 桌面歌词新增在任务栏显示歌词进程设置（此设置用于在录屏软件无法捕获歌词窗口时的变通解决方法）（#1063）
|
- 桌面歌词新增在任务栏显示歌词进程设置（此设置用于在录屏软件无法捕获歌词窗口时的变通解决方法）（#1063）
|
||||||
- 添加kg源罗马音歌词的支持
|
- 添加kg源罗马音歌词的支持
|
||||||
- 支持打开波点音乐歌单（需在酷我源打开）
|
- 支持打开波点音乐歌单（需在酷我源打开）
|
||||||
|
- 新增设置-基本设置-播放栏进度条样式设置（此版本默认使用迷你进度条样式，对于某些不喜欢该样式的人可以将其换成其他样式）
|
||||||
|
|
||||||
### 优化（界面/交互/功能）
|
### 优化（界面/交互/功能）
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@ const defaultSetting: LX.AppSetting = {
|
||||||
'common.randomAnimate': true,
|
'common.randomAnimate': true,
|
||||||
'common.isAgreePact': false,
|
'common.isAgreePact': false,
|
||||||
'common.controlBtnPosition': process.platform === 'darwin' ? 'left' : 'right',
|
'common.controlBtnPosition': process.platform === 'darwin' ? 'left' : 'right',
|
||||||
|
'common.playBarProgressStyle': 'mini',
|
||||||
|
|
||||||
'player.startupAutoPlay': false,
|
'player.startupAutoPlay': false,
|
||||||
'player.togglePlayMethod': 'listLoop',
|
'player.togglePlayMethod': 'listLoop',
|
||||||
|
|
|
||||||
|
|
@ -63,6 +63,11 @@ declare global {
|
||||||
*/
|
*/
|
||||||
'common.controlBtnPosition': 'left' | 'right'
|
'common.controlBtnPosition': 'left' | 'right'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 播放栏进度条样式
|
||||||
|
*/
|
||||||
|
'common.playBarProgressStyle': 'mini' | 'full' | 'middle'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 启动时自动播放歌曲
|
* 启动时自动播放歌曲
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -267,6 +267,10 @@
|
||||||
"setting__basic_font_size_19px": "Very big",
|
"setting__basic_font_size_19px": "Very big",
|
||||||
"setting__basic_lang": "Language",
|
"setting__basic_lang": "Language",
|
||||||
"setting__basic_lang_title": "The language displayed in the software",
|
"setting__basic_lang_title": "The language displayed in the software",
|
||||||
|
"setting__basic_playbar_progress_style": "Play bar progress bar style",
|
||||||
|
"setting__basic_playbar_progress_style_full": "Full width",
|
||||||
|
"setting__basic_playbar_progress_style_middle": "Medium",
|
||||||
|
"setting__basic_playbar_progress_style_mini": "Mini",
|
||||||
"setting__basic_show_animation": "Show switching animation",
|
"setting__basic_show_animation": "Show switching animation",
|
||||||
"setting__basic_source": "Music source",
|
"setting__basic_source": "Music source",
|
||||||
"setting__basic_source_status_failed": "Initialization failed",
|
"setting__basic_source_status_failed": "Initialization failed",
|
||||||
|
|
|
||||||
|
|
@ -267,6 +267,10 @@
|
||||||
"setting__basic_font_size_19px": "非常大",
|
"setting__basic_font_size_19px": "非常大",
|
||||||
"setting__basic_lang": "语言",
|
"setting__basic_lang": "语言",
|
||||||
"setting__basic_lang_title": "软件显示的语言",
|
"setting__basic_lang_title": "软件显示的语言",
|
||||||
|
"setting__basic_playbar_progress_style": "播放栏进度条样式",
|
||||||
|
"setting__basic_playbar_progress_style_full": "全宽",
|
||||||
|
"setting__basic_playbar_progress_style_middle": "中等",
|
||||||
|
"setting__basic_playbar_progress_style_mini": "迷你",
|
||||||
"setting__basic_show_animation": "显示切换动画",
|
"setting__basic_show_animation": "显示切换动画",
|
||||||
"setting__basic_source": "音乐来源",
|
"setting__basic_source": "音乐来源",
|
||||||
"setting__basic_source_status_failed": "初始化失败",
|
"setting__basic_source_status_failed": "初始化失败",
|
||||||
|
|
|
||||||
|
|
@ -267,6 +267,10 @@
|
||||||
"setting__basic_font_size_19px": "非常大",
|
"setting__basic_font_size_19px": "非常大",
|
||||||
"setting__basic_lang": "語言",
|
"setting__basic_lang": "語言",
|
||||||
"setting__basic_lang_title": "軟件顯示的語言",
|
"setting__basic_lang_title": "軟件顯示的語言",
|
||||||
|
"setting__basic_playbar_progress_style": "播放欄進度條樣式",
|
||||||
|
"setting__basic_playbar_progress_style_full": "全寬",
|
||||||
|
"setting__basic_playbar_progress_style_middle": "中等",
|
||||||
|
"setting__basic_playbar_progress_style_mini": "迷你",
|
||||||
"setting__basic_show_animation": "顯示切換動畫",
|
"setting__basic_show_animation": "顯示切換動畫",
|
||||||
"setting__basic_source": "音樂來源",
|
"setting__basic_source": "音樂來源",
|
||||||
"setting__basic_source_status_failed": "初始化失敗",
|
"setting__basic_source_status_failed": "初始化失敗",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,308 @@
|
||||||
|
<template>
|
||||||
|
<div :class="$style.player">
|
||||||
|
<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>
|
||||||
|
<div :class="$style.picContent" :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>
|
||||||
|
<div :class="$style.infoContent">
|
||||||
|
<div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)">
|
||||||
|
{{ title }}
|
||||||
|
</div>
|
||||||
|
<div :class="$style.status">{{ statusText }}</div>
|
||||||
|
</div>
|
||||||
|
<div :class="$style.timeContent">
|
||||||
|
<span>{{ nowPlayTimeStr }}</span>
|
||||||
|
<span style="margin: 0 1px;">/</span>
|
||||||
|
<span>{{ maxPlayTimeStr }}</span>
|
||||||
|
</div>
|
||||||
|
<!-- <play-progress /> -->
|
||||||
|
<control-btns />
|
||||||
|
<div :class="$style.playBtnContent">
|
||||||
|
<div :class="$style.playBtn" :aria-label="$t('player__prev')" @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 1024 1024" space="preserve">
|
||||||
|
<use xlink:href="#icon-prevMusic" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div :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 1024 1024" 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 1024 1024" 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 1024 1024" space="preserve">
|
||||||
|
<use xlink:href="#icon-nextMusic" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { computed } from '@common/utils/vueTools'
|
||||||
|
import { useRouter } from '@common/utils/vueRouter'
|
||||||
|
import { clipboardWriteText } from '@common/utils/electron'
|
||||||
|
import ControlBtns from './ControlBtns'
|
||||||
|
// import PlayProgress from './PlayProgress'
|
||||||
|
import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
|
||||||
|
// import { lyric } from '@renderer/core/share/lyric'
|
||||||
|
import {
|
||||||
|
statusText,
|
||||||
|
musicInfo,
|
||||||
|
isShowPlayerDetail,
|
||||||
|
isPlay,
|
||||||
|
playInfo,
|
||||||
|
playMusicInfo,
|
||||||
|
} from '@renderer/store/player/state'
|
||||||
|
import {
|
||||||
|
setMusicInfo,
|
||||||
|
setShowPlayerDetail,
|
||||||
|
} from '@renderer/store/player/action'
|
||||||
|
import { appSetting } from '@renderer/store/setting'
|
||||||
|
import { togglePlay, playNext, playPrev } from '@renderer/core/player'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CorePlayBar',
|
||||||
|
components: {
|
||||||
|
ControlBtns,
|
||||||
|
// PlayProgress,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const {
|
||||||
|
nowPlayTimeStr,
|
||||||
|
maxPlayTimeStr,
|
||||||
|
progress,
|
||||||
|
isActiveTransition,
|
||||||
|
handleTransitionEnd,
|
||||||
|
} = usePlayProgress()
|
||||||
|
|
||||||
|
const showPlayerDetail = () => {
|
||||||
|
if (!playMusicInfo.musicInfo) return
|
||||||
|
setShowPlayerDetail(true)
|
||||||
|
}
|
||||||
|
const handleCopy = (text) => {
|
||||||
|
clipboardWriteText(text)
|
||||||
|
}
|
||||||
|
|
||||||
|
const imgError = () => {
|
||||||
|
// console.log(e)
|
||||||
|
setMusicInfo({ pic: null })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleToMusicLocation = () => {
|
||||||
|
const listId = playMusicInfo.listId
|
||||||
|
if (!listId || listId == '__temp__' || listId == 'download' || !playMusicInfo.musicInfo) return
|
||||||
|
if (playInfo.playIndex == -1) return
|
||||||
|
router.push({
|
||||||
|
path: '/list',
|
||||||
|
query: {
|
||||||
|
id: listId,
|
||||||
|
scrollIndex: playInfo.playIndex,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const title = computed(() => {
|
||||||
|
return musicInfo.name
|
||||||
|
? appSetting['download.fileName'].replace('歌名', musicInfo.name).replace('歌手', musicInfo.singer)
|
||||||
|
: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// onBeforeUnmount(() => {
|
||||||
|
// window.eventHub.emit(eventPlayerNames.setTogglePlay)
|
||||||
|
// })
|
||||||
|
|
||||||
|
return {
|
||||||
|
musicInfo,
|
||||||
|
nowPlayTimeStr,
|
||||||
|
maxPlayTimeStr,
|
||||||
|
progress,
|
||||||
|
isActiveTransition,
|
||||||
|
handleTransitionEnd,
|
||||||
|
handleCopy,
|
||||||
|
imgError,
|
||||||
|
statusText,
|
||||||
|
title,
|
||||||
|
showPlayerDetail,
|
||||||
|
isPlay,
|
||||||
|
togglePlay,
|
||||||
|
playNext,
|
||||||
|
playPrev,
|
||||||
|
handleToMusicLocation,
|
||||||
|
isShowPlayerDetail,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="less" module>
|
||||||
|
@import '@renderer/assets/styles/layout.less';
|
||||||
|
|
||||||
|
.player {
|
||||||
|
position: relative;
|
||||||
|
height: @height-player;
|
||||||
|
// border-top: 1px solid var(--color-primary-alpha-900);
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
align-items: center;
|
||||||
|
contain: strict;
|
||||||
|
padding: 8px 6px 6px;
|
||||||
|
z-index: 2;
|
||||||
|
// box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
.mixin-after;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--color-main-background);
|
||||||
|
opacity: .9;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.progress {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
// height: 15px;
|
||||||
|
.progressBar {
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.picContent {
|
||||||
|
height: 100%;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
|
||||||
|
// color: var(--color-primary);
|
||||||
|
// transition: @transition-normal;
|
||||||
|
// transition-property: color;
|
||||||
|
flex: none;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity @transition-fast;
|
||||||
|
// transition-property: opacity;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
// align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
// svg {
|
||||||
|
// fill: currentColor;
|
||||||
|
// }
|
||||||
|
img {
|
||||||
|
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
transition: @transition-normal;
|
||||||
|
transition-property: border-color;
|
||||||
|
// border-radius: 50%;
|
||||||
|
border-radius: @radius-border;
|
||||||
|
// border: 2px solid @color-theme_2-background_1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emptyPic {
|
||||||
|
background-color: var(--color-primary-light-900-alpha-200);
|
||||||
|
border-radius: @radius-border;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--color-primary-light-400-alpha-200);
|
||||||
|
user-select: none;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: Consolas, "Courier New", monospace;
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding-left: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoContent {
|
||||||
|
padding-left: 10px;
|
||||||
|
flex: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--color-font);
|
||||||
|
min-width: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
max-width: 100%;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--color-font-label);
|
||||||
|
.mixin-ellipsis-1;
|
||||||
|
}
|
||||||
|
.status {
|
||||||
|
padding-top: 3px;
|
||||||
|
height: 23px;
|
||||||
|
.mixin-ellipsis-1;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeContent {
|
||||||
|
flex: none;
|
||||||
|
color: var(--color-300);
|
||||||
|
font-size: 13px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playBtnContent {
|
||||||
|
height: 100%;
|
||||||
|
flex: none;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 15px;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-btn {
|
||||||
|
flex: none;
|
||||||
|
height: 52%;
|
||||||
|
// margin-top: -2px;
|
||||||
|
transition: @transition-fast;
|
||||||
|
transition-property: color, opacity;
|
||||||
|
color: var(--color-button-font);
|
||||||
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: currentColor;
|
||||||
|
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,323 @@
|
||||||
|
<template>
|
||||||
|
<div :class="$style.player">
|
||||||
|
<div :class="$style.picContent" :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>
|
||||||
|
<div :class="$style.infoContent">
|
||||||
|
<div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)">
|
||||||
|
{{ title }}
|
||||||
|
</div>
|
||||||
|
<div :class="$style.status">{{ statusText }}</div>
|
||||||
|
</div>
|
||||||
|
<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 style="margin: 0 1px;">/</span> -->
|
||||||
|
<span>{{ maxPlayTimeStr }}</span>
|
||||||
|
</div>
|
||||||
|
<!-- <play-progress /> -->
|
||||||
|
<control-btns />
|
||||||
|
<div :class="$style.playBtnContent">
|
||||||
|
<div :class="$style.playBtn" :aria-label="$t('player__prev')" @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 1024 1024" space="preserve">
|
||||||
|
<use xlink:href="#icon-prevMusic" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div :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 1024 1024" 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 1024 1024" 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 1024 1024" space="preserve">
|
||||||
|
<use xlink:href="#icon-nextMusic" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { computed } from '@common/utils/vueTools'
|
||||||
|
import { useRouter } from '@common/utils/vueRouter'
|
||||||
|
import { clipboardWriteText } from '@common/utils/electron'
|
||||||
|
import ControlBtns from './ControlBtns'
|
||||||
|
// import PlayProgress from './PlayProgress'
|
||||||
|
import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
|
||||||
|
// import { lyric } from '@renderer/core/share/lyric'
|
||||||
|
import {
|
||||||
|
statusText,
|
||||||
|
musicInfo,
|
||||||
|
isShowPlayerDetail,
|
||||||
|
isPlay,
|
||||||
|
playInfo,
|
||||||
|
playMusicInfo,
|
||||||
|
} from '@renderer/store/player/state'
|
||||||
|
import {
|
||||||
|
setMusicInfo,
|
||||||
|
setShowPlayerDetail,
|
||||||
|
} from '@renderer/store/player/action'
|
||||||
|
import { appSetting } from '@renderer/store/setting'
|
||||||
|
import { togglePlay, playNext, playPrev } from '@renderer/core/player'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CorePlayBar',
|
||||||
|
components: {
|
||||||
|
ControlBtns,
|
||||||
|
// PlayProgress,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const {
|
||||||
|
nowPlayTimeStr,
|
||||||
|
maxPlayTimeStr,
|
||||||
|
progress,
|
||||||
|
isActiveTransition,
|
||||||
|
handleTransitionEnd,
|
||||||
|
} = usePlayProgress()
|
||||||
|
|
||||||
|
const showPlayerDetail = () => {
|
||||||
|
if (!playMusicInfo.musicInfo) return
|
||||||
|
setShowPlayerDetail(true)
|
||||||
|
}
|
||||||
|
const handleCopy = (text) => {
|
||||||
|
clipboardWriteText(text)
|
||||||
|
}
|
||||||
|
|
||||||
|
const imgError = () => {
|
||||||
|
// console.log(e)
|
||||||
|
setMusicInfo({ pic: null })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleToMusicLocation = () => {
|
||||||
|
const listId = playMusicInfo.listId
|
||||||
|
if (!listId || listId == '__temp__' || listId == 'download' || !playMusicInfo.musicInfo) return
|
||||||
|
if (playInfo.playIndex == -1) return
|
||||||
|
router.push({
|
||||||
|
path: '/list',
|
||||||
|
query: {
|
||||||
|
id: listId,
|
||||||
|
scrollIndex: playInfo.playIndex,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const title = computed(() => {
|
||||||
|
return musicInfo.name
|
||||||
|
? appSetting['download.fileName'].replace('歌名', musicInfo.name).replace('歌手', musicInfo.singer)
|
||||||
|
: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// onBeforeUnmount(() => {
|
||||||
|
// window.eventHub.emit(eventPlayerNames.setTogglePlay)
|
||||||
|
// })
|
||||||
|
|
||||||
|
return {
|
||||||
|
musicInfo,
|
||||||
|
nowPlayTimeStr,
|
||||||
|
maxPlayTimeStr,
|
||||||
|
progress,
|
||||||
|
isActiveTransition,
|
||||||
|
handleTransitionEnd,
|
||||||
|
handleCopy,
|
||||||
|
imgError,
|
||||||
|
statusText,
|
||||||
|
title,
|
||||||
|
showPlayerDetail,
|
||||||
|
isPlay,
|
||||||
|
togglePlay,
|
||||||
|
playNext,
|
||||||
|
playPrev,
|
||||||
|
handleToMusicLocation,
|
||||||
|
isShowPlayerDetail,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="less" module>
|
||||||
|
@import '@renderer/assets/styles/layout.less';
|
||||||
|
|
||||||
|
.player {
|
||||||
|
position: relative;
|
||||||
|
height: @height-player;
|
||||||
|
border-top: 1px solid var(--color-primary-alpha-900);
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
align-items: center;
|
||||||
|
contain: strict;
|
||||||
|
padding: 6px;
|
||||||
|
z-index: 2;
|
||||||
|
// box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
.mixin-after;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--color-main-background);
|
||||||
|
opacity: .9;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.picContent {
|
||||||
|
height: 100%;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
|
||||||
|
// color: var(--color-primary);
|
||||||
|
// transition: @transition-normal;
|
||||||
|
// transition-property: color;
|
||||||
|
flex: none;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity @transition-fast;
|
||||||
|
// transition-property: opacity;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
// align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
// svg {
|
||||||
|
// fill: currentColor;
|
||||||
|
// }
|
||||||
|
img {
|
||||||
|
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
transition: @transition-normal;
|
||||||
|
transition-property: border-color;
|
||||||
|
// border-radius: 50%;
|
||||||
|
border-radius: @radius-border;
|
||||||
|
// border: 2px solid @color-theme_2-background_1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emptyPic {
|
||||||
|
background-color: var(--color-primary-light-900-alpha-200);
|
||||||
|
border-radius: @radius-border;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--color-primary-light-400-alpha-200);
|
||||||
|
user-select: none;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: Consolas, "Courier New", monospace;
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding-left: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoContent {
|
||||||
|
padding: 0 10px;
|
||||||
|
flex: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--color-font);
|
||||||
|
min-width: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
max-width: 100%;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--color-font-label);
|
||||||
|
.mixin-ellipsis-1;
|
||||||
|
}
|
||||||
|
.status {
|
||||||
|
padding-top: 3px;
|
||||||
|
height: 23px;
|
||||||
|
.mixin-ellipsis-1;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeContent {
|
||||||
|
width: 30%;
|
||||||
|
// position: relative;
|
||||||
|
flex: none;
|
||||||
|
color: var(--color-300);
|
||||||
|
font-size: 13px;
|
||||||
|
// padding-left: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.progress {
|
||||||
|
// position: absolute;
|
||||||
|
// top: 0;
|
||||||
|
// left: 0;
|
||||||
|
// width: 100%;
|
||||||
|
flex: auto;
|
||||||
|
// width: 160px;
|
||||||
|
position: relative;
|
||||||
|
// padding-bottom: 6px;
|
||||||
|
margin: 0 8px;
|
||||||
|
padding: 8px 0;
|
||||||
|
// height: 15px;
|
||||||
|
// .progressBar {
|
||||||
|
// height: 4px;
|
||||||
|
// // border-radius: 0;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playBtnContent {
|
||||||
|
height: 100%;
|
||||||
|
flex: none;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 15px;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-btn {
|
||||||
|
flex: none;
|
||||||
|
height: 52%;
|
||||||
|
// margin-top: -2px;
|
||||||
|
transition: @transition-fast;
|
||||||
|
transition-property: color, opacity;
|
||||||
|
color: var(--color-button-font);
|
||||||
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: currentColor;
|
||||||
|
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,338 @@
|
||||||
|
<template>
|
||||||
|
<div :class="$style.player">
|
||||||
|
<div :class="$style.picContent" :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>
|
||||||
|
<div :class="$style.infoContent">
|
||||||
|
<div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)">
|
||||||
|
{{ title }}
|
||||||
|
</div>
|
||||||
|
<div :class="$style.status">{{ statusText }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div :class="$style.timeContainer">
|
||||||
|
<div :class="$style.timeContent">
|
||||||
|
<span>{{ nowPlayTimeStr }}</span>
|
||||||
|
<span style="margin: 0 1px;">/</span>
|
||||||
|
<span>{{ maxPlayTimeStr }}</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>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<play-progress />
|
||||||
|
<control-btns />
|
||||||
|
<div :class="$style.playBtnContent">
|
||||||
|
<div :class="$style.playBtn" :aria-label="$t('player__prev')" @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 1024 1024" space="preserve">
|
||||||
|
<use xlink:href="#icon-prevMusic" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div :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 1024 1024" 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 1024 1024" 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 1024 1024" space="preserve">
|
||||||
|
<use xlink:href="#icon-nextMusic" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { computed } from '@common/utils/vueTools'
|
||||||
|
import { useRouter } from '@common/utils/vueRouter'
|
||||||
|
import { clipboardWriteText } from '@common/utils/electron'
|
||||||
|
import ControlBtns from './ControlBtns'
|
||||||
|
import PlayProgress from './PlayProgress'
|
||||||
|
import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
|
||||||
|
// import { lyric } from '@renderer/core/share/lyric'
|
||||||
|
import {
|
||||||
|
statusText,
|
||||||
|
musicInfo,
|
||||||
|
isShowPlayerDetail,
|
||||||
|
isPlay,
|
||||||
|
playInfo,
|
||||||
|
playMusicInfo,
|
||||||
|
} from '@renderer/store/player/state'
|
||||||
|
import {
|
||||||
|
setMusicInfo,
|
||||||
|
setShowPlayerDetail,
|
||||||
|
} from '@renderer/store/player/action'
|
||||||
|
import { appSetting } from '@renderer/store/setting'
|
||||||
|
import { togglePlay, playNext, playPrev } from '@renderer/core/player'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CorePlayBar',
|
||||||
|
components: {
|
||||||
|
ControlBtns,
|
||||||
|
PlayProgress,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const {
|
||||||
|
nowPlayTimeStr,
|
||||||
|
maxPlayTimeStr,
|
||||||
|
progress,
|
||||||
|
isActiveTransition,
|
||||||
|
handleTransitionEnd,
|
||||||
|
} = usePlayProgress()
|
||||||
|
|
||||||
|
const showPlayerDetail = () => {
|
||||||
|
if (!playMusicInfo.musicInfo) return
|
||||||
|
setShowPlayerDetail(true)
|
||||||
|
}
|
||||||
|
const handleCopy = (text) => {
|
||||||
|
clipboardWriteText(text)
|
||||||
|
}
|
||||||
|
|
||||||
|
const imgError = () => {
|
||||||
|
// console.log(e)
|
||||||
|
setMusicInfo({ pic: null })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleToMusicLocation = () => {
|
||||||
|
const listId = playMusicInfo.listId
|
||||||
|
if (!listId || listId == '__temp__' || listId == 'download' || !playMusicInfo.musicInfo) return
|
||||||
|
if (playInfo.playIndex == -1) return
|
||||||
|
router.push({
|
||||||
|
path: '/list',
|
||||||
|
query: {
|
||||||
|
id: listId,
|
||||||
|
scrollIndex: playInfo.playIndex,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const title = computed(() => {
|
||||||
|
return musicInfo.name
|
||||||
|
? appSetting['download.fileName'].replace('歌名', musicInfo.name).replace('歌手', musicInfo.singer)
|
||||||
|
: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// onBeforeUnmount(() => {
|
||||||
|
// window.eventHub.emit(eventPlayerNames.setTogglePlay)
|
||||||
|
// })
|
||||||
|
|
||||||
|
return {
|
||||||
|
musicInfo,
|
||||||
|
nowPlayTimeStr,
|
||||||
|
maxPlayTimeStr,
|
||||||
|
progress,
|
||||||
|
isActiveTransition,
|
||||||
|
handleTransitionEnd,
|
||||||
|
handleCopy,
|
||||||
|
imgError,
|
||||||
|
statusText,
|
||||||
|
title,
|
||||||
|
showPlayerDetail,
|
||||||
|
isPlay,
|
||||||
|
togglePlay,
|
||||||
|
playNext,
|
||||||
|
playPrev,
|
||||||
|
handleToMusicLocation,
|
||||||
|
isShowPlayerDetail,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="less" module>
|
||||||
|
@import '@renderer/assets/styles/layout.less';
|
||||||
|
|
||||||
|
.player {
|
||||||
|
position: relative;
|
||||||
|
height: @height-player;
|
||||||
|
border-top: 1px solid var(--color-primary-alpha-900);
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
align-items: center;
|
||||||
|
contain: strict;
|
||||||
|
padding: 6px;
|
||||||
|
z-index: 2;
|
||||||
|
// box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
.mixin-after;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--color-main-background);
|
||||||
|
opacity: .9;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.picContent {
|
||||||
|
height: 100%;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
|
||||||
|
// color: var(--color-primary);
|
||||||
|
// transition: @transition-normal;
|
||||||
|
// transition-property: color;
|
||||||
|
flex: none;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity @transition-fast;
|
||||||
|
// transition-property: opacity;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
// align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
// svg {
|
||||||
|
// fill: currentColor;
|
||||||
|
// }
|
||||||
|
img {
|
||||||
|
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
transition: @transition-normal;
|
||||||
|
transition-property: border-color;
|
||||||
|
// border-radius: 50%;
|
||||||
|
border-radius: @radius-border;
|
||||||
|
// border: 2px solid @color-theme_2-background_1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emptyPic {
|
||||||
|
background-color: var(--color-primary-light-900-alpha-200);
|
||||||
|
border-radius: @radius-border;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--color-primary-light-400-alpha-200);
|
||||||
|
user-select: none;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: Consolas, "Courier New", monospace;
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding-left: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoContent {
|
||||||
|
padding: 0 10px;
|
||||||
|
flex: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--color-font);
|
||||||
|
min-width: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
max-width: 100%;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--color-font-label);
|
||||||
|
.mixin-ellipsis-1;
|
||||||
|
}
|
||||||
|
.status {
|
||||||
|
padding-top: 3px;
|
||||||
|
height: 23px;
|
||||||
|
.mixin-ellipsis-1;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .timeContainer {
|
||||||
|
// flex: none;
|
||||||
|
// padding: 15px 0;
|
||||||
|
// &:hover {
|
||||||
|
// .progress {
|
||||||
|
// opacity: 1;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .timeContent {
|
||||||
|
// // width: 30%;
|
||||||
|
// position: relative;
|
||||||
|
// // flex: none;
|
||||||
|
// color: var(--color-300);
|
||||||
|
// font-size: 13px;
|
||||||
|
// // padding-left: 10px;
|
||||||
|
// // display: flex;
|
||||||
|
// // flex-flow: column nowrap;
|
||||||
|
// // align-items: center;
|
||||||
|
// padding-bottom: 3px;
|
||||||
|
// }
|
||||||
|
// .progress {
|
||||||
|
// position: absolute;
|
||||||
|
// top: 100%;
|
||||||
|
// left: 0;
|
||||||
|
// width: 100%;
|
||||||
|
// flex: auto;
|
||||||
|
// // width: 160px;
|
||||||
|
// // position: relative;
|
||||||
|
// // padding-bottom: 6px;
|
||||||
|
// // margin: 0 8px;
|
||||||
|
// padding: 2px 0;
|
||||||
|
// height: 8px;
|
||||||
|
// transition: opacity @transition-normal;
|
||||||
|
// opacity: .24;
|
||||||
|
|
||||||
|
// .progressBar {
|
||||||
|
// height: 2px;
|
||||||
|
// border-radius: 0;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .time {
|
||||||
|
// display: flex;
|
||||||
|
// flex-flow: row nowrap;
|
||||||
|
// justify-content: space-between;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.playBtnContent {
|
||||||
|
height: 100%;
|
||||||
|
flex: none;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 15px;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-btn {
|
||||||
|
flex: none;
|
||||||
|
height: 52%;
|
||||||
|
// margin-top: -2px;
|
||||||
|
transition: @transition-fast;
|
||||||
|
transition-property: color, opacity;
|
||||||
|
color: var(--color-button-font);
|
||||||
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: currentColor;
|
||||||
|
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -1,338 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="$style.player">
|
<FullWidthProgress v-if="appSetting['common.playBarProgressStyle'] == 'full'" />
|
||||||
<div :class="$style.picContent" :aria-label="$t('player__pic_tip')" @contextmenu="handleToMusicLocation" @click="showPlayerDetail">
|
<MiddleWidthProgress v-else-if="appSetting['common.playBarProgressStyle'] == 'middle'" />
|
||||||
<img v-if="musicInfo.pic" :src="musicInfo.pic" loading="lazy" decoding="async" @error="imgError">
|
<MiniWidthProgress v-else />
|
||||||
<div v-else :class="$style.emptyPic">L<span>X</span></div>
|
|
||||||
</div>
|
|
||||||
<div :class="$style.infoContent">
|
|
||||||
<div :class="$style.title" :aria-label="title + $t('copy_tip')" @click="handleCopy(title)">
|
|
||||||
{{ title }}
|
|
||||||
</div>
|
|
||||||
<div :class="$style.status">{{ statusText }}</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div :class="$style.timeContainer">
|
|
||||||
<div :class="$style.timeContent">
|
|
||||||
<span>{{ nowPlayTimeStr }}</span>
|
|
||||||
<span style="margin: 0 1px;">/</span>
|
|
||||||
<span>{{ maxPlayTimeStr }}</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>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<play-progress />
|
|
||||||
<control-btns />
|
|
||||||
<div :class="$style.playBtnContent">
|
|
||||||
<div :class="$style.playBtn" :aria-label="$t('player__prev')" @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 1024 1024" space="preserve">
|
|
||||||
<use xlink:href="#icon-prevMusic" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div :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 1024 1024" 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 1024 1024" 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 1024 1024" space="preserve">
|
|
||||||
<use xlink:href="#icon-nextMusic" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import { computed } from '@common/utils/vueTools'
|
|
||||||
import { useRouter } from '@common/utils/vueRouter'
|
|
||||||
import { clipboardWriteText } from '@common/utils/electron'
|
|
||||||
import ControlBtns from './ControlBtns'
|
|
||||||
import PlayProgress from './PlayProgress'
|
|
||||||
import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
|
|
||||||
// import { lyric } from '@renderer/core/share/lyric'
|
|
||||||
import {
|
|
||||||
statusText,
|
|
||||||
musicInfo,
|
|
||||||
isShowPlayerDetail,
|
|
||||||
isPlay,
|
|
||||||
playInfo,
|
|
||||||
playMusicInfo,
|
|
||||||
} from '@renderer/store/player/state'
|
|
||||||
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 MiniWidthProgress from './MiniWidthProgress.vue'
|
||||||
|
import FullWidthProgress from './FullWidthProgress.vue'
|
||||||
|
import MiddleWidthProgress from './MiddleWidthProgress.vue'
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'CorePlayBar',
|
|
||||||
components: {
|
|
||||||
ControlBtns,
|
|
||||||
PlayProgress,
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const {
|
|
||||||
nowPlayTimeStr,
|
|
||||||
maxPlayTimeStr,
|
|
||||||
progress,
|
|
||||||
isActiveTransition,
|
|
||||||
handleTransitionEnd,
|
|
||||||
} = usePlayProgress()
|
|
||||||
|
|
||||||
const showPlayerDetail = () => {
|
|
||||||
if (!playMusicInfo.musicInfo) return
|
|
||||||
setShowPlayerDetail(true)
|
|
||||||
}
|
|
||||||
const handleCopy = (text) => {
|
|
||||||
clipboardWriteText(text)
|
|
||||||
}
|
|
||||||
|
|
||||||
const imgError = () => {
|
|
||||||
// console.log(e)
|
|
||||||
setMusicInfo({ pic: null })
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleToMusicLocation = () => {
|
|
||||||
const listId = playMusicInfo.listId
|
|
||||||
if (!listId || listId == '__temp__' || listId == 'download' || !playMusicInfo.musicInfo) return
|
|
||||||
if (playInfo.playIndex == -1) return
|
|
||||||
router.push({
|
|
||||||
path: '/list',
|
|
||||||
query: {
|
|
||||||
id: listId,
|
|
||||||
scrollIndex: playInfo.playIndex,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const title = computed(() => {
|
|
||||||
return musicInfo.name
|
|
||||||
? appSetting['download.fileName'].replace('歌名', musicInfo.name).replace('歌手', musicInfo.singer)
|
|
||||||
: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
// onBeforeUnmount(() => {
|
|
||||||
// window.eventHub.emit(eventPlayerNames.setTogglePlay)
|
|
||||||
// })
|
|
||||||
|
|
||||||
return {
|
|
||||||
musicInfo,
|
|
||||||
nowPlayTimeStr,
|
|
||||||
maxPlayTimeStr,
|
|
||||||
progress,
|
|
||||||
isActiveTransition,
|
|
||||||
handleTransitionEnd,
|
|
||||||
handleCopy,
|
|
||||||
imgError,
|
|
||||||
statusText,
|
|
||||||
title,
|
|
||||||
showPlayerDetail,
|
|
||||||
isPlay,
|
|
||||||
togglePlay,
|
|
||||||
playNext,
|
|
||||||
playPrev,
|
|
||||||
handleToMusicLocation,
|
|
||||||
isShowPlayerDetail,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style lang="less" module>
|
|
||||||
@import '@renderer/assets/styles/layout.less';
|
|
||||||
|
|
||||||
.player {
|
|
||||||
position: relative;
|
|
||||||
height: @height-player;
|
|
||||||
border-top: 1px solid var(--color-primary-alpha-900);
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row nowrap;
|
|
||||||
align-items: center;
|
|
||||||
contain: strict;
|
|
||||||
padding: 6px;
|
|
||||||
z-index: 2;
|
|
||||||
// box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
.mixin-after;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: var(--color-main-background);
|
|
||||||
opacity: .9;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.picContent {
|
|
||||||
height: 100%;
|
|
||||||
aspect-ratio: 1 / 1;
|
|
||||||
|
|
||||||
// color: var(--color-primary);
|
|
||||||
// transition: @transition-normal;
|
|
||||||
// transition-property: color;
|
|
||||||
flex: none;
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity @transition-fast;
|
|
||||||
// transition-property: opacity;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
// align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: .8;
|
|
||||||
}
|
|
||||||
|
|
||||||
// svg {
|
|
||||||
// fill: currentColor;
|
|
||||||
// }
|
|
||||||
img {
|
|
||||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
transition: @transition-normal;
|
|
||||||
transition-property: border-color;
|
|
||||||
// border-radius: 50%;
|
|
||||||
border-radius: @radius-border;
|
|
||||||
// border: 2px solid @color-theme_2-background_1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emptyPic {
|
|
||||||
background-color: var(--color-primary-light-900-alpha-200);
|
|
||||||
border-radius: @radius-border;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: var(--color-primary-light-400-alpha-200);
|
|
||||||
user-select: none;
|
|
||||||
font-size: 20px;
|
|
||||||
font-family: Consolas, "Courier New", monospace;
|
|
||||||
|
|
||||||
span {
|
|
||||||
padding-left: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.infoContent {
|
|
||||||
padding: 0 10px;
|
|
||||||
flex: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start;
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--color-font);
|
|
||||||
min-width: 0;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
max-width: 100%;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--color-font-label);
|
|
||||||
.mixin-ellipsis-1;
|
|
||||||
}
|
|
||||||
.status {
|
|
||||||
padding-top: 3px;
|
|
||||||
height: 23px;
|
|
||||||
.mixin-ellipsis-1;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// .timeContainer {
|
|
||||||
// flex: none;
|
|
||||||
// padding: 15px 0;
|
|
||||||
// &:hover {
|
|
||||||
// .progress {
|
|
||||||
// opacity: 1;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .timeContent {
|
|
||||||
// // width: 30%;
|
|
||||||
// position: relative;
|
|
||||||
// // flex: none;
|
|
||||||
// color: var(--color-300);
|
|
||||||
// font-size: 13px;
|
|
||||||
// // padding-left: 10px;
|
|
||||||
// // display: flex;
|
|
||||||
// // flex-flow: column nowrap;
|
|
||||||
// // align-items: center;
|
|
||||||
// padding-bottom: 3px;
|
|
||||||
// }
|
|
||||||
// .progress {
|
|
||||||
// position: absolute;
|
|
||||||
// top: 100%;
|
|
||||||
// left: 0;
|
|
||||||
// width: 100%;
|
|
||||||
// flex: auto;
|
|
||||||
// // width: 160px;
|
|
||||||
// // position: relative;
|
|
||||||
// // padding-bottom: 6px;
|
|
||||||
// // margin: 0 8px;
|
|
||||||
// padding: 2px 0;
|
|
||||||
// height: 8px;
|
|
||||||
// transition: opacity @transition-normal;
|
|
||||||
// opacity: .24;
|
|
||||||
|
|
||||||
// .progressBar {
|
|
||||||
// height: 2px;
|
|
||||||
// border-radius: 0;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .time {
|
|
||||||
// display: flex;
|
|
||||||
// flex-flow: row nowrap;
|
|
||||||
// justify-content: space-between;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.playBtnContent {
|
|
||||||
height: 100%;
|
|
||||||
flex: none;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row nowrap;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 10px;
|
|
||||||
padding-right: 15px;
|
|
||||||
gap: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.play-btn {
|
|
||||||
flex: none;
|
|
||||||
height: 52%;
|
|
||||||
// margin-top: -2px;
|
|
||||||
transition: @transition-fast;
|
|
||||||
transition-property: color, opacity;
|
|
||||||
color: var(--color-button-font);
|
|
||||||
opacity: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: currentColor;
|
|
||||||
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -79,6 +79,15 @@ dd
|
||||||
div
|
div
|
||||||
base-checkbox.gap-left(v-for="item in controlBtnPositionList" :key="item.id" :id="`setting_basic_control_btn_position_${item.id}`"
|
base-checkbox.gap-left(v-for="item in controlBtnPositionList" :key="item.id" :id="`setting_basic_control_btn_position_${item.id}`"
|
||||||
name="setting_basic_control_btn_position" need :modelValue="appSetting['common.controlBtnPosition']" @update:modelValue="updateSetting({'common.controlBtnPosition': $event})" :value="item.id" :label="item.name")
|
name="setting_basic_control_btn_position" need :modelValue="appSetting['common.controlBtnPosition']" @update:modelValue="updateSetting({'common.controlBtnPosition': $event})" :value="item.id" :label="item.name")
|
||||||
|
dd
|
||||||
|
h3#basic_playbar_progress_style {{$t('setting__basic_playbar_progress_style')}}
|
||||||
|
div
|
||||||
|
base-checkbox.gap-left(id="setting_basic_playbar_progress_style_mini" name="setting_basic_playbar_progress_style"
|
||||||
|
need :modelValue="appSetting['common.playBarProgressStyle']" @update:modelValue="updateSetting({'common.playBarProgressStyle': $event})" value="mini" :label="$t('setting__basic_playbar_progress_style_mini')")
|
||||||
|
base-checkbox.gap-left(id="setting_basic_playbar_progress_style_middle" name="setting_basic_playbar_progress_style"
|
||||||
|
need :modelValue="appSetting['common.playBarProgressStyle']" @update:modelValue="updateSetting({'common.playBarProgressStyle': $event})" value="middle" :label="$t('setting__basic_playbar_progress_style_middle')")
|
||||||
|
base-checkbox.gap-left(id="setting_basic_playbar_progress_style_full" name="setting_basic_playbar_progress_style"
|
||||||
|
need :modelValue="appSetting['common.playBarProgressStyle']" @update:modelValue="updateSetting({'common.playBarProgressStyle': $event})" value="full" :label="$t('setting__basic_playbar_progress_style_full')")
|
||||||
|
|
||||||
ThemeSelectorModal(v-model="isShowThemeSelectorModal")
|
ThemeSelectorModal(v-model="isShowThemeSelectorModal")
|
||||||
ThemeEditModal(v-model="isShowThemeEditModal" :theme-id="editThemeId" @submit="handleRefreshTheme")
|
ThemeEditModal(v-model="isShowThemeEditModal" :theme-id="editThemeId" @submit="handleRefreshTheme")
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue