1import React, { useCallback, useState } from 'react';
2import { registerSamplesFromDB, uploadSamplesToDB, userSamplesDBConfig } from '../../idbutils.mjs';
3
4//choose a directory to locally import samples
5export default function ImportSoundsButton({ onComplete }) {
6  let fileUploadRef = React.createRef();
7  const [isUploading, setIsUploading] = useState(false);
8  const onChange = useCallback(async () => {
9    if (!fileUploadRef.current.files?.length) {
10      return;
11    }
12    setIsUploading(true);
13
14    await uploadSamplesToDB(userSamplesDBConfig, fileUploadRef.current.files).then(() => {
15      registerSamplesFromDB(userSamplesDBConfig, () => {
16        onComplete();
17        setIsUploading(false);
18      });
19    });
20  });
21
22  return (
23    <div>
24      <label
25        style={{ alignItems: 'center', borderColor: 'red', border: 1 }}
26        className="flex bg-background  p-4  w-fit rounded-xl hover:opacity-50 whitespace-nowrap cursor-pointer"
27      >
28        <svg
29          xmlns="http://www.w3.org/2000/svg"
30          fill="none"
31          viewBox="0 0 24 24"
32          strokeWidth={1.5}
33          stroke="currentColor"
34          className="size-6 mr-2"
35        >
36          <path
37            strokeLinecap="round"
38            strokeLinejoin="round"
39            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"
40          />
41        </svg>
42
43        <input
44          disabled={isUploading}
45          ref={fileUploadRef}
46          id="audio_file"
47          style={{ display: 'none' }}
48          type="file"
49          directory=""
50          webkitdirectory=""
51          multiple
52          accept="audio/*, .wav, .mp3, .m4a, .flac, .aac, .ogg"
53          onChange={() => {
54            onChange();
55          }}
56        />
57        {isUploading ? 'importing...' : 'import sounds folder'}
58      </label>
59    </div>
60  );
61}