117 lines
2.9 KiB
Vue
117 lines
2.9 KiB
Vue
<template>
|
|
<div :class="$style.contnet">
|
|
<div :class="$style.header">
|
|
<h3 class="player__sound_effect_title">{{ $t('player__sound_effect_panner') }}</h3>
|
|
<base-checkbox
|
|
id="player__sound_effect_panner_enabled"
|
|
:class="$style.checkbox"
|
|
:label="$t('player__sound_effect_panner_enabled')"
|
|
:model-value="appSetting['player.soundEffect.panner.enable']"
|
|
@update:model-value="updateEnabled"
|
|
/>
|
|
</div>
|
|
<div :class="$style.eqList">
|
|
<div :class="$style.eqItem">
|
|
<span :class="$style.label">{{ $t('player__sound_effect_panner_sound_r') }}</span>
|
|
<base-slider-bar :class="$style.slider" :value="appSetting['player.soundEffect.panner.soundR']" :min="1" :max="30" @change="handleUpdateSoundR" />
|
|
<span :class="[$style.value, { [$style.active]: appSetting['player.soundEffect.panner.soundR'] != 5 }]">{{ appSetting['player.soundEffect.panner.soundR'] }}</span>
|
|
</div>
|
|
<div :class="$style.eqItem">
|
|
<span :class="$style.label">{{ $t('player__sound_effect_panner_sound_speed') }}</span>
|
|
<base-slider-bar :class="$style.slider" :value="appSetting['player.soundEffect.panner.speed']" :min="1" :max="50" @change="handleUpdateSpeed" />
|
|
<span :class="[$style.value, { [$style.active]: appSetting['player.soundEffect.panner.speed'] != 25 }]">{{ appSetting['player.soundEffect.panner.speed'] }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// import { reactive } from '@common/utils/vueTools'
|
|
import { appSetting, updateSetting } from '@renderer/store/setting'
|
|
|
|
// const setting = reactive({
|
|
// enabled: false,
|
|
// soundR: 5,
|
|
// speed: 25,
|
|
// })
|
|
|
|
const updateEnabled = (enabled) => {
|
|
// console.log(enabled)
|
|
updateSetting({ 'player.soundEffect.panner.enable': enabled })
|
|
}
|
|
|
|
const handleUpdateSoundR = (value) => {
|
|
updateSetting({ 'player.soundEffect.panner.soundR': Math.round(value) })
|
|
}
|
|
const handleUpdateSpeed = (value) => {
|
|
updateSetting({ 'player.soundEffect.panner.speed': Math.round(value) })
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="less" module>
|
|
@import '@renderer/assets/styles/layout.less';
|
|
.contnet {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
gap: 8px;
|
|
}
|
|
.header {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 5px;
|
|
padding-top: 5px;
|
|
}
|
|
.eqList {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
gap: 15px;
|
|
width: 100%;
|
|
}
|
|
.eqItem {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
gap: 8px;
|
|
}
|
|
.label {
|
|
flex: none;
|
|
// width: 50px;
|
|
font-size: 12px;
|
|
}
|
|
.value {
|
|
flex: none;
|
|
width: 40px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
|
|
&.active {
|
|
color: var(--color-primary-font);
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
// justify-content: space-between;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// font-size: 13px;
|
|
span {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.slider {
|
|
flex: auto;
|
|
}
|
|
|
|
.checkbox {
|
|
margin-right: 10px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
</style>
|