fix: pack all frames into single blob for IndexedDB storage

Previously each frame was stored as a separate Blob in the Recording
object, causing IndexedDB to hang when writing 100+ blobs in one
transaction. Now all frames are packed into a single binary blob:
  [4B frameCount][per frame: 4B ts, 4B len, JPEG data]

DB version bumped to 2 (old store deleted on upgrade).
PlaybackPanel unpacks frames on demand with a per-recording cache.

src/composables/useRecorder.ts

@@ -1,5 +1,5 @@
 import { ref, type Ref } from 'vue'
-import { saveRecording, type Recording } from './useStorage'
+import { saveRecording, packFrames, type Recording } from './useStorage'
 
 export type RecorderState = 'idle' | 'recording' | 'saving'
 
@@ -161,7 +161,7 @@ export function useRecorder() {
       createdAt: new Date(),
       duration: elapsedMs.value,
       frameCount: savedFrames.length,
-      frames: savedFrames,
+      data: packFrames(savedFrames),
     }
 
     try {

src/composables/useStorage.ts

@@ -1,10 +1,18 @@
 /**
  * IndexedDB wrapper for storing MJPEG recordings.
- * Each recording holds an array of frames (JPEG blobs) with timestamps.
+ *
+ * All frames are packed into a single Blob (binary format) so that
+ * IndexedDB writes one object per recording — fast and reliable.
+ *
+ * Binary format inside `data` Blob:
+ *   [4 bytes BE: uint32 frameCount]
+ *   For each frame:
+ *     [4 bytes BE: uint32 timestamp (ms)]
+ *     [4 bytes BE: uint32 jpegDataLength]
+ *     [jpegDataLength bytes: JPEG]
  */
 
 export interface Frame {
-  /** Milliseconds since recording start */
   timestamp: number
   blob: Blob
 }
@@ -13,23 +21,89 @@ export interface Recording {
   id: string
   name: string
   createdAt: Date
-  duration: number // ms
+  duration: number
   frameCount: number
-  frames: Frame[]
+  /** Packed binary: all frames + timing in a single Blob */
+  data: Blob
 }
 
 const DB_NAME = 'mjpeg-viewer'
-const DB_VERSION = 1
+const DB_VERSION = 2
 const STORE_NAME = 'recordings'
 
+// ---- Binary pack / unpack ----
+
+export function packFrames(frames: { timestamp: number; blob: Blob }[]): Blob {
+  const headerSize = 4 // frameCount
+  let totalSize = headerSize
+  const parts: ArrayBuffer[] = []
+
+  const countBuf = new ArrayBuffer(4)
+  new DataView(countBuf).setUint32(0, frames.length)
+  totalSize += countBuf.byteLength
+
+  for (const f of frames) {
+    const tsBuf = new ArrayBuffer(4)
+    new DataView(tsBuf).setUint32(0, f.timestamp)
+    const lenBuf = new ArrayBuffer(4)
+    new DataView(lenBuf).setUint32(0, f.blob.size)
+
+    parts.push(tsBuf, lenBuf)
+    totalSize += 8 + f.blob.size
+  }
+
+  // Build header + index, then append blob data
+  const headerAndIndex = new ArrayBuffer(totalSize)
+  const view = new DataView(headerAndIndex)
+  view.setUint32(0, frames.length)
+  let offset = 4
+  for (const f of frames) {
+    view.setUint32(offset, f.timestamp)
+    view.setUint32(offset + 4, f.blob.size)
+    offset += 8
+  }
+
+  // Now build the final blob: header/index + all JPEG data
+  const allParts: BlobPart[] = [headerAndIndex]
+  for (const f of frames) {
+    allParts.push(f.blob)
+  }
+  return new Blob(allParts, { type: 'application/octet-stream' })
+}
+
+export async function unpackFrames(data: Blob): Promise<Frame[]> {
+  const buf = await data.arrayBuffer()
+  const view = new DataView(buf)
+  const frameCount = view.getUint32(0)
+
+  let offset = 4
+  const frames: Frame[] = []
+
+  for (let i = 0; i < frameCount; i++) {
+    const timestamp = view.getUint32(offset)
+    const jpegLen = view.getUint32(offset + 4)
+    offset += 8
+    const jpegData = buf.slice(offset, offset + jpegLen)
+    frames.push({
+      timestamp,
+      blob: new Blob([jpegData], { type: 'image/jpeg' }),
+    })
+    offset += jpegLen
+  }
+  return frames
+}
+
+// ---- IndexedDB ----
+
 function openDB(): Promise<IDBDatabase> {
   return new Promise((resolve, reject) => {
     const request = indexedDB.open(DB_NAME, DB_VERSION)
     request.onupgradeneeded = () => {
       const db = request.result
-      if (!db.objectStoreNames.contains(STORE_NAME)) {
-        db.createObjectStore(STORE_NAME, { keyPath: 'id' })
+      if (db.objectStoreNames.contains(STORE_NAME)) {
+        db.deleteObjectStore(STORE_NAME)
       }
+      db.createObjectStore(STORE_NAME, { keyPath: 'id' })
     }
     request.onsuccess = () => resolve(request.result)
     request.onerror = () => reject(request.error)
@@ -41,17 +115,18 @@ export async function saveRecording(recording: Recording): Promise<void> {
   return new Promise((resolve, reject) => {
     const tx = db.transaction(STORE_NAME, 'readwrite')
     const store = tx.objectStore(STORE_NAME)
-    // Serialize: convert Date to ISO string and store frames
-    const record = {
+    store.put({
       ...recording,
       createdAt: recording.createdAt.toISOString(),
-    }
-    store.put(record)
+    })
     tx.oncomplete = () => {
       db.close()
       resolve()
     }
-    tx.onerror = () => reject(tx.error)
+    tx.onerror = () => {
+      db.close()
+      reject(tx.error)
+    }
   })
 }
 
@@ -67,11 +142,13 @@ export async function getAllRecordings(): Promise<Recording[]> {
         ...r,
         createdAt: new Date(r.createdAt),
       }))
-      // Sort newest first
       results.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
       resolve(results)
     }
-    request.onerror = () => reject(request.error)
+    request.onerror = () => {
+      db.close()
+      reject(request.error)
+    }
   })
 }
 
@@ -85,27 +162,9 @@ export async function deleteRecording(id: string): Promise<void> {
       db.close()
       resolve()
     }
-    tx.onerror = () => reject(tx.error)
-  })
-}
-
-export async function getRecording(id: string): Promise<Recording | undefined> {
-  const db = await openDB()
-  return new Promise((resolve, reject) => {
-    const tx = db.transaction(STORE_NAME, 'readonly')
-    const store = tx.objectStore(STORE_NAME)
-    const request = store.get(id)
-    request.onsuccess = () => {
+    tx.onerror = () => {
       db.close()
-      if (!request.result) {
-        resolve(undefined)
-        return
-      }
-      resolve({
-        ...request.result,
-        createdAt: new Date(request.result.createdAt),
-      })
+      reject(tx.error)
     }
-    request.onerror = () => reject(request.error)
   })
 }