-
-
Notifications
You must be signed in to change notification settings - Fork 123
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Values from [this message](https://discord.com/channels/922656312888811530/922656312888811535/1162427713567596666). Works for both Electron and [modern browsers](https://caniuse.com/?search=createBiquadFilter) Notes: - it might be nice to have more filters, but I'm not touching that. Getting the Q value wrong leads to bad distortion - it would also be nice to have low/highshelf for web/mpv, but when I tried the filter was considerably stronger in web audio - better visualizer/UI? Getting the number input to behave was frustrating enough... - *please* test this. I am not confident in audio processing.
- Loading branch information
Showing
10 changed files
with
312 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
src/renderer/features/settings/components/advanced-audio/advanced-audio-tab.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { Divider, Stack } from '@mantine/core'; | ||
| import { Equalizer } from '/@/renderer/features/settings/components/advanced-audio/equalizer'; | ||
|
|
||
| export const AdvancedAudioTab = () => { | ||
| return ( | ||
| <Stack spacing="md"> | ||
| <Equalizer /> | ||
| <Divider /> | ||
| </Stack> | ||
| ); | ||
| }; |
105 changes: 105 additions & 0 deletions
105
src/renderer/features/settings/components/advanced-audio/eqalizer-slider.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import { useEffect, useState } from 'react'; | ||
| import { Group, NumberInputProps, Stack, rem } from '@mantine/core'; | ||
| import { useMove, usePrevious } from '@mantine/hooks'; | ||
| import { Text } from '/@/renderer/components/text'; | ||
| import { NumberInput } from '/@/renderer/components'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| interface VerticalSliderProps { | ||
| onChange: (value: number) => void; | ||
|
|
||
| title?: string; | ||
| value: number; | ||
| } | ||
|
|
||
| export const DB_RADIUS = 6; | ||
| const DB_DIAMATER = 2 * DB_RADIUS; | ||
| const DB_SCALE = 100 / DB_DIAMATER; | ||
|
|
||
| const EqualizerNumberInput = styled(NumberInput)<NumberInputProps>` | ||
| & .mantine-NumberInput-input { | ||
| text-align: center; | ||
| } | ||
| `; | ||
|
|
||
| export const EqualizerSlider = ({ value, title, onChange }: VerticalSliderProps) => { | ||
| const [seekingValue, setValue] = useState(value); | ||
|
|
||
| const { ref, active } = useMove(({ y }) => { | ||
| const value = Math.round((0.5 - y) * DB_DIAMATER * 10) / 10; | ||
| setValue(value); | ||
| }); | ||
|
|
||
| const wasActive = usePrevious(active); | ||
|
|
||
| useEffect(() => { | ||
| if (wasActive && !active) { | ||
| onChange(seekingValue); | ||
| } | ||
| }, [active, onChange, seekingValue, wasActive]); | ||
|
|
||
| const displayValue = active ? seekingValue : value; | ||
|
|
||
| return ( | ||
| <> | ||
| <Stack align="center"> | ||
| {title && ( | ||
| <Text | ||
| mt="sm" | ||
| ta="center" | ||
| > | ||
| {title} | ||
| </Text> | ||
| )} | ||
| <div | ||
| ref={ref} | ||
| style={{ | ||
| backgroundColor: 'var(--input-bg)', | ||
| height: rem(120), | ||
| position: 'relative', | ||
| width: rem(16), | ||
| }} | ||
| > | ||
| <div | ||
| style={{ | ||
| backgroundColor: 'var(--primary-color)', | ||
| bottom: 0, | ||
| height: `${(displayValue + DB_RADIUS) * DB_SCALE}%`, | ||
| position: 'absolute', | ||
| width: rem(16), | ||
| }} | ||
| /> | ||
| <div | ||
| style={{ | ||
| backgroundColor: 'var(--input-active-fg)', | ||
| bottom: `calc(${(displayValue + DB_RADIUS) * DB_SCALE}% - ${rem(8)})`, | ||
| height: rem(16), | ||
| left: 0, | ||
| position: 'absolute', | ||
| width: rem(16), | ||
| }} | ||
| /> | ||
| </div> | ||
| <Group spacing={5}> | ||
| <EqualizerNumberInput | ||
| // why a key? Apparently without it the number input would | ||
| // not update its value when the slider changed...... | ||
| key={displayValue} | ||
| max={DB_RADIUS} | ||
| min={-DB_RADIUS} | ||
| precision={1} | ||
| radius="xs" | ||
| step={0.1} | ||
| value={displayValue} | ||
| variant="unstyled" | ||
| width={rem(54)} | ||
| onChange={(val) => { | ||
| onChange(Number(val)); | ||
| }} | ||
| /> | ||
| db | ||
| </Group> | ||
| </Stack> | ||
| </> | ||
| ); | ||
| }; |
94 changes: 94 additions & 0 deletions
94
src/renderer/features/settings/components/advanced-audio/equalizer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { Grid } from '@mantine/core'; | ||
| import { EqualizerSlider } from '/@/renderer/features/settings/components/advanced-audio/eqalizer-slider'; | ||
| import { AudioFrequencies, useAudioSettings, useSettingsStoreActions } from '/@/renderer/store'; | ||
| import isElectron from 'is-electron'; | ||
| import { useCallback } from 'react'; | ||
| import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option'; | ||
| import { Button } from '/@/renderer/components'; | ||
| import { bandsToAudioFilter } from '/@/renderer/utils'; | ||
|
|
||
| const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null; | ||
|
|
||
| export const Equalizer = () => { | ||
| const settings = useAudioSettings(); | ||
| const { setSettings } = useSettingsStoreActions(); | ||
|
|
||
| const setBandSetting = useCallback( | ||
| (gain: number, index: number) => { | ||
| const bands = [...settings.bands]; | ||
| bands[index].gain = gain; | ||
|
|
||
| setSettings({ | ||
| audio: { | ||
| ...settings, | ||
| bands, | ||
| }, | ||
| }); | ||
|
|
||
| if (mpvPlayer) { | ||
| mpvPlayer.setProperties({ | ||
| af: bandsToAudioFilter(bands), | ||
| }); | ||
| } | ||
| }, | ||
| [setSettings, settings], | ||
| ); | ||
|
|
||
| const resetBand = useCallback(() => { | ||
| const bands = AudioFrequencies.map((info) => ({ | ||
| ...info, | ||
| gain: 0, | ||
| })); | ||
|
|
||
| setSettings({ | ||
| audio: { | ||
| ...settings, | ||
| bands, | ||
| }, | ||
| }); | ||
|
|
||
| if (mpvPlayer) { | ||
| mpvPlayer.setProperties({ | ||
| af: bandsToAudioFilter(bands), | ||
| }); | ||
| } | ||
| }, [setSettings, settings]); | ||
|
|
||
| return ( | ||
| <> | ||
| <SettingsOptions | ||
| control={ | ||
| <Button | ||
| compact | ||
| variant="filled" | ||
| onClick={() => resetBand()} | ||
| > | ||
| Reset to default | ||
| </Button> | ||
| } | ||
| title="Audio Equalization" | ||
| /> | ||
| <Grid | ||
| columns={AudioFrequencies.length} | ||
| gutter={20} | ||
| justify="center" | ||
| > | ||
| {settings.bands.map((band, idx) => ( | ||
| <Grid.Col | ||
| key={band.frequency} | ||
| lg={2} | ||
| sm={3} | ||
| span={4} | ||
| xl={1} | ||
| > | ||
| <EqualizerSlider | ||
| title={`${band.frequency} Hz`} | ||
| value={band.gain} | ||
| onChange={(gain) => setBandSetting(gain, idx)} | ||
| /> | ||
| </Grid.Col> | ||
| ))} | ||
| </Grid> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { useEffect, useRef } from 'react'; | ||
|
|
||
| // from https://stackoverflow.com/questions/53446020/how-to-compare-oldvalues-and-newvalues-on-react-hooks-useeffect | ||
| export const usePrevious = <T extends unknown>(value: T): T | undefined => { | ||
| const ref = useRef<T>(); | ||
| useEffect(() => { | ||
| ref.current = value; | ||
| }); | ||
| return ref.current; | ||
| }; |
Oops, something went wrong.