// engine.jsx — RD8 explainer engine // WebCodecs MP4 decode → ImageBitmap frames → canvas player, plus on-brand // window chrome and a small monoline icon set. Loads React (global) + MP4Box (global). // Exported to window: loadClip, ClipCanvas, AppWindow, Icon, DotGrid, ScanLines // ── MP4 demux + WebCodecs decode → array of downscaled ImageBitmaps ────────── // Decodes sequentially (H.264 deltas) but only keeps `targetFrames` evenly // sampled frames, downscaled to maxW. Returns { frames:[ImageBitmap], w, h }. async function loadClip(path, { maxW = 760, targetFrames = 150, onProgress } = {}) { const ab = await fetch(path).then((r) => r.arrayBuffer()); const bytes = new Uint8Array(ab); const dv = new DataView(ab); // locate the avcC box (codec config) by fourcc scan let ai = -1; for (let i = 8; i < bytes.length - 4; i++) { if (bytes[i] === 0x61 && bytes[i + 1] === 0x76 && bytes[i + 2] === 0x63 && bytes[i + 3] === 0x43) { ai = i; break; } } if (ai < 0) throw new Error('avcC not found in ' + path); const boxSize = dv.getUint32(ai - 4); const desc = bytes.slice(ai + 4, ai - 4 + boxSize); const buf = ab.slice(0); buf.fileStart = 0; const mp4 = MP4Box.createFile(); const info = await new Promise((res, rej) => { mp4.onError = rej; mp4.onReady = res; mp4.appendBuffer(buf); mp4.flush(); }); const track = info.videoTracks[0]; const N = track.nb_samples; const samples = await new Promise((res) => { let acc = []; mp4.onSamples = (id, user, s) => { acc = acc.concat(s); if (acc.length >= N) res(acc); }; mp4.setExtractionOptions(track.id, null, { nbSamples: N }); mp4.start(); setTimeout(() => res(acc), 8000); }); const srcW = track.video.width, srcH = track.video.height; const w = Math.round(maxW); const h = Math.round(maxW * srcH / srcW); const tf = Math.min(targetFrames, samples.length); const want = new Map(); // sample index -> output order for (let k = 0; k < tf; k++) { const idx = Math.round((k / (tf - 1)) * (samples.length - 1)); if (!want.has(idx)) want.set(idx, want.size); } const maxIdx = Math.max(...want.keys()); const frames = new Array(want.size); const tasks = []; await new Promise((res, rej) => { let idx = 0; let settled = false; const finish = () => { if (!settled) { settled = true; res(); } }; // hard ceiling: never let a stalled decoder hang the loader const guard = setTimeout(finish, 12000); const dec = new VideoDecoder({ output: (frame) => { if (want.has(idx)) { const order = want.get(idx); tasks.push( createImageBitmap(frame, { resizeWidth: w, resizeHeight: h, resizeQuality: 'high' }) .then((bmp) => { frames[order] = bmp; frame.close(); }) .catch(() => frame.close()) ); } else { frame.close(); } idx++; if (onProgress && (idx % 12 === 0)) onProgress(Math.min(1, idx / (maxIdx + 1))); if (idx > maxIdx) { clearTimeout(guard); finish(); } }, error: (e) => { clearTimeout(guard); if (!settled) { settled = true; rej(e); } }, }); dec.configure({ codec: track.codec, description: desc, codedWidth: srcW, codedHeight: srcH }); // Feed chunks but THROTTLE: if the decoder's queue grows too large it can // stall or run out of memory on weaker hardware. Yield whenever the queue // is deep so the decoder can drain. (async () => { for (let i = 0; i <= maxIdx; i++) { if (settled) return; while (dec.decodeQueueSize > 24) { await new Promise((r) => setTimeout(r, 8)); if (settled) return; } try { dec.decode(new EncodedVideoChunk({ type: i === 0 ? 'key' : 'delta', timestamp: (i * 1e6) / 30, data: samples[i].data })); } catch (e) { /* decoder closed mid-feed */ return; } } try { await dec.flush(); } catch (e) { /* flushed after close */ } clearTimeout(guard); finish(); })(); }); await Promise.all(tasks); if (onProgress) onProgress(1); return { frames: frames.filter(Boolean), w, h, srcW, srcH }; } // ── ClipCanvas — draws the right frame for the current sprite localTime ────── // playSeconds = wall-clock time to play through all frames once. function ClipCanvas({ clip, width, height, playSeconds = 12, loop = true, radius = 0, style = {} }) { const ref = React.useRef(null); const { localTime } = window.useSprite(); const N = clip ? clip.frames.length : 0; React.useEffect(() => { const cv = ref.current; if (!cv || !clip || N === 0) return; const ctx = cv.getContext('2d'); let u = playSeconds > 0 ? localTime / playSeconds : 0; u = loop ? ((u % 1) + 1) % 1 : window.clamp(u, 0, 1); let i = Math.floor(u * N); if (i >= N) i = N - 1; if (i < 0) i = 0; const bmp = clip.frames[i]; if (!bmp) return; // object-fit: cover const cw = cv.width, ch = cv.height; const sRatio = bmp.width / bmp.height, dRatio = cw / ch; let sw, sh, sx, sy; if (sRatio > dRatio) { sh = bmp.height; sw = sh * dRatio; sx = (bmp.width - sw) / 2; sy = 0; } else { sw = bmp.width; sh = sw / dRatio; sx = 0; sy = (bmp.height - sh) / 2; } ctx.drawImage(bmp, sx, sy, sw, sh, 0, 0, cw, ch); }); // device-pixel sharp const dpr = Math.min(2, window.devicePixelRatio || 1); return ( ); } // ── AppWindow — on-brand dark application/browser chrome around media ──────── function AppWindow({ width, height, variant = 'app', title = 'RD8.SOFTWARE', tabs = ['OVERVIEW', 'PARTS', 'INTERFACES', 'CALCULATIONS'], activeTab = 0, url = 'rd8.ai/screening', glow = true, children, style = {}, }) { const barH = 46; return (
{['#3a3a3a', '#3a3a3a', '#3a3a3a'].map((c, i) => ( ))}
{variant === 'app' ? ( <> {title}
{tabs.map((t, i) => ( {t} ))}
) : (
{url}
)}
{children}
); } // ── Icon — thin monoline (1.5px) set matching RD8's product icons ──────────── const ICON_PATHS = { lock: '', shield: '', file: '', cube: '', upload: '', clock: '', check: '', arrowRight: '', pen: '', spark: '', layers: '', target: '', ruler: '', download: '', }; function Icon({ name, size = 22, color = 'currentColor', stroke = 1.6, style = {} }) { return ( ); } // ── Decorative: faint engineering dot-grid background layer ────────────────── function DotGrid({ opacity = 0.5, color = 'rgba(255,255,255,0.05)', size = 46 }) { return (
); } Object.assign(window, { loadClip, ClipCanvas, AppWindow, Icon, DotGrid });