diff --git a/website/src/repl/components/panel/SoundsTab.jsx b/website/src/repl/components/panel/SoundsTab.jsx index 8b7b36a8..73e05de3 100644 --- a/website/src/repl/components/panel/SoundsTab.jsx +++ b/website/src/repl/components/panel/SoundsTab.jsx @@ -1,7 +1,7 @@ import useEvent from '@src/useEvent.mjs'; import { useStore } from '@nanostores/react'; import { getAudioContext, soundMap, connectToDestination } from '@strudel/webaudio'; -import React, { useMemo, useRef } from 'react'; +import React, { useMemo, useRef, useState } from 'react'; import { settingsMap, useSettings } from '../../../settings.mjs'; import { ButtonGroup } from './Forms.jsx'; import ImportSoundsButton from './ImportSoundsButton.jsx'; @@ -12,15 +12,20 @@ const getSamples = (samples) => export function SoundsTab() { const sounds = useStore(soundMap); const { soundsFilter } = useSettings(); + const [search, setSearch] = useState(''); + const soundEntries = useMemo(() => { - let filtered = Object.entries(sounds) - .filter(([key]) => !key.startsWith('_')) - .sort((a, b) => a[0].localeCompare(b[0])); if (!sounds) { return []; } + + let filtered = Object.entries(sounds) + .filter(([key]) => !key.startsWith('_')) + .sort((a, b) => a[0].localeCompare(b[0])) + .filter(([name]) => name.toLowerCase().includes(search.toLowerCase())); + if (soundsFilter === 'user') { - return filtered.filter(([key, { data }]) => !data.prebake); + return filtered.filter(([_, { data }]) => !data.prebake); } if (soundsFilter === 'drums') { return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag === 'drum-machines'); @@ -32,9 +37,11 @@ export function SoundsTab() { return filtered.filter(([_, { data }]) => ['synth', 'soundfont'].includes(data.type)); } return filtered; - }, [sounds, soundsFilter]); + }, [sounds, soundsFilter, search]); + // holds mutable ref to current triggered sound const trigRef = useRef(); + // stop current sound on mouseup useEvent('mouseup', () => { const t = trigRef.current; @@ -43,8 +50,17 @@ export function SoundsTab() { ref?.stop(getAudioContext().currentTime + 0.01); }); }); + return (