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.

dist/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MJPEG Stream Viewer</title>
-    <script type="module" crossorigin src="/assets/index-D4W4a1Z1.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DuJPD2XK.css">
+    <script type="module" crossorigin src="/assets/index-CW6NDYF0.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BTgh_FTp.css">
   </head>
   <body>
     <div id="app"></div>

src/components/PlaybackPanel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onUnmounted } from 'vue'
-import { type Recording, getAllRecordings, deleteRecording } from '../composables/useStorage'
+import { type Recording, type Frame, getAllRecordings, deleteRecording, unpackFrames } from '../composables/useStorage'
 
 const recordings = ref<Recording[]>([])
 const loading = ref(false)
@@ -10,12 +10,23 @@ const playbackProgress = ref(0)
 const playbackDuration = ref('00:00.00')
 const playbackState = ref<'idle' | 'playing' | 'paused'>('idle')
 
+// Cache unpacked frames per recording
+const framesCache = new Map<string, Frame[]>()
+
 let currentFrameIndex = 0
 let playbackStartTime = 0
 let totalPausedTime = 0
 let pausedAt = 0
 let rafId = 0
 
+async function getFrames(rec: Recording): Promise<Frame[]> {
+  const cached = framesCache.get(rec.id)
+  if (cached) return cached
+  const frames = await unpackFrames(rec.data)
+  framesCache.set(rec.id, frames)
+  return frames
+}
+
 async function loadRecordings() {
   loading.value = true
   try {
@@ -29,6 +40,7 @@ async function handleDelete(id: string) {
   if (playingId.value === id) {
     stopPlayback()
   }
+  framesCache.delete(id)
   await deleteRecording(id)
   recordings.value = recordings.value.filter((r) => r.id !== id)
 }
@@ -41,10 +53,7 @@ function formatDuration(ms: number): string {
 }
 
 function formatFileSize(recording: Recording): string {
-  let totalBytes = 0
-  for (const frame of recording.frames) {
-    totalBytes += frame.blob.size
-  }
+  const totalBytes = recording.data.size
   if (totalBytes < 1024) return `${totalBytes} B`
   if (totalBytes < 1024 * 1024) return `${(totalBytes / 1024).toFixed(1)} KB`
   return `${(totalBytes / (1024 * 1024)).toFixed(1)} MB`
@@ -67,24 +76,22 @@ function getCanvasCtx(): { canvas: HTMLCanvasElement; ctx: CanvasRenderingContex
 }
 
 function renderPlaybackFrame(
-  recording: Recording,
+  frames: Frame[],
+  duration: number,
   index: number,
   canvas: HTMLCanvasElement,
   ctx: CanvasRenderingContext2D,
 ) {
   if (playbackState.value !== 'playing') return
-  if (index >= recording.frames.length) {
+  if (index >= frames.length) {
     stopPlayback()
     return
   }
 
   currentFrameIndex = index
-  const frame = recording.frames[index]!
+  const frame = frames[index]!
   const elapsed = performance.now() - playbackStartTime - totalPausedTime
-  playbackProgress.value = Math.min(
-    (elapsed / recording.duration) * 100,
-    100,
-  )
+  playbackProgress.value = Math.min((elapsed / duration) * 100, 100)
   playbackDuration.value = formatElapsed(elapsed)
 
   const img = new Image()
@@ -98,11 +105,11 @@ function renderPlaybackFrame(
     ctx.drawImage(img, 0, 0)
 
     const nextIndex = index + 1
-    if (nextIndex < recording.frames.length) {
-      const nextFrame = recording.frames[nextIndex]!
+    if (nextIndex < frames.length) {
+      const nextFrame = frames[nextIndex]!
       const delay = nextFrame.timestamp - frame.timestamp
       rafId = window.setTimeout(
-        () => renderPlaybackFrame(recording, nextIndex, canvas, ctx),
+        () => renderPlaybackFrame(frames, duration, nextIndex, canvas, ctx),
         Math.max(delay, 16),
       )
     } else {
@@ -112,18 +119,25 @@ function renderPlaybackFrame(
   img.src = url
 }
 
+let activeFrames: Frame[] = []
+let activeDuration = 0
+
 async function startPlayback(recording: Recording) {
   stopPlayback()
   const c = getCanvasCtx()
   if (!c) return
 
+  const frames = await getFrames(recording)
+  activeFrames = frames
+  activeDuration = recording.duration
+
   playingId.value = recording.id
   playbackState.value = 'playing'
   currentFrameIndex = 0
   totalPausedTime = 0
   playbackStartTime = performance.now()
 
-  renderPlaybackFrame(recording, 0, c.canvas, c.ctx)
+  renderPlaybackFrame(activeFrames, activeDuration, 0, c.canvas, c.ctx)
 }
 
 function pausePlayback() {
@@ -138,16 +152,13 @@ function pausePlayback() {
 
 function resumePlayback() {
   if (playbackState.value !== 'paused' || !playingId.value) return
-  const recording = recordings.value.find((r) => r.id === playingId.value)
-  if (!recording) return
-
   const c = getCanvasCtx()
   if (!c) return
 
   totalPausedTime += performance.now() - pausedAt
   playbackState.value = 'playing'
 
-  renderPlaybackFrame(recording, currentFrameIndex, c.canvas, c.ctx)
+  renderPlaybackFrame(activeFrames, activeDuration, currentFrameIndex, c.canvas, c.ctx)
 }
 
 function stopPlayback() {
@@ -156,6 +167,8 @@ function stopPlayback() {
   playbackProgress.value = 0
   playbackDuration.value = '00:00.00'
   currentFrameIndex = 0
+  activeFrames = []
+  activeDuration = 0
   if (rafId) {
     clearTimeout(rafId)
     rafId = 0

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