@opexa/portal-components 0.0.270 → 0.0.273

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

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
-import { useEffect, useId, useState, } from 'react';
+import { useRef } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { usePxToRemConverter } from '../../../client/hooks/usePxToRemConverter.js';
+import { useRect } from '../../../client/hooks/useRect.js';
 import { Camera01Icon } from '../../../icons/Camera01Icon.js';
 import { CameraOffIcon } from '../../../icons/CameraOffIcon.js';
 import { CheckCircleIcon } from '../../../icons/CheckCircleIcon.js';
@@ -93,80 +95,26 @@ function Camera() {
  * -------------------------------------
  */
 function Video() {
-    const id = useId();
     const context = useSelfieImageFieldContext();
-    const [maskBox, setMaskBox] = useState({
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0,
+    const pxToRem = usePxToRemConverter();
+    const videoRect = useRect(context.camera.videoRef);
+    const guideWidth = videoRect.width <= 0 || videoRect.height <= 0
+        ? 0
+        : videoRect.width > videoRect.height
+            ? videoRect.height
+            : videoRect.width;
+    const rootRef = useRef(null);
+    const rootRect = useRect(rootRef, {
+        enabled: guideWidth > 0,
     });
-    useEffect(() => {
-        const update = () => {
-            const guide = context.guideRef.current;
-            const mask = context.maskRef.current;
-            if (!guide || !mask)
-                return;
-            const guideRect = guide.getBoundingClientRect();
-            const maskRect = mask.getBoundingClientRect();
-            const x = guideRect.left - maskRect.left;
-            const y = guideRect.top - maskRect.top;
-            const width = guideRect.width;
-            const height = guideRect.height;
-            if (width && height) {
-                setMaskBox({
-                    x,
-                    y,
-                    width,
-                    height,
-                });
-            }
-        };
-        const observer = new ResizeObserver(update);
-        if (context.guideRef.current)
-            observer.observe(context.guideRef.current);
-        if (context.maskRef.current)
-            observer.observe(context.maskRef.current);
-        requestAnimationFrame(update);
-        return () => observer.disconnect();
-    }, [context.guideRef, context.maskRef]);
-    const [videoSize, setVideoSize] = useState({
-        width: 0,
-        height: 0,
+    const guideRect = useRect(context.guideRef, {
+        enabled: guideWidth > 0,
     });
-    useEffect(() => {
-        const video = context.camera.videoRef.current;
-        if (!video)
-            return;
-        const updateVideoWidth = () => {
-            const rect = video.getBoundingClientRect();
-            setVideoSize({
-                width: rect.width,
-                height: rect.height,
-            });
-        };
-        video.addEventListener('loadedmetadata', updateVideoWidth);
-        video.addEventListener('resize', updateVideoWidth);
-        return () => {
-            video.removeEventListener('loadedmetadata', updateVideoWidth);
-            video.removeEventListener('resize', updateVideoWidth);
-        };
-    }, [context.camera.videoRef]);
-    const guideWidth = videoSize.width <= 0 || videoSize.height <= 0
-        ? 0
-        : videoSize.width > videoSize.height
-            ? videoSize.height
-            : videoSize.width;
-    return (_jsxs("div", { className: twMerge('relative h-auto w-full overflow-hidden', !context.camera.data && !context.camera.error && !context.camera.loading
+    const x = (rootRect.width - guideRect.width) / 2;
+    const y = (rootRect.height - guideRect.height) / 2;
+    return (_jsxs("div", { ref: rootRef, className: twMerge('relative h-auto w-full overflow-hidden', !context.camera.data && !context.camera.error && !context.camera.loading
             ? 'block'
-            : 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx("svg", { className: "pointer-events-none absolute inset-1 size-full", children: _jsx("defs", { children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { x: "0", y: "0", width: "101%", height: "101%", fill: "white" }), _jsx("rect", { x: maskBox.x, y: maskBox.y, width: maskBox.width, height: maskBox.height, fill: "black", rx: "8", ry: "8" })] }) }) }), _jsx("div", { ref: context.maskRef, className: "absolute inset-0 size-full bg-black/60 backdrop-blur-sm", style: {
-                    mask: `url(#${id})`,
-                    WebkitMask: `url(#${id})`,
-                    maskRepeat: 'no-repeat',
-                    WebkitMaskRepeat: 'no-repeat',
-                    WebkitTransform: 'translateZ(0)',
-                    willChange: 'transform',
-                } }), _jsx("div", { ref: context.guideRef, className: twMerge('border-utility-warning-700 absolute left-1/2 top-1/2 z-20 aspect-square -translate-x-1/2 -translate-y-1/2 rounded-md border-4 border-dashed', context.faceFound && 'border-utility-success-700', guideWidth <= 0 ? 'hidden' : 'block'), style: {
-                    width: `calc(${guideWidth}px - 2rem)`,
+            : 'hidden'), children: [_jsx("div", { className: "pointer-events-none absolute left-0 right-0 top-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 z-20 bg-black/60 backdrop-blur-sm", style: { height: `${pxToRem(y)}rem` } }), _jsx("div", { className: "pointer-events-none absolute left-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("div", { className: "pointer-events-none absolute right-0 z-20 bg-black/60 backdrop-blur-sm", style: { top: y, bottom: y, width: `${pxToRem(x)}rem` } }), _jsx("video", { ...context.camera.videoProps }), _jsx("div", { ref: context.guideRef, className: twMerge('border-utility-warning-700 absolute left-1/2 top-1/2 z-20 aspect-square -translate-x-1/2 -translate-y-1/2 border-4 border-dashed', context.faceFound && 'border-utility-success-700', guideWidth <= 0 ? 'hidden' : 'block'), style: {
+                    width: `calc(${pxToRem(guideWidth)}rem - 2rem)`,
                 } })] }));
 }

package/dist/handlers/index.d.ts

@@ -6,26 +6,26 @@ interface Context {
     params: Promise<Params>;
 }
 export declare const GET: (req: NextRequest, { params }: Context) => Promise<NextResponse<{
+    ok: true;
+    data?: never;
+} | {
     ok: false;
     message: string;
     __error?: unknown;
-} | {
-    ok: true;
-    data: Record<string, unknown>;
 }> | NextResponse<{
     ok: false;
     message: string;
     __error?: unknown;
 } | {
     ok: true;
-    data: import("../types").Session;
+    data: Record<string, unknown>;
 }> | NextResponse<{
-    ok: true;
-    data?: never;
-} | {
     ok: false;
     message: string;
     __error?: unknown;
+} | {
+    ok: true;
+    data: import("../types").Session;
 }>>;
 export declare const DELETE: (req: NextRequest, { params }: Context) => Promise<NextResponse<{
     ok: true;

package/dist/next.config.js

@@ -48,14 +48,6 @@ export const config = {
     compiler: {
         removeConsole: process.env.NODE_ENV === 'production',
     },
-    webpack(config) {
-        config.resolve.fallback = {
-            fs: false,
-            path: false,
-            crypto: false,
-        };
-        return config;
-    },
 };
 export function extendConfig(userConfig) {
     return {