From 26697284e8baee110b9b4ca21e0f6e0ed74cc738 Mon Sep 17 00:00:00 2001
From: Maxim Raznatovski <nda.mr43@gmail.com>
Date: Mon, 25 Nov 2024 15:34:57 +0100
Subject: [PATCH 1/8] Feat: synchronize with DSP types from models

---
 src/plugins/api/interfaces.ts | 47 +++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/plugins/api/interfaces.ts b/src/plugins/api/interfaces.ts
index e4759269..9a556ed5 100644
--- a/src/plugins/api/interfaces.ts
+++ b/src/plugins/api/interfaces.ts
@@ -5,6 +5,53 @@ export const SECURE_STRING_SUBSTITUTE = "this_value_is_encrypted";
 export const MASS_LOGO_ONLINE =
   "https://github.com/home-assistant/brands/raw/master/custom_integrations/mass/icon%402x.png";
 
+/// dsp
+
+export enum DSPFilterType {
+  PARAMETRIC_EQ = "parametric_eq",
+}
+
+export enum ParametricEQBandType {
+  PEAK = "peak",
+  HIGH_SHELF = "high_shelf",
+  LOW_SHELF = "low_shelf",
+  HIGH_PASS = "high_pass",
+  LOW_PASS = "low_pass",
+  NOTCH = "notch",
+}
+
+// Base interface for all DSP filters
+export interface DSPFilterBase {
+  type: DSPFilterType;
+  enabled: boolean;
+}
+
+export interface ParametricEQBand {
+  frequency: number;
+  q: number;
+  gain: number;
+  type: ParametricEQBandType;
+  enabled: boolean;
+}
+
+// Specific filter types
+export interface ParametricEQFilter extends DSPFilterBase {
+  type: DSPFilterType.PARAMETRIC_EQ;
+  bands: Array<ParametricEQBand>;
+}
+
+// Union type for all possible filters
+export type DSPFilter = ParametricEQFilter;
+
+// Main DSP chain configuration
+export interface DSPConfig {
+  enabled: boolean;
+  filters: DSPFilter[];
+  input_gain: number;
+  output_gain: number;
+  output_limiter: boolean;
+}
+
 /// enums
 
 export enum MediaType {

From 3928587b199852586e5cdb704192e12097055dc1 Mon Sep 17 00:00:00 2001
From: Maxim Raznatovski <nda.mr43@gmail.com>
Date: Mon, 25 Nov 2024 15:37:46 +0100
Subject: [PATCH 2/8] Feat: add DSP link to Players

---
 src/translations/en.json       |  1 +
 src/views/settings/Players.vue | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/src/translations/en.json b/src/translations/en.json
index 05aca5ff..7726cec3 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -537,6 +537,7 @@
     "power_off_player": "Power off",
     "sync_player_with": "Synchronize with another player",
     "open_player_settings": "Open settings",
+    "open_dsp_settings": "Open DSP settings",
     "powered_off_players": "Unpowered players",
     "dont_stop_the_music_enable": "Enable 'Don't stop the music!'",
     "dont_stop_the_music_disable": "Disable 'Don't stop the music!'"
diff --git a/src/views/settings/Players.vue b/src/views/settings/Players.vue
index ebee3591..6eaa3209 100644
--- a/src/views/settings/Players.vue
+++ b/src/views/settings/Players.vue
@@ -127,6 +127,10 @@ const editPlayer = function (playerId: string, provider: string) {
   }
 };
 
+const editPlayerDsp = function (playerId: string) {
+  router.push(`/settings/editplayer/${playerId}/dsp`);
+};
+
 const addPlayerGroup = function (provider: string) {
   router.push("/settings/addgroup");
 };
@@ -160,6 +164,14 @@ const onMenu = function (evt: Event, playerConfig: PlayerConfig) {
       icon: "mdi-cog",
       disabled: !api.getProvider(playerConfig!.provider),
     },
+    {
+      label: "open_dsp_settings",
+      labelArgs: [],
+      action: () => {
+        editPlayerDsp(playerConfig.player_id);
+      },
+      icon: "mdi-equalizer",
+    },
     {
       label: playerConfig.enabled ? "settings.disable" : "settings.enable",
       labelArgs: [],

From fdc6a55eb55b5dbd35acef13e256b69d6005b2af Mon Sep 17 00:00:00 2001
From: Maxim Raznatovski <nda.mr43@gmail.com>
Date: Mon, 25 Nov 2024 15:38:41 +0100
Subject: [PATCH 3/8] Feat: add DSP link from player settings

---
 src/helpers/player_menu_items.ts  | 12 ++++++++++++
 src/views/settings/EditPlayer.vue |  9 +++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/helpers/player_menu_items.ts b/src/helpers/player_menu_items.ts
index da0bd2b5..5bbd6cd7 100644
--- a/src/helpers/player_menu_items.ts
+++ b/src/helpers/player_menu_items.ts
@@ -178,5 +178,17 @@ export const getPlayerMenuItems = (
     icon: "mdi-cog-outline",
   });
 
+  // add shortcut to dsp settings
+  menuItems.push({
+    label: "open_dsp_settings",
+    labelArgs: [],
+    action: () => {
+      store.showFullscreenPlayer = false;
+      store.showPlayersMenu = false;
+      router.push(`/settings/editplayer/${player.player_id}/dsp`);
+    },
+    icon: "mdi-equalizer",
+  });
+
   return menuItems;
 };
diff --git a/src/views/settings/EditPlayer.vue b/src/views/settings/EditPlayer.vue
index 723453e0..c13f6288 100644
--- a/src/views/settings/EditPlayer.vue
+++ b/src/views/settings/EditPlayer.vue
@@ -72,6 +72,11 @@
           color="primary"
           :disabled="api.getProviderManifest(config.provider)?.builtin"
         />
+
+        <!-- DSP Config Button -->
+        <v-btn @click="openDspConfig">
+          {{ $t("open_dsp_settings") }}
+        </v-btn>
       </div>
       <br />
       <v-divider />
@@ -121,6 +126,10 @@ const onSubmit = async function (values: Record<string, ConfigValueType>) {
   api.savePlayerConfig(props.playerId!, values);
   router.push({ name: "playersettings" });
 };
+
+const openDspConfig = function () {
+  router.push(`/settings/editplayer/${props.playerId}/dsp`);
+};
 </script>
 
 <style scoped></style>

From 246ed5a5130c9dca09fc5ed5fc2531cfbebdcf5b Mon Sep 17 00:00:00 2001
From: Maxim Raznatovski <nda.mr43@gmail.com>
Date: Mon, 25 Nov 2024 15:47:38 +0100
Subject: [PATCH 4/8] Feat: Add helper functions to get and save DSP
 Configuration

---
 src/plugins/api/index.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/plugins/api/index.ts b/src/plugins/api/index.ts
