style input

packages/superdough/sampler.mjs

@@ -209,14 +209,15 @@ export const samples = async (sampleMap, baseUrl = sampleMap._base || '', option
   const { prebake, tag } = options;
   processSampleMap(
     sampleMap,
-    (key, value) =>
-      registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, value), {
+    (key, value) => {
+      return registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, value), {
         type: 'sample',
         samples: value,
         baseUrl,
         prebake,
         tag,
-      }),
+      });
+    },
     baseUrl,
   );
 };

website/src/repl/FileUpload.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-export default function FileUpload({ onUpload }) {
-  let fileUploadRef = React.createRef();
-  function mapFiles(soundFiles) {
-    const files = Array.from(soundFiles).map((soundFile) => {
-      const file = { name: soundFile.name, path: URL.createObjectURL(soundFile) };
-      return file;
-    });
-    onUpload(files);
-  }
-  return (
-    <>
-      <input
-        key="uploadREf"
-        ref={fileUploadRef}
-        id="audio_file"
-        type="file"
-        directory=""
-        webkitdirectory=""
-        multiple
-        accept="audio/*"
-        onChange={() => {
-          mapFiles(fileUploadRef.current.files);
-        }}
-      />
-      <input
-        key="uploadUI"
-        className="screen-button-overlay"
-        type="button"
-        onMouseDown={() => fileUploadRef.current.click()}
-      />
-    </>
-  );
-}

website/src/repl/Footer.jsx

@@ -10,7 +10,7 @@ import { useSettings, settingsMap, setActiveFooter, defaultSettings } from '../s
 import { getAudioContext, soundMap } from '@strudel.cycles/webaudio';
 import { useStore } from '@nanostores/react';
 import { FilesTab } from './FilesTab';
-import FileUpload from './FileUpload';
+import ImportSoundsButton from './ImportSoundsButton';
 
 const TAURI = window.__TAURI__;
 
@@ -243,7 +243,7 @@ function SoundsTab() {
   });
   return (
     <div id="sounds-tab" className="flex flex-col w-full h-full dark:text-white text-stone-900">
-      <div className="px-2 pb-2 flex-none">
+      <div className="px-2 pb-2 flex">
         <ButtonGroup
           value={soundsFilter}
           onChange={(value) => settingsMap.setKey('soundsFilter', value)}
@@ -254,6 +254,7 @@ function SoundsTab() {
             user: 'User',
           }}
         ></ButtonGroup>
+        <ImportSoundsButton onComplete={() => settingsMap.setKey('soundsFilter', 'user')} />
       </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 }]) => (
@@ -425,7 +426,6 @@ function SettingsTab({ scheduler }) {
             onChange={(fontFamily) => settingsMap.setKey('fontFamily', fontFamily)}
           />
         </FormItem>
-        <FileUpload onUpload={(files) => console.log(files)} />
         <FormItem label="Font Size">
           <NumberSlider
             value={fontSize}

website/src/repl/ImportSoundsButton.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { isAudioFile } from './files.mjs';
+
+//choose a directory to locally import samples
+export default function ImportSoundsButton({ onComplete }) {
+  let fileUploadRef = React.createRef();
+  function mapFiles(soundFiles) {
+    const sounds = new Map();
+    Array.from(soundFiles)
+      .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' }))
+      .forEach((soundFile) => {
+        const name = soundFile.name;
+        if (!isAudioFile(name)) {
+          return;
+        }
+        const splitRelativePath = soundFile.webkitRelativePath?.split('/');
+        const parentDirectory = splitRelativePath[splitRelativePath.length - 2];
+        const soundPath = URL.createObjectURL(soundFile);
+        const soundPaths = sounds.get(parentDirectory) ?? new Set();
+        soundPaths.add(soundPath);
+
+        sounds.set(parentDirectory, soundPaths);
+      });
+    sounds.forEach((soundPaths, key) => {
+      const value = Array.from(soundPaths);
+      registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, value), {
+        type: 'sample',
+        samples: value,
+        baseUrl: undefined,
+        prebake: false,
+        tag: undefined,
+      });
+    });
+    onComplete();
+  }
+
+  return (
+    <label
+      style={{ alignItems: 'center' }}
+      className="flex bg-background ml-2 pl-2 pr-2 max-w-[300px] rounded-md hover:opacity-50"
+    >
+      <input
+        ref={fileUploadRef}
+        id="audio_file"
+        style={{ display: 'none' }}
+        type="file"
+        directory=""
+        webkitdirectory=""
+        multiple
+        accept="audio/*"
+        onChange={() => {
+          mapFiles(fileUploadRef.current.files);
+        }}
+      />
+      import sounds
+    </label>
+  );
+}