@ai-matrx/capture 0.3.1 → 0.4.0

package/dist/react.d.cts

@@ -446,14 +446,18 @@ declare function CaptureRail({ actions, defaultExpanded, className, }: CaptureRa
  *   pointerdown            → arm a hold timer (HOLD_MS)
  *   timer fires            → start recording, ring begins filling
  *   pointerup  < HOLD_MS   → cancel the timer, take a photo
- *   pointerup >= HOLD_MS   → stop recording
+ *   pointerup >= HOLD_MS   → stop recording (recording follows the finger)
+ *   slide up ≥ LOCK_DRAG_PX while holding → LOCK: release keeps recording,
+ *                            the next tap stops
  *   pointercancel / leave  → same as pointerup (a drag off the button must not
  *                            leave the camera recording with nothing to stop it)
  *
- * A LOCK is deliberate: after ~1.2s of recording the button latches, so a user
- * whose finger slips does not lose the take. Once latched, the next tap stops.
- * Without it, the single-button model punishes exactly the long recordings it
- * exists to make easy.
+ * A LOCK is a GESTURE, never a timer (Arman, 2026-08-30: recording follows
+ * the finger — releasing stops, full stop — unless the user deliberately
+ * locks): while holding a recording, slide UP to the lock target that
+ * appears above the button. Locked, release keeps recording and the next
+ * tap stops. An automatic time-based latch shipped first and was wrong —
+ * it silently converted "I let go" into "still recording".
  *
  * Presentational only — the host owns the recorder.
  */

package/dist/react.d.ts

@@ -446,14 +446,18 @@ declare function CaptureRail({ actions, defaultExpanded, className, }: CaptureRa
  *   pointerdown            → arm a hold timer (HOLD_MS)
  *   timer fires            → start recording, ring begins filling
  *   pointerup  < HOLD_MS   → cancel the timer, take a photo
- *   pointerup >= HOLD_MS   → stop recording
+ *   pointerup >= HOLD_MS   → stop recording (recording follows the finger)
+ *   slide up ≥ LOCK_DRAG_PX while holding → LOCK: release keeps recording,
+ *                            the next tap stops
  *   pointercancel / leave  → same as pointerup (a drag off the button must not
  *                            leave the camera recording with nothing to stop it)
  *
- * A LOCK is deliberate: after ~1.2s of recording the button latches, so a user
- * whose finger slips does not lose the take. Once latched, the next tap stops.
- * Without it, the single-button model punishes exactly the long recordings it
- * exists to make easy.
+ * A LOCK is a GESTURE, never a timer (Arman, 2026-08-30: recording follows
+ * the finger — releasing stops, full stop — unless the user deliberately
+ * locks): while holding a recording, slide UP to the lock target that
+ * appears above the button. Locked, release keeps recording and the next
+ * tap stops. An automatic time-based latch shipped first and was wrong —
+ * it silently converted "I let go" into "still recording".
  *
  * Presentational only — the host owns the recorder.
  */

package/dist/react.js

@@ -601,7 +601,7 @@ import {
   useRef,
   useState as useState3
 } from "react";
-import { ChevronLeft, ChevronRight, Pencil, Trash2, X as X2 } from "lucide-react";
+import { ChevronLeft, ChevronRight, Pencil, Play, Trash2, X as X2 } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var SWIPE_TRIGGER_PX = 40;
 var SWIPE_TRIGGER_VELOCITY = 0.25;
@@ -624,6 +624,7 @@ function MediaViewer({
   const clamped = Math.min(index, count - 1);
   const current = count > 0 ? items[clamped] : void 0;
   const [confirmingDelete, setConfirmingDelete] = useState3(false);
+  const activeVideoRef = useRef(null);
   const dragRef = useRef(null);
   const [drag, setDrag] = useState3(null);
   const [settling, setSettling] = useState3(false);
@@ -664,7 +665,7 @@ function MediaViewer({
     return () => window.removeEventListener("keydown", onKey);
   }, [go, onClose, keysDisabled]);
   const onPointerDown = useCallback2((e) => {
-    if (e.target.closest("video, audio")) return;
+    if (e.target.closest("audio")) return;
     dragRef.current = {
       x0: e.clientX,
       y0: e.clientY,
@@ -711,6 +712,14 @@ function MediaViewer({
           return;
         }
       }
+      if (d.axis === null) {
+        const video = activeVideoRef.current;
+        if (video) {
+          if (video.paused) void video.play().catch(() => {
+          });
+          else video.pause();
+        }
+      }
       setDrag(null);
       setSettling(true);
     },
@@ -787,7 +796,15 @@ function MediaViewer({
           onPointerMove,
           onPointerUp: endDrag,
           onPointerCancel: endDrag,
-          children: /* @__PURE__ */ jsx9(ViewerSlide, { item: current, active: true }, current.key)
+          children: /* @__PURE__ */ jsx9(
+            ViewerSlide,
+            {
+              item: current,
+              active: true,
+              videoRef: activeVideoRef
+            },
+            current.key
+          )
         }
       ),
       /* @__PURE__ */ jsx9(
@@ -880,7 +897,8 @@ function MediaViewer({
 }
 function ViewerSlide({
   item,
-  active
+  active,
+  videoRef
 }) {
   const url = useMediaUrl(item);
   if (!url) {
@@ -909,20 +927,7 @@ function ViewerSlide({
     ] });
   }
   if (item.kind === "video") {
-    return /* @__PURE__ */ jsx9(
-      "video",
-      {
-        src: url,
-        controls: active,
-        playsInline: true,
-        preload: active ? "auto" : "metadata",
-        muted: !active,
-        className: cn(
-          "absolute inset-0 h-full w-full object-contain",
-          active ? "pointer-events-auto" : "pointer-events-none"
-        )
-      }
-    );
+    return /* @__PURE__ */ jsx9(VideoSlide, { url, active, videoRef });
   }
   return /* @__PURE__ */ jsx9(
     "img",
@@ -935,6 +940,51 @@ function ViewerSlide({
     }
   );
 }
+function VideoSlide({
+  url,
+  active,
+  videoRef
+}) {
+  const [paused, setPaused] = useState3(true);
+  const [progress, setProgress] = useState3(0);
+  const localRef = useRef(null);
+  useEffect3(() => {
+    if (!active || !videoRef) return;
+    videoRef.current = localRef.current;
+    return () => {
+      if (videoRef.current === localRef.current) videoRef.current = null;
+    };
+  }, [active, videoRef]);
+  return /* @__PURE__ */ jsxs7("div", { className: "pointer-events-none absolute inset-0", children: [
+    /* @__PURE__ */ jsx9(
+      "video",
+      {
+        ref: localRef,
+        src: url,
+        playsInline: true,
+        preload: active ? "auto" : "metadata",
+        muted: !active,
+        loop: false,
+        onPlay: () => setPaused(false),
+        onPause: () => setPaused(true),
+        onEnded: () => setPaused(true),
+        onTimeUpdate: (e) => {
+          const v = e.currentTarget;
+          setProgress(v.duration > 0 ? v.currentTime / v.duration : 0);
+        },
+        className: "absolute inset-0 h-full w-full object-contain"
+      }
+    ),
+    active && paused && /* @__PURE__ */ jsx9("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx9("span", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-black/45", children: /* @__PURE__ */ jsx9(Play, { className: "ml-1 h-8 w-8 fill-white text-white" }) }) }),
+    active && !paused && /* @__PURE__ */ jsx9("span", { className: "absolute inset-x-4 bottom-2 h-0.5 overflow-hidden rounded-full bg-white/25", children: /* @__PURE__ */ jsx9(
+      "span",
+      {
+        className: "block h-full rounded-full bg-white",
+        style: { width: `${Math.round(progress * 100)}%` }
+      }
+    ) })
+  ] });
+}
 
 // src/components/ImageEditSheet.tsx
 import {
@@ -1726,9 +1776,10 @@ function Chevron({ className }) {
 
 // src/components/HoldShutter.tsx
 import { useCallback as useCallback5, useEffect as useEffect6, useRef as useRef4, useState as useState7 } from "react";
+import { Lock } from "lucide-react";
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var HOLD_MS = 320;
-var LOCK_AFTER_MS = 1200;
+var LOCK_DRAG_PX = 64;
 function HoldShutter({
   recording,
   elapsedSeconds,
@@ -1741,6 +1792,7 @@ function HoldShutter({
 }) {
   const holdTimer = useRef4(null);
   const startedRecording = useRef4(false);
+  const pressOriginY = useRef4(0);
   const [pressed, setPressed] = useState7(false);
   const [locked, setLocked] = useState7(false);
   const clearHold = useCallback5(() => {
@@ -1750,17 +1802,14 @@ function HoldShutter({
     }
   }, []);
   useEffect6(() => {
-    if (!recording) {
-      setLocked(false);
-      return;
-    }
-    if (elapsedSeconds * 1e3 >= LOCK_AFTER_MS) setLocked(true);
-  }, [recording, elapsedSeconds]);
+    if (!recording) setLocked(false);
+  }, [recording]);
   useEffect6(() => clearHold, [clearHold]);
   const onPointerDown = useCallback5(
     (event) => {
       if (disabled) return;
       event.currentTarget.setPointerCapture?.(event.pointerId);
+      pressOriginY.current = event.clientY;
       setPressed(true);
       onPressStart?.();
       if (recording && locked) return;
@@ -1773,6 +1822,16 @@ function HoldShutter({
     },
     [disabled, locked, onPressStart, onStartRecording, recording]
   );
+  const onPointerMove = useCallback5(
+    (event) => {
+      if (!pressed || locked || !startedRecording.current) return;
+      if (pressOriginY.current - event.clientY >= LOCK_DRAG_PX) {
+        setLocked(true);
+        navigator.vibrate?.(30);
+      }
+    },
+    [pressed, locked]
+  );
   const endPress = useCallback5(() => {
     if (!pressed) return;
     setPressed(false);
@@ -1828,12 +1887,34 @@ function HoldShutter({
         ]
       }
     ) : null,
+    recording && pressed && !locked && /* @__PURE__ */ jsxs11(
+      "span",
+      {
+        className: "pointer-events-none absolute left-1/2 flex -translate-x-1/2 flex-col items-center gap-0.5",
+        style: { top: -LOCK_DRAG_PX - 22 },
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ jsx13("span", { className: "flex h-9 w-9 items-center justify-center rounded-full bg-black/60 ring-1 ring-white/30", children: /* @__PURE__ */ jsx13(Lock, { className: "h-4 w-4 text-white/90" }) }),
+          /* @__PURE__ */ jsx13("span", { className: "text-[10px] font-medium text-white/80 drop-shadow", children: "Slide up to lock" })
+        ]
+      }
+    ),
+    recording && locked && /* @__PURE__ */ jsx13(
+      "span",
+      {
+        className: "pointer-events-none absolute left-1/2 flex h-9 w-9 -translate-x-1/2 items-center justify-center rounded-full bg-[#FF3B30]",
+        style: { top: -LOCK_DRAG_PX - 22 },
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsx13(Lock, { className: "h-4 w-4 text-white", fill: "currentColor" })
+      }
+    ),
     /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
         disabled,
         onPointerDown,
+        onPointerMove,
         onPointerUp: endPress,
         onPointerCancel: endPress,
         onLostPointerCapture: endPress,