index 7ad624f7..3c13d702 100644
--- a/src/plugins/api/index.ts
+++ b/src/plugins/api/index.ts
@@ -43,6 +43,7 @@ import {
   CoreConfig,
   ItemMapping,
   AlbumType,
+  DSPConfig,
 } from "./interfaces";
 
 const DEBUG = process.env.NODE_ENV === "development";
@@ -1049,6 +1050,24 @@ export class MusicAssistantApi {
     });
   }
 
+  // DSP related functions
+
+  public async getDSPConfig(player_id: string): Promise<DSPConfig> {
+    // Return the DSP configuration for a player.
+    return this.sendCommand("config/players/dsp/get", { player_id });
+  }
+
+  public async saveDSPConfig(
+    player_id: string,
+    config: DSPConfig,
+  ): Promise<DSPConfig> {
+    // Save/update the DSP configuration for a player.
+    return this.sendCommand("config/players/dsp/save", {
+      player_id,
+      config,
+    });
+  }
+
   // Core Config related functions
 
   public async getCoreConfigs(): Promise<CoreConfig[]> {

From ca0cd8a19ee75dc79af1c85f74b0ee066df85629 Mon Sep 17 00:00:00 2001
From: Maxim Raznatovski <nda.mr43@gmail.com>
Date: Mon, 25 Nov 2024 15:48:21 +0100
Subject: [PATCH 5/8] Feat: Add DSP Editor

This commit adds a graphical editor for configuring the DSP Pipeline of
a Player with support for a Parametric Equalizer.
---
 src/components/dsp/DSPParametricEQ.vue | 452 +++++++++++++++++++++++++
 src/components/dsp/DSPPipeline.vue     | 203 +++++++++++
 src/components/dsp/DSPSlider.vue       |  94 +++++
 src/plugins/router.ts                  |   9 +
 src/translations/en.json               |  40 ++-
 src/views/settings/EditPlayerDsp.vue   | 280 +++++++++++++++
 6 files changed, 1077 insertions(+), 1 deletion(-)
 create mode 100644 src/components/dsp/DSPParametricEQ.vue
 create mode 100644 src/components/dsp/DSPPipeline.vue
 create mode 100644 src/components/dsp/DSPSlider.vue
 create mode 100644 src/views/settings/EditPlayerDsp.vue

diff --git a/src/components/dsp/DSPParametricEQ.vue b/src/components/dsp/DSPParametricEQ.vue
new file mode 100644
index 00000000..efb2fc13
--- /dev/null
+++ b/src/components/dsp/DSPParametricEQ.vue
@@ -0,0 +1,452 @@
+<template>
+  <v-container class="pa-2">
+    <!-- Frequency Response Graph with Dark Theme Support -->
+    <v-card class="mb-4" elevation="2">
+      <div ref="graphContainer" class="graph-container">
+        <canvas ref="canvas" class="frequency-graph"></canvas>
+      </div>
+    </v-card>
+
+    <!-- Band Management Section -->
+    <v-card class="mb-4" elevation="2">
+      <v-card-title class="d-flex align-center px-4 py-2" />
+
+      <!-- Band Selection with Visual Indicators -->
+      <v-card-text class="pa-0">
+        <v-chip-group
+          v-model="selectedBandIndex"
+          class="mb-4 pa-2"
+          mandatory
+          selected-class="primary"
+        >
+          <v-chip
+            v-for="(band, index) in peq.bands"
+            :key="index"
+            :value="index"
+            :class="{ 'opacity-50': !band.enabled }"
+            filter
+            variant="elevated"
+          >
+            {{ $t("settings.dsp.parametric_eq.band", { index: index + 1 }) }}
+          </v-chip>
+          <v-chip variant="outlined" @click="addBand">
+            <v-icon icon="mdi-plus" start />
+            {{ $t("settings.dsp.parametric_eq.add_band") }}
+          </v-chip>
+        </v-chip-group>
+      </v-card-text>
+    </v-card>
+
+    <!-- Band Controls Card -->
+    <v-card v-if="selectedBand" elevation="2">
+      <v-card-text>
+        <!-- Band Header -->
+        <div class="d-flex align-center mb-4">
+          <v-switch
+            v-model="selectedBand.enabled"
+            :label="$t('settings.dsp.parametric_eq.enable_band')"
+            density="comfortable"
+            hide-details
+            inset
+          />
+          <v-spacer />
+          <v-btn
+            color="error"
+            variant="tonal"
+            @click="removeBand(selectedBandIndex)"
+          >
+            <v-icon>mdi-delete</v-icon>
+            {{ $t("settings.dsp.parametric_eq.delete_band") }}
+          </v-btn>
+        </div>
+
+        <!-- Filter Controls -->
+        <v-row dense>
+          <v-col cols="12">
+            <v-select
+              v-model="selectedBand.type"
+              :items="filterTypes"
+              :label="$t('settings.dsp.parametric_eq.filter_type')"
+              variant="outlined"
+              density="comfortable"
+              class="mb-4"
+            />
+          </v-col>
+
+          <v-col cols="12">
+            <DSPSlider
+              v-model="selectedBand.frequency"
+              type="frequency"
+              class="mb-4"
+            />
+          </v-col>
+
+          <v-col v-if="showGainParameter(selectedBand.type)" cols="12">
+            <DSPSlider v-model="selectedBand.gain" type="gain" class="mb-4" />
+          </v-col>
+
+          <v-col cols="12">
+            <DSPSlider v-model="selectedBand.q" type="q" />
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, watch, computed } from "vue";
+import {
+  ParametricEQBand,
+  ParametricEQBandType,
+  ParametricEQFilter,
+} from "@/plugins/api/interfaces";
+import DSPSlider from "./DSPSlider.vue";
+import { $t } from "@/plugins/i18n";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
+
+const peq = defineModel<ParametricEQFilter>({ required: true });
+
+const canvas = ref<HTMLCanvasElement | null>(null);
+const graphContainer = ref<HTMLDivElement | null>(null);
+
+const filterTypes = Object.values(ParametricEQBandType).map((value) => ({
+  title: $t(`settings.dsp.parametric_eq.filter_types.${value}`),
+  value: value,
+}));
+
+// Helper functions
+const showGainParameter = (type: ParametricEQBandType) => {
+  return ![
+    ParametricEQBandType.HIGH_PASS,
+    ParametricEQBandType.LOW_PASS,
+    ParametricEQBandType.NOTCH,
+  ].includes(type);
+};
+
+interface Viewport {
+  width: number;
+  height: number;
+  min_gain: number;
+  max_gain: number;
+  min_freq: number;
+  max_freq: number;
+  padding_lr: number;
+  padding_tb: number;
+}
+
+const viewport = ref<Viewport>({
+  width: 0,
+  height: 0,
+  min_gain: -20,
+  max_gain: 20,
+  min_freq: 20,
+  max_freq: 20000,
+  padding_lr: 40,
+  padding_tb: 20,
+});
+
+// Graph drawing functions
+const drawGraph = () => {
+  if (!canvas.value || !graphContainer.value) return;
+  const isDark = theme.global.current.value.dark;
+
+  const ctx = canvas.value.getContext("2d");
+  if (!ctx) return;
+
+  // Set canvas size
+  canvas.value.width = graphContainer.value.clientWidth * 2;
+  canvas.value.height = graphContainer.value.clientHeight * 2;
+  viewport.value.width = canvas.value.width / 2;
+  viewport.value.height = canvas.value.height / 2;
+  ctx.scale(2, 2); // For retina displays
+
+  // Clear canvas
+  ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
+
+  // Draw frequency grid
+  drawGrid(ctx, viewport.value);
+
+  const width = ctx.canvas.width / 2;
+  const height = ctx.canvas.height / 2;
+  const totalResponse = new Float32Array(width);
+
+  // Draw individual filter responses
+  peq.value.bands.forEach((band, index) => {
+    if (band.enabled) {
+      let color = `hsla(${(index * 360) / peq.value.bands.length}, 60%, ${isDark ? 70 : 50}%, 0.5)`;
+
+      ctx.beginPath();
+      if (index === selectedBandIndex.value) {
+        ctx.lineWidth = 5;
+        color = `hsla(${(index * 360) / peq.value.bands.length}, 70%, ${isDark ? 70 : 60}%, 1)`;
+      } else {
+        ctx.lineWidth = 2;
+      }
+      ctx.strokeStyle = color;
+
+      const frequencies = new Float32Array(width);
+      for (let x = 0; x < width; x++) {
+        frequencies[x] = xToFreq(x, viewport.value);
+      }
+
+      const magResponse = new Float32Array(width);
+      const phaseResponse = new Float32Array(width);
+      const filter = createBiquadFilter(audioContext, band);
+      filter.getFrequencyResponse(frequencies, magResponse, phaseResponse);
+
+      for (
+        let x = viewport.value.padding_lr;
+        x < width - viewport.value.padding_lr;
+        x++
+      ) {
+        const response = 20 * Math.log10(magResponse[x]);
+        totalResponse[x] += response;
+        const y = gainToY(response, viewport.value);
+
+        if (x === 0) {
+          ctx.moveTo(x, y);
+        } else {
+          ctx.lineTo(x, y);
+        }
+      }
+
+      ctx.stroke();
+
+      // Draw handle for the band
+      const handleX = freqToX(band.frequency, viewport.value);
+      const handleY = gainToY(band.gain, viewport.value);
+
+      ctx.beginPath();
+      ctx.fillStyle = color;
+      ctx.arc(handleX, handleY, 6, 0, 2 * Math.PI);
+
+      ctx.fill();
+    }
+  });
+  ctx.lineWidth = 2;
+  if (isDark) {
+    ctx.strokeStyle = "#fff";
+  } else {
+    ctx.strokeStyle = "#000";
+  }
+
+  ctx.beginPath();
+  for (
+    let x = viewport.value.padding_lr;
+    x < width - viewport.value.padding_lr;
+    x++
+  ) {
+    const y = gainToY(totalResponse[x], viewport.value);
+
+    if (x === 0) {
+      ctx.moveTo(x, y);
+    } else {
+      ctx.lineTo(x, y);
+    }
+  }
+
+  ctx.stroke();
+};
+
+const createBiquadFilter = (
+  context: AudioContext,
+  band: ParametricEQBand,
+): BiquadFilterNode => {
+  const filter = context.createBiquadFilter();
+  switch (band.type) {
+    case ParametricEQBandType.HIGH_PASS:
+      filter.type = "highpass";
+      break;
+    case ParametricEQBandType.LOW_PASS:
+      filter.type = "lowpass";
+      break;
+    case ParametricEQBandType.HIGH_SHELF:
+      filter.type = "highshelf";
+      break;
+    case ParametricEQBandType.LOW_SHELF:
+      filter.type = "lowshelf";
+      break;
+    case ParametricEQBandType.NOTCH:
+      filter.type = "notch";
+      break;
+    case ParametricEQBandType.PEAK:
+      filter.type = "peaking";
+      break;
+  }
+  filter.frequency.value = band.frequency;
+  filter.Q.value = band.q;
+  filter.gain.value = band.gain;
+  return filter;
+};
+
+const audioContext = new AudioContext();
+
+const biquadFilters = computed(() => {
+  return peq.value.bands.map((band) => createBiquadFilter(audioContext, band));
+});
+
+const selectedBandIndex = ref(0);
+
+// Computed property for the selected band
+const selectedBand = computed(() => peq.value.bands[selectedBandIndex.value]);
+
+const removeBand = (index: number) => {
+  peq.value.bands.splice(index, 1);
+  // Adjust selected index if necessary
+  if (selectedBandIndex.value >= peq.value.bands.length) {
+    selectedBandIndex.value = peq.value.bands.length - 1;
+  }
+};
+
+const addBand = () => {
+  const newIndex = peq.value.bands.length;
+  peq.value.bands.push({
+    frequency: 1000,
+    q: 1.0,
+    gain: 0,
+    type: ParametricEQBandType.PEAK,
+    enabled: true,
+  });
+  selectedBandIndex.value = newIndex;
+};
+
+// Watch for changes and redraw
+watch(() => peq.value.bands, drawGraph, { deep: true });
+watch(() => selectedBandIndex.value, drawGraph);
+watch(() => theme.global.current.value.dark, drawGraph);
+
+onMounted(() => {
+  drawGraph();
+  window.addEventListener("resize", drawGraph);
+});
+
+// Convert between screen and frequency coordinates
+const freqToX = (freq: number, viewport: Viewport): number => {
+  const logFreq = Math.log2(freq / viewport.min_freq);
+  const logMax = Math.log2(viewport.max_freq / viewport.min_freq);
+  return (
+    (logFreq / logMax) * (viewport.width - viewport.padding_lr * 2) +
+    viewport.padding_lr
+  );
+};
+
+const xToFreq = (x: number, viewport: Viewport): number => {
+  const logMax = Math.log2(viewport.max_freq / viewport.min_freq);
+  const freq =
+    viewport.min_freq *
+    Math.pow(
+      2,
+      ((x - viewport.padding_lr) / (viewport.width - viewport.padding_lr * 2)) *
+        logMax,
+    );
+  return Math.min(Math.max(freq, viewport.min_freq), viewport.max_freq);
+};
+
+const gainToY = (gain: number, viewport: Viewport): number => {
+  return (
+    viewport.height / 2 -
+    (gain * (viewport.height - 2 * viewport.padding_tb)) /
+      (2 * Math.max(Math.abs(viewport.min_gain), Math.abs(viewport.max_gain)))
+  );
+};
+
+const yToGain = (y: number, viewport: Viewport): number => {
+  return (
+    -(
+      (y - (viewport.height / 2 - viewport.padding_tb)) *
+      2 *
+      Math.max(Math.abs(viewport.min_gain), Math.abs(viewport.max_gain))
+    ) /
+    (viewport.height - 2 * viewport.padding_tb)
+  );
+};
+
+// Draw frequency response grid
+const drawGrid = (ctx: CanvasRenderingContext2D, viewport: Viewport) => {
+  const width = ctx.canvas.width / 2;
+  const height = ctx.canvas.height / 2;
+  const isDark = theme.global.current.value.dark;
+
+  if (isDark) {
+    ctx.fillStyle = "#eee";
+    ctx.strokeStyle = "#eee";
+  } else {
+    ctx.fillStyle = "#222";
+    ctx.strokeStyle = "#666";
+  }
+  ctx.lineWidth = 1;
+
+  // Draw frequency lines
+  const frequencies = [20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000];
+  frequencies.forEach((freq) => {
+    const x = freqToX(freq, viewport);
+    ctx.beginPath();
+    ctx.moveTo(x, viewport.padding_tb);
+    ctx.lineTo(x, height - viewport.padding_tb);
+    ctx.stroke();
+
+    // Draw frequency labels
+    ctx.font = "10px Arial";
+    ctx.textAlign = "center";
+    ctx.fillText(
+      freq >= 1000 ? `${freq / 1000}k` : freq.toString(),
+      x,
+      height - 5,
+    );
+  });
+
+  // Draw gain lines
+  const gains = [];
+  const gainStep = (viewport.max_gain - viewport.min_gain) / 10;
+
+  for (
+    let gain = viewport.min_gain;
+    gain <= viewport.max_gain;
+    gain += gainStep
+  ) {
+    const y = gainToY(gain, viewport);
+    ctx.beginPath();
+    ctx.moveTo(viewport.padding_lr, y);
+    ctx.lineTo(width - viewport.padding_lr, y);
+    ctx.stroke();
+
+    // Draw gain labels
+    ctx.font = "10px Arial";
+    ctx.textAlign = "right";
+    ctx.fillText(`${gain}dB`, viewport.padding_lr - 3, y + 3);
+  }
+};
+
+// Add resize observer
+onMounted(() => {
+  const resizeObserver = new ResizeObserver(() => {
+    drawGraph();
+  });
+
+  if (graphContainer.value) {
+    resizeObserver.observe(graphContainer.value);
+  }
+
+  return () => {
+    resizeObserver.disconnect();
+  };
+});
+</script>
+
+<style scoped>
+.graph-container {
+  position: relative;
+  aspect-ratio: 7/2;
+  width: 100%;
+  background: var(--v-surface-variant);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.frequency-graph {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/dsp/DSPPipeline.vue b/src/components/dsp/DSPPipeline.vue
new file mode 100644
index 00000000..af3b4646
--- /dev/null
+++ b/src/components/dsp/DSPPipeline.vue
@@ -0,0 +1,203 @@
+<template>
+  <v-timeline density="compact" side="end">
+    <!-- Input -->
+    <v-timeline-item
+      :dot-color="isDotActive('input')"
+      size="x-small"
+      @click="handleSelect('input')"
+    >
+      <v-btn
+        flat
+        rounded="pill"
+        :color="getButtonColor('input')"
+        :class="getButtonClass('input')"
+        class="dsp-pipeline-card"
+      >
+        <v-card-text class="px-3 py-1">{{
+          $t("settings.dsp.input")
+        }}</v-card-text>
+      </v-btn>
+    </v-timeline-item>
+
+    <v-timeline-item :hide-dot="true" size="x-small" />
+
+    <!-- DSP Filters -->
+    <v-timeline-item
+      v-for="(filter, index) in dsp.filters"
+      :key="index"
+      :dot-color="isDotActive(index)"
+      size="x-small"
+      :hide-dot="isDisabled(index)"
+      @click="handleSelect(index)"
+      @contextmenu.prevent="(e) => openFilterContextMenu(e, index)"
+    >
+      <v-btn
+        flat
+        rounded="pill"
+        :color="getButtonColor(index)"
+        :class="getButtonClass(index)"
+        class="dsp-pipeline-card"
+      >
+        <v-card-text class="px-3 py-1">{{
+          $t(`settings.dsp.types.${filter.type}`)
+        }}</v-card-text>
+      </v-btn>
+    </v-timeline-item>
+
+    <!-- Add Filter Button -->
+    <v-timeline-item dot-color="secondary" size="x-small" :hide-dot="true">
+      <v-btn
+        outlined
+        rounded="pill"
+        class="dsp-pipeline-card add-filter-btn"
+        :elevation="0"
+        @click="emit('onAddFilter')"
+      >
+        <v-card-text class="py-1 d-flex align-center">
+          <v-icon size="small" class="mr-1">mdi-plus</v-icon>
+          {{ $t("settings.dsp.filter.add") }}
+        </v-card-text>
+      </v-btn>
+    </v-timeline-item>
+
+    <v-timeline-item :hide-dot="true" size="x-small" />
+
+    <!-- Output -->
+    <v-timeline-item
+      :dot-color="isDotActive('output')"
+      size="x-small"
+      @click="handleSelect('output')"
+    >
+      <v-btn
+        flat
+        rounded="pill"
+        :color="getButtonColor('output')"
+        :class="getButtonClass('output')"
+        class="dsp-pipeline-card"
+      >
+        <v-card-text class="px-3 py-1">{{
+          $t("settings.dsp.output")
+        }}</v-card-text>
+      </v-btn>
+    </v-timeline-item>
+  </v-timeline>
+</template>
+
+<script setup lang="ts">
+import { DSPConfig } from "@/plugins/api/interfaces";
+import { eventbus } from "@/plugins/eventbus";
+import { useTheme } from "vuetify";
+
+const theme = useTheme();
+
+type SelectionType = number | "input" | "output";
+
+const props = defineProps<{
+  dsp: DSPConfig;
+  selected: SelectionType | null;
+}>();
+
+const emit = defineEmits<{
+  (e: "onSelect", selected: SelectionType): void;
+  (e: "onAddFilter"): void;
+  (e: "onMoveFilter", data: { index: number; direction: "up" | "down" }): void;
+  (e: "onDeleteFilter", index: number): void;
+}>();
+
+const isDotActive = (value: SelectionType): string =>
+  props.selected === value ? "primary" : "secondary";
+
+const isDisabled = (value: SelectionType): boolean => {
+  if (value === "input" || value === "output") {
+    return false;
+  } else {
+    return !props.dsp.filters[value].enabled;
+  }
+};
+
+const getButtonColor = (value: SelectionType): string => {
+  if (props.selected === value) {
+    return "primary";
+  }
+  return theme.global.current.value.dark ? "grey-darken-3" : "grey-lighten-3";
+};
+
+const getButtonClass = (value: SelectionType) => ({
+  "filter-selected": props.selected === value,
+});
+
+const handleSelect = (value: SelectionType): void => {
+  emit("onSelect", value);
+};
+
+const moveFilter = (index: number, direction: "up" | "down"): void => {
+  emit("onMoveFilter", { index, direction });
+};
+
+const deleteFilter = (index: number): void => {
+  emit("onDeleteFilter", index);
+};
+
+const openFilterContextMenu = function (evt: Event, index: number) {
+  const menuItems = [
+    {
+      label: "settings.dsp.move_up",
+      labelArgs: [],
+      action: () => {
+        moveFilter(index, "up");
+      },
+      disabled: index === 0,
+      icon: "mdi-arrow-up",
+    },
+    {
+      label: "settings.dsp.move_down",
+      labelArgs: [],
+      action: () => {
+        moveFilter(index, "down");
+      },
+      disabled: index === props.dsp.filters.length - 1,
+      icon: "mdi-arrow-down",
+    },
+    {
+      label: "settings.dsp.delete_filter",
+      labelArgs: [],
+      action: () => {
+        deleteFilter(index);
+      },
+      icon: "mdi-delete",
+    },
+  ];
+  eventbus.emit("contextmenu", {
+    items: menuItems,
+    posX: (evt as PointerEvent).clientX,
+    posY: (evt as PointerEvent).clientY,
+  });
+};
+</script>
+
+<style scoped>
+.dsp-pipeline-card {
+  min-width: 160px;
+  transition: all 0.2s ease;
+}
+
+.dsp-pipeline-card:hover,
+.filter-selected {
+  transform: translateX(4px);
+}
+
+.add-filter-btn {
+  background: transparent;
+  border: 1px dashed rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+}
+
+.v-theme--dark .add-filter-btn {
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+.add-filter-btn:hover {
+  border-color: rgb(var(--v-theme-primary));
+  transform: none;
+}
+</style>
diff --git a/src/components/dsp/DSPSlider.vue b/src/components/dsp/DSPSlider.vue
new file mode 100644
index 00000000..5faf026e
--- /dev/null
+++ b/src/components/dsp/DSPSlider.vue
@@ -0,0 +1,94 @@
+<template>
+  <v-card flat>
+    <v-card-text class="d-flex align-center gap-4">
+      <v-slider
+        v-model="model"
+        :min="config.min"
+        :max="config.max"
+        :step="config.step"
+        :label="config.label"
+        hide-details
+        class="flex-grow-1 pr-4"
+        density="compact"
+      />
+      <v-text-field
+        v-model="displayValue"
+        type="number"
+        hide-details
+        density="compact"
+        style="max-width: 100px"
+        @focus="isEditing = true"
+        @blur="isEditing = false"
+      />
+      <span style="min-width: 40px" class="pl-2">{{ config.unit }}</span>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { $t } from "@/plugins/i18n";
+import { ref, computed } from "vue";
+
+type ParameterConfig = {
+  // Minimum value for the slider
+  min: number;
+  // Maximum value for the slider
+  max: number;
+  // Step increment for the slider
+  step: number;
+  label: string;
+  unit: string;
+};
+
+const props = defineProps<{
+  type: "gain" | "q" | "frequency" | ParameterConfig;
+}>();
+
+const model = defineModel<number>({ required: true });
+const isEditing = ref(false);
+
+const config = computed((): ParameterConfig => {
+  if (props.type === "gain") {
+    return {
+      min: -15,
+      max: 15,
+      step: 0.1,
+      label: $t("settings.dsp.parameter.gain"),
+      unit: "dB",
+    };
+  } else if (props.type === "q") {
+    return {
+      min: 0.1,
+      max: 20,
+      step: 0.1,
+      label: $t("settings.dsp.parameter.q_factor"),
+      unit: "",
+    };
+  } else if (props.type === "frequency") {
+    return {
+      min: 20,
+      max: 20000,
+      step: 1,
+      label: $t("settings.dsp.parameter.frequency"),
+      unit: "Hz",
+    };
+  } else {
+    return props.type;
+  }
+});
+
+// Computed property for compact display of the value
+const displayValue = computed({
+  get: () => {
+    if (isEditing.value) {
+      return model.value.toString();
+    }
+    if (model.value > 1000) return model.value.toFixed(0);
+    if (model.value > 100) return model.value.toFixed(1);
+    return model.value.toFixed(2);
+  },
+  set: (value: string) => {
+    model.value = Number(value);
+  },
+});
+</script>
diff --git a/src/plugins/router.ts b/src/plugins/router.ts
index 6f846b18..124c7bc4 100644
--- a/src/plugins/router.ts
+++ b/src/plugins/router.ts
@@ -225,6 +225,15 @@ const routes = [
               ),
             props: true,
           },
+          {
+            path: "editplayer/:playerId/dsp",
+            name: "editplayerdsp",
+            component: () =>
+              import(
+                /* webpackChunkName: "editdsp" */ "@/views/settings/EditPlayerDsp.vue"
+              ),
+            props: true,
+          },
           {
             path: "editcore/:domain",
             name: "editcore",
diff --git a/src/translations/en.json b/src/translations/en.json
index 7726cec3..c002b51a 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -420,6 +420,44 @@
         "dynamic_members": {
             "label": "Dynamic group members",
             "description": "Allow members to (temporary) join/leave the group dynamically, so the group more or less behaves the same like manually syncing players together, with the main difference being that the groupplayer will hold the queue."
+        },
+        "dsp": {
+            "configure_on": "Configuring DSP on: {name}",
+            "disabled_message": "DSP is currently disabled. Enable it using the switch above",
+            "input": "Input",
+            "output": "Output",
+            "enable_output_limiter": "Enable Output Limiter to prevent clipping",
+            "filter": {
+                "add": "Add Filter",
+                "type": "Filter Type",
+                "new": "New {type}"
+            },
+            "move_up": "Move Up",
+            "move_down": "Move Down",
+            "delete_filter": "Delete Filter",
+            "parametric_eq": {
+                "add_band": "Add Band",
+                "delete_band": "Delete Band",
+                "filter_type": "Filter Type",
+                "band": "Band {index}",
+                "enable_band": "Enable Band",
+                "filter_types": {
+                    "peak": "Peak",
+                    "low_shelf": "Low Shelf",
+                    "high_shelf": "High Shelf",
+                    "low_pass": "Low Pass",
+                    "high_pass": "High Pass",
+                    "notch": "Notch"
+                }
+            },
+            "parameter": {
+                "frequency": "Frequency",
+                "gain": "Gain",
+                "q_factor": "Q Factor"
+            },
+            "types": {
+                "parametric_eq": "Parametric EQ"
+            }
         }
     },
     "show_info": "Show info",
@@ -541,4 +579,4 @@
     "powered_off_players": "Unpowered players",
     "dont_stop_the_music_enable": "Enable 'Don't stop the music!'",
     "dont_stop_the_music_disable": "Disable 'Don't stop the music!'"
-}
+}
\ No newline at end of file
diff --git a/src/views/settings/EditPlayerDsp.vue b/src/views/settings/EditPlayerDsp.vue
new file mode 100644
index 00000000..d3840ce8
--- /dev/null
+++ b/src/views/settings/EditPlayerDsp.vue
@@ -0,0 +1,280 @@
+<template>
+  <section v-if="dsp">
+    <v-toolbar color="transparent" class="border-b">
+      <v-switch v-model="dsp.enabled" hide-details class="pl-4" />
+      <v-toolbar-title>{{
+        $t("settings.dsp.configure_on", { name: playerName })
+      }}</v-toolbar-title>
+    </v-toolbar>
+
+    <v-container>
+      <v-alert v-if="!dsp.enabled" type="info" class="mt-4" color="transparent">
+        {{ $t("settings.dsp.disabled_message") }}
+      </v-alert>
+      <v-row>
+        <!-- Timeline Column -->
+        <v-col
+          v-if="!isMobile || selectedStage === null"
+          class="flex-grow-0 flex-shrink-0"
+          :class="{ 'border-e pr-4': !isMobile }"
+          align-self="start"
+        >
+          <DSPPipeline
+            :dsp="dsp"
+            :selected="selectedStage"
+            @on-select="selectStage"
+            @on-add-filter="showAddFilterDialog = true"
+            @on-move-filter="(d) => moveFilter(d.index, d.direction)"
+            @on-delete-filter="removeFilter"
+          />
+        </v-col>
+
+        <!-- Filter Settings Panel -->
+        <v-col v-if="selectedStage != null">
+          <!-- Toolbar of the selected item -->
+          <v-toolbar density="compact">
+            <v-btn
+              v-if="isMobile"
+              class="hidden-xs-only"
+              icon
+              @click="selectedStage = null"
+            >
+              <v-icon>mdi-arrow-left</v-icon>
+            </v-btn>
+            <v-toolbar-title>{{ stageTitle(selectedStage) }}</v-toolbar-title>
+            <v-btn
+              v-if="
+                typeof selectedStage === 'number' &&
+                !isMobile &&
+                selectedStage > 0
+              "
+              icon
+              @click="moveFilter(selectedStage, 'up')"
+            >
+              <v-icon>mdi-arrow-up</v-icon>
+            </v-btn>
+            <v-btn
+              v-if="
+                typeof selectedStage === 'number' &&
+                !isMobile &&
+                selectedStage < dsp.filters.length - 1
+              "
+              icon
+              @click="moveFilter(selectedStage, 'down')"
+            >
+              <v-icon>mdi-arrow-down</v-icon>
+            </v-btn>
+
+            <v-switch
+              v-if="typeof selectedStage === 'number'"
+              v-model="dsp.filters[selectedStage].enabled"
+              hide-details
+              class="mr-4"
+            />
+            <v-btn
+              v-if="typeof selectedStage === 'number'"
+              icon
+              @click="removeFilter(selectedStage)"
+            >
+              <v-icon>mdi-delete</v-icon>
+            </v-btn>
+          </v-toolbar>
+
+          <!-- Settings of the Input stage -->
+          <v-card v-if="selectedStage === 'input'" flat>
+            <DSPSlider v-model="dsp.input_gain" type="gain" />
+          </v-card>
+
+          <!-- Settings of the Output stage -->
+          <v-card v-else-if="selectedStage === 'output'" flat>
+            <v-card-item>
+              <DSPSlider v-model="dsp.output_gain" type="gain" />
+              <v-checkbox
+                v-model="dsp.output_limiter"
+                :label="$t('settings.dsp.enable_output_limiter')"
+              />
+            </v-card-item>
+          </v-card>
+
+          <!-- Settings of the selected DSP Filter -->
+          <v-card v-else flat>
+            <DSPParametricEQ
+              v-if="
+                dsp.filters[selectedStage].type === DSPFilterType.PARAMETRIC_EQ
+              "
+              v-model="dsp.filters[selectedStage]"
+            />
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <!-- Add Filter Dialog -->
+    <v-dialog v-model="showAddFilterDialog" max-width="300">
+      <v-card>
+        <v-card-title>{{ $t("settings.dsp.filter.add") }}</v-card-title>
+        <v-card-text>
+          <v-select
+            v-model="newFilterType"
+            :items="filterTypes"
+            :label="$t('settings.dsp.filter.type')"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn @click="showAddFilterDialog = false">{{ $t("cancel") }}</v-btn>
+          <v-btn color="primary" @click="addFilter">{{
+            $t("settings.dsp.filter.add")
+          }}</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { api } from "@/plugins/api";
+import {
+  DSPConfig,
+  ParametricEQBandType,
+  DSPFilter,
+  DSPFilterType,
+} from "@/plugins/api/interfaces";
+import { getPlayerName } from "@/helpers/utils";
+import DSPPipeline from "@/components/dsp/DSPPipeline.vue";
+import DSPSlider from "@/components/dsp/DSPSlider.vue";
+import DSPParametricEQ from "@/components/dsp/DSPParametricEQ.vue";
+
+const { t } = useI18n();
+const router = useRouter();
+
+const props = defineProps<{
+  playerId?: string;
+}>();
+
+const dsp = ref<DSPConfig>();
+const selectedStage = ref<number | null | "input" | "output">(null);
+const showAddFilterDialog = ref(false);
+const newFilterType = ref(DSPFilterType.PARAMETRIC_EQ);
+const windowWidth = ref(window.innerWidth);
+const isMobile = computed(() => windowWidth.value < 1300);
+
+const filterTypes = Object.values(DSPFilterType).map((value) => {
+  return {
+    value: value,
+    title: t(`settings.dsp.types.${value}`),
+  };
+});
+
+// Methods
+const selectStage = (index: number | "input" | "output") => {
+  selectedStage.value = index;
+};
+
+const stageTitle = (index: number | "input" | "output") => {
+  if (index === "input") return t("settings.dsp.input");
+  if (index === "output") return t("settings.dsp.output");
+  return t(`settings.dsp.types.${dsp.value?.filters[index].type}`);
+};
+
+const addFilter = () => {
+  if (!dsp.value) return;
+
+  let filter: DSPFilter;
+
+  switch (newFilterType.value) {
+    case DSPFilterType.PARAMETRIC_EQ:
+      filter = {
+        enabled: true,
+        type: DSPFilterType.PARAMETRIC_EQ,
+        bands: [],
+      };
+      break;
+
+    default:
+      return;
+  }
+
+  dsp.value.filters.push(filter);
+  showAddFilterDialog.value = false;
+  selectStage(dsp.value.filters.length - 1); // Select the newly added filter
+};
+
+const moveFilter = (index: number, direction: "up" | "down") => {
+  if (!dsp.value) return;
+
+  const newIndex = direction === "up" ? index - 1 : index + 1;
+
+  if (newIndex < 0 || newIndex >= dsp.value.filters.length) return;
+
+  const [movedFilter] = dsp.value.filters.splice(index, 1);
+  dsp.value.filters.splice(newIndex, 0, movedFilter);
+
+  if (selectedStage.value === index) {
+    selectedStage.value = newIndex;
+  } else if (selectedStage.value === newIndex) {
+    selectedStage.value = index;
+  }
+};
+
+const removeFilter = (index: number) => {
+  if (selectedStage.value === index) selectedStage.value = "input";
+  dsp.value?.filters.splice(index, 1);
+};
+
+// Watchers
+
+const handleResize = () => {
+  windowWidth.value = window.innerWidth;
+};
+window.addEventListener("resize", handleResize);
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+});
+
+watch(
+  isMobile,
+  (mobile) => {
+    if (!mobile && selectedStage.value === null) {
+      selectStage("input");
+    }
+  },
+  { immediate: true },
+);
+const playerName = computed(() =>
+  getPlayerName(api.players[props.playerId!], 27),
+);
+
+watch(
+  () => props.playerId,
+  async (val) => {
+    if (val) {
+      dsp.value = await api.getDSPConfig(val);
+    }
+  },
+  { immediate: true },
+);
+
+// Debounced save, to prevent too many requests, but still be responsive
+let saveTimeout: ReturnType<typeof setTimeout> | null = null;
+const debouncedSave = (newVal: DSPConfig) => {
+  if (saveTimeout) clearTimeout(saveTimeout);
+  saveTimeout = setTimeout(async () => {
+    if (props.playerId) {
+      await api.saveDSPConfig(props.playerId, newVal);
+    }
+  }, 2000);
+};
+
+watch(
+  dsp,
+  (old_val, newVal) => {
+    if (old_val === null) return; // We haven't changed anything yet
+    if (newVal) debouncedSave(newVal);
+  },
+  { deep: true },
+);
+</script>

