@ai-matrx/capture 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -66,3 +66,8 @@ Deliberately not copied from the app this borrows its shape from: fixed duration
 ## 0.3.1 — 2026-08-30
 
 - v3: the rail renders while the camera is blocked (host actions keep working through the upload lane; core camera actions disable instead of vanishing), and status chips clear the `topCenter` line instead of colliding with it.
+
+## 0.4.0 — 2026-08-30
+
+- **Viewer: videos swipe exactly like photos.** The video slide is now a package-owned control-less player — the STAGE owns every gesture (native `controls` made the whole slide a pointer sink), a tap toggles playback, a centre glyph shows the paused state, and a thin bottom bar shows progress. Audio keeps native controls.
+- **HoldShutter: lock is a GESTURE, never a timer.** Recording follows the finger — release stops, full stop. While holding, slide UP ~64px to the lock target that appears above the button; locked, release keeps recording and the next tap stops. The 1.2s auto-latch is gone (it silently converted "I let go" into "still recording").

package/dist/react.cjs

@@ -654,6 +654,7 @@ function MediaViewer({
   const clamped = Math.min(index, count - 1);
   const current = count > 0 ? items[clamped] : void 0;
   const [confirmingDelete, setConfirmingDelete] = (0, import_react3.useState)(false);
+  const activeVideoRef = (0, import_react3.useRef)(null);
   const dragRef = (0, import_react3.useRef)(null);
   const [drag, setDrag] = (0, import_react3.useState)(null);
   const [settling, setSettling] = (0, import_react3.useState)(false);
@@ -694,7 +695,7 @@ function MediaViewer({
     return () => window.removeEventListener("keydown", onKey);
   }, [go, onClose, keysDisabled]);
   const onPointerDown = (0, import_react3.useCallback)((e) => {
-    if (e.target.closest("video, audio")) return;
+    if (e.target.closest("audio")) return;
     dragRef.current = {
       x0: e.clientX,
       y0: e.clientY,
@@ -741,6 +742,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);
     },
@@ -817,7 +826,15 @@ function MediaViewer({
           onPointerMove,
           onPointerUp: endDrag,
           onPointerCancel: endDrag,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ViewerSlide, { item: current, active: true }, current.key)
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            ViewerSlide,
+            {
+              item: current,
+              active: true,
+              videoRef: activeVideoRef
+            },
+            current.key
+          )
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -910,7 +927,8 @@ function MediaViewer({
 }
 function ViewerSlide({
   item,
-  active
+  active,
+  videoRef
 }) {
   const url = useMediaUrl(item);
   if (!url) {
@@ -939,20 +957,7 @@ function ViewerSlide({
     ] });
   }
   if (item.kind === "video") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "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__ */ (0, import_jsx_runtime9.jsx)(VideoSlide, { url, active, videoRef });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "img",
@@ -965,6 +970,51 @@ function ViewerSlide({
     }
   );
 }
+function VideoSlide({
+  url,
+  active,
+  videoRef
+}) {
+  const [paused, setPaused] = (0, import_react3.useState)(true);
+  const [progress, setProgress] = (0, import_react3.useState)(0);
+  const localRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (!active || !videoRef) return;
+    videoRef.current = localRef.current;
+    return () => {
+      if (videoRef.current === localRef.current) videoRef.current = null;
+    };
+  }, [active, videoRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pointer-events-none absolute inset-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "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__ */ (0, import_jsx_runtime9.jsx)("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-black/45", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.Play, { className: "ml-1 h-8 w-8 fill-white text-white" }) }) }),
+    active && !paused && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "absolute inset-x-4 bottom-2 h-0.5 overflow-hidden rounded-full bg-white/25", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "span",
+      {
+        className: "block h-full rounded-full bg-white",
+        style: { width: `${Math.round(progress * 100)}%` }
+      }
+    ) })
+  ] });
+}
 
 // src/components/ImageEditSheet.tsx
 var import_react4 = require("react");
