straight_to_video 0.0.3

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

@@ -0,0 +1,360 @@
+// straight-to-video@0.0.3 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
+} from 'mediabunny'
+
+// ----- Constants -----
+const MAX_LONG_SIDE = 1920
+const TARGET_AUDIO_BITRATE = 96_000
+const TARGET_AUDIO_SR = 48_000
+const TARGET_AUDIO_CHANNELS = 2
+
+// ----- Video metadata probe -----
+async function probeVideo (file) {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(file)
+    const v = document.createElement('video')
+    v.preload = 'metadata'
+    v.muted = true
+    v.src = url
+    v.onloadedmetadata = () => {
+      const width = v.videoWidth
+      const height = v.videoHeight
+      const duration = v.duration
+      URL.revokeObjectURL(url)
+      resolve({ width, height, duration })
+    }
+    v.onerror = () => { URL.revokeObjectURL(url); reject(v.error || new Error('failed to load metadata')) }
+  })
+}
+
+// ----- Audio helpers -----
+async function decodeAudioPCM (file, { duration }) {
+  const totalFrames = Math.max(1, Math.ceil(Number(duration) * TARGET_AUDIO_SR))
+  const tracks = await (async () => {
+    try {
+      const input = new Input({ source: new BlobSource(file), formats: ALL_FORMATS })
+      return await input.getTracks()
+    } catch (_) {
+      return []
+    }
+  })()
+  const audio = tracks.find(t => typeof t.isAudioTrack === 'function' && t.isAudioTrack())
+  if (!audio) return new AudioBuffer({ length: totalFrames, sampleRate: TARGET_AUDIO_SR, numberOfChannels: TARGET_AUDIO_CHANNELS })
+
+  const ctx = new OfflineAudioContext({ numberOfChannels: TARGET_AUDIO_CHANNELS, length: totalFrames, sampleRate: TARGET_AUDIO_SR })
+  const sink = new AudioBufferSink(audio)
+  for await (const { buffer, timestamp } of sink.buffers(0, Number(duration))) {
+    const src = ctx.createBufferSource()
+    src.buffer = buffer
+    src.connect(ctx.destination)
+    src.start(Math.max(0, Number(timestamp)))
+  }
+  return await ctx.startRendering()
+}
+
+async function renderStereo48kExact (buffer, exactFrames) {
+  const frames = Math.max(1024, Number(exactFrames))
+  const ctx = new OfflineAudioContext({ numberOfChannels: TARGET_AUDIO_CHANNELS, length: frames, sampleRate: TARGET_AUDIO_SR })
+  const src = ctx.createBufferSource()
+  src.buffer = buffer
+  src.connect(ctx.destination)
+  src.start(0)
+  return await ctx.startRendering()
+}
+
+function interleaveStereoF32 (buffer) {
+  const len = buffer.length
+  const out = new Float32Array(len * TARGET_AUDIO_CHANNELS)
+  const ch0 = buffer.getChannelData(0)
+  const ch1 = buffer.getChannelData(1)
+  for (let i = 0, j = 0; i < len; i++, j += 2) {
+    out[j] = ch0[i]
+    out[j + 1] = ch1[i]
+  }
+  return out
+}
+
+// ----- Video pipeline -----
+async function canOptimizeVideo (file) {
+  if (!(file instanceof File)) return { ok: false, reason: 'not-a-file', message: 'Argument provided is not a File.' }
+  const env = typeof window !== 'undefined'
+    && 'VideoEncoder' in window
+    && 'OfflineAudioContext' in window
+    && typeof document?.createElement === 'function'
+  if (!env) return { ok: false, reason: 'unsupported-environment', message: 'Browser does not support WebCodecs or OfflineAudioContext.' }
+  try {
+    const { width, height, duration } = await probeVideo(file)
+    const long = Math.max(width, height)
+    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 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.' }
+
+    // Header sniffing when file.type is empty/incorrect
+    const type = String(file.type || '').toLowerCase()
+    if (!type) {
+      const blob = file.slice(0, 4096)
+      const buf = new Uint8Array(await blob.arrayBuffer())
+      const asAscii = (u8) => String.fromCharCode(...u8)
+      // MP4/MOV ftyp signature typically at offset 4..
+      const ascii = asAscii(buf)
+      const hasFtyp = ascii.includes('ftyp')
+      // WebM/Matroska: EBML header 1A 45 DF A3
+      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' }
+  } catch (e) {
+    return { ok: false, reason: 'probe-failed', message: String(e?.message || e) }
+  }
+}
+
+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 (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 })
+  return { changed: true, file: newFile }
+}
+
+async function selectVideoEncoderConfig ({ width, height, fps }) {
+  const hevc = { codec: 'hvc1.1.4.L123.B0', width, height, framerate: fps, hardwareAcceleration: 'prefer-hardware', hevc: { format: 'hevc' } }
+  const supH = await VideoEncoder.isConfigSupported(hevc).catch(() => ({ supported: false }))
+  if (supH.supported) return { codecId: 'hevc', config: supH.config }
+
+  const avc = { codec: 'avc1.64002A', width, height, framerate: fps, hardwareAcceleration: 'prefer-hardware', avc: { format: 'avc' } }
+  const supA = await VideoEncoder.isConfigSupported(avc)
+  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 encodeVideo ({ file, srcMeta, 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 targetFps = Math.max(w, h) <= 1920 ? 30 : 60
+  const step = 1 / Math.max(1, targetFps)
+  const frames = Math.max(1, Math.floor(durationCfr / step))
+
+  const output = new Output({ format: new Mp4OutputFormat({ fastStart: 'in-memory' }), target: new BufferTarget() })
+  const { codecId, config: usedCfg } = await selectVideoEncoderConfig({ width: targetWidth, height: targetHeight, fps: targetFps })
+  const videoTrack = new EncodedVideoPacketSource(codecId)
+  output.addVideoTrack(videoTrack, { frameRate: targetFps })
+
+  const _warn = console.warn
+  console.warn = (...args) => {
+    const m = args && args[0]
+    if (typeof m === 'string' && m.includes('Unsupported audio codec') && m.includes('apac')) return
+    _warn.apply(console, args)
+  }
+  const audioBuffer = await decodeAudioPCM(file, { duration: durationCfr })
+  console.warn = _warn
+
+  const audioSource = new AudioSampleSource({
+    codec: 'aac',
+    bitrate: TARGET_AUDIO_BITRATE,
+    bitrateMode: 'constant',
+    numberOfChannels: TARGET_AUDIO_CHANNELS,
+    sampleRate: TARGET_AUDIO_SR,
+    onEncodedPacket: (_packet, meta) => {
+      const aot = 2; const idx = 3; const b0 = (aot << 3) | (idx >> 1); const b1 = ((idx & 1) << 7) | (TARGET_AUDIO_CHANNELS << 3)
+      meta.decoderConfig = { codec: 'mp4a.40.2', numberOfChannels: TARGET_AUDIO_CHANNELS, sampleRate: TARGET_AUDIO_SR, description: new Uint8Array([b0, b1]) }
+    }
+  })
+  output.addAudioTrack(audioSource)
+
+  await output.start()
+
+  let codecDesc = null
+  const pendingPackets = []
+  const ve = new VideoEncoder({
+    output: (chunk, meta) => {
+      if (!codecDesc && meta?.decoderConfig?.description) codecDesc = meta.decoderConfig.description
+      pendingPackets.push({ chunk })
+    },
+    error: () => {}
+  })
+  ve.configure(usedCfg)
+
+  const url = URL.createObjectURL(file)
+  const v = document.createElement('video')
+  v.muted = true; v.preload = 'auto'; v.playsInline = true
+  v.src = url
+  await new Promise((resolve, reject) => { v.onloadedmetadata = resolve; v.onerror = () => reject(new Error('video load failed')) })
+  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
+
+    await new Promise((resolve) => { v.currentTime = drawTime; v.onseeked = () => resolve() })
+    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)
+      await new Promise((resolve) => { v.currentTime = Math.min(drawTime + nudge, Math.max(0.000001, durationCfr - 0.000001)); v.onseeked = () => resolve() })
+    }
+
+    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 onProgress === 'function') {
+      try { onProgress(Math.min(1, (i + 1) / frames)) } catch (_) {}
+    }
+  }
+  await ve.flush()
+  URL.revokeObjectURL(url)
+
+  const muxCount = Math.min(frames, pendingPackets.length)
+
+  for (let i = 0; i < muxCount; i++) {
+    const { chunk } = pendingPackets[i]
+    const data = new Uint8Array(chunk.byteLength); chunk.copyTo(data)
+    const ts = i * step; const dur = step
+    const pkt = new EncodedPacket(data, chunk.type === 'key' ? 'key' : 'delta', ts, dur)
+    await videoTrack.add(pkt, { decoderConfig: { codec: usedCfg.codec, codedWidth: targetWidth, codedHeight: targetHeight, description: codecDesc } })
+  }
+
+  const samplesPerVideoFrame = TARGET_AUDIO_SR / targetFps
+  const totalVideoSamples = muxCount * samplesPerVideoFrame
+  const targetSamples = Math.max(1024, Math.floor(totalVideoSamples / 1024) * 1024 - 2048)
+  const audioExact = await renderStereo48kExact(audioBuffer, targetSamples)
+  const interleaved = interleaveStereoF32(audioExact)
+  const sample = new AudioSample({ format: 'f32', sampleRate: TARGET_AUDIO_SR, numberOfChannels: TARGET_AUDIO_CHANNELS, timestamp: 0, data: interleaved })
+  await audioSource.add(sample)
+  audioSource.close()
+
+  await output.finalize()
+  const { buffer } = output.target
+  const payload = new Uint8Array(buffer)
+  const nm = file.name; const dot = nm.lastIndexOf('.')
+  const newName = `${nm.substring(0, dot)}-optimized.mp4`
+  return new File([payload], newName, { type: 'video/mp4', lastModified: Date.now() })
+}
+
+// ----- Controller registration (optional) -----
+function registerStraightToVideoController (app, opts = {}) {
+  const { Controller, name = 'straight-to-video' } = opts || {}
+  if (!Controller) {
+    throw new Error('registerStraightToVideoController requires a Controller class from @hotwired/stimulus. Call as registerStraightToVideoController(app, { Controller, name? }).')
+  }
+
+  class StraightToVideoController extends Controller {
+    static get targets () { return ['fileInput'] }
+    static get values () { return { submitting: Boolean } }
+
+    connect () {
+      this._onWindowSubmitCapture = (e) => this._onWindowSubmitCaptureHandler(e)
+      window.addEventListener('submit', this._onWindowSubmitCapture, { capture: true })
+    }
+
+    disconnect () {
+      if (this._onWindowSubmitCapture) window.removeEventListener('submit', this._onWindowSubmitCapture, { capture: true })
+    }
+
+    async change (e) {
+      const fileInput = e.target
+      if (!fileInput?.files?.length || this.submittingValue || this._hasFlag(fileInput, 'processing')) return
+      this._unmarkFlag(fileInput, 'processed')
+      delete fileInput.dataset.summary
+      await this._processFileInput(fileInput)
+    }
+
+    async _onWindowSubmitCaptureHandler (e) {
+      if (e.target !== this.element) return
+      const toProcess = this.fileInputTargets.filter((fi) => fi?.files?.length && !this._hasFlag(fi, 'processed'))
+      if (toProcess.length === 0) return
+
+      e.preventDefault()
+      e.stopPropagation()
+      if (typeof e.stopImmediatePropagation === 'function') e.stopImmediatePropagation()
+
+      this.submittingValue = true
+      await Promise.allSettled(toProcess.map((fi) => this._processFileInput(fi)))
+      this.submittingValue = false
+      this._resubmit(e.submitter)
+    }
+
+    _swapFile (input, newFile) {
+      const dt = new DataTransfer()
+      dt.items.add(newFile)
+      input.files = dt.files
+    }
+
+    _hasFlag (input, flag) { return input.dataset[flag] === '1' }
+    _markFlag (input, flag) { input.dataset[flag] = '1' }
+    _unmarkFlag (input, flag) { delete input.dataset[flag] }
+
+    submittingValueChanged () {
+      const controls = this.element.querySelectorAll('input, select, textarea, button')
+      controls.forEach(el => { el.disabled = this.submittingValue })
+    }
+
+    async _processFileInput (fileInput) {
+      this._markFlag(fileInput, 'processing')
+      fileInput.disabled = true
+      try {
+        const original = fileInput.files[0]
+        const { changed, file } = await optimizeVideo(original, {
+          onProgress: (ratio) => this._fire(fileInput, 'progress', { progress: Math.round(ratio * 100) })
+        })
+        if (changed) this._swapFile(fileInput, file)
+        this._markFlag(fileInput, 'processed')
+        this._fire(fileInput, 'done', { changed })
+      } catch (err) {
+        console.error(err)
+        this._markFlag(fileInput, 'processed')
+        this._fire(fileInput, 'error', { error: err })
+      } finally {
+        fileInput.disabled = false
+        this._unmarkFlag(fileInput, 'processing')
+      }
+    }
+
+    _fire (el, name, detail = {}) {
+      el.dispatchEvent(new CustomEvent(`straight-to-video:${name}`, { bubbles: true, cancelable: true, detail }))
+    }
+
+    _resubmit (submitter) {
+      setTimeout(() => { submitter ? this.element.requestSubmit(submitter) : this.element.requestSubmit() }, 0)
+    }
+  }
+
+  app.register(name, StraightToVideoController)
+  return StraightToVideoController
+}
+
+// Public API
+export { canOptimizeVideo, optimizeVideo, registerStraightToVideoController}

