RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ Added compressor settings

Browse Source
This commit is contained in:
SrGooglo 2023-04-27 21:56:27 +00:00
parent f4f7e697e1
commit f0b00a3df8
3 changed files with 243 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
packages/app/constants/settings/components/compressorValues/index.jsx Normal file
View File

@ -0,0 +1,161 @@
import React from "react"
import Slider from "@mui/material/Slider"
import "./index.less"
export default (props) => {
const [values, setValues] = React.useState(props.ctx.currentValue ?? {})
const handleOnChange = (key, value) => {
setValues((prev) => {
return {
...prev,
[key]: value
}
})
}
const handleChangeCommitted = (key, value) => {
props.ctx.dispatchUpdate(values)
}
React.useEffect(() => {
setValues(props.ctx.currentValue)
}, [props.ctx.currentValue])
return <div
className={
props.disabled
? "compressorValues disabled"
: "compressorValues"
}
>
<div id="threshold" className="compressorValues_slider">
<div className="compressorValues_slider_header">
<span>
Threshold
</span>
</div>
<Slider
onChangeCommitted={(e, value) => handleChangeCommitted("threshold", value)}
onChange={(e, value) => handleOnChange("threshold", value)}
value={values.threshold}
orientation="vertical"
aria-label="Threshold"
valueLabelDisplay="auto"
step={0.1}
min={-100}
max={0}
disabled={props.disabled}
/>
<div className="compresorValues_slider_value">
<span>
{values.threshold} dB
</span>
</div>
</div>
<div id="knee" className="compressorValues_slider">
<div className="compressorValues_slider_header">
<span>
Knee
</span>
</div>
<Slider
onChangeCommitted={(e, value) => handleChangeCommitted("knee", value)}
onChange={(e, value) => handleOnChange("knee", value)}
value={values.knee}
orientation="vertical"
aria-label="Knee"
valueLabelDisplay="auto"
step={0.1}
min={0}
max={40}
disabled={props.disabled}
/>
<div className="compresorValues_slider_value">
<span>
{values.knee} dB
</span>
</div>
</div>
<div id="ratio" className="compressorValues_slider">
<div className="compressorValues_slider_header">
<span>
Ratio
</span>
</div>
<Slider
onChangeCommitted={(e, value) => handleChangeCommitted("ratio", value)}
onChange={(e, value) => handleOnChange("ratio", value)}
value={values.ratio}
orientation="vertical"
aria-label="Ratio"
valueLabelDisplay="auto"
step={0.1}
min={1}
max={20}
disabled={props.disabled}
/>
<div className="compresorValues_slider_value">
<span>
{values.ratio} : 1
</span>
</div>
</div>
<div id="attack" className="compressorValues_slider">
<div className="compressorValues_slider_header">
<span>
Attack
</span>
</div>
<Slider
onChangeCommitted={(e, value) => handleChangeCommitted("attack", value)}
onChange={(e, value) => handleOnChange("attack", value)}
value={values.attack}
orientation="vertical"
aria-label="Attack"
valueLabelDisplay="auto"
step={0.1}
min={0}
max={1}
disabled={props.disabled}
/>
<div className="compresorValues_slider_value">
<span>
{values.attack} s
</span>
</div>
</div>
<div id="release" className="compressorValues_slider">
<div className="compressorValues_slider_header">
<span>
Release
</span>
</div>
<Slider
onChangeCommitted={(e, value) => handleChangeCommitted("release", value)}
onChange={(e, value) => handleOnChange("release", value)}
value={values.release}
orientation="vertical"
aria-label="Release"
valueLabelDisplay="auto"
step={0.1}
min={0}
max={1}
disabled={props.disabled}
/>
<div className="compresorValues_slider_value">
<span>
{values.release} s
</span>
</div>
</div>
</div>
}

30
packages/app/constants/settings/components/compressorValues/index.less Normal file
View File

@ -0,0 +1,30 @@
.compressorValues {
display: flex;
flex-direction: row;
padding: 20px;
width: 100%;
&.disabled {
opacity: 0.5;
}
transition: all 150ms ease-in-out;
.compressorValues_slider {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
gap: 20px;
.MuiSlider-vertical {
min-height: 300px;
}
}
}

52
packages/app/constants/settings/player/index.jsx
View File

@ -1,3 +1,5 @@
import loadable from "@loadable/component"
export default {
id: "player",
icon: "PlayCircleOutlined",
@ -40,6 +42,56 @@ export default {
},
storaged: true,
disabled: true,
},
{
id: "player.compressor",
title: "Compression",
icon: "MdGraphicEq",
group: "general",
description: "Enable compression for audio output",
component: "Switch",
experimental: true,
beforeSave: (value) => {
if (value) {
app.cores.player.compressor.attach()
} else {
app.cores.player.compressor.detach()
}
},
storaged: true,
},
{
id: "player.compressor.values",
title: "Compression adjustment",
icon: "Sliders",
group: "general",
description: "Adjust compression values (Warning: may cause distortion when changing values)",
experimental: true,
extraActions: [
{
id: "reset",
title: "Reset",
icon: "MdRefresh",
onClick: (ctx) => {
const values = app.cores.player.compressor.resetDefaultValues()
ctx.updateCurrentValue(values)
}
}
],
defaultValue: () => {
return app.cores.player.compressor.values
},
onUpdate: (value) => {
app.cores.player.compressor.modifyValues(value)
return value
},
component: loadable(() => import("../components/compressorValues")),
dependsOn: {
"player.compressor": true
},
storaged: false,
}
]
}