diff --git a/src/renderer/features/visualizer/components/audiomotionanalyzer/presets.ts b/src/renderer/features/visualizer/components/audiomotionanalyzer/presets.ts index 508a94b83..f02a49d1c 100644 --- a/src/renderer/features/visualizer/components/audiomotionanalyzer/presets.ts +++ b/src/renderer/features/visualizer/components/audiomotionanalyzer/presets.ts @@ -1,5 +1,8 @@ +import { nanoid } from 'nanoid'; + export const audiomotionanalyzerPresets = [ { + id: nanoid(), name: 'Preset 1', value: { alphaBars: false, @@ -52,6 +55,7 @@ export const audiomotionanalyzerPresets = [ }, }, { + id: nanoid(), name: 'Preset 2', value: { alphaBars: false, @@ -104,6 +108,7 @@ export const audiomotionanalyzerPresets = [ }, }, { + id: nanoid(), name: 'Preset 3', value: { alphaBars: false, @@ -158,6 +163,7 @@ export const audiomotionanalyzerPresets = [ }, }, { + id: nanoid(), name: 'Preset 4', value: { alphaBars: false, diff --git a/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer-settings-form.tsx b/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer-settings-form.tsx index d19cb75b6..825de019d 100644 --- a/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer-settings-form.tsx +++ b/src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer-settings-form.tsx @@ -1,4 +1,5 @@ import butterchurnPresets from 'butterchurn-presets'; +import { nanoid } from 'nanoid'; import { useEffect, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -390,10 +391,10 @@ const PresetSettings = () => { const [isPasting, setIsPasting] = useState(false); const [pasteValue, setPasteValue] = useState(''); - const applyPreset = (presetName: null | string) => { - if (!presetName) return; + const applyPreset = (presetId: null | string) => { + if (!presetId) return; - const preset = visualizer.audiomotionanalyzer.presets.find((p) => p.name === presetName); + const preset = visualizer.audiomotionanalyzer.presets.find((p) => p.id === presetId); if (!preset) return; @@ -484,7 +485,7 @@ const PresetSettings = () => { if (existingPreset) { // Update existing preset const updatedPresets = visualizer.audiomotionanalyzer.presets.map((p) => - p.name === newPresetName.trim() + p.id === existingPreset.id ? { ...p, value: getCurrentSettingsAsPresetValue(), @@ -499,9 +500,12 @@ const PresetSettings = () => { }, }, }); + + setSelectedPreset(existingPreset.id); } else { // Add new preset const newPreset = { + id: nanoid(), name: newPresetName.trim(), value: getCurrentSettingsAsPresetValue(), }; @@ -513,11 +517,12 @@ const PresetSettings = () => { }, }, }); + + setSelectedPreset(newPreset.id); } setNewPresetName(''); setIsSaving(false); - setSelectedPreset(newPresetName.trim()); }; const getCurrentSettingsAsPresetValue = () => { @@ -579,12 +584,17 @@ const PresetSettings = () => { const handleUpdatePreset = () => { if (!selectedPreset || !newPresetName.trim()) return; + const selectedPresetObj = visualizer.audiomotionanalyzer.presets.find( + (p) => p.id === selectedPreset, + ); + if (!selectedPresetObj) return; + let trimmedName = newPresetName.trim(); - const isRenaming = trimmedName !== selectedPreset; + const isRenaming = trimmedName !== selectedPresetObj.name; if (isRenaming) { const existingNames = visualizer.audiomotionanalyzer.presets - .filter((p) => p.name !== selectedPreset) + .filter((p) => p.id !== selectedPreset) .map((p) => p.name); if (existingNames.includes(trimmedName)) { @@ -600,7 +610,7 @@ const PresetSettings = () => { } const updatedPresets = visualizer.audiomotionanalyzer.presets.map((p) => - p.name === selectedPreset + p.id === selectedPreset ? { ...p, name: trimmedName, @@ -621,14 +631,13 @@ const PresetSettings = () => { setNewPresetName(''); setIsRenaming(false); - setSelectedPreset(trimmedName); }; const handleDeletePreset = () => { if (!selectedPreset) return; const updatedPresets = visualizer.audiomotionanalyzer.presets.filter( - (p) => p.name !== selectedPreset, + (p) => p.id !== selectedPreset, ); setSettings({ @@ -797,7 +806,7 @@ const PresetSettings = () => { const presetOptions = useMemo(() => { return visualizer.audiomotionanalyzer.presets.map((preset) => ({ label: preset.name, - value: preset.name, + value: preset.id, })); }, [visualizer.audiomotionanalyzer.presets]); @@ -907,8 +916,13 @@ const PresetSettings = () => { <>