Use ArrayBuffer instead of Blob for storing samples in IndexedDb (fixes Safari)

package.json

@@ -65,6 +65,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "eslint-plugin-simple-import-sort": "^10.0.0",
+    "fake-indexeddb": "^6.2.5",
     "postcss": "^8.4.49",
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.14",

src/ui/idb.test.ts

@@ -0,0 +1,165 @@
+import 'fake-indexeddb/auto'
+
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+import { db } from './idb'
+
+describe('IndexedDB Storage (Safari compatibility)', () => {
+  beforeEach(async () => {
+    // Clear database before each test
+    await db.samples.clear()
+  })
+
+  afterEach(async () => {
+    // Clean up
+    await db.samples.clear()
+  })
+
+  it('should store and retrieve ArrayBuffer with MIME type', async () => {
+    const originalData = 'test audio data'
+    const blob = new Blob([originalData], { type: 'audio/wav' })
+    const arrayBuffer = await blob.arrayBuffer()
+
+    // Store
+    await db.samples.put({
+      name: 'test.wav',
+      url: '/test.wav',
+      arrayBuffer,
+      mimeType: 'audio/wav',
+    })
+
+    // Retrieve
+    const retrieved = await db.samples.where('url').equals('/test.wav').first()
+
+    expect(retrieved).toBeDefined()
+    expect(retrieved?.mimeType).toBe('audio/wav')
+    expect(retrieved?.arrayBuffer).toBeInstanceOf(ArrayBuffer)
+
+    // Verify data integrity: convert back to Blob and check contents
+    const reconstructedBlob = new Blob([retrieved!.arrayBuffer], {
+      type: retrieved!.mimeType,
+    })
+    const text = await reconstructedBlob.text()
+    expect(text).toBe(originalData)
+  })
+
+  it('should handle empty ArrayBuffer', async () => {
+    const emptyBlob = new Blob([], { type: 'audio/wav' })
+    const arrayBuffer = await emptyBlob.arrayBuffer()
+
+    await db.samples.put({
+      name: 'empty.wav',
+      url: '/empty.wav',
+      arrayBuffer,
+      mimeType: 'audio/wav',
+    })
+
+    const retrieved = await db.samples.where('url').equals('/empty.wav').first()
+    expect(retrieved).toBeDefined()
+    expect(retrieved?.arrayBuffer.byteLength).toBe(0)
+  })
+
+  it('should handle large ArrayBuffer (simulating audio file)', async () => {
+    // Create a 1MB ArrayBuffer (typical small audio file)
+    const size = 1024 * 1024
+    const largeArray = new Uint8Array(size)
+    // Fill with some pattern to verify integrity
+    for (let i = 0; i < size; i++) {
+      largeArray[i] = i % 256
+    }
+
+    await db.samples.put({
+      name: 'large.wav',
+      url: '/large.wav',
+      arrayBuffer: largeArray.buffer,
+      mimeType: 'audio/wav',
+    })
+
+    const retrieved = await db.samples.where('url').equals('/large.wav').first()
+    expect(retrieved).toBeDefined()
+    expect(retrieved?.arrayBuffer.byteLength).toBe(size)
+
+    // Verify data integrity
+    const retrievedArray = new Uint8Array(retrieved!.arrayBuffer)
+    expect(retrievedArray[0]).toBe(0)
+    expect(retrievedArray[255]).toBe(255)
+    expect(retrievedArray[256]).toBe(0)
+  })
+
+  it('should handle various MIME types', async () => {
+    const mimeTypes = ['audio/wav', 'audio/mpeg', 'audio/ogg', 'audio/webm', '']
+
+    for (const mimeType of mimeTypes) {
+      const blob = new Blob(['test'], { type: mimeType })
+      const arrayBuffer = await blob.arrayBuffer()
+
+      await db.samples.put({
+        name: `test-${mimeType || 'unknown'}.audio`,
+        url: `/test-${mimeType || 'unknown'}.audio`,
+        arrayBuffer,
+        mimeType: mimeType || 'audio/wav', // Default fallback
+      })
+    }
+
+    const allSamples = await db.samples.toArray()
+    expect(allSamples).toHaveLength(mimeTypes.length)
+  })
+
+  it('should support multiple concurrent writes', async () => {
+    const writePromises = Array.from({ length: 10 }, (_, i) => {
+      const blob = new Blob([`data-${i}`], { type: 'audio/wav' })
+      return blob.arrayBuffer().then((arrayBuffer) =>
+        db.samples.put({
+          name: `sample-${i}.wav`,
+          url: `/sample-${i}.wav`,
+          arrayBuffer,
+          mimeType: 'audio/wav',
+        }),
+      )
+    })
+
+    await Promise.all(writePromises)
+
+    const count = await db.samples.count()
+    expect(count).toBe(10)
+  })
+
+  it('should update existing records by URL', async () => {
+    const url = '/updateable.wav'
+
+    // Initial write
+    const blob1 = new Blob(['original'], { type: 'audio/wav' })
+    await db.samples.put({
+      name: 'original.wav',
+      url,
+      arrayBuffer: await blob1.arrayBuffer(),
+      mimeType: 'audio/wav',
+    })
+
+    // Update
+    const blob2 = new Blob(['updated'], { type: 'audio/mpeg' })
+    await db.samples.put({
+      name: 'updated.mp3',
+      url,
+      arrayBuffer: await blob2.arrayBuffer(),
+      mimeType: 'audio/mpeg',
+    })
+
+    const retrieved = await db.samples.where('url').equals(url).first()
+    expect(retrieved?.name).toBe('updated.mp3')
+    expect(retrieved?.mimeType).toBe('audio/mpeg')
+
+    const text = await new Blob([retrieved!.arrayBuffer]).text()
+    expect(text).toBe('updated')
+
+    // Should only have one record
+    const count = await db.samples.count()
+    expect(count).toBe(1)
+  })
+})
+
+describe('Database migration', () => {
+  it('should have a "samples" table', () => {
+    expect(db.tables.map((t) => t.name)).toContain('samples')
+  })
+})

