fix: add safety timeout in stopRecording, extract reset() helper

- extract reset() to ensure clean state in all exit paths
- add 5s timeout guard so UI never stays stuck on 'Saving'
- improve error messages for empty frames and save failures

dist/index.html

@@ -5,7 +5,7 @@
     <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-C5dzEsTl.js"></script>
+    <script type="module" crossorigin src="/assets/index-D4W4a1Z1.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DuJPD2XK.css">
   </head>
   <body>

src/composables/useRecorder.ts

@@ -3,7 +3,6 @@ import { saveRecording, type Recording } from './useStorage'
 
 export type RecorderState = 'idle' | 'recording' | 'saving'
 
-// JPEG markers
 const SOI = new Uint8Array([0xff, 0xd8])
 const EOI = new Uint8Array([0xff, 0xd9])
 
@@ -17,10 +16,6 @@ function indexOf(haystack: Uint8Array, needle: Uint8Array, from = 0): number {
   return -1
 }
 
-/**
- * Parse a raw MJPEG fetch response by scanning for JPEG SOI/EOI markers.
- * This avoids multipart boundary parsing entirely — just looks for complete JPEG frames.
- */
 async function* parseMjpegByMarkers(
   response: Response,
 ): AsyncGenerator<{ blob: Blob; timestamp: number }> {
@@ -40,21 +35,16 @@ async function* parseMjpegByMarkers(
       newBuf.set(value, buffer.length)
       buffer = newBuf
 
-      // Extract all complete JPEG frames (SOI ... EOI)
       while (true) {
         const soi = indexOf(buffer, SOI)
-        if (soi === -1) break // no frame start in buffer
+        if (soi === -1) break
-
         const eoi = indexOf(buffer, EOI, soi + 2)
-        if (eoi === -1) break // incomplete frame — wait for more data
+        if (eoi === -1) break
 
         const jpegData = buffer.subarray(soi, eoi + 2)
         if (jpegData.length > 100) {
-          // sanity check: JPEG frames have at least some content
+          yield { blob: new Blob([jpegData], { type: 'image/jpeg' }), timestamp: Date.now() - startTime }
-          const blob = new Blob([jpegData], { type: 'image/jpeg' })
-          yield { blob, timestamp: Date.now() - startTime }
         }
-
         buffer = buffer.subarray(eoi + 2)
       }
     }
@@ -75,20 +65,32 @@ export function useRecorder() {
   let abortController: AbortController | null = null
   let running = false
 
-  async function startRecording(streamUrl: string) {
+  function reset() {
-    // Clean up any previous session
+    running = false
-    cancelRecording()
+    if (abortController) {
-
+      abortController.abort()
+      abortController = null
+    }
+    if (timerInterval) {
+      clearInterval(timerInterval)
+      timerInterval = null
+    }
     frames = []
     frameCount.value = 0
     elapsedMs.value = 0
-    recorderError.value = null
+    recorderState.value = 'idle'
+  }
+
+  async function startRecording(streamUrl: string) {
+    reset()
+
     startTime = Date.now()
     recorderState.value = 'recording'
+    recorderError.value = null
     running = true
 
     timerInterval = setInterval(() => {
-      elapsedMs.value = Date.now() - startTime
+      if (running) elapsedMs.value = Date.now() - startTime
     }, 100)
 
     abortController = new AbortController()
@@ -105,20 +107,22 @@ export function useRecorder() {
 
       for await (const frame of parseMjpegByMarkers(response)) {
         if (!running) break
-        frames.push({
+        frames.push({ timestamp: frame.timestamp, blob: frame.blob })
-          timestamp: frame.timestamp,
-          blob: frame.blob,
-        })
         frameCount.value = frames.length
       }
     } catch (e: any) {
       if (e.name === 'AbortError') return
       recorderError.value = e.message || String(e)
+      // Don't reset state here — user may still want to stop and see the error
     }
   }
 
   async function stopRecording(): Promise<Recording | null> {
-    if (recorderState.value !== 'recording') return null
+    if (recorderState.value !== 'recording') {
+      if (recorderState.value === 'saving') return null
+      reset()
+      return null
+    }
 
     recorderState.value = 'saving'
     running = false
@@ -131,10 +135,22 @@ export function useRecorder() {
       clearInterval(timerInterval)
       timerInterval = null
     }
-
     elapsedMs.value = Date.now() - startTime
 
-    if (frames.length === 0) {
+    const savedFrames = [...frames]
+    frames = []
+
+    // Safety: force back to idle after 5s even if IndexedDB hangs
+    const safetyTimer = setTimeout(() => {
+      if (recorderState.value === 'saving') {
+        recorderError.value = 'Save timed out'
+        recorderState.value = 'idle'
+      }
+    }, 5000)
+
+    if (savedFrames.length === 0) {
+      clearTimeout(safetyTimer)
+      recorderError.value = 'No frames captured — check that the stream is accessible'
       recorderState.value = 'idle'
       return null
     }
@@ -144,42 +160,33 @@ export function useRecorder() {
       name: `Recording ${new Date().toLocaleString()}`,
       createdAt: new Date(),
       duration: elapsedMs.value,
-      frameCount: frames.length,
+      frameCount: savedFrames.length,
-      frames: [...frames],
+      frames: savedFrames,
     }
 
     try {
       await saveRecording(recording)
+      recorderError.value = null
+      return recording
+    } catch (e: any) {
+      recorderError.value = `Save failed: ${e.message || e}`
+      return null
     } finally {
+      clearTimeout(safetyTimer)
       recorderState.value = 'idle'
     }
-
-    frames = []
-    return recording
   }
 
   function cancelRecording() {
-    running = false
+    reset()
-    if (abortController) {
-      abortController.abort()
-      abortController = null
-    }
-    if (timerInterval) {
-      clearInterval(timerInterval)
-      timerInterval = null
-    }
-    frames = []
-    frameCount.value = 0
-    elapsedMs.value = 0
     recorderError.value = null
-    recorderState.value = 'idle'
   }
 
   function formatElapsed(ms: number): string {
-    const totalSec = Math.floor(ms / 1000)
+    const totalSec = Math.floor(Math.max(0, ms) / 1000)
     const min = Math.floor(totalSec / 60)
     const sec = totalSec % 60
-    const centis = Math.floor((ms % 1000) / 10)
+    const centis = Math.floor((Math.max(0, ms) % 1000) / 10)
     return `${String(min).padStart(2, '0')}:${String(sec).padStart(2, '0')}.${String(centis).padStart(2, '0')}`
   }