Add clear gains and fixed band functionality

h39s · Sep 22, 2023 · 6d3abcd · 6d3abcd
1 parent 357c189
commit 6d3abcd
Show file tree

Hide file tree

Showing 12 changed files with 277 additions and 100 deletions.
diff --git a/src/common/channels.ts b/src/common/channels.ts
@@ -45,6 +45,8 @@ enum ChannelEnum {
   GET_AUTO_EQ_DEVICE_LIST = 'getAutoEqDeviceList',
   GET_AUTO_EQ_RESPONSE_LIST = 'getAutoEqResponseList',
   LOAD_AUTO_EQ_PRESET = 'loadAutoEqPreset',
+  CLEAR_GAINS = 'clearGains',
+  SET_FIXED_BAND = 'setFixedBand',
 }
 
 export default ChannelEnum;
diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -102,9 +102,28 @@ export interface IPresetV2 {
 
 /** ----- Default Values ----- */
 
-const FIXED_FREQUENCIES = [
-  32, 64, 125, 250, 500, 1000, 2000, 4000, 8000, 16000,
-];
+export enum FixedBandSizeEnum {
+  SIX = 6,
+  TEN = 10,
+  FIFTEEN = 15,
+  THIRTY_ONE = 31,
+}
+
+export const FIXED_BAND_FREQUENCIES: Record<FixedBandSizeEnum, number[]> = {
+  [FixedBandSizeEnum.SIX]: [100, 200, 400, 800, 1600, 3200],
+  [FixedBandSizeEnum.TEN]: [
+    32, 64, 125, 250, 500, 1000, 2000, 4000, 8000, 16000,
+  ],
+  [FixedBandSizeEnum.FIFTEEN]: [
+    25, 40, 63, 100, 160, 250, 400, 630, 1000, 1600, 2500, 4000, 6300, 10000,
+    16000,
+  ],
+  [FixedBandSizeEnum.THIRTY_ONE]: [
+    20, 25, 31.5, 40, 50, 63, 80, 100, 125, 160, 200, 250, 315, 400, 500, 630,
+    800, 1000, 1250, 1600, 2000, 2500, 3150, 4000, 5000, 6300, 8000, 10000,
+    12500, 16000, 20000,
+  ],
+};
 
 const DEFAULT_FILTER_TEMPLATE = {
   frequency: 1000,
@@ -120,9 +139,11 @@ export const getDefaultFilterWithId = (): IFilter => {
   };
 };
 
-const getDefaultFilters = (): IFiltersMap => {
+export const getDefaultFilters = (
+  size: FixedBandSizeEnum = FixedBandSizeEnum.TEN
+): IFiltersMap => {
   const filters: IFiltersMap = {};
-  FIXED_FREQUENCIES.forEach((f) => {
+  FIXED_BAND_FREQUENCIES[size].forEach((f) => {
     const filter: IFilter = { ...getDefaultFilterWithId(), frequency: f };
     filters[filter.id] = filter;
   });

diff --git a/src/main/main.ts b/src/main/main.ts
@@ -66,6 +66,9 @@ import {
   WINDOW_HEIGHT_EXPANDED,
   WINDOW_WIDTH,
   getDefaultFilterWithId,
+  FixedBandSizeEnum,
+  getDefaultFilters,
+  IFiltersMap,
 } from '../common/constants';
 import { ErrorCode } from '../common/errors';
 import { isRestrictedPresetName } from '../common/utils';
@@ -637,6 +640,25 @@ ipcMain.on(ChannelEnum.REMOVE_FILTER, async (event, arg) => {
   await handleUpdate(event, channel);
 });
 
+ipcMain.on(ChannelEnum.CLEAR_GAINS, async (event) => {
+  const channel = ChannelEnum.CLEAR_GAINS;
+
+  Object.keys(state.filters).forEach((key) => {
+    state.filters[key].gain = 0;
+  });
+
+  await handleUpdate(event, channel);
+});
+
+ipcMain.on(ChannelEnum.SET_FIXED_BAND, async (event, arg) => {
+  const channel = ChannelEnum.SET_FIXED_BAND;
+  const size: FixedBandSizeEnum = arg[0];
+
+  state.filters = getDefaultFilters(size);
+
+  await handleUpdateHelper<IFiltersMap>(event, channel, state.filters);
+});
+
 ipcMain.on(ChannelEnum.SET_WINDOW_SIZE, async (event, arg) => {
   const channel = ChannelEnum.SET_WINDOW_SIZE;
   setWindowDimension(arg[0]);

diff --git a/src/renderer/AutoEQ.tsx b/src/renderer/AutoEQ.tsx
@@ -99,38 +99,41 @@ const AutoEQ = () => {
   );
 
   return (
-    <div className="auto-eq">
-      Audio Device:
-      <Dropdown
-        name="Audio Device"
-        options={deviceOptions}
-        value={currentDevice}
-        handleChange={handleDeviceChange}
-        isDisabled={!!globalError}
-        noSelectionPlaceholder={NO_DEVICE_SELECTION}
-        isFilterable
-      />
-      Target Frequency Response:
-      <Dropdown
-        name="Target Frequency Response"
-        options={responseOptions}
-        value={currentResponse}
-        handleChange={(newValue) => setCurrentResponse(newValue)}
-        isDisabled={!!globalError || responses.length === 0}
-        emptyOptionsPlaceholder={NO_RESPONSES}
-        noSelectionPlaceholder={NO_RESPONSE_SELECTION}
-      />
-      <Button
-        className="small"
-        ariaLabel="Apply Auto EQ"
-        isDisabled={
-          !!globalError || currentDevice === '' || currentResponse === ''
-        }
-        handleChange={applyAutoEQ}
-      >
-        Apply
-      </Button>
-    </div>
+    <>
+      <h4 className="auto-eq-title">Auto EQ</h4>
+      <div className="auto-eq">
+        Audio Device:
+        <Dropdown
+          name="Audio Device"
+          options={deviceOptions}
+          value={currentDevice}
+          handleChange={handleDeviceChange}
+          isDisabled={!!globalError}
+          noSelectionPlaceholder={NO_DEVICE_SELECTION}
+          isFilterable
+        />
+        Target Frequency Response:
+        <Dropdown
+          name="Target Frequency Response"
+          options={responseOptions}
+          value={currentResponse}
+          handleChange={(newValue) => setCurrentResponse(newValue)}
+          isDisabled={!!globalError || responses.length === 0}
+          emptyOptionsPlaceholder={NO_RESPONSES}
+          noSelectionPlaceholder={NO_RESPONSE_SELECTION}
+        />
+        <Button
+          className="small"
+          ariaLabel="Apply Auto EQ"
+          isDisabled={
+            !!globalError || currentDevice === '' || currentResponse === ''
+          }
+          handleChange={applyAutoEQ}
+        >
+          Apply
+        </Button>
+      </div>
+    </>
   );
 };
 

diff --git a/src/renderer/MainContent.tsx b/src/renderer/MainContent.tsx
@@ -17,17 +17,25 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
 import { Fragment, useMemo } from 'react';
-import { MAX_NUM_FILTERS, MIN_NUM_FILTERS } from 'common/constants';
+import {
+  FixedBandSizeEnum,
+  MAX_NUM_FILTERS,
+  MIN_NUM_FILTERS,
+} from 'common/constants';
 import { computeAvgFreq } from 'common/utils';
+import { ErrorDescription } from 'common/errors';
 import FrequencyBand from './components/FrequencyBand';
-import { useAquaContext } from './utils/AquaContext';
+import { FilterActionEnum, useAquaContext } from './utils/AquaContext';
 import './styles/MainContent.scss';
 import AddSliderDivider from './components/AddSliderDivider';
 import Spinner from './icons/Spinner';
 import { sortHelper } from './utils/utils';
+import Button from './widgets/Button';
+import { clearGains, setFixedBand } from './utils/equalizerApi';
 
 const MainContent = () => {
-  const { filters, isLoading } = useAquaContext();
+  const { filters, isLoading, dispatchFilter, setGlobalError } =
+    useAquaContext();
 
   // Store widths for AddSliderDividers and FrequencyBands so we can manually position them
   const DIVIDER_WIDTH = 28;
@@ -51,64 +59,117 @@ const MainContent = () => {
     return [fixedSort, visualSort, map];
   }, [filters]);
 
+  const clearFilterGains = async () => {
+    try {
+      await clearGains();
+      dispatchFilter({
+        type: FilterActionEnum.CLEAR_GAINS,
+      });
+    } catch (e) {
+      setGlobalError(e as ErrorDescription);
+    }
+  };
+
+  const handleFixedBand = (size: FixedBandSizeEnum) => async () => {
+    try {
+      const newFilters = await setFixedBand(size);
+      dispatchFilter({
+        type: FilterActionEnum.INIT,
+        filters: newFilters,
+      });
+    } catch (e) {
+      setGlobalError(e as ErrorDescription);
+    }
+  };
+
   return isLoading ? (
     <div className="center full row">
       <Spinner />
     </div>
   ) : (
-    <div className="center main-content">
-      <div className="col center band-label">
-        <span />
-        <span className="row-label">Filter Type</span>
-        <span className="row-label">Frequency (Hz)</span>
-        <span />
-        <span>+30dB</span>
-        <span />
-        <span>0dB</span>
-        <span />
-        <span>-30dB</span>
-        <span />
-        <span className="row-label">Gain (dB)</span>
-        <span className="row-label">Quality</span>
-        <span />
+    <>
+      <div className="row main-content-title">
+        <h4>Parametric EQ</h4>
+        <Button
+          ariaLabel="Clear Gains"
+          isDisabled={false}
+          className="small"
+          handleChange={clearFilterGains}
+        >
+          Clear Gains
+        </Button>
+        <div />
+        <h5>Fixed Band Configs</h5>
+        {Object.values(FixedBandSizeEnum)
+          .filter((s) => !Number.isNaN(Number(s)))
+          .map((size) => (
+            <Button
+              key={`${size}-band`}
+              ariaLabel={`${size} Band`}
+              isDisabled={false}
+              className="small"
+              handleChange={handleFixedBand(
+                size as unknown as FixedBandSizeEnum
+              )}
+            >
+              {`${size} Band`}
+            </Button>
+          ))}
       </div>
-      <div className="bands row center">
-        <AddSliderDivider
-          newSliderFrequency={computeAvgFreq(null, freqSortedFilters[0])}
-          isMaxSliderCount={idSortedFilters.length >= MAX_NUM_FILTERS}
-        />
-        {idSortedFilters.map((filter) => {
-          const sliderIndex = sortIndexMap[filter.id];
-          return (
-            <Fragment key={`slider-${filter.id}`}>
-              <FrequencyBand
-                filter={filter}
-                isMinSliderCount={idSortedFilters.length <= MIN_NUM_FILTERS}
-                // Manually position the frequency band
-                style={{
-                  transform: `translateX(${
-                    DIVIDER_WIDTH + sliderIndex * (DIVIDER_WIDTH + BAND_WIDTH)
-                  }px)`,
-                }}
-              />
-              <AddSliderDivider
-                newSliderFrequency={computeAvgFreq(
-                  freqSortedFilters[sliderIndex],
-                  freqSortedFilters[sliderIndex + 1]
-                )}
-                isMaxSliderCount={idSortedFilters.length >= MAX_NUM_FILTERS}
-                // Manually position the divider
-                style={{
-                  transform: `translateX(${
-                    (sliderIndex + 1) * (DIVIDER_WIDTH + BAND_WIDTH)
-                  }px)`,
-                }}
-              />
-            </Fragment>
-          );
-        })}
+      <div className="main-content">
+        <div className="col center band-label">
+          <span />
+          <span className="row-label">Filter Type</span>
+          <span className="row-label">Frequency (Hz)</span>
+          <span />
+          <span>+30dB</span>
+          <span />
+          <span>0dB</span>
+          <span />
+          <span>-30dB</span>
+          <span />
+          <span className="row-label">Gain (dB)</span>
+          <span className="row-label">Quality</span>
+          <span />
+        </div>
+        <div className="bands row center">
+          <AddSliderDivider
+            newSliderFrequency={computeAvgFreq(null, freqSortedFilters[0])}
+            isMaxSliderCount={idSortedFilters.length >= MAX_NUM_FILTERS}
+          />
+          {idSortedFilters.map((filter) => {
+            const sliderIndex = sortIndexMap[filter.id];
+            return (
+              <Fragment key={`slider-${filter.id}`}>
+                <FrequencyBand
+                  filter={filter}
+                  isMinSliderCount={idSortedFilters.length <= MIN_NUM_FILTERS}
+                  // Manually position the frequency band
+                  style={{
+                    transform: `translateX(${
+                      DIVIDER_WIDTH + sliderIndex * (DIVIDER_WIDTH + BAND_WIDTH)
+                    }px)`,
+                  }}
+                />
+                <AddSliderDivider
+                  newSliderFrequency={computeAvgFreq(
+                    freqSortedFilters[sliderIndex],
+                    freqSortedFilters[sliderIndex + 1]
+                  )}
+                  isMaxSliderCount={idSortedFilters.length >= MAX_NUM_FILTERS}
+                  // Manually position the divider
+                  style={{
+                    transform: `translateX(${
+                      (sliderIndex + 1) * (DIVIDER_WIDTH + BAND_WIDTH)
+                    }px)`,
+                  }}
+                />
+              </Fragment>
+            );
+          })}
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

diff --git a/src/renderer/components/FrequencyBand.tsx b/src/renderer/components/FrequencyBand.tsx
@@ -219,7 +219,7 @@ const FrequencyBand = forwardRef(
 
     const sliderHeight = useMemo(
       // Manually determine slider height
-      () => (isGraphViewOn ? '228px' : 'calc(100vh - 398px)'),
+      () => (isGraphViewOn ? '161px' : 'calc(100vh - 465px)'),
       [isGraphViewOn]
     );
 

diff --git a/src/renderer/styles/App.scss b/src/renderer/styles/App.scss
@@ -61,7 +61,7 @@ body {
 .middle-content {
   grid-area: middle-content;
   display: grid;
-  grid-template-rows: max-content 1fr;
+  grid-template-rows: repeat(3, max-content) 1fr;
   gap: $spacing-s;
 }
 

diff --git a/src/renderer/styles/AutoEQ.scss b/src/renderer/styles/AutoEQ.scss
@@ -22,13 +22,17 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 $auto-eq-dropdown-width: 220px;
 
+.auto-eq-title {
+  margin: 0 $spacing-s;
+}
+
 .auto-eq {
   display: grid;
   grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr) max-content;
   height: min-content;
 
   padding: $spacing-s $spacing-m;
-  border-radius: $spacing-m;
+  border-radius: $spacing-s;
   background: $primary-default;
 
   align-items: center;