Merge pull request #1102 from daslyfe/upload_individual_samples

Samples tab improvements

website/src/repl/idbutils.mjs

@@ -40,8 +40,10 @@ export const registerSamplesFromDB = (config = userSamplesDBConfig, onComplete =
           if (!isAudioFile(title)) {
             return;
           }
-          const splitRelativePath = soundFile.id?.split('/');
+          const splitRelativePath = soundFile.id.split('/');
-          const parentDirectory = splitRelativePath[splitRelativePath.length - 2];
+          const parentDirectory =
+            //fallback to file name before period and seperator if no parent directory
+            splitRelativePath[splitRelativePath.length - 2] ?? soundFile.id.split(/\W+/)[0] ?? 'user';
           const soundPath = soundFile.blob;
           const soundPaths = sounds.get(parentDirectory) ?? new Set();
           soundPaths.add(soundPath);
@@ -114,6 +116,7 @@ const processFilesForIDB = async (files) => {
     Array.from(files)
       .map(async (s) => {
         const title = s.name;
+
         if (!isAudioFile(title)) {
           return;
         }
@@ -121,12 +124,14 @@ const processFilesForIDB = async (files) => {
         const sUrl = URL.createObjectURL(s);
         //fetch the sound and turn it into a buffer array
         const buf = await fetch(sUrl).then((res) => res.arrayBuffer());
-        //create a url blob containing all of the buffer data
+        //create a url base64 containing all of the buffer data
         const base64 = await bufferToDataUrl(buf);
+        const path = s.webkitRelativePath;
+        const id = path?.length ? path : title;
         return {
           title,
           blob: base64,
-          id: s.webkitRelativePath,
+          id,
         };
       })
       .filter(Boolean),

website/src/repl/panel/ImportSoundsButton.jsx

@@ -10,6 +10,7 @@ export default function ImportSoundsButton({ onComplete }) {
       return;
     }
     setIsUploading(true);
+
     await uploadSamplesToDB(userSamplesDBConfig, fileUploadRef.current.files).then(() => {
       registerSamplesFromDB(userSamplesDBConfig, () => {
         onComplete();
@@ -32,7 +33,7 @@ export default function ImportSoundsButton({ onComplete }) {
         directory=""
         webkitdirectory=""
         multiple
-        accept="audio/*"
+        accept="audio/*, .wav, .mp3, .m4a, .flac"
         onChange={() => {
           onChange();
         }}

website/src/repl/panel/SoundsTab.jsx

@@ -13,7 +13,9 @@ export function SoundsTab() {
   const sounds = useStore(soundMap);
   const { soundsFilter } = useSettings();
   const soundEntries = useMemo(() => {
-    let filtered = Object.entries(sounds).filter(([key]) => !key.startsWith('_'));
+    let filtered = Object.entries(sounds)
+      .filter(([key]) => !key.startsWith('_'))
+      .sort((a, b) => a[0].localeCompare(b[0]));
     if (!sounds) {
       return [];
     }
@@ -43,7 +45,7 @@ export function SoundsTab() {
   });
   return (
     <div id="sounds-tab" className="px-4 flex flex-col w-full h-full dark:text-white text-stone-900">
-      <div className="pb-2 flex shrink-0 overflow-auto">
+      <div className="pb-2 flex shrink-0 flex-wrap">
         <ButtonGroup
           value={soundsFilter}
           onChange={(value) => settingsMap.setKey('soundsFilter', value)}