添加进度条样式设置
lyswhut
parent
f80d03ed15
commit
0d10d1f95b
|
|
@ -21,6 +21,7 @@
|
|||
- 桌面歌词新增在任务栏显示歌词进程设置（此设置用于在录屏软件无法捕获歌词窗口时的变通解决方法）（#1063）
|
||||
- 添加kg源罗马音歌词的支持
|
||||
- 支持打开波点音乐歌单（需在酷我源打开）
|
||||
- 新增设置-基本设置-播放栏进度条样式设置（此版本默认使用迷你进度条样式，对于某些不喜欢该样式的人可以将其换成其他样式）
|
||||
|
||||
### 优化（界面/交互/功能）
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ const defaultSetting: LX.AppSetting = {
|
|||
'common.randomAnimate': true,
|
||||
'common.isAgreePact': false,
|
||||
'common.controlBtnPosition': process.platform === 'darwin' ? 'left' : 'right',
|
||||
'common.playBarProgressStyle': 'mini',
|
||||
|
||||
'player.startupAutoPlay': false,
|
||||
'player.togglePlayMethod': 'listLoop',
|
||||
|
|
|
|||
|
|
@ -63,6 +63,11 @@ declare global {
|
|||
*/
|
||||
'common.controlBtnPosition': 'left' | 'right'
|
||||
|
||||
/**
|
||||
* 播放栏进度条样式
|
||||
*/
|
||||
'common.playBarProgressStyle': 'mini' | 'full' | 'middle'
|
||||
|
||||
/**
|
||||
* 启动时自动播放歌曲
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -267,6 +267,10 @@
|
|||
"setting__basic_font_size_19px": "Very big",
|
||||
"setting__basic_lang": "Language",
|
||||
"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_source": "Music source",
|
||||
"setting__basic_source_status_failed": "Initialization failed",
|
||||
|
|
|
|||
|
|
@ -267,6 +267,10 @@
|
|||
"setting__basic_font_size_19px": "非常大",
|
||||
"setting__basic_lang": "语言",
|
||||
"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_source": "音乐来源",
|
||||
"setting__basic_source_status_failed": "初始化失败",
|
||||
|
|
|
|||
|
|
@ -267,6 +267,10 @@
|
|||
"setting__basic_font_size_19px": "非常大",
|
||||
"setting__basic_lang": "語言",
|
||||
"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_source": "音樂來源",
|
||||
"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>
|
||||
<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>
|
||||
<FullWidthProgress v-if="appSetting['common.playBarProgressStyle'] == 'full'" />
|
||||
<MiddleWidthProgress v-else-if="appSetting['common.playBarProgressStyle'] == 'middle'" />
|
||||
<MiniWidthProgress v-else />
|
||||
</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'
|
||||
<script setup>
|
||||
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>
|
||||
|
||||
|
||||
<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
|
||||
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")
|
||||
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")
|
||||
ThemeEditModal(v-model="isShowThemeEditModal" :theme-id="editThemeId" @submit="handleRefreshTheme")
|
||||
|
|
|
|||
Loading…
Reference in New Issue