src/ui/idb.ts

@@ -1,23 +1,35 @@
 import Dexie, { type EntityTable } from 'dexie'
 
 interface SampleData {
-  id: number
   name: string
   url: string
-  blob: Blob
+  arrayBuffer: ArrayBuffer
+  mimeType: string
 }
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 const db = new Dexie('SamplesDataDb') as Dexie & {
   samples: EntityTable<
     SampleData,
-    'id' // primary key (for the typings only)
+    'url' // primary key (for the typings only)
   >
 }
 
 db.version(1).stores({
   samples: '++id, name, url', // primary key and indexed keys (for the runtime!)
 })
 
+// v2:
+// - use ArrayBuffer instead of Blob for Safari
+// - use URL as primary key (since a query by URL is used to decide whether to fetch)
+db.version(2)
+  .stores({
+    samples: 'url, name',
+  })
+  .upgrade(async (tx) => {
+    // Clear old blob-based data - samples will be re-downloaded with new schema
+    await tx.table('samples').clear()
+  })
+
 export type { SampleData }
 export { db }

src/ui/load_samples.test.ts

@@ -93,12 +93,14 @@
 
   it('should handle cached samples', async () => {
     const mockBlob = new Blob(['cached audio data'])
+    const mockArrayBuffer = await mockBlob.arrayBuffer()
 
     // Mock database returning cached data
     mockDbFirst.mockResolvedValueOnce({
       name: 'cached.wav',
       url: '/samples/cached.wav',
-      blob: mockBlob,
+      arrayBuffer: mockArrayBuffer,
+      mimeType: 'audio/wav',
     })
 
     const sample = { name: 'cached.wav', url: '/samples/cached.wav' }
@@ -108,4 +110,76 @@
     expect(fetch).not.toHaveBeenCalled()
     expect(result.name).toBe('cached.wav')
   })
+
+  it('should store blob as ArrayBuffer for Safari compatibility', async () => {
+    const mockBlob = new Blob(['audio data'], { type: 'audio/mpeg' })
+    const mockPut = vi.fn().mockResolvedValue(undefined)
+
+    mockFetch.mockResolvedValueOnce({
+      blob: () => Promise.resolve(mockBlob),
+    })
+
+    // Replace the mocked put to spy on what gets stored
+    vi.mocked(await import('./idb')).db.samples.put = mockPut
+
+    const sample = { name: 'test.mp3', url: '/samples/test.mp3' }
+    await loadSample(sample)
+
+    // Verify put was called with ArrayBuffer, not Blob
+    expect(mockPut).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'test.mp3',
+        url: '/samples/test.mp3',
+        arrayBuffer: expect.any(ArrayBuffer),
+        mimeType: 'audio/mpeg',
+      }),
+    )
+
+    // Verify it's not storing a Blob
+    const putCall = mockPut.mock.calls[0]?.[0]
+    expect(putCall).not.toHaveProperty('blob')
+  })
+
+  it('should store empty MIME type when blob.type is empty', async () => {
+    const mockBlob = new Blob(['audio data'], { type: '' })
+    const mockPut = vi.fn().mockResolvedValue(undefined)
+
+    mockFetch.mockResolvedValueOnce({
+      blob: () => Promise.resolve(mockBlob),
+    })
+
+    vi.mocked(await import('./idb')).db.samples.put = mockPut
+
+    const sample = { name: 'test.unknown', url: '/samples/test.unknown' }
+    await loadSample(sample)
+
+    // Should store whatever blob.type is (empty string in this case)
+    expect(mockPut).toHaveBeenCalledWith(
+      expect.objectContaining({
+        mimeType: '',
+      }),
+    )
+  })
+
+  it('should reconstruct blob from ArrayBuffer with correct MIME type', async () => {
+    const originalData = 'cached audio data'
+    const originalBlob = new Blob([originalData], { type: 'audio/ogg' })
+    const mockArrayBuffer = await originalBlob.arrayBuffer()
+
+    mockDbFirst.mockResolvedValueOnce({
+      name: 'cached.ogg',
+      url: '/samples/cached.ogg',
+      arrayBuffer: mockArrayBuffer,
+      mimeType: 'audio/ogg',
+    })
+
+    const sample = { name: 'cached.ogg', url: '/samples/cached.ogg' }
+    await loadSample(sample)
+
+    // Verify URL.createObjectURL was called (blob was reconstructed)
+    expect(global.URL.createObjectURL).toHaveBeenCalled()
+
+    // Note: We can't directly verify the Blob's type in the mock,
+    // but the integration tests in idb.test.ts verify the full round-trip
+  })
 })

src/ui/load_samples.ts

@@ -33,15 +33,17 @@ export const loadSample = async (sample: SampleDetails) => {
   const cached = await db.samples.where('url').equals(sample.url).first()
   let blob: Blob
   if (cached) {
-    blob = cached.blob
+    blob = new Blob([cached.arrayBuffer], { type: cached.mimeType })
   } else {
     // CAF files will be transparently converted by server middleware
     const response = await fetch(sample.url)
     blob = await response.blob()
+    const arrayBuffer = await blob.arrayBuffer()
     await db.samples.put({
       name: sample.name,
       url: sample.url,
-      blob,
+      arrayBuffer,
+      mimeType: blob.type,
     })
   }
   const blobUrl = URL.createObjectURL(blob)