From 6a98d72559d01b612e876e98b0d162152f6789ba Mon Sep 17 00:00:00 2001
From: Maxim Raznatovski <nda.mr43@gmail.com>
Date: Wed, 27 Nov 2024 14:01:33 +0100
Subject: [PATCH 6/8] Feat: Add support for the ToneControl DSP Filter

This is a simple 3 band equalizer that replaces the old CONF_EQ_BASS,
CONF_EQ_MID and CONF_EQ_TREBLE options.
---
 src/components/dsp/DSPToneControl.vue | 44 +++++++++++++++++++++++++++
 src/plugins/api/interfaces.ts         | 10 +++++-
 src/translations/en.json              |  8 ++++-
 src/views/settings/EditPlayerDsp.vue  | 21 +++++++++++--
 4 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 src/components/dsp/DSPToneControl.vue

diff --git a/src/components/dsp/DSPToneControl.vue b/src/components/dsp/DSPToneControl.vue
new file mode 100644
index 00000000..d5e9ea4f
--- /dev/null
+++ b/src/components/dsp/DSPToneControl.vue
@@ -0,0 +1,44 @@
+<template>
+  <v-card-item>
+    <DSPSlider
+      v-model="tone_control.bass_level"
+      :type="{
+        min: -10,
+        max: 10,
+        step: 0.1,
+        label: $t('settings.dsp.tone_control.bass_level'),
+        unit: 'dB',
+      }"
+    />
+  </v-card-item>
+  <v-card-item>
+    <DSPSlider
+      v-model="tone_control.mid_level"
+      :type="{
+        min: -10,
+        max: 10,
+        step: 0.1,
+        label: $t('settings.dsp.tone_control.mid_level'),
+        unit: 'dB',
+      }"
+    />
+  </v-card-item>
+  <v-card-item>
+    <DSPSlider
+      v-model="tone_control.treble_level"
+      :type="{
+        min: -10,
+        max: 10,
+        step: 0.1,
+        label: $t('settings.dsp.tone_control.treble_level'),
+        unit: 'dB',
+      }"
+    />
+  </v-card-item>
+</template>
+<script setup lang="ts">
+import { ToneControlFilter } from "@/plugins/api/interfaces";
+import DSPSlider from "./DSPSlider.vue";
+
+const tone_control = defineModel<ToneControlFilter>({ required: true });
+</script>
diff --git a/src/plugins/api/interfaces.ts b/src/plugins/api/interfaces.ts
index 9a556ed5..11e12d59 100644
--- a/src/plugins/api/interfaces.ts
+++ b/src/plugins/api/interfaces.ts
@@ -9,6 +9,7 @@ export const MASS_LOGO_ONLINE =
 
 export enum DSPFilterType {
   PARAMETRIC_EQ = "parametric_eq",
+  TONE_CONTROL = "tone_control",
 }
 
 export enum ParametricEQBandType {
@@ -40,8 +41,15 @@ export interface ParametricEQFilter extends DSPFilterBase {
   bands: Array<ParametricEQBand>;
 }
 
+export interface ToneControlFilter extends DSPFilterBase {
+  type: DSPFilterType.TONE_CONTROL;
+  bass_level: number;
+  mid_level: number;
+  treble_level: number;
+}
+
 // Union type for all possible filters
-export type DSPFilter = ParametricEQFilter;
+export type DSPFilter = ParametricEQFilter | ToneControlFilter;
 
 // Main DSP chain configuration
 export interface DSPConfig {
diff --git a/src/translations/en.json b/src/translations/en.json
index c002b51a..cfe90638 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -450,13 +450,19 @@
                     "notch": "Notch"
                 }
             },
