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:
@@ -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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user