Add custom equalizer plugin with presets (bass booster, rock...) and the ability to add your own presets via a config.json file

src/i18n/resources/en.json

@@ -821,15 +821,48 @@
       "name": "Visualizer"
     },
     "equalizer": {
-      "description": "Adds an equalizer to the player",
+      "description": "Adds an equalizer to the player. Equalizer will start working from the next track",
       "name": "Equalizer",
       "menu": {
         "presets": {
           "label": "Presets",
           "list": {
-            "bass-booster": "Bass booster"
+            "flat": "Flat",
+            "acoustic": "Acoustic",
+            "bassBooster": "Bass Booster",
+            "bassReducer": "Bass Reducer",
+            "classical": "Classical",
+            "club": "Club",
+            "dance": "Dance",
+            "deep": "Deep",
+            "electronic": "Electronic",
+            "hipHop": "Hip Hop",
+            "jazz": "Jazz",
+            "latin": "Latin",
+            "live": "Live",
+            "loudness": "Loudness",
+            "lounge": "Lounge",
+            "metal": "Metal",
+            "piano": "Piano",
+            "pop": "Pop",
+            "reggae": "Reggae",
+            "rnb": "R&B",
+            "rock": "Rock",
+            "ska": "Ska",
+            "smallSpeakers": "Small Speakers",
+            "soft": "Soft",
+            "softRock": "Soft Rock",
+            "spokenWord": "Spoken Word",
+            "techno": "Techno",
+            "trebleBooster": "Treble Booster",
+            "trebleReducer": "Treble Reducer",
+            "vocalBooster": "Vocal Booster"
           }
-        }
+        },
+        "edit-config": "Edit Custom Presets in config.json",
+        "edit-config-tooltip": "Open config.json where you can edit custom equalizer presets. Changes will take effect after restarting the app",
+        "reset-custom-presets": "Add/Reset Custom Presets",
+        "reset-custom-presets-tooltip": "This will Add/Replace existing custom profiles in the config.json file with default stubs. Changes will take effect after restarting the app"
       }
     }
   }

src/plugins/equalizer/index.ts

@@ -1,16 +1,48 @@
 import { createPlugin } from '@/utils';
 import { t } from '@/i18n';
-import { MenuContext } from '@/types/contexts';
-import { MenuTemplate } from '@/menu';
-import { defaultPresets, presetConfigs, Preset, FilterConfig } from './presets';
+import { Preset, defaultCustomPresets, defaultPresets } from './presets';
 
-export type EqualizerPluginConfig = {
-  enabled: boolean;
-  filters: FilterConfig[];
-  presets: { [preset in Preset]: boolean };
-};
+import appConfig from '../../config';
 