+            "tone_control": {
+                "bass_level": "Bass Level",
+                "mid_level": "Mid Level",
+                "treble_level": "Treble Level"
+            },
             "parameter": {
                 "frequency": "Frequency",
                 "gain": "Gain",
                 "q_factor": "Q Factor"
             },
             "types": {
-                "parametric_eq": "Parametric EQ"
+                "parametric_eq": "Parametric EQ",
+                "tone_control": "Tone Control"
             }
         }
     },
diff --git a/src/views/settings/EditPlayerDsp.vue b/src/views/settings/EditPlayerDsp.vue
index d3840ce8..a3b89fcb 100644
--- a/src/views/settings/EditPlayerDsp.vue
+++ b/src/views/settings/EditPlayerDsp.vue
@@ -102,7 +102,13 @@
               v-if="
                 dsp.filters[selectedStage].type === DSPFilterType.PARAMETRIC_EQ
               "
-              v-model="dsp.filters[selectedStage]"
+              v-model="dsp.filters[selectedStage] as ParametricEQFilter"
+            />
+            <DSPToneControl
+              v-if="
+                dsp.filters[selectedStage].type === DSPFilterType.TONE_CONTROL
+              "
+              v-model="dsp.filters[selectedStage] as ToneControlFilter"
             />
           </v-card>
         </v-col>
