优化音效设置-环境音效启用、禁用时的操作效果显示

publish/changeLog.md

@@ -5,6 +5,10 @@
 
 - 新增我的列表名右键菜单-排序歌曲-随机乱序功能，使用它可以对选中列表内歌曲进行随机重排（#1440）
 
+### 优化
+
+- 优化音效设置-环境音效启用、禁用时的操作效果显示，修复禁用环境音效时仍然可以调整增益、新增预设的问题
+
 ### 修复
 
 - 修复字体设置某些字体无法应用的问题

src/renderer/components/base/SliderBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[$style.sliderContent, className]">
+  <div :class="[$style.sliderContent, { [$style.disabled]: disabled }, className]">
     <div :class="[$style.slider ]">
       <div ref="dom_sliderBar" :class="$style.sliderBar" :style="{ transform: `scaleX(${(value - min) / (max - min) || 0})` }" />
     </div>
@@ -29,6 +29,10 @@ export default {
       type: Number,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['change'],
   setup(props, { emit }) {
@@ -40,6 +44,8 @@ export default {
     const dom_sliderBar = ref(null)
 
     const handleSliderMsDown = event => {
+      if (props.disabled) return
+
       sliderEvent.isMsDown = true
       sliderEvent.msDownX = event.clientX
 
@@ -55,7 +61,7 @@ export default {
       sliderEvent.isMsDown = false
     }
     const handleSliderMsMove = event => {
-      if (!sliderEvent.isMsDown) return
+      if (!sliderEvent.isMsDown || props.disabled) return
       let value = (sliderEvent.msDownValue + (event.clientX - sliderEvent.msDownX) / dom_sliderBar.value.clientWidth) * (props.max - props.min) + props.min
       if (value > props.max) value = props.max
       else if (value < props.min) value = props.min
@@ -93,6 +99,12 @@ export default {
   &:hover {
     opacity: 1;
   }
+  &.disabled {
+    opacity: .3;
+    .sliderMask {
+      cursor: default;
+    }
+  }
 }
 
 .slider {
@@ -129,7 +141,7 @@ export default {
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
 }
 
-.slider-mask {
+.sliderMask {
   position: absolute;
   top: 0;
   width: 100%;

src/renderer/components/common/SoundEffectBtn/AddConvolutionPresetBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <base-btn min :class="[$style.newPreset, {[$style.editing]: isEditing}]" :aria-label="$t('player__sound_effect_biquad_filter_save_btn')" @click="handleEditing($event)">
+  <base-btn min :disabled="disabled" :class="[$style.newPreset, {[$style.editing]: isEditing}]" :aria-label="$t('player__sound_effect_biquad_filter_save_btn')" @click="handleEditing($event)">
     <svg-icon name="plus" />
     <base-input ref="input" :class="$style.newPresetInput" :value="newPresetName" :placeholder="$t('player__sound_effect_biquad_filter_save_input')" @keyup.enter="handleSave($event)" @blur="handleSave($event)" />
   </base-btn>
@@ -10,6 +10,13 @@ import { ref, nextTick } from '@common/utils/vueTools'
 import { appSetting } from '@renderer/store/setting'
 import { saveUserConvolutionPreset } from '@renderer/store/soundEffect'
 
+defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
 const isEditing = ref(false)
 const input = ref(false)
 const newPresetName = ref('')

src/renderer/components/common/SoundEffectBtn/AudioConvolution.vue

@@ -14,28 +14,28 @@
           @update:model-value="updateConvolution($event)"
         />
       </div>
-      <div :class="$style.sliderList">
+      <div :class="[$style.sliderList, { [$style.disabled]: disabledConvolution }]">
         <div :class="$style.sliderItem">
           <span :class="$style.label">{{ $t('player__sound_effect_convolution_main_gain') }}</span>
-          <base-slider-bar :class="$style.slider" :value="appSetting['player.soundEffect.convolution.mainGain']" :min="0" :max="50" @change="handleUpdateMainGain" />
+          <base-slider-bar :class="$style.slider" :value="appSetting['player.soundEffect.convolution.mainGain']" :min="0" :max="50" :disabled="disabledConvolution" @change="handleUpdateMainGain" />
           <span :class="[$style.value]">{{ appSetting['player.soundEffect.convolution.mainGain'] * 10 }}%</span>
         </div>
         <div :class="$style.sliderItem">
           <span :class="$style.label">{{ $t('player__sound_effect_convolution_send_gain') }}</span>
-          <base-slider-bar :class="$style.slider" :value="appSetting['player.soundEffect.convolution.sendGain']" :min="0" :max="50" @change="handleUpdateSendGain" />
+          <base-slider-bar :class="$style.slider" :value="appSetting['player.soundEffect.convolution.sendGain']" :min="0" :max="50" :disabled="disabledConvolution" @change="handleUpdateSendGain" />
           <span :class="[$style.value]">{{ appSetting['player.soundEffect.convolution.sendGain'] * 10 }}%</span>
         </div>
       </div>
     </div>
     <div :class="$style.saveList">
       <base-btn v-for="item in userPresetList" :key="item.id" min @click="handleSetPreset(item)" @contextmenu="handleRemovePreset(item.id)">{{ item.name }}</base-btn>
-      <AddConvolutionPresetBtn v-if="userPresetList.length < 31" />
+      <AddConvolutionPresetBtn v-if="userPresetList.length < 31" :disabled="disabledConvolution" />
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from '@common/utils/vueTools'
+import { ref, onMounted, computed } from '@common/utils/vueTools'
 import { appSetting, updateSetting } from '@renderer/store/setting'
 import { convolutions } from '@renderer/plugins/player'
 import AddConvolutionPresetBtn from './AddConvolutionPresetBtn'
@@ -72,6 +72,10 @@ const handleRemovePreset = id => {
   removeUserConvolutionPreset(id)
 }
 
+const disabledConvolution = computed(() => {
+  return !appSetting['player.soundEffect.convolution.fileName']
+})
+
 onMounted(() => {
   getUserConvolutionPresetList().then(list => {
     userPresetList.value = list
@@ -112,6 +116,10 @@ onMounted(() => {
   flex-flow: column nowrap;
   gap: 15px;
   width: 100%;
+  transition: opacity @transition-normal;
+  &.disabled  {
+    opacity: .4;
+  }
 }
 .sliderItem {
   display: flex;

src/renderer/core/useApp/usePlayer/useSoundEffect.ts

@@ -97,9 +97,11 @@ export default () => {
     })
   })
   watch(() => appSetting['player.soundEffect.convolution.mainGain'], (mainGain) => {
+    if (!appSetting['player.soundEffect.convolution.fileName']) return
     setConvolverMainGain(mainGain / 10)
   })
   watch(() => appSetting['player.soundEffect.convolution.sendGain'], (sendGain) => {
+    if (!appSetting['player.soundEffect.convolution.fileName']) return
     setConvolverSendGain(sendGain / 10)
   })
   watch(() => appSetting['player.soundEffect.biquadFilter.hz31'], (hz31) => {