straight_to_video 0.0.6 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 57371915cd38c1ecac814d16a43244275216661f31b639a80022685672984e22
-  data.tar.gz: bb04ab7274edbb61031a270c8f650872b0b2338a7a1fc93a54948c8f3a3fcd04
+  metadata.gz: 0c035f1721bc3449252bf94c3c3160990e111e5260ea7ae48e5b6dfb80fd6119
+  data.tar.gz: 711a94bd20dc309ea33d7c4052997d01c0825e4a3c112bc5ba8c20908666e6e5
 SHA512:
-  metadata.gz: 92b3e2d474ba435ac6679c26755a9d62bb5388cd3fbb984fc6b31506287b4ced1be3a7c3621efdaf1812a9feae7f60287caa9e91e3601731c60c0a450e4d8824
-  data.tar.gz: 550b54b8fb004e7b6fea54282f00053fe47fd4bdefd20a5e87817c91495756adfe38c40d72888de883b0fbc049ad9615eb3f4f1783b05d01d92fc418356645cb
+  metadata.gz: b7894364d7de02dd76aa797623ce4c35d622a4837947a4b35092f20c9c77553ad657cfcca7b8ca737bba9b74a76d17f9a77fbc2a0cd6fa1d06016e9d1dd057b0
+  data.tar.gz: 4f88cfbd33080993ed8aa0448c6b0576bc1435763ff291b4eddebb835f5d7b38bb3893311a2ebc79374996ef6ca6942865e21cd60f67b7893631f2f58eaa5827

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.0.8
+
+- fix periodic frame jutter by selecting source frames using mid-frame timestamps instead of boundary timestamps
+- improve cadence on some iPhone MOVs by decoding frames via WebCodecs (Mediabunny `VideoSampleSink`) instead of per-frame `<video>` seeks
+- avoid accidental 30→60fps upsampling by choosing 60fps only for high-FPS sources
+
+## 0.0.7
+
+- guard against a race condition for forms that subscribe to change events but don't disable submission while optimize is already underway
+
 ## 0.0.6
 
 - fix iOS Safari Stimulus controller hang by making `seeked` waits robust

data/app/assets/javascripts/straight-to-video.js

@@ -1,11 +1,11 @@
-// straight-to-video@0.0.6 vendored by the straight_to_video gem
+// straight-to-video@0.0.8 vendored by the straight_to_video gem
 // straight-to-video - https://github.com/searlsco/straight-to-video
 
 // ----- External imports -----
 import {
   Input, ALL_FORMATS, BlobSource, AudioBufferSink,
   Output, Mp4OutputFormat, BufferTarget,
-  AudioSampleSource, AudioSample, EncodedVideoPacketSource, EncodedPacket
+  AudioSampleSource, AudioSample, EncodedVideoPacketSource, EncodedPacket, EncodedPacketSink, VideoSampleSink
 } from 'mediabunny'
 
 // ----- Constants -----
@@ -33,6 +33,36 @@ async function probeVideo (file) {
   })
 }
 