@@ -142,11 +148,14 @@ import {
   ParametricEQBandType,
   DSPFilter,
   DSPFilterType,
+  ParametricEQFilter,
+  ToneControlFilter,
 } from "@/plugins/api/interfaces";
 import { getPlayerName } from "@/helpers/utils";
 import DSPPipeline from "@/components/dsp/DSPPipeline.vue";
 import DSPSlider from "@/components/dsp/DSPSlider.vue";
 import DSPParametricEQ from "@/components/dsp/DSPParametricEQ.vue";
+import DSPToneControl from "@/components/dsp/DSPToneControl.vue";
 
 const { t } = useI18n();
 const router = useRouter();
@@ -193,7 +202,15 @@ const addFilter = () => {
         bands: [],
       };
       break;
-
+    case DSPFilterType.TONE_CONTROL:
+      filter = {
+        enabled: true,
+        type: DSPFilterType.TONE_CONTROL,
+        bass_level: 0,
+        mid_level: 0,
+        treble_level: 0,
+      };
+      break;
     default:
       return;
   }

From 2f06d50df801030193ccc52b663875775756d593 Mon Sep 17 00:00:00 2001
From: Maxim Raznatovski <nda.mr43@gmail.com>
Date: Mon, 2 Dec 2024 10:09:56 +0100
Subject: [PATCH 7/8] Fix: Increase responsiveness of DSP Editor on smaller
 screens

