AI Flow: Video

@@ -62,7 +62,7 @@   }   function report() {     const d = v() ? v().duration || 0 : 0, t = v() ? v().currentTime : 0, c = v() ? p._chapterAt?.(t) : null;-    const body = { mode, t: +t.toFixed(2), duration: +d.toFixed(2), left: +(d - t).toFixed(1), chapter: c ? c.title : '', mics: [...$('mic').options].map((o) => o.textContent), mic: $('mic').selectedOptions[0]?.textContent || '', micAccess, cams: [...$('cam').options].slice(1).map((o) => o.textContent), camera: $('cam').value ? $('cam').selectedOptions[0]?.textContent || '' : '', camAccess, filmInPage: filmLocal, audioPlan: $('plan').value, pip: $('cam').value || camStream ? PIP : null,+    const body = { mode, t: +t.toFixed(2), duration: +d.toFixed(2), left: +(d - t).toFixed(1), chapter: c ? c.title : '', mics: [...$('mic').options].map((o) => o.textContent), mic: $('mic').selectedOptions[0]?.textContent || '', micAccess, cams: [...$('cam').options].slice(1).map((o) => o.textContent), camera: $('cam').value ? $('cam').selectedOptions[0]?.textContent || '' : '', camAccess, filmInPage: filmLocal, playback, audioPlan: $('plan').value, pip: $('cam').value || camStream ? PIP : null,       recording: mode === 'record', level: +level.toFixed(3), rawLevel: +rawLevel.toFixed(3), peak: +peak.toFixed(3), boost: +boost.toFixed(2), calibration: cal, calibrating: calPhase, takes: takes.length, chosen: chosen ? chosen.file : null, strokes: strokes.length, status: lastStatus };     fetch('state', { method: 'POST', body: JSON.stringify(body) }).catch(() => {});   }@@ -323,19 +323,60 @@     });   } -  // ---------------- the film, held whole in this page so it can never stall while you record -----------------  let filmLocal = 'no', filmPct = 0, filmTry = null;+  // ---------------- the film: held whole in this page, and proven to play smoothly on THIS computer ----------------+  // Some computers stall on one kind of video and play another perfectly, so before a take the page plays a few+  // seconds out of sight and measures it. If the film does not keep time, it switches to the smooth copy the+  // server makes (a different codec) and measures again.+  let filmLocal = 'no', filmPct = 0, filmTry = null, filmMsg = 'Loading the film', playback = { source: 'not tested' };+  async function pull(url, label) {+    const r = await fetch(url); if (!r.ok) throw new Error(label + ' is not available');+    const total = +r.headers.get('Content-Length') || 0, rd = r.body.getReader(), parts = []; let got = 0;+    for (;;) { const { done, value } = await rd.read(); if (done) break; parts.push(value); got += value.length; filmPct = total ? Math.round(got / total * 100) : 0; filmMsg = `${label}: ${filmPct}%`; if (mode === 'idle') $('mode').textContent = filmMsg; }+    return URL.createObjectURL(new Blob(parts, { type: r.headers.get('Content-Type') || 'video/mp4' }));+  }+  async function smooth(url) {+    const x = document.createElement('video'); x.muted = true; x.playsInline = true; x.style.cssText = 'position:fixed;left:0;bottom:0;width:240px;opacity:.01;pointer-events:none;z-index:1';+    document.body.appendChild(x);+    try {+      await new Promise((res, rej) => { x.onloadeddata = res; x.onerror = () => rej(new Error('this browser cannot play it')); x.src = url; });+      const at = Math.min((x.duration || 30) * 0.3, 90); if (at > 1) { await new Promise((res) => { x.onseeked = res; x.currentTime = at; }); }+      let w = 0; x.addEventListener('waiting', () => w++); await x.play();+      const t0 = performance.now(), c0 = x.currentTime; await wait(4000);+      const wall = (performance.now() - t0) / 1000, film = x.currentTime - c0, q = x.getVideoPlaybackQuality ? x.getVideoPlaybackQuality() : {};+      return { ok: film > wall * 0.94 && w === 0 && (q.droppedVideoFrames || 0) < 12, film: +film.toFixed(2), wall: +wall.toFixed(2), waiting: w, dropped: q.droppedVideoFrames || 0 };+    } catch (e) { return { ok: false, error: e.message }; } finally { x.pause(); x.removeAttribute('src'); x.load(); x.remove(); }+  }+  async function useFilm(url) {+    const el = v(), t = el.currentTime, muted = el.muted; el.pause(); el.preload = 'auto';+    await new Promise((res, rej) => { el.addEventListener('loadeddata', res, { once: true }); el.addEventListener('error', rej, { once: true }); el.src = url; el.load(); });+    if (t > 0.2) el.currentTime = t; el.muted = muted;+  }   function loadFilm() {     if (filmTry) return filmTry;     filmTry = (async () => {       try {-        filmLocal = 'loading'; const r = await fetch('video'); const total = +r.headers.get('Content-Length') || 0; const rd = r.body.getReader(); const parts = []; let got = 0;-        for (;;) { const { done, value } = await rd.read(); if (done) break; parts.push(value); got += value.length; filmPct = total ? Math.round(got / total * 100) : 0; if (mode === 'idle') $('mode').textContent = `Loading film ${filmPct}%`; }-        const url = URL.createObjectURL(new Blob(parts, { type: r.headers.get('Content-Type') || 'video/mp4' }));-        const el = v(), t = el.currentTime, muted = el.muted; el.pause(); el.preload = 'auto';-        await new Promise((res, rej) => { el.addEventListener('loadeddata', res, { once: true }); el.addEventListener('error', rej, { once: true }); el.src = url; el.load(); });-        if (t > 0.2) el.currentTime = t; el.muted = muted; filmLocal = 'yes'; if (mode === 'idle') setMode('idle'); report();-      } catch (e) { filmLocal = 'failed: ' + (e && e.message || 'could not load'); filmTry = null; if (mode === 'idle') setMode('idle'); report(); }+        filmLocal = 'loading'; const url = await pull('video', 'Loading the film');+        filmMsg = 'Checking that the film plays smoothly on this computer'; if (mode === 'idle') $('mode').textContent = 'Checking playback';+        const first = await smooth(url);+        const altNow = (await api('state').catch(() => ({}))).alt;+        if (first.ok && altNow !== 'ready') { await useFilm(url); playback = { source: 'film', test: first }; }+        else if (first.ok) {                                           // both exist: the smooth copy is the easier one to play, so use it when it measures well+          const url2 = await pull('video-alt', 'Loading the smooth copy'); filmMsg = 'Checking the smooth copy'; const second = await smooth(url2);+          await useFilm(second.ok ? url2 : url); playback = second.ok ? { source: 'smooth copy', test: second, filmTest: first } : { source: 'film', test: first, smoothCopyTest: second };+        }+        else {+          playback = { source: 'film', test: first, note: 'the film does not keep time in this browser' }; report();+          filmMsg = 'This computer stalls on the film as it is. Making a copy that plays smoothly (about a minute)';+          let alt = 'building'; for (let i = 0; i < 200 && alt === 'building'; i++) { alt = (await api('state').catch(() => ({}))).alt || 'none'; if (alt === 'building') await wait(2000); }+          if (alt !== 'ready') throw new Error('the film stalls here and no smooth copy could be made (' + alt + ')');+          const url2 = await pull('video-alt', 'Loading the smooth copy');+          filmMsg = 'Checking the smooth copy'; const second = await smooth(url2);+          await useFilm(second.ok ? url2 : url);+          playback = second.ok ? { source: 'smooth copy', test: second, filmTest: first } : { source: 'film', test: first, smoothCopyTest: second, note: 'neither the film nor the smooth copy keeps time here' };+          if (!second.ok) toast('This computer is not playing video smoothly right now. Close other heavy apps or try another browser; tell your AI.', 'error');+        }+        filmLocal = 'yes'; if (mode === 'idle') setMode('idle'); report();+      } catch (e) { filmLocal = 'failed: ' + (e && e.message || 'could not load'); playback = { ...playback, error: filmLocal }; filmTry = null; if (mode === 'idle') setMode('idle'); report(); }     })();     return filmTry;   }@@ -355,13 +396,18 @@   }   let stalls = [], syncLog = [];   setInterval(() => { if (mode === 'record' && tRec.rec) syncLog.push([Math.round(performance.now() - tRec.rec), +v().currentTime.toFixed(3)]); }, 500);+  let lastT = -1, lastMove = 0;+  setInterval(() => { if (mode !== 'record' || !tRec.rec || v().paused) { lastT = -1; return; } const t = v().currentTime, now = performance.now();+    if (t !== lastT) { lastT = t; lastMove = now; return; }+    if (now - lastMove > 1200) { stalls.push([Math.round(now - tRec.rec), +t.toFixed(2), 'nudged']); lastMove = now; try { v().currentTime = t + 0.04; v().play().catch(() => {}); } catch (_) {} }+  }, 300);   const onStall = () => { if (mode === 'record' && tRec.rec) { stalls.push([Math.round(performance.now() - tRec.rec), +v().currentTime.toFixed(2)]); if (stalls.length === 1) toast('The film paused for a moment. Keep going: your AI can still line your voice up.', 'info'); } };   async function record() {     if (mode !== 'idle') return;     try { await openMic(); } catch (_) { return; }     if (!(cal && cal.result === 'ok')) toast('Tip: Calibrate first so your voice is recorded at a good level.', 'info');-    if (filmLocal !== 'yes') { modal(`<h2>Getting the film ready...</h2><p>Loading the whole film into this page so it cannot pause while you talk. <b id="film-pct"></b></p>`); const iv = setInterval(() => { const e = $('film-pct'); if (e) e.textContent = filmPct + '%'; }, 200); await loadFilm(); clearInterval(iv); closeModal();-      if (filmLocal !== 'yes') toast('The film could not be loaded into the page; it will play from your workspace instead.', 'info'); }+    if (filmLocal !== 'yes') { modal(`<h2>Getting the film ready...</h2><p>The whole film is loaded into this page and test-played, so it cannot pause while you talk.</p><p><b id="film-pct"></b></p>`); const iv = setInterval(() => { const e = $('film-pct'); if (e) e.textContent = filmMsg; }, 200); await loadFilm(); clearInterval(iv); closeModal();+      if (filmLocal !== 'yes') toast('The film could not be prepared (' + filmLocal + '). It may pause while you record; tell your AI.', 'error'); }     stopFlag = false; strokes = []; chunks = []; peak = 0; tRec = {}; stalls = []; syncLog = [];     setMode('preroll'); say('Countdown before recording');     v().pause(); p.seekTo(0); capsOn(); v().muted = !info.cueAudio;@@ -395,7 +441,7 @@      const blob = new Blob(chunks, { type: rec.mimeType || 'audio/webm' });     const drawn = strokes.map((s) => ({ t0: s.t0, end: s.end ?? +v().currentTime.toFixed(3), wiped: s.wiped, pts: s.pts }));-    const meta = { mime: blob.type, mic: $('mic').selectedOptions[0]?.textContent || '', videoStartsAtMs: Math.round((tRec.play ?? tRec.rec) - tRec.rec), recordedMs: Math.round(performance.now() - tRec.rec), camStartsAtMs: camBlob && tRec.cam !== undefined ? Math.round(tRec.cam - tRec.rec) : null, filmInPage: filmLocal, stalls, sync: syncLog.filter((_, i) => i % 4 === 0), audioPlan: $('plan').value, pip: camBlob ? { ...PIP } : null, camera: camBlob ? ($('cam').value ? $('cam').selectedOptions[0]?.textContent || '' : 'camera') : '', videoStoppedAtS: +v().currentTime.toFixed(2), videoDurationS: +v().duration.toFixed(2), whole, peak: +peak.toFixed(3), boost: +boost.toFixed(2), calibration: cal, strokes: drawn.length, drawFade: S.drawFade };+    const meta = { mime: blob.type, mic: $('mic').selectedOptions[0]?.textContent || '', videoStartsAtMs: Math.round((tRec.play ?? tRec.rec) - tRec.rec), recordedMs: Math.round(performance.now() - tRec.rec), camStartsAtMs: camBlob && tRec.cam !== undefined ? Math.round(tRec.cam - tRec.rec) : null, filmInPage: filmLocal, playback, stalls, sync: syncLog.filter((_, i) => i % 4 === 0), audioPlan: $('plan').value, pip: camBlob ? { ...PIP } : null, camera: camBlob ? ($('cam').value ? $('cam').selectedOptions[0]?.textContent || '' : 'camera') : '', videoStoppedAtS: +v().currentTime.toFixed(2), videoDurationS: +v().duration.toFixed(2), whole, peak: +peak.toFixed(3), boost: +boost.toFixed(2), calibration: cal, strokes: drawn.length, drawFade: S.drawFade };     setMode('idle', 'Saving'); say('Saving the take');     modal(`<h2>Saving your recording...</h2><p>Keep this tab open.</p>`);     try {