screengraft 0.13.1 → 0.20.4

package/ui/index.html

@@ -277,8 +277,24 @@
   /* 304px wrapped "desktop" onto a second line. The rail is sized to the
      content it must hold — four device chips in one row — rather than to a
      round number. */
-  .stage{display:grid;grid-template-columns:minmax(0,1fr) 344px;min-height:0;overflow:hidden}
-  .stage.compare{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 344px}
+  /* Side by side is the layout, not a mode. Judging a corner means seeing the
+     same corner in the fit and in the composite at the same zoom, so a version
+     of this page where that is optional is a version where the check is
+     optional. Two equal panes plus the rail. */
+  .stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 344px;
+         min-height:0;overflow:hidden}
+  /* Below ~1100px two panes and a 344px rail no longer fit, and the page starts
+     scrolling sideways — which the UI audit catches as a hard failure. Stack the
+     panes instead of dropping one: losing the comparison is the one thing this
+     layout exists to prevent, so the axis gives way before the pairing does.
+     (Found by the audit after compare stopped being optional, at 742px.) */
+  @media (max-width:1100px){
+    .stage{grid-template-columns:minmax(0,1fr) 344px;
+           grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
+    .stage > .pane:first-of-type{grid-column:1;grid-row:1}
+    .stage > #outPane{grid-column:1;grid-row:2;border-top:1px solid var(--line)}
+    .stage > .rail{grid-column:2;grid-row:1 / span 2}
+  }
   #types{flex-wrap:nowrap}
   .pane{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);
         position:relative;   /* the frame the corner bar is anchored to */
@@ -327,13 +343,19 @@
      photo is chosen but the screenshot is not, offering corners to fit
      nothing. */
   .cvbar[hidden]{display:none}
+  /* Render spinner. A determinate percentage was the first version and it read
+     as busier than the work felt; a single moving thing says "still going"
+     without asking to be read. prefers-reduced-motion gets a static ring —
+     the button's label already carries the meaning. */
+  .spin{display:inline-block;width:12px;height:12px;margin-left:8px;
+        vertical-align:-1px;border:2px solid currentColor;border-radius:50%;
+        border-right-color:transparent;opacity:.9;
+        animation:spin .7s linear infinite}
+  @keyframes spin{to{transform:rotate(360deg)}}
+  @media (prefers-reduced-motion:reduce){ .spin{animation:none} }
 
   /* Preview popover: the composite at whatever size fits, on the sunk surface
      so the image edge is unambiguous against the panel. */
-  #previewWrap{margin-top:10px;background:var(--well);border-radius:var(--r-md);
-               box-shadow:inset 0 1px 3px rgba(0,0,0,.5);display:grid;
-               place-items:center;min-height:200px;max-height:70vh;overflow:auto}
-  #previewImg{display:block;max-width:100%;height:auto}
 
   /* Switch — the full 8-variant matrix from Figma 17:61
      (State Rest/Hover/Pressed/Disabled x Selected No/Yes).
@@ -403,8 +425,7 @@
   button.switch:focus-visible{outline:none}
   button.switch:focus-visible .sw-track{box-shadow:0 0 0 3px var(--acc-soft);border-color:var(--acc)}
 
-  #outPane{display:none}
-  .stage.compare #outPane{display:grid}
+  #outPane{display:grid}
   #outWrap{overflow:auto;background:var(--well);display:grid;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
   #outImg{display:block;margin:auto}
   .empty{color:var(--mute);font-size:12px;padding:24px;text-align:center;align-self:center;justify-self:center;max-width:320px}
@@ -674,7 +695,6 @@
     </div>
     <span class="spacer"></span>
     <div class="tb-actions">
-      <button id="preview" hidden>Preview</button>
       <button id="imp" class="accent" disabled title="Send the saved file to Claude so it appears in the chat">Send to Claude</button>
       <button id="save" class="accent" disabled>Preview first</button>
     </div>
@@ -714,6 +734,7 @@
         <span class="cvbar-actions">
           <span class="stepper"><button class="sm" data-jump="0">TL</button><button class="sm" data-jump="1">TR</button><button class="sm" data-jump="2">BR</button><button class="sm" data-jump="3">BL</button></span>
           <button class="sm" id="redetect">Re-detect</button>
+          <button class="sm" id="resetquad" title="Put the four edges back to a rectangle in the middle of the photo. Use this if a corner has ended up off the picture where you cannot grab it.">Reset</button>
         </span>
       </div>
     </section>
@@ -726,7 +747,22 @@
         <span class="spacer"></span>
         <span class="sm" style="color:var(--mute)">shares zoom &amp; pan</span>
       </div>
-      <div id="outWrap"><span class="empty" id="outEmpty">Press Preview — or turn on Compare view and this updates as you drag.</span><img id="outImg" alt="" hidden></div>
+      <div id="outWrap"><span class="empty" id="outEmpty">The composite appears here and updates as you drag.</span><img id="outImg" alt="" hidden></div>
+      <!-- Video controls. Hidden entirely for a still source: a scrubber over a
+           screenshot is a control that can only confuse. The fit itself is
+           unchanged — you match the edges on one frame and every frame gets the
+           same geometry, because the photo does not move. -->
+      <div class="cvbar" id="vidbar" hidden>
+        <span class="sm" style="color:var(--mute)">Fit on frame</span>
+        <span class="cvbar-actions">
+          <input type="range" id="vframe" min="0" max="0" value="0" step="1"
+                 aria-label="Which frame of the clip to match the edges on">
+          <span class="sm" id="vframeLbl" style="color:var(--mute);min-width:9ch">0</span>
+          <span class="stepper" role="group" aria-label="Output format">
+            <button class="sm sel" data-preset="web" title="H.264 at CRF 16 — near-visually-lossless, plays anywhere.">Web</button><button class="sm" data-preset="prores" title="ProRes 422 HQ — bigger file, no chroma subsampling. For a case study or further editing.">ProRes</button>
+          </span>
+        </span>
+      </div>
     </section>
 
     <aside class="rail">
@@ -778,17 +814,6 @@
           </button>
         </div>
       </div>
-      <div class="sect" id="secCompare" data-on="1">
-        <div class="sect-top">
-          <div class="sect-left">
-            <h4>Compare view</h4>
-            <button class="info" type="button" aria-label="About compare view"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path fill="currentColor" d="M8.36 1.01C12.06 1.2 15 4.26 15 8l-.01.36C14.8 12.06 11.74 15 8 15l-.36-.01C4.06 14.81 1.19 11.94 1.01 8.36L1 8c0-3.87 3.13-7 7-7l.36.01ZM8 2C4.69 2 2 4.69 2 8c0 3.31 2.69 6 6 6 3.31 0 6-2.69 6-6 0-3.31-2.69-6-6-6Zm.5 8l.5 0v1L7 11v-1h.5V7H7V6h1.5v4ZM7.9 4c.33 0 .6.27.6.6a.6.6 0 1 1-1.21 0c0-.33.28-.6.61-.6Z"/></svg><span class="tip" role="tooltip">Shows the fit and the composite side by side, sharing zoom and pan, so a corner can be judged against the same corner.</span></button>
-          </div>
-          <button class="switch" id="cmpBtn" role="switch" aria-checked="true" aria-label="Compare view">
-            <span class="sw-track"><span class="sw-handle"></span><span class="sw-grip"></span></span>
-          </button>
-        </div>
-      </div>
       <div class="sect" id="secKeys" data-on="1">
         <div class="sect-top"><div class="sect-left"><h4>Keys</h4></div></div>
         <p class="hint"><kbd>&larr;&uarr;&rarr;&darr;</kbd> nudge 1px · <kbd>&#8679;</kbd>+arrow 10px · <kbd>Tab</kbd> next edge</p>
@@ -824,12 +849,6 @@
 <div class="scrim" id="scrim"></div>
 
 
-<div class="pop" id="previewPop" style="width:min(900px,calc(100vw - 24px))">
-  <h3>Preview</h3>
-  <p class="sub" id="previewSt">Rendering…</p>
-  <div id="previewWrap"><img id="previewImg" alt="" hidden></div>
-</div>
-
 <div class="pop" id="pop1">
   <h3>Photo of the device</h3>
   <p class="sub">Recent images from Desktop and Downloads — click one. Or browse, drop a file, or paste a path.</p>
@@ -852,7 +871,7 @@
     <div class="pv" id="pv2"><span class="empty">Select a recent image</span></div>
   </div>
   <div class="drop" id="drop2">Drop a screenshot here or click to browse</div>
-  <input type="file" id="file2" accept="image/*" hidden>
+  <input type="file" id="file2" accept="image/*,video/mp4,video/quicktime,video/webm,.mp4,.mov,.m4v,.webm" hidden>
 </div>
 
 <script>
@@ -1104,26 +1123,28 @@ async function loadRecent(){
   }
 }
 async function choose(role, path, el){
-  try{ const r = await api('/api/use', {role, path}); setChosen(role, r.path, r.size, el); }
+  try{ const r = await api('/api/use', {role, path}); setChosen(role, r.path, r.size, el, r); }
   catch(e){ alert(e.message); }
 }
-function setChosen(role, path, size, el){
+function setChosen(role, path, size, el, meta){
   const n = role==='photo'?1:2;
   document.querySelectorAll('#recent'+n+' .th').forEach(x=>x.classList.remove('sel'));
   if (el) el.classList.add('sel');
   $('#pv'+n).innerHTML = `<img src="${fileURL(path)}" alt="">`;
   const chip = $('#chip'+n);
   chip.classList.remove('is-empty');
-  chip.querySelector('.nm').textContent = `${path.split('/').pop()} · ${size[0]}×${size[1]}`;
+  chip.querySelector('.nm').textContent = `${path.split('/').pop()} · ${size[0]}×${size[1]}`
+    + (meta && meta.video ? ` · ${meta.frames} frames @ ${Math.round(meta.fps)}fps` : '');
   $('#sw'+n).style.background = `center/cover no-repeat url("${fileURL(path)}")`;
-  if (role==='photo'){ st.photo = path; st.corners = null; } else st.shot = path;
+  if (role==='photo'){ st.photo = path; st.corners = null; }
+  else { st.shot = path; st.video = meta && meta.video ? meta : null; syncVideoUI(); }
   closePop();
   maybeStart();
 }
 async function upload(role, file){
   const buf = await file.arrayBuffer();
   const r = await api('/api/upload', null, {headers:{'X-Filename':encodeURIComponent(file.name),'X-Role':role}, body:buf});
-  setChosen(role, r.path, r.size, null);
+  setChosen(role, r.path, r.size, null, r);
 }
 for (const [n, role] of [[1,'photo'],[2,'screenshot']]){
   const drop = $('#drop'+n), file = $('#file'+n);
@@ -1235,7 +1256,7 @@ $('#figmaBtn').onclick = async () => {
       try {
         const r = await api('/api/job/adopt', {});
         stop('ok', 'Exported');
-        setChosen('screenshot', r.path, r.size, null);
+        setChosen('screenshot', r.path, r.size, null, r);
       } catch (e) { stop('err', 'Exported, but the file could not be read: ' + e.message); }
     },
     onError: (j) => stop('err', 'Export failed: ' + (j.message || '')),
@@ -1336,16 +1357,37 @@ async function detect(){
     if (r.corner_radius && r.corner_radius.confident){ setFrac(r.corner_radius.frac_of_width, 'measured from the photo'); }
     else { applyPreset(); $('#radSt').textContent = 'Radius not measurable here — using the device preset.'; }
   } else {
-    const w = img.naturalWidth, h = img.naturalHeight;
-    st.corners = [[w*.3,h*.2],[w*.7,h*.2],[w*.7,h*.8],[w*.3,h*.8]];
-    s.className='status warn'; s.textContent = 'No screen found — place the edges by hand';
+    st.corners = defaultQuad();
+    s.className='status warn';
+    s.textContent = r.abstained ? 'Detector abstained — place the edges by hand'
+                                : 'No screen found — place the edges by hand';
+    // The full reason is long and belongs on hover, not in a 40-character chip.
+    s.title = r.message || '';
     if (!st.type) setType('phone'); applyPreset();
   }
   pick = {kind:'edge', i:0};
   draw(); drawStrip();
   autoPreview();   // if the compare pane is open, fill it straight away
 }
+// One definition of "a sane starting position", used by the abstention path and
+// by Reset. Deliberately a plain centred rectangle: it claims nothing about
+// where the screen is, and every handle is on the picture where it can be
+// grabbed — which is the property the detector's off-canvas quad lacked.
+function defaultQuad(){
+  const w = img.naturalWidth, h = img.naturalHeight;
+  return [[w*.3,h*.2],[w*.7,h*.2],[w*.7,h*.8],[w*.3,h*.8]];
+}
 $('#redetect').onclick = detect;
+$('#resetquad').onclick = () => {
+  if (!img.naturalWidth) return;
+  st.corners = defaultQuad();
+  const s = $('#detSt'); s.className='status warn';
+  s.textContent = 'Edges reset — place them on the screen';
+  s.title = '';
+  pick = {kind:'edge', i:0};
+  setCanvasZoom(scale);
+  draw(); drawStrip(); autoPreview();
+};
 
 function draw(){
   ctx.clearRect(0,0,cv.width,cv.height);
@@ -1724,33 +1766,12 @@ function syncOut(){
   }
 }
 $('#scroller').addEventListener('scroll', () => {
-  if ($('#stage').classList.contains('compare')) syncOut();
+  syncOut();
 });
-/* Compare is a switch now, not a chip. Its truth lives in aria-checked so the
-   control is a real switch to assistive tech, and the label text follows it —
-   a switch that says OFF while being on is worse than no label. */
-function setCompareUI(on){
-  setSwitch($('#cmpBtn'), on);
-  // No text label in the component (17:61) — aria-checked carries the state.
-  // With compare on the result pane renders continuously, so a Preview button
-  // would offer something already on screen. It belongs to the off state.
-  $('#preview').hidden = on;
-}
-$('#cmpBtn').onclick = () => {
-  const on = $('#stage').classList.toggle('compare');
-  setCompareUI(on);
-  remember('compare', on ? '1' : '0');
-  if (img.naturalWidth){
-    const wasFit = Math.abs(scale-fitScale)<1e-6;
-    computeFit(); setCanvasZoom(wasFit ? fitScale : scale);
-  }
-  if (on && $('#outImg').hidden) renderPreview(); else if (on) syncOut();
-};
 function autoPreview(){
   // Judge while you fit: with the compare pane open the composite re-renders
   // after each correction (compose() measures 0.06s server-side), so Preview
   // stops being a round trip.
-  if (!$('#stage').classList.contains('compare')) return;
   clearTimeout(autoTimer);
   autoTimer = setTimeout(renderPreview, 350);
 }
