ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

添加更多环境混响音效

Browse Source
This commit is contained in:
lyswhut
2023-05-04 19:14:00 +08:00
parent 9dc927b50b
commit 735f629ca1
23 changed files with 201 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/base/Popup.vue
+8 -7
View File
@@ -56,6 +56,7 @@ const popupStyle = reactive({
const arrowHeight = 9
const arrowWidth = 8
const sidePadding = 50
watch(() => props.visible, (visible) => {
if (!visible || !dom_content.value || !props.btnEl) return
@@ -63,24 +64,24 @@ watch(() => props.visible, (visible) => {
const maxHeight = document.body.clientHeight
const elTop = rect.top - window.lx.rootOffset
const bottomTopVal = elTop + rect.height
const contentHeight = dom_content.value.scrollHeight + arrowHeight + 10
const contentHeight = dom_content.value.scrollHeight + arrowHeight + sidePadding
if (bottomTopVal + contentHeight < maxHeight || (contentHeight > elTop && elTop <= maxHeight - bottomTopVal)) {
isShowTop.value = false
popupStyle.top = bottomTopVal + arrowHeight + 'px'
popupStyle.maxHeight = maxHeight - bottomTopVal - arrowHeight - 10 + 'px'
popupStyle.maxHeight = maxHeight - bottomTopVal - arrowHeight - sidePadding + 'px'
} else {
isShowTop.value = true
let maxContentHeight = elTop - arrowHeight - 10
popupStyle.top = (elTop - (elTop < contentHeight ? elTop : contentHeight) + 10) + 'px'
let maxContentHeight = elTop - arrowHeight - sidePadding
popupStyle.top = (elTop - (elTop < contentHeight ? elTop : contentHeight) + sidePadding) + 'px'
popupStyle.maxHeight = maxContentHeight + 'px'
}
const maxWidth = document.body.clientWidth - 20
let center = dom_content.value.clientWidth / 2
let left = rect.left + rect.width / 2 - window.lx.rootOffset - center
if (left < 10) {
center -= 10 - left
left = 10
if (left < sidePadding) {
center -= sidePadding - left
left = sidePadding
} else if (left + dom_content.value.clientWidth > maxWidth) {
let newLeft = maxWidth - dom_content.value.clientWidth
center = center + left - newLeft
src/renderer/components/common/SoundEffectBtn/AudioConvolution.vue
+78 -13
View File
@@ -1,17 +1,31 @@
<template>
<div :class="$style.contnet">
<h3 class="player__sound_effect_title">{{ $t('player__sound_effect_convolution') }}</h3>
<div :class="$style.convolutionList">
<base-checkbox
v-for="item in convolutions"
:id="`player__convolution_${item.name}`"
:key="item.name"
:class="$style.checkbox"
:model-value="appSetting['player.soundEffect.convolution.fileName']"
:label="$t(`player__sound_effect_convolution_${item.name}`)"
:value="item.source"
@update:model-value="updateConvolution($event)"
/>
<div :class="$style.convolution">
<div :class="$style.convolutionList">
<base-checkbox
v-for="item in convolutions"
:id="`player__convolution_${item.name}`"
:key="item.name"
:class="$style.checkbox"
:model-value="appSetting['player.soundEffect.convolution.fileName']"
:label="$t(`player__sound_effect_convolution_file_${item.name}`)"
:value="item.source"
@update:model-value="updateConvolution($event)"
/>
</div>
<div :class="$style.sliderList">
<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" />
<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" />
<span :class="[$style.value]">{{ appSetting['player.soundEffect.convolution.sendGain'] * 10 }}%</span>
</div>
</div>
</div>
</div>
</template>
@@ -22,10 +36,25 @@ import { appSetting, updateSetting } from '@renderer/store/setting'
import { convolutions } from '@renderer/plugins/player'
const updateConvolution = val => {
console.log(val)
updateSetting({ 'player.soundEffect.convolution.fileName': val })
const target = convolutions.find(c => c.source == val)
const setting = {
'player.soundEffect.convolution.fileName': val,
}
if (target) {
setting['player.soundEffect.convolution.mainGain'] = target.mainGain * 10
setting['player.soundEffect.convolution.sendGain'] = target.sendGain * 10
}
updateSetting(setting)
}
const handleUpdateMainGain = (value) => {
updateSetting({ 'player.soundEffect.convolution.mainGain': Math.round(value) })
}
const handleUpdateSendGain = (value) => {
updateSetting({ 'player.soundEffect.convolution.sendGain': Math.round(value) })
}
</script>
<style lang="less" module>
@@ -35,6 +64,12 @@ const updateConvolution = val => {
flex-flow: column nowrap;
gap: 3px;
}
.convolution {
display: flex;
flex-flow: column wrap;
gap: 15px;
width: 100%;
}
.convolutionList {
display: flex;
flex-flow: row wrap;
@@ -45,4 +80,34 @@ const updateConvolution = val => {
margin-right: 10px;
font-size: 12px;
}
.sliderList {
display: flex;
flex-flow: column nowrap;
gap: 15px;
width: 100%;
}
.sliderItem {
display: flex;
flex-flow: row nowrap;
gap: 8px;
}
.slider {
flex: auto;
}
.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);
}
}
</style>