-let appliedFilters: BiquadFilterNode[] = [];
+let filters: BiquadFilterNode[] = [];
+
+let storedAudioSource: AudioNode;
+let storedAudioContext: AudioContext;
+
+function clearFilters() {
+  filters.forEach((filter) => filter.disconnect());
+  filters = [];
+  storedAudioSource.disconnect();
+  storedAudioSource.connect(storedAudioContext.destination);
+}
+
+function createFilters(
+  preset: Preset,
+  audioContext: AudioContext,
+): BiquadFilterNode[] {
+  const filters = preset.filters.map((band) => {
+    const filter = audioContext.createBiquadFilter();
+    filter.type = band.type || ('peaking' as BiquadFilterType);
+    filter.frequency.value = band.freq || 0;
+    filter.Q.value = band.Q || 1;
+    filter.gain.value = band.gain || 0;
+    return filter;
+  });
+  return filters;
+}
+
+function connectFilters(
+  filters: BiquadFilterNode[],
+  audioSource: AudioNode,
+  audioContext: AudioContext,
+) {
+  let currentNode: AudioNode = audioSource;
+  for (const filter of filters) {
+    currentNode.connect(filter);
+    currentNode = filter;
+  }
+  currentNode.connect(audioContext.destination);
+}
 
 export default createPlugin({
   name: () => t('plugins.equalizer.name'),
@@ -19,63 +51,110 @@ export default createPlugin({
   addedVersion: '3.7.X',
   config: {
     enabled: false,
-    filters: [],
-    presets: { 'bass-booster': false },
-  } as EqualizerPluginConfig,
-  menu: async ({
-    getConfig,
-    setConfig,
-  }: MenuContext<EqualizerPluginConfig>): Promise<MenuTemplate> => {
+    selectedPreset: 'flat', // Default preset
+    customPresets: [] as Preset[],
+  },
+  menu: async ({ getConfig, setConfig }) => {
     const config = await getConfig();
 
+    const allPresetsD = config.customPresets.concat(defaultPresets);
+
+    const checkedPreset = allPresetsD.some(
+      (preset) => preset.name === config.selectedPreset,
+    )
+      ? config.selectedPreset
+      : 'flat';
+
     return [
       {
         label: t('plugins.equalizer.menu.presets.label'),
-        type: 'submenu',
-        submenu: defaultPresets.map((preset) => ({
-          label: t(`plugins.equalizer.menu.presets.list.${preset}`),
+        submenu: allPresetsD.map((preset) => ({
+          restartNeeded: true,
+          label: config.customPresets.includes(preset)
+            ? preset.name
+            : t(`plugins.equalizer.menu.presets.list.${preset.name}`),
           type: 'radio',
-          checked: config.presets[preset],
+          checked: checkedPreset === preset.name,
           click() {
-            setConfig({
-              presets: { ...config.presets, [preset]: !config.presets[preset] },
-            });
+            setConfig({ selectedPreset: preset.name });
           },
         })),
       },
+      {
+        type: 'separator',
+      },
+      {
+        label: t('plugins.equalizer.menu.reset-custom-presets'),
+        toolTip: t('plugins.equalizer.menu.reset-custom-presets-tooltip'),
+        click() {
+          setConfig({ customPresets: defaultCustomPresets });
+        },
+      },
+      {
+        label: t('plugins.equalizer.menu.edit-config'),
+        toolTip: t('plugins.equalizer.menu.edit-config-tooltip'),
+        click() {
+          appConfig.edit();
+        },
+      },
     ];
   },
   renderer: {
-    async start({ getConfig }) {
-      const config = await getConfig();
-
-      document.addEventListener(
-        'ytmd:audio-can-play',
-        ({ detail: { audioSource, audioContext } }) => {
-          const filtersToApply = config.filters.concat(
-            defaultPresets
-              .filter((preset) => config.presets[preset])
-              .map((preset) => presetConfigs[preset]),
-          );
-          filtersToApply.forEach((filter) => {
-            const biquadFilter = audioContext.createBiquadFilter();
-            biquadFilter.type = filter.type;
-            biquadFilter.frequency.value = filter.frequency; // filter frequency in Hz
-            biquadFilter.Q.value = filter.Q;
-            biquadFilter.gain.value = filter.gain; // filter gain in dB
-
-            audioSource.connect(biquadFilter);
-            biquadFilter.connect(audioContext.destination);
-
-            appliedFilters.push(biquadFilter);
-          });
-        },
-        { once: true, passive: true },
-      );
+    async start(context) {
+      const config = await context.getConfig();
+
+      const allPresets = config.customPresets.concat(defaultPresets);
+
+      const specifiedPreset =
+        allPresets.find((preset) => preset.name === config.selectedPreset) ||
+        allPresets.find((preset) => preset.name === 'flat');
+
+      if (!specifiedPreset) {
+        return;
+      }
+
+      if (!storedAudioSource || !storedAudioContext) {
+        document.addEventListener(
+          'ytmd:audio-can-play',
+          ({ detail: { audioSource, audioContext } }) => {
+            // Store audioSource and audioContext
+            storedAudioSource = audioSource;
+            storedAudioContext = audioContext;
+
+            filters = createFilters(specifiedPreset, audioContext);
+            audioSource.disconnect();
+            connectFilters(filters, audioSource, audioContext);
+          },
+          { once: true, passive: true },
+        );
+      } else {
+        filters = createFilters(specifiedPreset, storedAudioContext);
+        storedAudioSource.disconnect();
+        connectFilters(filters, storedAudioSource, storedAudioContext);
+      }
+    },
+    onConfigChange(newConfig) {
+      if (!storedAudioSource || !storedAudioContext) {
+        return;
+      }
+
+      clearFilters();
+
+      const allPresets = newConfig.customPresets.concat(defaultPresets);
+      const specifiedPreset =
+        allPresets.find((preset) => preset.name === newConfig.selectedPreset) ||
+        allPresets.find((preset) => preset.name === 'flat');
+
+      if (!specifiedPreset) {
+        return;
+      }
+
+      filters = createFilters(specifiedPreset, storedAudioContext);
+      storedAudioSource.disconnect();
+      connectFilters(filters, storedAudioSource, storedAudioContext);
     },
     stop() {
-      appliedFilters.forEach((filter) => filter.disconnect());
-      appliedFilters = [];
+      clearFilters();
     },
   },
 });