Merge branch 'main' into prepare

Author: prezmop

website/src/repl/components/panel/ImportSoundsButton.jsx

@@ -20,25 +20,42 @@ export default function ImportSoundsButton({ onComplete }) {
   });
 
   return (
-    <label
-      style={{ alignItems: 'center' }}
-      className="flex bg-background ml-2 pl-2 pr-2 max-w-[300px] rounded-md hover:opacity-50 whitespace-nowrap cursor-pointer"
-    >
-      <input
-        disabled={isUploading}
-        ref={fileUploadRef}
-        id="audio_file"
-        style={{ display: 'none' }}
-        type="file"
-        directory=""
-        webkitdirectory=""
-        multiple
-        accept="audio/*, .wav, .mp3, .m4a, .flac, .aac, .ogg"
-        onChange={() => {
-          onChange();
-        }}
-      />
-      {isUploading ? 'importing...' : 'import sounds'}
-    </label>
+    <div>
+      <label
+        style={{ alignItems: 'center', borderColor: 'red', border: 1 }}
+        className="flex bg-background  p-4  w-fit rounded-xl hover:opacity-50 whitespace-nowrap cursor-pointer"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6 mr-2"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M7.5 7.5h-.75A2.25 2.25 0 0 0 4.5 9.75v7.5a2.25 2.25 0 0 0 2.25 2.25h7.5a2.25 2.25 0 0 0 2.25-2.25v-7.5a2.25 2.25 0 0 0-2.25-2.25h-.75m0-3-3-3m0 0-3 3m3-3v11.25m6-2.25h.75a2.25 2.25 0 0 1 2.25 2.25v7.5a2.25 2.25 0 0 1-2.25 2.25h-7.5a2.25 2.25 0 0 1-2.25-2.25v-.75"
+          />
+        </svg>
+
+        <input
+          disabled={isUploading}
+          ref={fileUploadRef}
+          id="audio_file"
+          style={{ display: 'none' }}
+          type="file"
+          directory=""
+          webkitdirectory=""
+          multiple
+          accept="audio/*, .wav, .mp3, .m4a, .flac, .aac, .ogg"
+          onChange={() => {
+            onChange();
+          }}
+        />
+        {isUploading ? 'importing...' : 'import sounds folder'}
+      </label>
+    </div>
   );
 }

website/src/repl/components/panel/SoundsTab.jsx

@@ -14,6 +14,8 @@ export function SoundsTab() {
   const sounds = useStore(soundMap);
   const { soundsFilter } = useSettings();
   const [search, setSearch] = useState('');
+  const { BASE_URL } = import.meta.env;
+  const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
   const soundEntries = useMemo(() => {
     if (!sounds) {
@@ -37,6 +39,9 @@ export function SoundsTab() {
     if (soundsFilter === 'synths') {
       return filtered.filter(([_, { data }]) => ['synth', 'soundfont'].includes(data.type));
     }
+    if (soundsFilter === 'importSounds') {
+      return [];
+    }
     return filtered;
   }, [sounds, soundsFilter, search]);
 
@@ -51,7 +56,6 @@ export function SoundsTab() {
       ref?.stop(getAudioContext().currentTime + 0.01);
     });
   });
-
   return (
     <div id="sounds-tab" className="px-4 flex flex-col w-full h-full text-foreground">
       <Textbox placeholder="Search" value={search} onChange={(v) => setSearch(v)} />
@@ -65,9 +69,9 @@ export function SoundsTab() {
             drums: 'drum-machines',
             synths: 'Synths',
             user: 'User',
+            importSounds: 'import-sounds',
           }}
         ></ButtonGroup>
-        <ImportSoundsButton onComplete={() => settingsMap.setKey('soundsFilter', 'user')} />
       </div>
 
       <div className="min-h-0 max-h-full grow overflow-auto  text-sm break-normal pb-2">
@@ -101,7 +105,55 @@ export function SoundsTab() {
             </span>
           );
         })}
-        {!soundEntries.length ? 'No custom sounds loaded in this pattern (yet).' : ''}
+        {!soundEntries.length && soundsFilter === 'importSounds' ? (
+          <div className="prose dark:prose-invert min-w-full pt-2 pb-8 px-4">
+            <ImportSoundsButton onComplete={() => settingsMap.setKey('soundsFilter', 'user')} />
+            <p>
+              To import sounds into strudel, they must be contained{' '}
+              <a href={`${baseNoTrailing}/learn/samples/#from-disk-via-import-sounds`} target="_blank">
+                within a folder or subfolder
+              </a>
+              . The best way to do this is to upload a “samples” folder containing subfolders of individual sounds or
+              soundbanks (see diagram below).{' '}
+            </p>
+            <pre className="bg-background" key={'sample-diagram'}>
+              {`└─ samples <-- import this folder
+   ├─ swoop
+   │  ├─ swoopshort.wav
+   │  ├─ swooplong.wav
+   │  └─ swooptight.wav
+   └─ smash
+      ├─ smashhigh.wav
+      ├─ smashlow.wav
+      └─ smashmiddle.wav`}
+            </pre>
+            <p>
+              The name of a subfolder corresponds to the sound name under the “user” tab. Multiple samples within a
+              subfolder are all labelled with the same name, but can be accessed using “.n( )” - remember sounds are
+              zero-indexed and in alphabetical order!
+            </p>
+            <p>
+              For more information, and other ways to use your own sounds in strudel,{' '}
+              <a href={`${baseNoTrailing}/learn/samples/#from-disk-via-import-sounds`} target="_blank">
+                check out the docs
+              </a>
+              !
+            </p>
+            <h3>Preview Sounds</h3>
+            <pre className="bg-background" key={'sample-preview'}>
+              n("0 1 2 3 4 5").s("sample-name")
+            </pre>
+            <p>
+              Paste the line above into the main editor to hear the uploaded folder. Remember to use the name of your
+              sample as it appears under the "user" tab.
+            </p>
+          </div>
+        ) : (
+          ''
+        )}
+        {!soundEntries.length && soundsFilter !== 'importSounds'
+          ? 'No custom sounds loaded in this pattern (yet).'
+          : ''}
       </div>
     </div>
   );