elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-27 05:28:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding search bar in soundtab.jsx

Browse Source
This commit is contained in:
Raphaël Forment 2024-09-14 11:39:59 +02:00
parent a40219ba06
commit 6cb61ade03
2 changed files with 9415 additions and 7194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16563
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

46
website/src/repl/components/panel/SoundsTab.jsx
View File

@ -1,7 +1,7 @@
import useEvent from '@src/useEvent.mjs'; import useEvent from '@src/useEvent.mjs';
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { getAudioContext, soundMap, connectToDestination } from '@strudel/webaudio'; 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 { settingsMap, useSettings } from '../../../settings.mjs';
import { ButtonGroup } from './Forms.jsx'; import { ButtonGroup } from './Forms.jsx';
import ImportSoundsButton from './ImportSoundsButton.jsx'; import ImportSoundsButton from './ImportSoundsButton.jsx';
@ -12,29 +12,38 @@ const getSamples = (samples) =>
export function SoundsTab() { export function SoundsTab() {
const sounds = useStore(soundMap); const sounds = useStore(soundMap);
const { soundsFilter } = useSettings(); const { soundsFilter } = useSettings();
const [search, setSearch] = useState('');
const soundEntries = useMemo(() => { const soundEntries = useMemo(() => {
let filtered = Object.entries(sounds)
.filter(([key]) => !key.startsWith('_'))
.sort((a, b) => a[0].localeCompare(b[0]));
if (!sounds) { if (!sounds) {
return []; return [];
} }
let filtered = Object.entries(sounds)
.filter(([key]) => !key.startsWith('_'))
.sort((a, b) => a[0].localeCompare(b[0]));
if (soundsFilter === 'user') { if (soundsFilter === 'user') {
return filtered.filter(([key, { data }]) => !data.prebake); filtered = filtered.filter(([key, { data }]) => !data.prebake);
} else if (soundsFilter === 'drums') {
filtered = filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag === 'drum-machines');
} else if (soundsFilter === 'samples') {
filtered = filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag !== 'drum-machines');
} else if (soundsFilter === 'synths') {
filtered = filtered.filter(([_, { data }]) => ['synth', 'soundfont'].includes(data.type));
} }
if (soundsFilter === 'drums') {
return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag === 'drum-machines'); // Apply search filter
} if (search) {
if (soundsFilter === 'samples') { filtered = filtered.filter(([name]) => name.toLowerCase().includes(search.toLowerCase()));
return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag !== 'drum-machines');
}
if (soundsFilter === 'synths') {
return filtered.filter(([_, { data }]) => ['synth', 'soundfont'].includes(data.type));
} }
return filtered; return filtered;
}, [sounds, soundsFilter]); }, [sounds, soundsFilter, search]);
// holds mutable ref to current triggered sound // holds mutable ref to current triggered sound
const trigRef = useRef(); const trigRef = useRef();
// stop current sound on mouseup // stop current sound on mouseup
useEvent('mouseup', () => { useEvent('mouseup', () => {
const t = trigRef.current; const t = trigRef.current;
@ -43,8 +52,17 @@ export function SoundsTab() {
ref?.stop(getAudioContext().currentTime + 0.01); ref?.stop(getAudioContext().currentTime + 0.01);
}); });
}); });
return ( return (
<div id="sounds-tab" className="px-4 flex flex-col w-full h-full dark:text-white text-stone-900"> <div id="sounds-tab" className="px-4 flex flex-col w-full h-full dark:text-white text-stone-900">
<div className="w-full ml-2 mb-2 top-0 sticky">
<input
className="w-full p-1 bg-background rounded-md"
placeholder="Search"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
</div>
<div className="pb-2 flex shrink-0 flex-wrap"> <div className="pb-2 flex shrink-0 flex-wrap">
<ButtonGroup <ButtonGroup
value={soundsFilter} value={soundsFilter}