@@ -1649,7 +1699,7 @@ function CameraCapture({
 
 // src/components/CameraCaptureV3.tsx
 var import_react8 = require("react");
-var import_lucide_react5 = require("lucide-react");
+var import_lucide_react6 = require("lucide-react");
 
 // src/components/CaptureRail.tsx
 var import_react6 = require("react");
@@ -1741,9 +1791,10 @@ function Chevron({ className }) {
 
 // src/components/HoldShutter.tsx
 var import_react7 = require("react");
+var import_lucide_react5 = require("lucide-react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var HOLD_MS = 320;
-var LOCK_AFTER_MS = 1200;
+var LOCK_DRAG_PX = 64;
 function HoldShutter({
   recording,
   elapsedSeconds,
@@ -1756,6 +1807,7 @@ function HoldShutter({
 }) {
   const holdTimer = (0, import_react7.useRef)(null);
   const startedRecording = (0, import_react7.useRef)(false);
+  const pressOriginY = (0, import_react7.useRef)(0);
   const [pressed, setPressed] = (0, import_react7.useState)(false);
   const [locked, setLocked] = (0, import_react7.useState)(false);
   const clearHold = (0, import_react7.useCallback)(() => {
@@ -1765,17 +1817,14 @@ function HoldShutter({
     }
   }, []);
   (0, import_react7.useEffect)(() => {
-    if (!recording) {
-      setLocked(false);
-      return;
-    }
-    if (elapsedSeconds * 1e3 >= LOCK_AFTER_MS) setLocked(true);
-  }, [recording, elapsedSeconds]);
+    if (!recording) setLocked(false);
+  }, [recording]);
   (0, import_react7.useEffect)(() => clearHold, [clearHold]);
   const onPointerDown = (0, import_react7.useCallback)(
     (event) => {
       if (disabled) return;
       event.currentTarget.setPointerCapture?.(event.pointerId);
+      pressOriginY.current = event.clientY;
       setPressed(true);
       onPressStart?.();
       if (recording && locked) return;
@@ -1788,6 +1837,16 @@ function HoldShutter({
     },
     [disabled, locked, onPressStart, onStartRecording, recording]
   );
+  const onPointerMove = (0, import_react7.useCallback)(
+    (event) => {
+      if (!pressed || locked || !startedRecording.current) return;
+      if (pressOriginY.current - event.clientY >= LOCK_DRAG_PX) {
+        setLocked(true);
+        navigator.vibrate?.(30);
+      }
+    },
+    [pressed, locked]
+  );
   const endPress = (0, import_react7.useCallback)(() => {
     if (!pressed) return;
     setPressed(false);
@@ -1843,12 +1902,34 @@ function HoldShutter({
         ]
       }
     ) : null,
+    recording && pressed && !locked && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "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__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex h-9 w-9 items-center justify-center rounded-full bg-black/60 ring-1 ring-white/30", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.Lock, { className: "h-4 w-4 text-white/90" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[10px] font-medium text-white/80 drop-shadow", children: "Slide up to lock" })
+        ]
+      }
+    ),
+    recording && locked && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "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__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.Lock, { className: "h-4 w-4 text-white", fill: "currentColor" })
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         type: "button",
         disabled,
         onPointerDown,
+        onPointerMove,
         onPointerUp: endPress,
         onPointerCancel: endPress,
         onLostPointerCapture: endPress,
@@ -1962,7 +2043,7 @@ function CameraCaptureV3({
       {
         id: "flip",
         label: "Switch camera",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.RefreshCw, { className: "h-[22px] w-[22px]" }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.RefreshCw, { className: "h-[22px] w-[22px]" }),
         primary: true,
         onPress: engine.onFlipCamera
       }
@@ -1971,7 +2052,7 @@ function CameraCaptureV3({
       {
         id: "flash",
         label: "Flash",
-        icon: controls.torchOn ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Zap, { className: "h-[22px] w-[22px]", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.ZapOff, { className: "h-[22px] w-[22px]" }),
+        icon: controls.torchOn ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.Zap, { className: "h-[22px] w-[22px]", fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.ZapOff, { className: "h-[22px] w-[22px]" }),
         active: controls.torchOn,
         primary: true,
         onPress: controls.toggleTorch
@@ -1980,7 +2061,7 @@ function CameraCaptureV3({
     {
       id: "timer",
       label: "Timer",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Timer, { className: "h-[22px] w-[22px]" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.Timer, { className: "h-[22px] w-[22px]" }),
       active: timerSetting !== 0,
       valueLabel: timerSetting === 0 ? void 0 : `${timerSetting}s`,
       onPress: () => setTimerSetting((t) => t === 0 ? 3 : t === 3 ? 10 : 0)
@@ -1988,14 +2069,14 @@ function CameraCaptureV3({
     {
       id: "grid",
       label: "Grid",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Grid3x3, { className: "h-[22px] w-[22px]" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.Grid3x3, { className: "h-[22px] w-[22px]" }),
       active: gridOn,
       onPress: () => setGridOn((g) => !g)
     },
     {
       id: "aspect",
       label: "Aspect",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Proportions, { className: "h-[22px] w-[22px]" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.Proportions, { className: "h-[22px] w-[22px]" }),
       active: aspect !== "full",
       valueLabel: aspect === "full" ? void 0 : aspect,
       onPress: () => setAspect(
@@ -2006,7 +2087,7 @@ function CameraCaptureV3({
       {
         id: "exposure",
         label: "Exposure",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.SunMedium, { className: "h-[22px] w-[22px]" }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.SunMedium, { className: "h-[22px] w-[22px]" }),
         active: controls.exposure !== 0,
         valueLabel: controls.exposure === 0 ? void 0 : `${controls.exposure > 0 ? "+" : ""}${controls.exposure}`,
         onPress: () => controls.setExposure(controls.exposure === 0 ? 1 : 0)
@@ -2055,7 +2136,7 @@ function CameraCaptureV3({
                 onClick: onClose,
                 "aria-label": "Close camera",
                 className: "pointer-events-auto flex h-10 w-10 shrink-0 touch-manipulation items-center justify-center rounded-full text-white drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)] transition-colors hover:bg-white/10",
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.X, { className: "h-6 w-6" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.X, { className: "h-6 w-6" })
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "h-10 w-10 shrink-0" }),
             /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "pointer-events-auto flex min-w-0 flex-1 justify-center", children: slots.topEntry }),
@@ -2102,7 +2183,7 @@ function CameraCaptureV3({
             onClick: cloud.onOpenLibrary,
             "aria-label": "Your media \u2014 library and upload",
             className: "relative h-12 w-12 touch-manipulation overflow-hidden rounded-xl bg-black/40 ring-1 ring-white/30 backdrop-blur-md transition-transform active:scale-95",
-            children: cloud.recentsThumb ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Images, { className: "h-5 w-5 text-white/80" }) })
+            children: cloud.recentsThumb ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.Images, { className: "h-5 w-5 text-white/80" }) })
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(