feat(fusion_clock): NFC photo capture — 10s auto-capture, vertical oval, cache-busted avatar

- Profile photo DID save (verified: image_1920 attachment persists); the
  "doesn't update" was a browser-cache miss. Add ?unique=<write_date> to the
  result-card avatar URL so a freshly-captured photo shows on clock in/out.
- Capture now starts a 10-second countdown (time to get into frame) then
  auto-snaps; the button toggles to Cancel while counting.
- Face guide is now a VERTICAL oval (aspect-ratio 3/4) over a portrait stage —
  it was rendering horizontal. Faces are taller than wide.

Deployed live to entech (LXC 111) as 19.0.3.11.3; frontend bundle verified to
compile clean and contain the new rules.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-05-30 18:14:19 -04:00
parent 09cea73e50
commit e26a7cd9e8
4 changed files with 73 additions and 11 deletions

View File

@@ -1039,6 +1039,7 @@
<h2>Take ${escapeHtml(employeeName)}'s photo</h2>
<div class="nfc-photo-stage" id="photo_stage">
<div class="nfc-photo-guide"></div>
<div class="nfc-photo-countdown" id="photo_countdown"></div>
<div class="nfc-photo-hint">Center the face in the oval</div>
</div>
<div class="actions" style="justify-content:space-between">
@@ -1055,11 +1056,46 @@
v.srcObject = cameraStream;
stage.insertBefore(v, stage.firstChild);
v.play().catch(() => {});
document.getElementById("photo_capture").addEventListener("click", () => {
const captureBtn = document.getElementById("photo_capture");
const skipBtn = document.getElementById("photo_skip");
const cdEl = document.getElementById("photo_countdown");
const hintEl = stage.querySelector(".nfc-photo-hint");
let cdTimer = null;
const doCapture = () => {
captured = _captureProfileSquare(v);
if (captured) renderPreview(); else finish();
};
// Click Capture → 10s countdown (time to get into frame) → auto-snap.
// While counting, the button becomes Cancel (cdTimer also acts as the flag).
captureBtn.addEventListener("click", () => {
if (cdTimer) {
clearInterval(cdTimer); cdTimer = null;
cdEl.classList.remove("is-active"); cdEl.textContent = "";
if (hintEl) hintEl.textContent = "Center the face in the oval";
captureBtn.textContent = "Capture";
return;
}
let n = 10;
captureBtn.textContent = "Cancel";
if (hintEl) hintEl.textContent = "Get ready…";
cdEl.textContent = n;
cdEl.classList.add("is-active");
cdTimer = setInterval(() => {
n -= 1;
if (n <= 0) {
clearInterval(cdTimer); cdTimer = null;
cdEl.classList.remove("is-active"); cdEl.textContent = "";
doCapture();
return;
}
cdEl.textContent = n;
}, 1000);
});
skipBtn.addEventListener("click", () => {
if (cdTimer) { clearInterval(cdTimer); cdTimer = null; }
finish();
});
document.getElementById("photo_skip").addEventListener("click", finish);
}
renderLive();
}