---
 src/components/dsp/DSPParametricEQ.vue | 3 ++-
 src/views/settings/EditPlayerDsp.vue   | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/dsp/DSPParametricEQ.vue b/src/components/dsp/DSPParametricEQ.vue
index efb2fc13..32b5c945 100644
--- a/src/components/dsp/DSPParametricEQ.vue
+++ b/src/components/dsp/DSPParametricEQ.vue
@@ -399,7 +399,8 @@ const drawGrid = (ctx: CanvasRenderingContext2D, viewport: Viewport) => {
 
   // Draw gain lines
   const gains = [];
-  const gainStep = (viewport.max_gain - viewport.min_gain) / 10;
+  const gainRange = viewport.max_gain - viewport.min_gain;
+  const gainStep = Math.ceil(gainRange / (viewport.height / 30));
 
   for (
     let gain = viewport.min_gain;
diff --git a/src/views/settings/EditPlayerDsp.vue b/src/views/settings/EditPlayerDsp.vue
index a3b89fcb..9a6a4444 100644
--- a/src/views/settings/EditPlayerDsp.vue
+++ b/src/views/settings/EditPlayerDsp.vue
@@ -7,11 +7,11 @@
       }}</v-toolbar-title>
     </v-toolbar>
 
-    <v-container>
+    <v-container class="pa-4">
       <v-alert v-if="!dsp.enabled" type="info" class="mt-4" color="transparent">
         {{ $t("settings.dsp.disabled_message") }}
       </v-alert>
