From 7bd561a170f882059545e32471a91e80e665ba6e Mon Sep 17 00:00:00 2001
From: brian <brian@truenas.local>
Date: Wed, 27 May 2026 13:25:25 -0700
Subject: [PATCH] Fix: drag button without triggering recording (200ms hold
 threshold)

---
 static/index.html | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/static/index.html b/static/index.html
index 734d64e..ec0b7ad 100644
--- a/static/index.html
+++ b/static/index.html
@@ -102,9 +102,15 @@ document.getElementById('cancelBtn').addEventListener('click',()=>{
   fetch('/cancel',{method:'POST'}).then(()=>{status.textContent='⌃C sent'}).catch(()=>{});
 });
 
-btn.addEventListener('pointerdown',e=>{if(e.pointerId!==undefined)btn.setPointerCapture(e.pointerId);e.preventDefault();start()});
-btn.addEventListener('pointerup',stop);
-btn.addEventListener('pointercancel',stop);
+btn.addEventListener('pointerdown',e=>{if(e.pointerId!==undefined)btn.setPointerCapture(e.pointerId);e.preventDefault();btn._startX=e.clientX;btn._startY=e.clientY;btn._dragged=false;btn._holdTimer=setTimeout(()=>{if(!btn._dragged)start();},200);});
+btn.addEventListener('pointermove',e=>{
+  const dx=e.clientX-btn._startX,dy=e.clientY-btn._startY;
+  if(Math.abs(dx)+Math.abs(dy)>10){btn._dragged=true;clearTimeout(btn._holdTimer);}
+});
+btn.addEventListener('pointerup',()=>{clearTimeout(btn._holdTimer);if(!btn._dragged)stop();});
+
+// Stop recording on pointerup anywhere if recording
+document.addEventListener('pointerup',()=>{if(mediaRec&&mediaRec.state==='recording')stop();});
 
 // Draggable FABs
 document.querySelectorAll('.fab').forEach(fab=>{