+async function estimateSourceVideoFps (file) {
+  try {
+    const input = new Input({ source: new BlobSource(file), formats: ALL_FORMATS })
+    const tracks = await input.getTracks()
+    const video = tracks.find(t => typeof t.isVideoTrack === 'function' && t.isVideoTrack())
+    if (!video) return 0
+    const sink = new EncodedPacketSink(video)
+    const durations = []
+    for await (const packet of sink.packets(undefined, undefined, { metadataOnly: true })) {
+      const dur = Number(packet?.duration)
+      if (packet.timestamp >= 0 && Number.isFinite(dur) && dur > 0) durations.push(dur)
+      if (durations.length >= 120) break
+    }
+    if (!durations.length) return 0
+    durations.sort((a, b) => a - b)
+    const dur = durations[Math.floor(durations.length / 2)]
+    return Number.isFinite(dur) && dur > 0 ? (1 / dur) : 0
+  } catch (_) {
+    return 0
+  }
+}
+
+async function determineTargetFps (file, { width, height }) {
+  const maxFps = Math.max(width, height) <= 1920 ? 30 : 60
+  if (maxFps === 30) return 30
+
+  const fps = await estimateSourceVideoFps(file)
+  return fps >= 45 ? 60 : 30
+}
+
 // ----- Audio helpers -----
 async function decodeAudioPCM (file, { duration }) {
   const totalFrames = Math.max(1, Math.ceil(Number(duration) * TARGET_AUDIO_SR))
@@ -94,7 +124,7 @@ async function canOptimizeVideo (file) {
     const scale = Math.min(1, MAX_LONG_SIDE / Math.max(2, long))
     const targetWidth = Math.max(2, Math.round(width * scale))
     const targetHeight = Math.max(2, Math.round(height * scale))
-    const fps = Math.max(width, height) <= 1920 ? 30 : 60
+    const fps = await determineTargetFps(file, { width, height })
     const sup = await selectVideoEncoderConfig({ width: targetWidth, height: targetHeight, fps }).then(() => true).catch(() => false)
     if (!sup) return { ok: false, reason: 'unsupported-video-config', message: 'No supported encoder configuration for this resolution on this device.' }
 
@@ -111,7 +141,7 @@ async function canOptimizeVideo (file) {
       const hasEbml = buf.length >= 4 && buf[0] === 0x1A && buf[1] === 0x45 && buf[2] === 0xDF && buf[3] === 0xA3
       if (!(hasFtyp || hasEbml)) return { ok: false, reason: 'unknown-container', message: 'Unrecognized container; expected MP4/MOV or WebM.' }
     }
-    return { ok: true, reason: 'ok', message: 'ok' }
+    return { ok: true, reason: 'ok', message: 'ok', plan: { width: targetWidth, height: targetHeight, fps } }
   } catch (e) {
     return { ok: false, reason: 'probe-failed', message: String(e?.message || e) }
   }
@@ -120,13 +150,13 @@ async function canOptimizeVideo (file) {
 async function optimizeVideo (file, { onProgress } = {}) {
   if (!(file instanceof File)) return { changed: false, file }
   const type = file.type || ''
-  if (!/^video\//i.test(type)) return { changed: false, file }
+  if (type && !/^video\//i.test(type)) return { changed: false, file }
   if (typeof window === 'undefined' || !('VideoEncoder' in window)) return { changed: false, file }
   const feas = await canOptimizeVideo(file)
   if (!feas.ok) return { changed: false, file }
 
   const srcMeta = await probeVideo(file)
-  const newFile = await encodeVideo({ file, srcMeta: { w: srcMeta.width, h: srcMeta.height, duration: srcMeta.duration }, onProgress })
+  const newFile = await encodeVideo({ file, srcMeta: { w: srcMeta.width, h: srcMeta.height, duration: srcMeta.duration }, plan: feas.plan, onProgress })
   return { changed: true, file: newFile }
 }
 
@@ -140,39 +170,16 @@ async function selectVideoEncoderConfig ({ width, height, fps }) {
   return { codecId: 'avc', config: supA.config }
 }
 
-async function waitForFrameReady (video, budgetMs) {
-  if (typeof video.requestVideoFrameCallback !== 'function') return false
-  return await new Promise((resolve) => {
-    let settled = false
-    const to = setTimeout(() => { if (!settled) { settled = true; resolve(false) } }, Math.max(1, budgetMs || 17))
-    video.requestVideoFrameCallback(() => { if (!settled) { settled = true; clearTimeout(to); resolve(true) } })
-  })
-}
-
-async function seekOnce (video, time) {
-  if (!video) return
-  const t = Number.isFinite(time) ? time : 0
-  if (Math.abs(video.currentTime - t) < 1e-6) return
-  await new Promise((resolve) => {
-    const onSeeked = () => {
-      video.removeEventListener('seeked', onSeeked)
-      resolve()
-    }
-    video.addEventListener('seeked', onSeeked, { once: true })
-    video.currentTime = t
-  })
-}
-
-async function encodeVideo ({ file, srcMeta, onProgress }) {
+async function encodeVideo ({ file, srcMeta, plan, onProgress }) {
   const w = srcMeta.w
   const h = srcMeta.h
   const durationCfr = Number(srcMeta.duration)
   const long = Math.max(w, h)
   const scale = Math.min(1, MAX_LONG_SIDE / Math.max(2, long))
-  const targetWidth = Math.max(2, Math.round(w * scale))
-  const targetHeight = Math.max(2, Math.round(h * scale))
+  const targetWidth = Math.max(2, Number(plan?.width) || Math.round(w * scale))
+  const targetHeight = Math.max(2, Number(plan?.height) || Math.round(h * scale))
 
-  const targetFps = Math.max(w, h) <= 1920 ? 30 : 60
+  const targetFps = Math.max(1, Number(plan?.fps) || await determineTargetFps(file, { width: w, height: h }))
   const step = 1 / Math.max(1, targetFps)
   const frames = Math.max(1, Math.floor(durationCfr / step))
 
@@ -216,56 +223,72 @@ async function encodeVideo ({ file, srcMeta, onProgress }) {
   })
   ve.configure(usedCfg)
 
-  const url = URL.createObjectURL(file)
-  const v = document.createElement('video')
-  v.muted = true; v.preload = 'auto'; v.playsInline = true
-  await new Promise((resolve, reject) => {
-    const onLoaded = () => {
-      v.removeEventListener('loadedmetadata', onLoaded)
-      v.removeEventListener('error', onError)
-      resolve()
-    }
-    const onError = () => {
-      v.removeEventListener('loadedmetadata', onLoaded)
-      v.removeEventListener('error', onError)
-      reject(new Error('video load failed'))
-    }
-    v.addEventListener('loadedmetadata', onLoaded)
-    v.addEventListener('error', onError)
-    v.src = url
-    try { v.load() } catch (_) {}
-  })
   const canvas = document.createElement('canvas'); canvas.width = targetWidth; canvas.height = targetHeight
   const ctx = canvas.getContext('2d', { alpha: false })
 
-  for (let i = 0; i < frames; i++) {
-    const t = i * step
-    const targetTime = Math.min(Math.max(0, t), Math.max(0.000001, durationCfr - 0.000001))
-    const drawTime = i === 0
-      ? Math.min(Math.max(0, t + (step * 0.5)), Math.max(0.000001, durationCfr - 0.000001))
-      : targetTime
-    if (i === 0) {}
-    await seekOnce(v, drawTime)
-    if (i === 0) {}
-    const budgetMs = Math.min(34, Math.max(17, Math.round(step * 1000)))
-    const presented = await waitForFrameReady(v, budgetMs)
-    if (!presented && i === 0) {
-      const nudge = Math.min(step * 0.25, 0.004)
-      const target = Math.min(drawTime + nudge, Math.max(0.000001, durationCfr - 0.000001))
-      await seekOnce(v, target)
+  const input = new Input({ source: new BlobSource(file), formats: ALL_FORMATS })
+  const tracks = await input.getTracks()
+  const video = tracks.find(t => typeof t.isVideoTrack === 'function' && t.isVideoTrack())
+  if (!video || !(await video.canDecode())) throw new Error('video track is not decodable by this browser')
+  const sink = new VideoSampleSink(video)
+  const draw = (sample) => {
+    if (ctx.resetTransform) ctx.resetTransform()
+    else ctx.setTransform(1, 0, 0, 1, 0, 0)
+    ctx.fillStyle = 'black'
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
+    sample.drawWithFit(ctx, { fit: 'fill' })
+  }
+
+  let i = 0
+  let prev = null
+  let prevStart = 0
+
+  for await (const sample of sink.samples(0, durationCfr + step)) {
+    const ts = Math.max(0, Number(sample.timestamp))
+    if (!prev) { prev = sample; prevStart = ts; continue }
+
+    const end = Math.max(prevStart, ts)
+    const displayTime = (i + 0.5) * step
+    if (displayTime < end) {
+      draw(prev)
+      while (i < frames) {
+        const displayTime = (i + 0.5) * step
+        if (displayTime < prevStart || displayTime >= end) break
+        const t = i * step
+        const vf = new VideoFrame(canvas, { timestamp: Math.round(t * 1e6), duration: Math.round(step * 1e6) })
+        ve.encode(vf, { keyFrame: i === 0 })
+        vf.close()
+
+        if (typeof onProgress === 'function') {
+          try {
+            onProgress(Math.min(1, (i + 1) / frames))
+          } catch (err) {
+            console.warn('straight-to-video: onProgress callback threw; ignoring error', err)
+          }
+        }
+
+        i++
+      }
     }
 
-    ctx.drawImage(v, 0, 0, canvas.width, canvas.height)
-    const vf = new VideoFrame(canvas, { timestamp: Math.round(t * 1e6), duration: Math.round(step * 1e6) })
-    ve.encode(vf, { keyFrame: i === 0 })
-    vf.close()
+    if (typeof prev.close === 'function') prev.close()
+    prev = sample
+    prevStart = ts
+    if (i >= frames) break
+  }
 
-    if (typeof onProgress === 'function') {
-      try { onProgress(Math.min(1, (i + 1) / frames)) } catch (_) {}
+  if (prev) {
+    draw(prev)
+    while (i < frames) {
+      const t = i * step
+      const vf = new VideoFrame(canvas, { timestamp: Math.round(t * 1e6), duration: Math.round(step * 1e6) })
+      ve.encode(vf, { keyFrame: i === 0 })
+      vf.close()
+      i++
     }
+    if (typeof prev.close === 'function') prev.close()
   }
   await ve.flush()
-  URL.revokeObjectURL(url)
 
   const muxCount = Math.min(frames, pendingPackets.length)
 
@@ -352,8 +375,11 @@ function registerStraightToVideoController (app, opts = {}) {
     }
 
     async _processFileInput (fileInput) {
-      const ua = typeof navigator !== 'undefined' && navigator.userAgent ? navigator.userAgent : ''
-      const isIos = /iP(hone|ad|od)/.test(ua)
+      if (!this._pendingProcesses) this._pendingProcesses = new WeakMap()
+      const existing = this._pendingProcesses.get(fileInput)
+      if (existing) return existing
+
+      const job = (async () => {
       this._markFlag(fileInput, 'processing')
       fileInput.disabled = true
       try {
@@ -372,6 +398,13 @@ function registerStraightToVideoController (app, opts = {}) {
         fileInput.disabled = false
         this._unmarkFlag(fileInput, 'processing')
       }
+      })()
+
+      this._pendingProcesses.set(fileInput, job)
+      job.finally(() => {
+        if (this._pendingProcesses?.get(fileInput) === job) this._pendingProcesses.delete(fileInput)
+      })
+      return job
     }
 
     _fire (el, name, detail = {}) {

data/index.html

@@ -200,7 +200,14 @@
 
       // Single‑button flow: open picker then auto‑submit
       tryBtn.addEventListener('click', () => {
-        if (fileEl.showPicker) { try { fileEl.showPicker(); return } catch (_) {} }
+        if (fileEl.showPicker) {
+          try {
+            fileEl.showPicker()
+            return
+          } catch (err) {
+            console.warn('straight-to-video demo: file input showPicker() failed; falling back to click()', err)
+          }
+        }
         fileEl.click()
       })
 
@@ -211,7 +218,11 @@
         sizes.classList.remove('hidden')
         p.classList.remove('hidden')
         pct && (pct.textContent = '0%')
-        try { form.requestSubmit() } catch (_) {}
+        try {
+          form.requestSubmit()
+        } catch (err) {
+          console.warn('straight-to-video demo: form.requestSubmit() failed; user may need to submit manually', err)
+        }
       })
 
       // Mirror controller events into the UI

data/index.js

@@ -4,7 +4,7 @@
 import {
   Input, ALL_FORMATS, BlobSource, AudioBufferSink,
   Output, Mp4OutputFormat, BufferTarget,
-  AudioSampleSource, AudioSample, EncodedVideoPacketSource, EncodedPacket
+  AudioSampleSource, AudioSample, EncodedVideoPacketSource, EncodedPacket, EncodedPacketSink, VideoSampleSink
 } from 'mediabunny'
 
 // ----- Constants -----
@@ -32,6 +32,36 @@ async function probeVideo (file) {
   })
 }
 
+async function estimateSourceVideoFps (file) {
+  try {
+    const input = new Input({ source: new BlobSource(file), formats: ALL_FORMATS })
+    const tracks = await input.getTracks()
+    const video = tracks.find(t => typeof t.isVideoTrack === 'function' && t.isVideoTrack())
+    if (!video) return 0
+    const sink = new EncodedPacketSink(video)
+    const durations = []
+    for await (const packet of sink.packets(undefined, undefined, { metadataOnly: true })) {
+      const dur = Number(packet?.duration)
+      if (packet.timestamp >= 0 && Number.isFinite(dur) && dur > 0) durations.push(dur)
+      if (durations.length >= 120) break
+    }
+    if (!durations.length) return 0
+    durations.sort((a, b) => a - b)
+    const dur = durations[Math.floor(durations.length / 2)]
+    return Number.isFinite(dur) && dur > 0 ? (1 / dur) : 0
+  } catch (_) {
+    return 0
+  }
+}
+
+async function determineTargetFps (file, { width, height }) {
+  const maxFps = Math.max(width, height) <= 1920 ? 30 : 60
+  if (maxFps === 30) return 30
+
+  const fps = await estimateSourceVideoFps(file)
+  return fps >= 45 ? 60 : 30
+}
+
 // ----- Audio helpers -----
 async function decodeAudioPCM (file, { duration }) {
   const totalFrames = Math.max(1, Math.ceil(Number(duration) * TARGET_AUDIO_SR))
@@ -93,7 +123,7 @@ async function canOptimizeVideo (file) {
     const scale = Math.min(1, MAX_LONG_SIDE / Math.max(2, long))
     const targetWidth = Math.max(2, Math.round(width * scale))
     const targetHeight = Math.max(2, Math.round(height * scale))
-    const fps = Math.max(width, height) <= 1920 ? 30 : 60
+    const fps = await determineTargetFps(file, { width, height })
     const sup = await selectVideoEncoderConfig({ width: targetWidth, height: targetHeight, fps }).then(() => true).catch(() => false)
     if (!sup) return { ok: false, reason: 'unsupported-video-config', message: 'No supported encoder configuration for this resolution on this device.' }
 
@@ -110,7 +140,7 @@ async function canOptimizeVideo (file) {
       const hasEbml = buf.length >= 4 && buf[0] === 0x1A && buf[1] === 0x45 && buf[2] === 0xDF && buf[3] === 0xA3
       if (!(hasFtyp || hasEbml)) return { ok: false, reason: 'unknown-container', message: 'Unrecognized container; expected MP4/MOV or WebM.' }
     }
-    return { ok: true, reason: 'ok', message: 'ok' }
+    return { ok: true, reason: 'ok', message: 'ok', plan: { width: targetWidth, height: targetHeight, fps } }
   } catch (e) {
     return { ok: false, reason: 'probe-failed', message: String(e?.message || e) }
   }
@@ -119,13 +149,13 @@ async function canOptimizeVideo (file) {
 async function optimizeVideo (file, { onProgress } = {}) {
   if (!(file instanceof File)) return { changed: false, file }
   const type = file.type || ''
-  if (!/^video\//i.test(type)) return { changed: false, file }
+  if (type && !/^video\//i.test(type)) return { changed: false, file }
   if (typeof window === 'undefined' || !('VideoEncoder' in window)) return { changed: false, file }
   const feas = await canOptimizeVideo(file)
   if (!feas.ok) return { changed: false, file }
 
   const srcMeta = await probeVideo(file)
-  const newFile = await encodeVideo({ file, srcMeta: { w: srcMeta.width, h: srcMeta.height, duration: srcMeta.duration }, onProgress })
+  const newFile = await encodeVideo({ file, srcMeta: { w: srcMeta.width, h: srcMeta.height, duration: srcMeta.duration }, plan: feas.plan, onProgress })
   return { changed: true, file: newFile }
 }
 
@@ -139,39 +169,16 @@ async function selectVideoEncoderConfig ({ width, height, fps }) {
   return { codecId: 'avc', config: supA.config }
 }
 
-async function waitForFrameReady (video, budgetMs) {
-  if (typeof video.requestVideoFrameCallback !== 'function') return false
-  return await new Promise((resolve) => {
-    let settled = false
-    const to = setTimeout(() => { if (!settled) { settled = true; resolve(false) } }, Math.max(1, budgetMs || 17))
-    video.requestVideoFrameCallback(() => { if (!settled) { settled = true; clearTimeout(to); resolve(true) } })
-  })
-}
-
-async function seekOnce (video, time) {
-  if (!video) return
-  const t = Number.isFinite(time) ? time : 0
-  if (Math.abs(video.currentTime - t) < 1e-6) return
-  await new Promise((resolve) => {
-    const onSeeked = () => {
-      video.removeEventListener('seeked', onSeeked)
-      resolve()
-    }
-    video.addEventListener('seeked', onSeeked, { once: true })
-    video.currentTime = t
-  })
-}
-
-async function encodeVideo ({ file, srcMeta, onProgress }) {
+async function encodeVideo ({ file, srcMeta, plan, onProgress }) {
   const w = srcMeta.w
   const h = srcMeta.h
   const durationCfr = Number(srcMeta.duration)
   const long = Math.max(w, h)
   const scale = Math.min(1, MAX_LONG_SIDE / Math.max(2, long))
-  const targetWidth = Math.max(2, Math.round(w * scale))
-  const targetHeight = Math.max(2, Math.round(h * scale))
+  const targetWidth = Math.max(2, Number(plan?.width) || Math.round(w * scale))
+  const targetHeight = Math.max(2, Number(plan?.height) || Math.round(h * scale))
 
-  const targetFps = Math.max(w, h) <= 1920 ? 30 : 60
+  const targetFps = Math.max(1, Number(plan?.fps) || await determineTargetFps(file, { width: w, height: h }))
   const step = 1 / Math.max(1, targetFps)
   const frames = Math.max(1, Math.floor(durationCfr / step))
 
@@ -215,56 +222,72 @@ async function encodeVideo ({ file, srcMeta, onProgress }) {
   })
   ve.configure(usedCfg)
 
-  const url = URL.createObjectURL(file)
-  const v = document.createElement('video')
-  v.muted = true; v.preload = 'auto'; v.playsInline = true
-  await new Promise((resolve, reject) => {
-    const onLoaded = () => {
-      v.removeEventListener('loadedmetadata', onLoaded)
-      v.removeEventListener('error', onError)
-      resolve()
-    }
-    const onError = () => {
-      v.removeEventListener('loadedmetadata', onLoaded)
-      v.removeEventListener('error', onError)
-      reject(new Error('video load failed'))
-    }
-    v.addEventListener('loadedmetadata', onLoaded)
-    v.addEventListener('error', onError)
-    v.src = url
-    try { v.load() } catch (_) {}
-  })
   const canvas = document.createElement('canvas'); canvas.width = targetWidth; canvas.height = targetHeight
   const ctx = canvas.getContext('2d', { alpha: false })
 
-  for (let i = 0; i < frames; i++) {
-    const t = i * step
-    const targetTime = Math.min(Math.max(0, t), Math.max(0.000001, durationCfr - 0.000001))
-    const drawTime = i === 0
-      ? Math.min(Math.max(0, t + (step * 0.5)), Math.max(0.000001, durationCfr - 0.000001))
-      : targetTime
-    if (i === 0) {}
-    await seekOnce(v, drawTime)
-    if (i === 0) {}
-    const budgetMs = Math.min(34, Math.max(17, Math.round(step * 1000)))
-    const presented = await waitForFrameReady(v, budgetMs)
-    if (!presented && i === 0) {
-      const nudge = Math.min(step * 0.25, 0.004)
-      const target = Math.min(drawTime + nudge, Math.max(0.000001, durationCfr - 0.000001))
-      await seekOnce(v, target)
+  const input = new Input({ source: new BlobSource(file), formats: ALL_FORMATS })
+  const tracks = await input.getTracks()
+  const video = tracks.find(t => typeof t.isVideoTrack === 'function' && t.isVideoTrack())
+  if (!video || !(await video.canDecode())) throw new Error('video track is not decodable by this browser')
+  const sink = new VideoSampleSink(video)
+  const draw = (sample) => {
+    if (ctx.resetTransform) ctx.resetTransform()
+    else ctx.setTransform(1, 0, 0, 1, 0, 0)
+    ctx.fillStyle = 'black'
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
+    sample.drawWithFit(ctx, { fit: 'fill' })
+  }
+
+  let i = 0
+  let prev = null
+  let prevStart = 0
+
+  for await (const sample of sink.samples(0, durationCfr + step)) {
+    const ts = Math.max(0, Number(sample.timestamp))
+    if (!prev) { prev = sample; prevStart = ts; continue }
+
+    const end = Math.max(prevStart, ts)
+    const displayTime = (i + 0.5) * step
+    if (displayTime < end) {
+      draw(prev)
+      while (i < frames) {
+        const displayTime = (i + 0.5) * step
+        if (displayTime < prevStart || displayTime >= end) break
+        const t = i * step
+        const vf = new VideoFrame(canvas, { timestamp: Math.round(t * 1e6), duration: Math.round(step * 1e6) })
+        ve.encode(vf, { keyFrame: i === 0 })
+        vf.close()
+
+        if (typeof onProgress === 'function') {
+          try {
+            onProgress(Math.min(1, (i + 1) / frames))
+          } catch (err) {
+            console.warn('straight-to-video: onProgress callback threw; ignoring error', err)
+          }
+        }
+
+        i++
+      }
     }
 
-    ctx.drawImage(v, 0, 0, canvas.width, canvas.height)
-    const vf = new VideoFrame(canvas, { timestamp: Math.round(t * 1e6), duration: Math.round(step * 1e6) })
-    ve.encode(vf, { keyFrame: i === 0 })
-    vf.close()
+    if (typeof prev.close === 'function') prev.close()
+    prev = sample
+    prevStart = ts
+    if (i >= frames) break
+  }
 
-    if (typeof onProgress === 'function') {
-      try { onProgress(Math.min(1, (i + 1) / frames)) } catch (_) {}
+  if (prev) {
+    draw(prev)
+    while (i < frames) {
+      const t = i * step
+      const vf = new VideoFrame(canvas, { timestamp: Math.round(t * 1e6), duration: Math.round(step * 1e6) })
+      ve.encode(vf, { keyFrame: i === 0 })
+      vf.close()
+      i++
     }
+    if (typeof prev.close === 'function') prev.close()
   }
   await ve.flush()
-  URL.revokeObjectURL(url)
 
   const muxCount = Math.min(frames, pendingPackets.length)
 
@@ -351,8 +374,11 @@ function registerStraightToVideoController (app, opts = {}) {
     }
 
     async _processFileInput (fileInput) {
-      const ua = typeof navigator !== 'undefined' && navigator.userAgent ? navigator.userAgent : ''
-      const isIos = /iP(hone|ad|od)/.test(ua)
+      if (!this._pendingProcesses) this._pendingProcesses = new WeakMap()
+      const existing = this._pendingProcesses.get(fileInput)
+      if (existing) return existing
+
+      const job = (async () => {
       this._markFlag(fileInput, 'processing')
       fileInput.disabled = true
       try {
@@ -371,6 +397,13 @@ function registerStraightToVideoController (app, opts = {}) {
         fileInput.disabled = false
         this._unmarkFlag(fileInput, 'processing')
       }
+      })()
+
+      this._pendingProcesses.set(fileInput, job)
+      job.finally(() => {
+        if (this._pendingProcesses?.get(fileInput) === job) this._pendingProcesses.delete(fileInput)
+      })
+      return job
     }
 
     _fire (el, name, detail = {}) {

data/lib/straight_to_video/version.rb

@@ -1,3 +1,3 @@
 module StraightToVideo
-  VERSION = "0.0.6"
+  VERSION = "0.0.8"
 end

data/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "straight-to-video",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "straight-to-video",
-      "version": "0.0.6",
+      "version": "0.0.8",
       "license": "MIT",
       "dependencies": {
         "mediabunny": "^1.24.4"
@@ -17,6 +17,11 @@
       },
       "peerDependencies": {
         "@hotwired/stimulus": "^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@hotwired/stimulus": {
+          "optional": true
+        }
       }
     },
     "node_modules/@hotwired/stimulus": {
@@ -24,6 +29,7 @@
       "resolved": "https://registry.npmjs.org/@hotwired/stimulus/-/stimulus-3.2.2.tgz",
       "integrity": "sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==",
       "license": "MIT",
+      "optional": true,
       "peer": true
     },
     "node_modules/@playwright/test": {

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "straight-to-video",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Browser-based, hardware-accelerated video upload optimization",
   "type": "module",
   "exports": {

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: straight_to_video
 version: !ruby/object:Gem::Version
-  version: 0.0.6
+  version: 0.0.8
 platform: ruby
 authors:
 - Justin Searls
 bindir: exe
 cert_chain: []
-date: 1980-01-02 00:00:00.000000000 Z
+date: 2025-12-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -77,7 +77,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.9
+rubygems_version: 3.6.2
 specification_version: 4
 summary: Browser-based, hardware-accelerated video upload optimization
 test_files: []