@@ -1763,30 +1784,13 @@ async function renderPreview(){
     im.onload = () => { outNat = im.naturalWidth; im.hidden = false; $('#outEmpty').style.display='none'; syncOut(); };
     im.src = `${fileURL(r.path)}&t=${Date.now()}`;
     s.textContent = `radius ${r.radius_px}px on the screenshot`;
-    const b = $('#save'); b.disabled = false; b.textContent = 'Save';
+    const b = $('#save'); b.disabled = false; b.textContent = st.video ? 'Render' : 'Save';
     b.classList.add('primary');            // Save is now the next action
     if (!previewHinted){ previewHinted = true;
       toast('info', 'Check the corners in Result, then <b>Save</b> — Save renders at full resolution.');
     }
   }catch(e){ s.textContent = e.message; }
 }
-/* With compare off there is no result pane to draw into, so the composite
-   opens in a popup over the canvas — the same surface the pickers use, so it
-   is one modal idiom rather than two. */
-async function openPreviewPop(){
-  const pop = $('#previewPop');
-  const img = $('#previewImg'), st_ = $('#previewSt');
-  openPopAt(pop, $('#preview').getBoundingClientRect());
-  st_.textContent = 'Rendering…'; img.hidden = true;
-  try{
-    const r = await api('/api/preview', {corners: st.corners, radius_frac: radiusValue(), device: st.type, grade: gradeValue()});
-    img.onload = () => { img.hidden = false; };
-    img.src = `${fileURL(r.path)}&t=${Date.now()}`;
-    st_.textContent = `radius ${r.radius_px}px on the screenshot`;
-    const b = $('#save'); b.disabled = false; b.textContent = 'Save'; b.classList.add('primary');
-  }catch(e){ st_.textContent = e.message; }
-}
-$('#preview').onclick = openPreviewPop;
 function prettyDir(p){
   // ~ for home, and show the last two segments of a long path: the interesting
   // part of a long output path is the end, not the volume.
@@ -1796,7 +1800,85 @@ function prettyDir(p){
   return seg.length > 4 ? '…/' + seg.slice(-2).join('/') : d;
 }
 
+let preset = 'web';
+document.querySelectorAll('[data-preset]').forEach(btn => {
+  btn.onclick = () => {
+    preset = btn.dataset.preset;
+    document.querySelectorAll('[data-preset]').forEach(o => o.classList.toggle('sel', o === btn));
+  };
+});
+
+/* A video source changes exactly two things in this page: which frame the fit
+   is shown on, and what the primary button does. Everything else — the edge
+   matching, the loupe, the compare view, the realism rail — is untouched,
+   because the geometry does not care whether the pixels move. */
+function syncVideoUI(){
+  const v = st.video;
+  $('#vidbar').hidden = !v;
+  const b = $('#save');
+  if (v && v.ffmpeg === false){
+    // Say it now, not after the fit. The fitting still works — it is only the
+    // encode that cannot run — so the page stays usable and the message names
+    // the one thing to do.
+    toast('err', 'Video needs <b>ffmpeg</b>, which is not installed yet. '
+               + 'Ask Claude to install it (about 25 MB, into screengraft\'s own '
+               + 'environment — nothing system-wide), then reload this page.');
+  }
+  if (v){
+    const sl = $('#vframe');
+    sl.max = Math.max(0, (v.frames || 1) - 1);
+    sl.value = 0;
+    $('#vframeLbl').textContent = `0 / ${Math.max(0,(v.frames||1)-1)}`;
+    if (b.textContent === 'Save') b.textContent = 'Render';
+  }
+}
+$('#vframe').oninput = () => { $('#vframeLbl').textContent = `${$('#vframe').value} / ${$('#vframe').max}`; };
+$('#vframe').onchange = async () => {
+  // Swapping the poster frame re-runs preview through the same path a still
+  // uses, so what you match the edges against is the frame you chose.
+  try{
+    const r = await api('/api/frame', {index: +$('#vframe').value});
+    $('#pv2').innerHTML = `<img src="${fileURL(r.path)}" alt="">`;
+    $('#sw2').style.background = `center/cover no-repeat url("${fileURL(r.path)}")`;
+    autoPreview();
+  }catch(e){ toast('err', 'Could not read that frame: ' + e.message); }
+};
+
+async function renderVideo(){
+  const b = $('#save');
+  b.disabled = true;
+  b.innerHTML = 'Rendering<span class="spin" aria-hidden="true"></span>';
+  try{
+    await api('/api/render', {corners: st.corners, radius_frac: radiusValue(), device: st.type,
+                              grade: gradeValue(), preset, fit_frame: +$('#vframe').value});
+  }catch(e){ toast('err','Could not start the render: '+e.message); b.disabled=false; b.textContent='Render'; return; }
+  // Poll rather than hold a request open: a clip is hundreds of frames and a
+  // browser would time the request out long before the render finished.
+  const tick = setInterval(async () => {
+    let d; try { d = await api('/api/render_status', null, {method:'GET'}); }
+    catch(e){ return; }
+    if (d.state === 'running'){
+      // The button says what it is doing; the frame counter beside the
+      // scrubber carries the numbers, so the primary control stays calm.
+      b.innerHTML = 'Rendering<span class="spin" aria-hidden="true"></span>';
+      if (d.total) $('#vframeLbl').textContent = `${d.done} / ${d.total} frames`;
+    } else if (d.state === 'done'){
+      clearInterval(tick);
+      b.textContent = 'Render'; b.disabled = false; b.classList.remove('primary');
+      $('#vframeLbl').textContent = `${$('#vframe').value} / ${$('#vframe').max}`;
+      toast('ok', `Rendered <code>${(d.output||'').split('/').pop()}</code> · ${d.done} frames to <code>${prettyDir(st.outDir||'')}</code>`);
+      const imp = $('#imp'); imp.disabled = false; imp.textContent = 'Send to Claude'; imp.classList.add('primary');
+    } else if (d.state === 'error'){
+      clearInterval(tick);
+      b.textContent = 'Render'; b.disabled = false;
+      $('#vframeLbl').textContent = `${$('#vframe').value} / ${$('#vframe').max}`;
+      toast('err', 'Render failed: ' + (d.message || 'unknown'));
+    }
+  }, 900);
+}
+
 $('#save').onclick = async () => {
+  if (st.video) return renderVideo();
   const b = $('#save'); b.textContent = 'Saving…'; b.disabled = true;
   try{
     const r = await api('/api/save', {corners: st.corners, radius_frac: radiusValue(), device: st.type, grade: gradeValue()});
@@ -1864,8 +1946,8 @@ $('#imp').onclick = async () => {
   // Compare is the DEFAULT view: judging a fit means comparing it with the
   // photo, so the side-by-side is the normal state and turning it off is the
   // deliberate act. recall() only overrides it if the user chose otherwise.
-  if (recall('compare','1') === '1'){ $('#stage').classList.add('compare'); setCompareUI(true); }
-  else setCompareUI(false);
+  // Nothing to restore: the side-by-side is the layout now, so there is no
+  // remembered preference and no state where the check is unavailable.
   await loadRecent();
   // A session restored after a reload may already have a saved composite, in
   // which case Import is still meaningful — leaving it disabled would strand
@@ -1879,7 +1961,7 @@ $('#imp').onclick = async () => {
     if (s.device) st.type = s.device;
     for (const [role, path] of [['photo', s.photo], ['screenshot', s.screenshot]]){
       if (!path) continue;
-      try { const r = await api('/api/use', {role, path}); setChosen(role, r.path, r.size, null); }
+      try { const r = await api('/api/use', {role, path}); setChosen(role, r.path, r.size, null, r); }
       catch(e){ /* file moved since: leave that slot empty */ }
     }
     // Populate the radius dropdown on the restore path too. detect() only
@@ -1888,7 +1970,7 @@ $('#imp').onclick = async () => {
     if (st.type) setType(st.type);
     if (s.radius_frac) setFrac(s.radius_frac, 'restored from this session');
     else applyPreset();
-    if ($('#stage').classList.contains('compare') && st.corners) renderPreview();
+    if (st.corners) renderPreview();
   }
   if (!st.photo) openPop(1);
   window.addEventListener('resize', () => {