新增定时暂停播放功能
This commit is contained in:
lyswhut
@@ -0,0 +1,175 @@
|
||||
<template lang="pug">
|
||||
material-modal(:show="modelValue" bg-close @close="handleCloseModal" @after-enter="$refs.dom_input.focus()" teleport="#view")
|
||||
main(:class="$style.main")
|
||||
h2 {{$t('play_timeout')}}
|
||||
div(:class="$style.content")
|
||||
div(:class="[$style.row, $style.inputGroup]")
|
||||
base-input(:class="$style.input" ref="dom_input" v-model="time" type="number")
|
||||
p(:class="$style.inputLabel") {{$t('play_timeout_unit')}}
|
||||
div(:class="$style.row")
|
||||
base-checkbox(id="play_timeout_end" v-model="currentStting.player.waitPlayEndStop" :label="$t('play_timeout_end')")
|
||||
div(:class="[$style.row, $style.tip, { [$style.show]: !!timeLabel }]")
|
||||
p {{$t('play_timeout_tip', { time: timeLabel })}}
|
||||
div(:class="$style.footer")
|
||||
base-btn(:class="$style.footerBtn" @click="handleCancel") {{$t(timeLabel ? 'play_timeout_stop' : 'play_timeout_close')}}
|
||||
base-btn(:class="$style.footerBtn" @click="handleConfirm") {{$t(timeLabel ? 'play_timeout_update' : 'play_timeout_confirm')}}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { currentStting } from '../setting'
|
||||
import { useTimeout, startTimeoutStop, stopTimeoutStop } from '@renderer/utils/timeoutStop'
|
||||
import { ref } from '@renderer/utils/vueTools'
|
||||
|
||||
const MAX_MIN = 1440
|
||||
|
||||
const rxp = /([1-9]\d*)/
|
||||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const { timeLabel } = useTimeout()
|
||||
const time = ref(currentStting.value.player.waitPlayEndStopTime)
|
||||
|
||||
const handleCloseModal = () => {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
const handleCancel = () => {
|
||||
if (timeLabel.value) {
|
||||
stopTimeoutStop()
|
||||
}
|
||||
handleCloseModal()
|
||||
}
|
||||
const verify = () => {
|
||||
const orgText = time.value
|
||||
let text = time.value
|
||||
|
||||
if (rxp.test(text)) {
|
||||
text = RegExp.$1
|
||||
if (parseInt(text) > MAX_MIN) {
|
||||
text = text.substring(0, text.length - 1)
|
||||
}
|
||||
} else {
|
||||
text = ''
|
||||
}
|
||||
time.value = text
|
||||
return orgText == text ? parseInt(text) : ''
|
||||
}
|
||||
const handleConfirm = () => {
|
||||
let time = verify()
|
||||
if (time == '') return
|
||||
currentStting.value.player.waitPlayEndStopTime = time
|
||||
startTimeoutStop(time * 60)
|
||||
handleCloseModal()
|
||||
}
|
||||
return {
|
||||
currentStting,
|
||||
timeLabel,
|
||||
time,
|
||||
handleCloseModal,
|
||||
handleCancel,
|
||||
handleConfirm,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
|
||||
.main {
|
||||
padding: 15px;
|
||||
max-width: 530px;
|
||||
min-width: 280px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
min-height: 0;
|
||||
// max-height: 100%;
|
||||
// overflow: hidden;
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
color: @color-theme_2-font;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding-top: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.row {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.inputGroup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.input {
|
||||
flex: auto;
|
||||
}
|
||||
.inputLabel {
|
||||
flex: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.tip {
|
||||
visibility: hidden;
|
||||
|
||||
&.show {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
.footerBtn {
|
||||
flex: auto;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 10px !important;
|
||||
width: 150px;
|
||||
.mixin-ellipsis-1;
|
||||
+ .footerBtn {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.ruleLink {
|
||||
.mixin-ellipsis-1;
|
||||
}
|
||||
|
||||
|
||||
each(@themes, {
|
||||
:global(#root.@{value}) {
|
||||
.main {
|
||||
h2 {
|
||||
color: ~'@{color-@{value}-theme_2-font}';
|
||||
}
|
||||
}
|
||||
.listItem {
|
||||
&:hover {
|
||||
background-color: ~'@{color-@{value}-theme_2-hover}';
|
||||
}
|
||||
&.active {
|
||||
background-color: ~'@{color-@{value}-theme_2-active}';
|
||||
}
|
||||
h3 {
|
||||
color: ~'@{color-@{value}-theme_2-font}';
|
||||
}
|
||||
p {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
.noitem {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</style>
|
||||
@@ -9,12 +9,15 @@ dd
|
||||
label {{$t('theme_' + theme.className)}}
|
||||
|
||||
dd
|
||||
.gap-top.top
|
||||
base-checkbox(id="setting_show_animate" v-model="currentStting.isShowAnimation" :label="$t('setting__basic_show_animation')")
|
||||
.gap-top
|
||||
base-checkbox(id="setting_animate" v-model="currentStting.randomAnimate" :label="$t('setting__basic_animation')")
|
||||
.gap-top
|
||||
base-checkbox(id="setting_to_tray" v-model="currentStting.tray.isShow" :label="$t('setting__basic_to_tray')")
|
||||
div
|
||||
.gap-top.top
|
||||
base-checkbox(id="setting_show_animate" v-model="currentStting.isShowAnimation" :label="$t('setting__basic_show_animation')")
|
||||
.gap-top
|
||||
base-checkbox(id="setting_animate" v-model="currentStting.randomAnimate" :label="$t('setting__basic_animation')")
|
||||
.gap-top
|
||||
base-checkbox(id="setting_to_tray" v-model="currentStting.tray.isShow" :label="$t('setting__basic_to_tray')")
|
||||
p.gap-top
|
||||
base-btn.btn(min @click="isShowPlayTimeoutModal = true") {{$t('setting__play_timeout')}} {{ timeLabel ? ` (${timeLabel})` : '' }}
|
||||
|
||||
dd(:tips="$t('setting__basic_source_title')")
|
||||
h3#basic_source {{$t('setting__basic_source')}}
|
||||
@@ -48,6 +51,7 @@ 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 v-model="currentStting.controlBtnPosition" :value="item.id" :label="item.name")
|
||||
play-timeout-modal(v-model="isShowPlayTimeoutModal")
|
||||
user-api-modal(v-model="isShowUserApiModal")
|
||||
</template>
|
||||
|
||||
@@ -58,12 +62,15 @@ import { langList } from '@/lang'
|
||||
import { currentStting } from '../setting'
|
||||
import { setWindowSize } from '@renderer/utils'
|
||||
import apiSourceInfo from '@renderer/utils/music/api-source-info'
|
||||
import { useTimeout } from '@renderer/utils/timeoutStop'
|
||||
|
||||
import PlayTimeoutModal from './PlayTimeoutModal'
|
||||
import UserApiModal from './UserApiModal'
|
||||
|
||||
export default {
|
||||
name: 'SettingBasic',
|
||||
components: {
|
||||
PlayTimeoutModal,
|
||||
UserApiModal,
|
||||
},
|
||||
setup() {
|
||||
@@ -81,6 +88,9 @@ export default {
|
||||
apiSource.value = visible
|
||||
})
|
||||
|
||||
const isShowPlayTimeoutModal = ref(false)
|
||||
const { timeLabel } = useTimeout()
|
||||
|
||||
const isShowUserApiModal = ref(false)
|
||||
const getApiStatus = () => {
|
||||
let status
|
||||
@@ -138,6 +148,8 @@ export default {
|
||||
return {
|
||||
currentStting,
|
||||
themes,
|
||||
isShowPlayTimeoutModal,
|
||||
timeLabel,
|
||||
apiSources,
|
||||
isShowUserApiModal,
|
||||
windowSizeList,
|
||||
|
||||
@@ -8,6 +8,8 @@ export const currentStting = ref({
|
||||
volume: 1,
|
||||
mediaDeviceId: 'default',
|
||||
isMediaDeviceRemovedStopPlay: false,
|
||||
waitPlayEndStop: true,
|
||||
waitPlayEndStopTime: 0,
|
||||
},
|
||||
desktopLyric: {
|
||||
enable: false,
|
||||
|
||||
Reference in New Issue
Block a user