data/config/importmap.rb

@@ -0,0 +1,2 @@
+pin "straight-to-video", to: "straight-to-video.js", preload: false
+pin "mediabunny", to: "mediabunny.min.mjs", preload: false

data/index.html

@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Straight‑to‑Video — Save bandwidth and server costs</title>
+    <meta name="description" content="Browser-based, hardware-accelerated video upload optimization" />
+    <meta property="og:image" content="https://searlsco.github.io/straight-to-video/assets/img/backdrop.webp">
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+    <script type="importmap">
+    {
+      "imports": {
+        "straight-to-video": "./index.js",
+        "@hotwired/stimulus": "https://cdn.jsdelivr.net/npm/@hotwired/stimulus/+esm",
+        "mediabunny": "https://cdn.jsdelivr.net/npm/mediabunny/+esm"
+      }
+    }
+    </script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css">
+    <style>
+      :root {
+        --bg: #0a0b14;
+        --bg2: #090a12;
+        --fg: #eaf4ff;
+        --muted: #b5c0d0cc;
+        --accent: #7afcff; /* neon cyan */
+        --accent2: #ff5ef1; /* neon magenta */
+        --accent3: #ffd36e; /* warm neon */
+        --grid: #ffffff0d;
+        --section-mt: 48px;
+        color-scheme: dark;
+      }
+      body {
+        margin: 0; color: var(--fg); background:
+          radial-gradient(1200px 600px at 10% 10%, #101225, transparent),
+          radial-gradient(900px 500px at 90% 10%, #170f2a, transparent),
+          linear-gradient(180deg, var(--bg), var(--bg2));
+        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
+        line-height: 1.35;
+      }
+      a { color: var(--accent); text-decoration: none; }
+      a:hover { text-decoration: underline; }
+      .wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
+
+      .hero { margin: 0; display: grid; place-items: center; text-align: center; position: relative; }
+      .hero::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -48px; width: min(980px, 96%); height: 160px; background: radial-gradient(520px 100px at 50% 0, #ffffff0a, transparent 75%); pointer-events: none; filter: blur(12px); }
+      .hero-logo { max-width: min(780px, 90%); width: auto; height: auto; max-height: 40dvh; filter: drop-shadow(0 6px 28px #0008); margin-top: var(--section-mt); }
+      .hero-tag { margin-top: 12px; font-size: clamp(44px, 7.5vw, 93px); font-weight: 900; letter-spacing: .3px; }
+      .hero-sub { margin-top: 12px; font-size: clamp(20px, 2.8vw, 26px); font-weight: 700; color: var(--fg); max-width: 860px; }
+      .btn { padding: 14px 18px; border-radius: 14px; border: 1px solid #ffffff22; background: #101421; color: var(--fg); cursor: pointer; font-weight: 700; letter-spacing: .2px; }
+      .btn.primary { background: linear-gradient(135deg, #1b1f33, #0f1a26); border-color: #ffffff33; box-shadow: 0 0 0 1px #ffffff0a inset, 0 0 24px #7afcff20; }
+      .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px #0008, 0 0 24px #7afcff33; }
+      .btn.ghost { background: var(--bg); border-color: #ffffff33; box-shadow: none; }
+      .btn.ghost:hover { transform: translateY(-1px); box-shadow: 0 6px 18px #0006; border-color: #ffffff55; }
+      .btn.readme { color: #ff8a50; border-color: #ff6a4a; }
+      .btn.readme:hover { box-shadow: 0 6px 18px #0006, 0 0 16px 2px rgba(255, 72, 32, 0.25); border-color: #ff8a50; color: #ff9b6a; }
+
+      /* Try It (single‑button) */
+      .try { margin: var(--section-mt) 0 0; padding: 0; border: 0; background: none; backdrop-filter: none; display: grid; gap: 0; justify-items: center; position: relative; }
+      .try::before { content: ''; position: absolute; top: -24px; left: 50%; transform: translateX(-50%); width: min(980px, 96%); height: 80px; background: radial-gradient(520px 80px at 50% 0, #ffffff06, transparent 75%); pointer-events: none; filter: blur(10px); }
+      .pill { padding: 6px 10px; border-radius: 999px; border: 1px solid #ffffff1f; font-size: 12px; color: var(--muted); }
+      progress { width: min(420px, 90%); height: 12px; margin-top: var(--section-mt); }
+      .hidden { display: none; }
+      .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; margin: 0; }
+      .small { font-size: 13px; color: var(--muted); }
+      .sizes { font-size: clamp(18px, 3vw, 28px); color: var(--fg); }
+      .sizes strong { font-weight: 900; }
+      .sizes { margin-top: 8px; }
+
+      #tryBtn {
+        font-size: clamp(18px, 2.8vw, 26px);
+        padding: 18px 32px;
+        border-radius: 16px;
+        border: 1px solid #ffffff33;
+        background: linear-gradient(135deg, #ff3b3b, #ff8a50);
+        color: #fff;
+        text-shadow: 0 1px 6px #000c;
+        box-shadow: 0 12px 28px #0008, 0 0 64px 12px rgba(255, 66, 48, 0.58);
+      }
+      #tryBtn:hover { transform: translateY(-1px); box-shadow: 0 18px 36px #000a, 0 0 86px 14px rgba(255, 66, 48, 0.65); }
+      #tryBtn:active { transform: translateY(0); }
+
+      /* Features */
+      .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: var(--section-mt) 0 0; }
+      .card { padding: 16px; border-radius: 14px; border: 1px solid #ffffff1f; background: #0c0f1b; }
+      .card h3 { margin: 0 0 6px; font-size: 16px; }
+      .card p { margin: 0; color: var(--muted); font-size: 14px; }
+
+      /* Code */
+      pre[class*="language-"] {
+        border-radius: 12px;
+        background: var(--bg);
+        border: 1px solid #ffffff26;
+        box-shadow: none;
+        position: relative;
+        padding: 12px 14px;
+        line-height: 1.4;
+        margin: 0;
+      }
+      pre[class*="language-"] code { line-height: 1.4; }
+      /* bash code blocks with a non-selectable prompt */
+      pre.language-bash { padding-left: 32px; }
+      pre.language-bash::before {
+        content: '$';
+        position: absolute; left: 12px; top: 12px; color: var(--muted);
+        font-family: inherit; font-size: inherit; line-height: inherit;
+        user-select: none; -webkit-user-select: none;
+        pointer-events: none;
+      }
+      /* Install section layout */
+      #install { max-width: 520px; margin: var(--section-mt) auto 0; }
+      #install pre + pre { margin-top: 28px; }
+      #install p { text-align: center; margin-top: var(--section-mt); }
+
+      /* Footer */
+      footer { display: none; }
+
+      /* CRT mode removed */
+
+      /* Responsive */
+      @media (max-width: 860px) {
+        .features { grid-template-columns: 1fr; }
+      }
+      @media (max-width: 400px) {
+        .wrap { padding-left: 8px; padding-right: 8px; }
+        pre[class*="language-"] { padding: 10px 12px; }
+        pre[class*="language-"] code { font-size: 12px; }
+        .mono { font-size: 12px; }
+        #install { padding: 8px 0; }
+      }
+    </style>
+  </head>
+  <body>
+
+    <main class="wrap">
+      <section class="hero">
+        <img src="assets/img/logo.webp" alt="Straight‑to‑Video logo" class="hero-logo" />
+        <div class="hero-tag">Be wise, optimize!</div>
+        <div class="hero-sub">Skip the server and encode from the comfort of your browser</div>
+      </section>
+
+      <form id="try" class="try" data-controller="straight-to-video" novalidate>
+        <div>
+          <button id="tryBtn" type="button" class="btn primary">Optimize Video</button>
+        </div>
+        <input id="file" class="hidden" aria-label="Video file" data-straight-to-video-target="fileInput" type="file" accept="video/*" />
+        <progress id="p" class="hidden" max="100" value="0" aria-label="Progress"></progress>
+        <div id="sizes" class="sizes hidden" aria-live="polite"></div>
+        <div>
+          <a id="download" class="hidden">Download</a>
+        </div>
+        <pre id="out" class="mono"></pre>
+      </form>
+
+      <section class="features">
+        <div class="card">
+          <h3>Faster user experience</h3>
+          <p>Modern browsers can <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API" target="_blank" rel="noopener">encode video</a> faster than ancient ISPs can upload large files.</p>
+        </div>
+        <div class="card">
+          <h3>Ready to share</h3>
+          <p>Videos are optimized to <a href="https://developers.facebook.com/docs/instagram-platform/instagram-graph-api/reference/ig-user/media#video-specifications" target="_blank" rel="noopener">Instagram's specifications</a>—no server-side transcoding!</p>
+        </div>
+        <div class="card">
+          <h3>Stimulus support</h3>
+          <p>The bundled <a href="https://stimulus.hotwired.dev/" target="_blank" rel="noopener">Stimulus</a> controller can be wired up in two lines of JavaScript.</p>
+        </div>
+      </section>
+
+      <section id="install">
+        <h2>Install</h2>
+<pre class="language-bash"><code>npm install straight-to-video</code></pre>
+<pre class="language-bash"><code>bundle add straight_to_video</code></pre>
+        <p>
+          <a class="btn ghost readme" href="https://github.com/searlsco/straight-to-video" target="_blank" rel="noopener">View README</a>
+      </p>
+      </section>
+    </main>
+
+    <script type="module">
+      import { Application, Controller } from '@hotwired/stimulus'
+      import { registerStraightToVideoController } from 'straight-to-video'
+
+      const app = Application.start()
+      registerStraightToVideoController(app, { Controller })
+
+      const form = document.getElementById('try')
+      const fileEl = document.getElementById('file')
+      const tryBtn = document.getElementById('tryBtn')
+      const p = document.getElementById('p')
+      const pct = document.getElementById('pct')
+      const out = document.getElementById('out')
+      const dl = document.getElementById('download')
+      const sizes = document.getElementById('sizes')
+
+      // Removed environment badge
+
+      // Single‑button flow: open picker then auto‑submit
+      tryBtn.addEventListener('click', () => {
+        if (fileEl.showPicker) { try { fileEl.showPicker(); return } catch (_) {} }
+        fileEl.click()
+      })
+
+      let beforeSize = 0
+      fileEl.addEventListener('change', () => {
+        if (!(fileEl.files && fileEl.files.length)) return
+        beforeSize = fileEl.files[0].size || 0
+        sizes.classList.remove('hidden')
+        p.classList.remove('hidden')
+        pct && (pct.textContent = '0%')
+        try { form.requestSubmit() } catch (_) {}
+      })
+
+      // Mirror controller events into the UI
+      fileEl.addEventListener('straight-to-video:progress', (e) => {
+        const v = Math.max(0, Math.min(100, e.detail?.progress ?? 0))
+        p.value = v; if (pct) pct.textContent = `${v}%`
+      })
+      fileEl.addEventListener('straight-to-video:error', (e) => {
+        out.textContent = `Error: ${e.detail?.error?.message || e.detail?.error}`
+      })
+      fileEl.addEventListener('straight-to-video:done', () => {
+        const f = fileEl.files?.[0]
+        if (!f) return
+        const url = URL.createObjectURL(f)
+        dl.href = url
+        dl.download = f.name || 'video-optimized.mp4'
+        dl.textContent = `Download ${dl.download}`
+        dl.classList.remove('hidden')
+        const afterSize = f.size || 0
+        const saved = Math.max(0, beforeSize - afterSize)
+        const pctSaved = beforeSize > 0 ? Math.round((saved / beforeSize) * 100) : 0
+        const fmt = (b) => (b / (1024 * 1024)).toFixed(2) + ' MB'
+        sizes.innerHTML = `Before: <strong>${fmt(beforeSize)}</strong> • After: <strong>${fmt(afterSize)}</strong> • Saved: <strong>${pctSaved}%</strong>`
+        out.textContent = ''
+        setTimeout(() => dl.click(), 150)
+      })
+
+      // Prevent navigation; controller will optimize on submit and we auto-download above
+      form.addEventListener('submit', (e) => e.preventDefault())
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-json.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup.min.js"></script>
+  </body>
+  </html>