fix(stage-tamagotchi): persistence for settings of beat sync

packages/stage-pages/src/pages/settings/modules/beat-sync.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import type { AnalyserWorkletParameters } from '@nekopaw/tempora'
 import type { BeatSyncDetectorState } from '@proj-airi/stage-shared/beat-sync'
 
-import { DEFAULT_ANALYSER_WORKLET_PARAMS } from '@nekopaw/tempora'
 import {
+  DEFAULT_BEAT_SYNC_PARAMETERS,
   getBeatSyncInputByteFrequencyData,
   getBeatSyncState,
   listenBeatSyncBeatSignal,
@@ -12,9 +11,11 @@ import {
   updateBeatSyncParameters,
 } from '@proj-airi/stage-shared/beat-sync'
 import { Alert, AudioSpectrumVisualizer } from '@proj-airi/stage-ui/components'
+import { useSettingsBeatSync } from '@proj-airi/stage-ui/stores/settings'
 import { Button, FieldCheckbox, FieldRange, SelectTab } from '@proj-airi/ui'
 import { createTimeline } from 'animejs'
 import { nanoid } from 'nanoid'
+import { storeToRefs } from 'pinia'
 import { computed, onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -22,7 +23,8 @@ const state = ref<BeatSyncDetectorState>()
 const frequencies = ref<number[]>([])
 const totalFreqHistory = ref<number[]>([])
 const isUpdatingFrequencies = ref(false)
-const spectrumScale = ref<'linear' | 'logarithm'>('logarithm')
+const beatSyncSettings = useSettingsBeatSync()
+const { parameters, spectrumScale } = storeToRefs(beatSyncSettings)
 const spectrumScaleOptions = [
   { label: 'Linear', value: 'linear' as const, icon: 'i-solar:chart-2-bold-duotone' },
   { label: 'Logarithm', value: 'logarithm' as const, icon: 'i-solar:chart-bold-duotone' },
@@ -36,15 +38,6 @@ const beatsHistory = ref<Array<{
   normalizedEnergy: number
 }>>([])
 
-const parameters = ref<AnalyserWorkletParameters>({
-  ...DEFAULT_ANALYSER_WORKLET_PARAMS,
-  // Loosen the parameters for easier beat detection by default.
-  // Also makes life easier :)
-  warmup: false,
-  spectralFlux: false,
-  adaptiveThreshold: false,
-})
-
 watch([state, parameters], ([newState, newParameters]) => {
   if (newState?.isActive) {
     updateBeatSyncParameters(toRaw(newParameters))
@@ -84,7 +77,7 @@ function onRippleEnter(el: Element, done: () => void) {
 }
 
 function resetDefaultParameters() {
-  parameters.value = { ...DEFAULT_ANALYSER_WORKLET_PARAMS }
+  parameters.value = { ...DEFAULT_BEAT_SYNC_PARAMETERS }
 }
 
 async function updateFrequencies() {

packages/stage-shared/src/beat-sync/index.ts

@@ -1,3 +1,4 @@
 export * from './detector'
 export * from './eventa'
+export * from './settings'
 export * from './types'

packages/stage-shared/src/beat-sync/settings.ts

@@ -0,0 +1,15 @@
+import type { AnalyserWorkletParameters } from '@nekopaw/tempora'
+
+import { DEFAULT_ANALYSER_WORKLET_PARAMS } from '@nekopaw/tempora'
+
+export type { AnalyserWorkletParameters } from '@nekopaw/tempora'
+export type BeatSyncSpectrumScale = 'linear' | 'logarithm'
+
+export const DEFAULT_BEAT_SYNC_PARAMETERS: AnalyserWorkletParameters = {
+  ...DEFAULT_ANALYSER_WORKLET_PARAMS,
+  // Loosen the parameters for easier beat detection by default.
+  // Also makes life easier :)
+  warmup: false,
+  spectralFlux: false,
+  adaptiveThreshold: false,
+}

packages/stage-ui/src/stores/settings/beat-sync.ts

@@ -0,0 +1,27 @@
+import type { AnalyserWorkletParameters, BeatSyncSpectrumScale } from '@proj-airi/stage-shared/beat-sync'
+
+import { DEFAULT_BEAT_SYNC_PARAMETERS } from '@proj-airi/stage-shared/beat-sync'
+import { useLocalStorageManualReset } from '@proj-airi/stage-shared/composables'
+import { defineStore } from 'pinia'
+
+export const useSettingsBeatSync = defineStore('settings-beat-sync', () => {
+  const parameters = useLocalStorageManualReset<AnalyserWorkletParameters>(
+    'settings/beat-sync/parameters',
+    { ...DEFAULT_BEAT_SYNC_PARAMETERS },
+  )
+  const spectrumScale = useLocalStorageManualReset<BeatSyncSpectrumScale>(
+    'settings/beat-sync/spectrum-scale',
+    'logarithm',
+  )
+
+  function resetState() {
+    parameters.value = { ...DEFAULT_BEAT_SYNC_PARAMETERS }
+    spectrumScale.value = 'logarithm'
+  }
+
+  return {
+    parameters,
+    spectrumScale,
+    resetState,
+  }
+})

packages/stage-ui/src/stores/settings/index.ts

@@ -10,6 +10,7 @@ import { useSettingsTheme } from './theme'
 export * from './analytics'
 // Export sub-stores
 export * from './audio-device'
+export * from './beat-sync'
 export * from './controls-island'
 export * from './general'
 export * from './live2d'