From e63a5d10c8191d9a2f5ae5bf2a911219f85d6218 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 16 Mar 2023 15:21:16 +0100
Subject: [PATCH] regroup sounds - extra tab for drum-machines - combine synths
 and soundfonts

---
 packages/soundfonts/fontloader.mjs |  2 +-
 packages/webaudio/sampler.mjs      |  3 +-
 website/src/repl/Footer.jsx        | 48 ++++++++----------------------
 website/src/repl/prebake.mjs       |  7 +++--
 4 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/packages/soundfonts/fontloader.mjs b/packages/soundfonts/fontloader.mjs
index cda396fa..c28dfb2f 100644
--- a/packages/soundfonts/fontloader.mjs
+++ b/packages/soundfonts/fontloader.mjs
@@ -140,7 +140,7 @@ export function registerSoundfonts() {
         };
         return { node: envelope, stop };
       },
-      { type: 'soundfont', prebake: true },
+      { type: 'soundfont', prebake: true, fonts },
     );
   });
 }
diff --git a/packages/webaudio/sampler.mjs b/packages/webaudio/sampler.mjs
index 1f1325b7..48c45e11 100644
--- a/packages/webaudio/sampler.mjs
+++ b/packages/webaudio/sampler.mjs
@@ -129,7 +129,7 @@ export const samples = async (sampleMap, baseUrl = sampleMap._base || '', option
         throw new Error(`error loading "${sampleMap}"`);
       });
   }
-  const { prebake } = options;
+  const { prebake, tag } = options;
   Object.entries(sampleMap).forEach(([key, value]) => {
     if (typeof value === 'string') {
       value = [value];
@@ -155,6 +155,7 @@ export const samples = async (sampleMap, baseUrl = sampleMap._base || '', option
       samples: value,
       baseUrl,
       prebake,
+      tag,
     });
   });
 };
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 2bce3e70..56950ef4 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -191,34 +191,6 @@ function ConsoleTab({ log }) {
   );
 }
 
-/*
-function groupBy(obj = {}, getter) {
-  const grouped = Object.entries(obj).reduce((acc, [key, value]) => {
-    const propValue = getter(value, key);
-    if (!acc.has(propValue)) {
-      acc.set(propValue, new Map());
-    }
-    acc.get(propValue).set(key, value);
-    return acc;
-  }, new Map());
-  return grouped;
-}
- const grouped = useMemo(() => {
-  if (!sounds) {
-    return {};
-  }
-  return groupBy(sounds, (s) =>
-    s.data.type === 'sample' ? 'Samples from ' + s.data?.baseUrl : 'Type ' + s.data.type,
-  );
-}, [sounds]); 
-
-         {Array.from(grouped).map(([category, sounds]) => (
-        <Fragment key={category}>
-           <h3 className="pb-2 pt-4 text-lg">{category}:</h3>  
-        </Fragment>
-      ))} 
-*/
-
 const getSamples = (samples) =>
   Array.isArray(samples) ? samples.length : typeof samples === 'object' ? Object.values(samples).length : 1;
 
@@ -233,14 +205,14 @@ function SoundsTab() {
     if (soundsFilter === 'user') {
       return filtered.filter(([key, { data }]) => !data.prebake);
     }
+    if (soundsFilter === 'drums') {
+      return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag === 'drum-machines');
+    }
     if (soundsFilter === 'samples') {
-      return filtered.filter(([_, { data }]) => data.type === 'sample');
+      return filtered.filter(([_, { data }]) => data.type === 'sample' && data.tag !== 'drum-machines');
     }
     if (soundsFilter === 'synths') {
-      return filtered.filter(([_, { data }]) => data.type === 'synth');
-    }
-    if (soundsFilter === 'soundfonts') {
-      return filtered.filter(([_, { data }]) => data.type === 'soundfont');
+      return filtered.filter(([_, { data }]) => ['synth', 'soundfont'].includes(data.type));
     }
     return filtered;
   }, [sounds, soundsFilter]);
@@ -260,14 +232,19 @@ function SoundsTab() {
         <ButtonGroup
           value={soundsFilter}
           onChange={(value) => settingsMap.setKey('soundsFilter', value)}
-          items={{ samples: 'Samples', synths: 'Synths', soundfonts: 'Soundfonts', user: 'Custom' }}
+          items={{
+            samples: 'samples',
+            drums: 'drum-machines',
+            synths: 'Synths',
+            user: 'User',
+          }}
         ></ButtonGroup>
       </div>
       <div className="p-2 min-h-0 max-h-full grow overflow-auto font-mono text-sm break-normal">
         {soundEntries.map(([name, { data, onTrigger }]) => (
           <span
             key={name}
-            className="cursor-pointer hover:opacity-50 block"
+            className="cursor-pointer hover:opacity-50"
             onMouseDown={async () => {
               const ctx = getAudioContext();
               const params = {
@@ -287,6 +264,7 @@ function SoundsTab() {
             {' '}
             {name}
             {data?.type === 'sample' ? `(${getSamples(data.samples)})` : ''}
+            {data?.type === 'soundfont' ? `(${data.fonts.length})` : ''}
           </span>
         ))}
         {!soundEntries.length ? 'No custom sounds loaded in this pattern (yet).' : ''}
diff --git a/website/src/repl/prebake.mjs b/website/src/repl/prebake.mjs
index 04ec66a7..b7b848d0 100644
--- a/website/src/repl/prebake.mjs
+++ b/website/src/repl/prebake.mjs
@@ -13,8 +13,11 @@ export async function prebake() {
     // https://api.github.com/repositories/126427031/contents/
     // LICENSE: CC0 general-purpose
     samples(`./vcsl.json`, 'github:sgossner/VCSL/master/', { prebake: true }),
-    samples(`./tidal-drum-machines.json`, 'github:ritchse/tidal-drum-machines/main/machines/', { prebake: true }),
-    samples(`./EmuSP12.json`, `./EmuSP12/`, { prebake: true }),
+    samples(`./tidal-drum-machines.json`, 'github:ritchse/tidal-drum-machines/main/machines/', {
+      prebake: true,
+      tag: 'drum-machines',
+    }),
+    samples(`./EmuSP12.json`, `./EmuSP12/`, { prebake: true, tag: 'drum-machines' }),
     // samples('github:tidalcycles/Dirt-Samples/master'),
   ]);
 }