Merge pull request #1102 from daslyfe/upload_individual_samples

Samples tab improvements
This commit is contained in:
Jade (Rose) Rowland 2024-05-17 08:43:58 -04:00 committed by GitHub
commit def5bc858f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 7 deletions

View File

@ -40,8 +40,10 @@ export const registerSamplesFromDB = (config = userSamplesDBConfig, onComplete =
if (!isAudioFile(title)) {
return;
}
const splitRelativePath = soundFile.id?.split('/');
const parentDirectory = splitRelativePath[splitRelativePath.length - 2];
const splitRelativePath = soundFile.id.split('/');
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),

View File

@ -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();
}}

View File

@ -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)}