-      <v-row>
+      <v-row :class="{ 'justify-center': isMobile }" class="flex-nowrap">
         <!-- Timeline Column -->
         <v-col
           v-if="!isMobile || selectedStage === null"
@@ -30,7 +30,7 @@
         </v-col>
 
         <!-- Filter Settings Panel -->
-        <v-col v-if="selectedStage != null">
+        <v-col v-if="selectedStage != null" style="min-width: 0">
           <!-- Toolbar of the selected item -->
           <v-toolbar density="compact">
             <v-btn

From c9aa17564f38a1d7763e731da791c17a2d532051 Mon Sep 17 00:00:00 2001
From: Maxim Raznatovski <nda.mr43@gmail.com>
Date: Mon, 2 Dec 2024 10:37:16 +0100
Subject: [PATCH 8/8] Refactor: Use vuetifys builtin method for mobile
 detection

---
 src/views/settings/EditPlayerDsp.vue | 25 +++++++++----------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/views/settings/EditPlayerDsp.vue b/src/views/settings/EditPlayerDsp.vue
index 9a6a4444..329d7275 100644
--- a/src/views/settings/EditPlayerDsp.vue
+++ b/src/views/settings/EditPlayerDsp.vue
@@ -11,12 +11,12 @@
       <v-alert v-if="!dsp.enabled" type="info" class="mt-4" color="transparent">
         {{ $t("settings.dsp.disabled_message") }}
       </v-alert>
