Feature: synth preset customization (#14)

* refactor: move sequenceOption type and defaultValue

* add config feature

* refactor ui

* fix

* feat: save synth config

* update app version

.prettierrc.yaml

@@ -12,7 +12,7 @@ plugins:
   - "prettier-plugin-organize-imports"
   - "prettier-plugin-tailwindcss"
 pluginSearchDirs:
-  - "."
+  - "./src/"
 overrides:
   - files: "*.svelte"
     options:

.vscode/settings.json

@@ -19,6 +19,7 @@
   "vs-code-prettier-eslint.prettierLast": false, // set as "true" to run 'prettier' last not first
   "prettier.documentSelectors": ["**/*.svelte"],
   "prettier.configPath": ".prettierrc.yaml",
+  "prettier.ignorePath": ".prettierignore",
   "[svelte]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
@@ -35,9 +36,11 @@
   "cSpell.words": [
     "ACRN",
     "APPCONFIG",
+    "fatsine",
     "headphonejames",
     "imgs",
     "Neuromodulation",
+    "testid",
     "Unsubscriber"
   ],
   "markdownlint.config": {

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "tinnitus-reducer-ACRN",
-    "version": "0.1.3"
+    "version": "0.2.0"
   },
   "tauri": {
     "allowlist": {
@@ -68,7 +68,9 @@
         "resizable": true,
         "title": "tinnitus reducer ACRN",
         "width": 800,
-        "height": 600
+        "minWidth": 450,
+        "height": 600,
+        "minHeight": 200
       }
     ]
   }

src/App.svelte

@@ -12,6 +12,9 @@
     theme,
     pan,
     clientWidth,
+    loopRepeat,
+    restLength,
+    duration,
   } from "./lib/stores";
   import FrequencyController from "./lib/FrequencyController.svelte";
   import PlayController from "./lib/PlayController.svelte";
@@ -27,7 +30,7 @@
   import Navbar from "./lib/nav/Navbar.svelte";
   import ConfigPanel from "./lib/config_panel/ConfigPanel.svelte";
   import { isTauri } from "./lib/utils";
-  import type { SettingsScheme } from "./lib/constants";
+  import type { SettingsScheme } from "./lib/stores";
 
   let unsubscribeStores: Unsubscriber[] | undefined = undefined;
   let unsubscribeLazySave: Unsubscriber | undefined = undefined;
@@ -68,6 +71,9 @@
     $bpm = [settings.bpm];
     $pan = [settings.pan];
     $theme = settings.theme;
+    $loopRepeat = [settings.loopRepeat];
+    $restLength = [settings.restLength];
+    $duration = [settings.duration];
   }
 
   // * Setup Tone.js

src/lib/Sequence.svelte

@@ -83,18 +83,6 @@
     return synth;
   }
 
-  export type SequenceOption = {
-    loopRepeat: number;
-    restLength: number;
-    duration: Tone.Unit.Time;
-  };
-
-  export const defaultSequenceOption: SequenceOption = {
-    loopRepeat: 3,
-    restLength: 2,
-    duration: "4n",
-  };
-
   /**
    * Create a sequence of frequencies and start it.
    * TODO: Refactor the code inside the Tone.Sequence
@@ -105,7 +93,7 @@
   export function createSequence(
     synth: PolySynth | Synth,
     frequencies: number[],
-    { loopRepeat, restLength, duration } = defaultSequenceOption
+    { loopRepeat, restLength, duration } = DEFAULT_SEQUENCE_OPTION
   ): Sequence {
     let currentFrequencies = shuffledFrequencies(frequencies);
 
@@ -139,7 +127,7 @@
     oldSeq: Sequence | undefined,
     synth: PolySynth | Synth | undefined,
     frequencies: number[],
-    option = defaultSequenceOption
+    option = DEFAULT_SEQUENCE_OPTION
   ): Sequence | undefined {
     if (synth) {
       oldSeq?.dispose();
@@ -155,13 +143,27 @@
 <script lang="ts">
   import { onDestroy, onMount } from "svelte";
 
-  import { derived } from "svelte/store";
+  import { derived, type Readable } from "svelte/store";
   import type { Panner, PolySynth, Sequence, Synth, SynthOptions } from "tone";
 
   import * as Tone from "tone";
-  import { SHEET_RANDOM_FREQUENCY, SHEET_REST } from "./constants";
+  import {
+    DEFAULT_SEQUENCE_OPTION,
+    SHEET_RANDOM_FREQUENCY,
+    SHEET_REST,
+  } from "./constants";
   import { createPanner } from "./Oscillator.svelte";
-  import { isPlaying, mode, frequency, bpm, pan } from "./stores";
+  import {
+    isPlaying,
+    mode,
+    frequency,
+    bpm,
+    pan,
+    loopRepeat,
+    restLength,
+    duration,
+    type SequenceOption,
+  } from "./stores";
 
   let synth: PolySynth | undefined = undefined;
   let panner: Panner | undefined = undefined;
@@ -170,6 +172,14 @@
   const frequencies = derived(frequency, $frequency =>
     generateFrequencies($frequency[0])
   );
+  const sequenceOption: Readable<SequenceOption> = derived(
+    [loopRepeat, restLength, duration],
+    ([$loopRepeat, $restLength, $duration]) => ({
+      loopRepeat: $loopRepeat[0],
+      restLength: $restLength[0],
+      duration: $duration[0],
+    })
+  );
 
   onMount(() => {
     panner = createPanner();
@@ -187,11 +197,7 @@
   // * Generate sequence of frequencies
   $: {
     if ($isPlaying) {
-      seq = updatedSequence(seq, synth, $frequencies, {
-        loopRepeat: 3,
-        restLength: 2 * 4,
-        duration: "4n",
-      });
+      seq = updatedSequence(seq, synth, $frequencies, $sequenceOption);
     }
   }