@opexa/portal-components 0.0.969 → 0.0.971

package/dist/client/hooks/useCamera.js

@@ -142,7 +142,10 @@ export function useCamera(options = {}) {
             canvas.toBlob((blob) => {
                 if (!blob) {
                     resolve(null);
-                    return;
+                    return setError({
+                        name: 'CameraError',
+                        message: 'Failed to snap photo',
+                    });
                 }
                 const url = URL.createObjectURL(blob);
                 const file = new File([blob], `${crypto.randomUUID()}.jpeg`, {
@@ -168,6 +171,7 @@ export function useCamera(options = {}) {
     const reopen = useCallback(async () => {
         setSnapping(false);
         setLoading(true);
+        setData(null);
         await close();
         await sleep();
         await open();

package/dist/components/shared/SelfieImageField/SelfieImageField.client.js

@@ -95,7 +95,7 @@ function Camera() {
                                             context.mutation.mutate({ file });
                                             context.disclosure.setOpen(false);
                                         }, className: "w-full lg:w-[10rem]", children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                            context.camera.reset();
+                                            context.camera.reopen();
                                         }, className: "w-full lg:w-[10rem]", children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
 }
 /*

package/dist/components/shared/SelfieImageField/SelfieImageField.js

@@ -1,11 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import dynamic from 'next/dynamic';
-import { Spinner02Icon } from '../../../icons/Spinner02Icon.js';
-const Component = dynamic(() => import('./SelfieImageField.client.js').then((mod) => mod.SelfieImageField__client), {
-    ssr: false,
-    loading: () => (_jsx("div", { className: "flex aspect-[352/180] w-full shrink-0 items-center justify-center rounded-xl border border-border-primary bg-bg-primary", children: _jsx(Spinner02Icon, { className: "size-8 text-text-quinary" }) })),
-});
+import { SelfieImageField__client } from './SelfieImageField.client.js';
 export function SelfieImageField(props) {
-    return _jsx(Component, { ...props });
+    return _jsx(SelfieImageField__client, { ...props });
 }

package/dist/components/shared/SelfieImageField/useSelfieImageField.d.ts

@@ -20,4 +20,5 @@ export declare function useSelfieImageField(props: UseSelfieImageFieldProps): {
     guideRef: import("react").RefObject<HTMLDivElement | null>;
     maskRef: import("react").RefObject<HTMLDivElement | null>;
     faceFound: boolean;
+    detectorReady: boolean;
 };

package/dist/components/shared/SelfieImageField/useSelfieImageField.js

@@ -1,6 +1,6 @@
 import { useFieldContext } from '@ark-ui/react';
 import { FaceDetector, FilesetResolver } from '@mediapipe/tasks-vision';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import invariant from 'tiny-invariant';
 import { useInterval } from 'usehooks-ts';
 import { useCamera } from '../../../client/hooks/useCamera.js';
@@ -111,20 +111,39 @@ export function useSelfieImageField(props) {
             if (open) {
                 camera.open();
             }
-            else {
-                setFaceFound(false);
-                camera.close();
-            }
         },
     });
     const [faceFound, setFaceFound] = useState(false);
+    const [detectorReady, setDetectorReady] = useState(false);
+    // Preload detector when disclosure opens
+    useEffect(() => {
+        if (disclosure.open) {
+            setDetectorReady(false);
+            getFaceDetector()
+                .then(() => setDetectorReady(true))
+                .catch((e) => {
+                console.error('Failed to load face detector:', e);
+                setDetectorReady(false);
+            });
+        }
+    }, [disclosure.open]);
+    // Reset faceFound when camera is reset or reopened
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Reset faceFound on state change
+    useEffect(() => {
+        setFaceFound(false);
+    }, [camera.loading, camera.data]);
     useInterval(async () => {
         if (!camera.videoRef.current || !guideRef.current) {
             return setFaceFound(false);
         }
-        setFaceFound(await validateFaceFromVideo(camera.videoRef.current, guideRef.current));
-    }, disclosure.open && !camera.data && !camera.error && !camera.loading
-        ? 300
+        const found = await validateFaceFromVideo(camera.videoRef.current, guideRef.current);
+        setFaceFound(found);
+    }, disclosure.open &&
+        detectorReady &&
+        !camera.data &&
+        !camera.error &&
+        !camera.loading
+        ? 100
         : null);
     return {
         field,
@@ -138,13 +157,13 @@ export function useSelfieImageField(props) {
         guideRef,
         maskRef,
         faceFound,
+        detectorReady,
     };
 }
-let __image_face_detector__ = null;
-let __video_face_detector__ = null;
+let __face_detector__ = null;
 let __vision__ = null;
-let __image_face_detector_promise__ = null;
-let __video_face_detector_promise__ = null;
+let __current_running_mode__ = 'IMAGE';
+let __face_detector_promise__ = null;
 let __vision_promise__ = null;
 async function getVision() {
     if (__vision__)
@@ -164,12 +183,12 @@ async function getVision() {
     })();
     return __vision_promise__;
 }
-async function getImageFaceDetector() {
-    if (__image_face_detector__)
-        return __image_face_detector__;
-    if (__image_face_detector_promise__)
-        return __image_face_detector_promise__;
-    __image_face_detector_promise__ = (async () => {
+async function getFaceDetector() {
+    if (__face_detector__)
+        return __face_detector__;
+    if (__face_detector_promise__)
+        return __face_detector_promise__;
+    __face_detector_promise__ = (async () => {
         try {
             const vision = await getVision();
             const detector = await FaceDetector.createFromOptions(vision, {
@@ -180,45 +199,28 @@ async function getImageFaceDetector() {
                     modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.tflite',
                 },
             });
-            __image_face_detector__ = detector;
+            __face_detector__ = detector;
+            __current_running_mode__ = 'IMAGE';
             return detector;
         }
         catch (e) {
-            __image_face_detector_promise__ = null;
+            __face_detector_promise__ = null;
             throw e;
         }
     })();
-    return __image_face_detector_promise__;
+    return __face_detector_promise__;
 }
-async function getVideoFaceDetector() {
-    if (__video_face_detector__)
-        return __video_face_detector__;
-    if (__video_face_detector_promise__)
-        return __video_face_detector_promise__;
-    __video_face_detector_promise__ = (async () => {
-        try {
-            const vision = await getVision();
-            const detector = await FaceDetector.createFromOptions(vision, {
-                runningMode: 'VIDEO',
-                minDetectionConfidence: 0.5,
-                baseOptions: {
-                    delegate: 'GPU',
-                    modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.tflite',
-                },
-            });
-            __video_face_detector__ = detector;
-            return detector;
-        }
-        catch (e) {
-            __video_face_detector_promise__ = null;
-            throw e;
-        }
-    })();
-    return __video_face_detector_promise__;
+async function ensureRunningMode(mode) {
+    const detector = await getFaceDetector();
+    if (__current_running_mode__ !== mode) {
+        await detector.setOptions({ runningMode: mode });
+        __current_running_mode__ = mode;
+    }
+    return detector;
 }
 async function validateFaceFromImage(image) {
     try {
-        const detector = await getImageFaceDetector();
+        const detector = await ensureRunningMode('IMAGE');
         const result = detector.detect(image);
         return result.detections.length > 0;
     }
@@ -231,7 +233,7 @@ async function validateFaceFromVideo(video, guide) {
     if (video.readyState < 2)
         return false;
     try {
-        const detector = await getVideoFaceDetector();
+        const detector = await ensureRunningMode('VIDEO');
         const result = detector.detectForVideo(video, performance.now());
         const detection = result.detections.at(0);
         if (!detection)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@opexa/portal-components",
-	"version": "0.0.969",
+	"version": "0.0.971",
 	"exports": {
 		"./ui/*": {
 			"types": "./dist/ui/*/index.d.ts",