-      <v-row :class="{ 'justify-center': isMobile }" class="flex-nowrap">
+      <v-row :class="{ 'justify-center': mobile }" class="flex-nowrap">
         <!-- Timeline Column -->
         <v-col
-          v-if="!isMobile || selectedStage === null"
+          v-if="!mobile || selectedStage === null"
           class="flex-grow-0 flex-shrink-0"
-          :class="{ 'border-e pr-4': !isMobile }"
+          :class="{ 'border-e pr-4': !mobile }"
           align-self="start"
         >
           <DSPPipeline
@@ -34,7 +34,7 @@
           <!-- Toolbar of the selected item -->
           <v-toolbar density="compact">
             <v-btn
-              v-if="isMobile"
+              v-if="mobile"
               class="hidden-xs-only"
               icon
               @click="selectedStage = null"
@@ -45,7 +45,7 @@
             <v-btn
               v-if="
                 typeof selectedStage === 'number' &&
-                !isMobile &&
+                !mobile &&
                 selectedStage > 0
               "
               icon
@@ -56,7 +56,7 @@
             <v-btn
               v-if="
                 typeof selectedStage === 'number' &&
-                !isMobile &&
+                !mobile &&
                 selectedStage < dsp.filters.length - 1
               "
               icon
@@ -142,6 +142,7 @@
 import { ref, computed, watch, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
+import { useDisplay } from "vuetify";
 import { api } from "@/plugins/api";
 import {
   DSPConfig,
@@ -169,7 +170,7 @@ const selectedStage = ref<number | null | "input" | "output">(null);
 const showAddFilterDialog = ref(false);
 const newFilterType = ref(DSPFilterType.PARAMETRIC_EQ);
 const windowWidth = ref(window.innerWidth);
-const isMobile = computed(() => windowWidth.value < 1300);
+const { mobile } = useDisplay();
 
 const filterTypes = Object.values(DSPFilterType).map((value) => {
   return {
@@ -244,16 +245,8 @@ const removeFilter = (index: number) => {
 
 // Watchers
 
-const handleResize = () => {
-  windowWidth.value = window.innerWidth;
-};
-window.addEventListener("resize", handleResize);
-onUnmounted(() => {
-  window.removeEventListener("resize", handleResize);
-});
-
 watch(
-  isMobile,
+  mobile,
   (mobile) => {
     if (!mobile && selectedStage.value === null) {
       selectStage("input");