@nocobase/client-v2 2.2.0-beta.13 → 2.2.0-beta.15

package/src/components/form/ScanInput/CodeScanner.tsx

@@ -49,6 +49,21 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
     message.error(t('Code recognition failed, please scan again'));
   }, [t]);
 
+  const showCameraStartFailure = useCallback(
+    (error: unknown) => {
+      const errorName = error instanceof Error ? error.name : '';
+      const errorMessage = error instanceof Error ? error.message : '';
+      const errorMap: Record<string, string> = {
+        NotFoundError: t('No camera device detected'),
+        NotAllowedError: t('You have not granted permission to use the camera'),
+      };
+
+      message.error(errorMap[errorName] || errorMessage || t('You have not granted permission to use the camera'));
+      onClose();
+    },
+    [onClose, t],
+  );
+
   const handleScanSuccess = useCallback(
     (text: string) => {
       onScanSuccess(text);
@@ -64,6 +79,7 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
     scanBoxSize,
     onScanSuccess: handleScanSuccess,
     onScanFailure: showScanFailure,
+    onCameraStartFailure: showCameraStartFailure,
   });
 
   useEffect(() => {
@@ -129,7 +145,7 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
     inset: 0;
     z-index: ${token.zIndexPopupBase + 1000};
     overflow: hidden;
-    background: ${token.colorBgMask};
+    background: #000;
   `;
   const scannerWrapperClass = css`
     position: absolute;
@@ -137,16 +153,17 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
     overflow: hidden;
   `;
   const scannerClass = css`
+    position: relative;
     width: 100%;
     height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    overflow: hidden;
 
     video {
-      width: auto !important;
+      position: absolute !important;
+      inset: 0 !important;
+      width: 100% !important;
       height: 100% !important;
-      max-width: none !important;
+      object-fit: cover !important;
     }
 
     #qr-shaded-region {

package/src/components/form/ScanInput/__tests__/useCodeScanner.test.tsx

@@ -74,13 +74,23 @@ vi.mock('html5-qrcode', () => ({
 
 vi.mock('jsqr', () => jsQrMocks);
 
-function ScannerHost({ scanBoxSize }: { scanBoxSize?: { width: number; height: number } } = {}) {
+function ScannerHost({
+  onCameraStartFailure,
+  onScanFailure,
+  scanBoxSize,
+}: {
+  onCameraStartFailure?: (error: unknown) => void;
+  onScanFailure?: () => void;
+  scanBoxSize?: { width: number; height: number };
+} = {}) {
   const handleScanSuccess = useCallback(() => undefined, []);
 
   useCodeScanner({
     elementId: 'scanner',
     enabled: true,
     scanBoxSize,
+    onCameraStartFailure,
+    onScanFailure,
     onScanSuccess: handleScanSuccess,
   });
 
@@ -194,6 +204,30 @@ describe('useCodeScanner', () => {
     expect(config?.qrbox?.(1200, 844)).toEqual({ width: 319, height: 240 });
   });
 
+  it('clamps the scan box to the camera viewfinder size', async () => {
+    render(<ScannerHost scanBoxSize={{ width: 319, height: 240 }} />);
+
+    await waitFor(() => expect(mocks.start).toHaveBeenCalled());
+
+    const config = mocks.start.mock.calls[0]?.[1] as
+      | { qrbox?: (width: number, height: number) => { width: number; height: number } }
+      | undefined;
+
+    expect(config?.qrbox?.(200, 160)).toEqual({ width: 200, height: 160 });
+  });
+
+  it('reports camera start failures through the dedicated handler', async () => {
+    const cameraStartError = Object.assign(new Error('Camera failed'), { name: 'NotAllowedError' });
+    const handleCameraStartFailure = vi.fn();
+    const handleScanFailure = vi.fn();
+    mocks.start.mockRejectedValueOnce(cameraStartError);
+
+    render(<ScannerHost onCameraStartFailure={handleCameraStartFailure} onScanFailure={handleScanFailure} />);
+
+    await waitFor(() => expect(handleCameraStartFailure).toHaveBeenCalledWith(cameraStartError));
+    expect(handleScanFailure).not.toHaveBeenCalled();
+  });
+
   it('uses jsQR first for Safari uploaded QR images', async () => {
     const handleScanSuccess = vi.fn();
     jsQrMocks.default.mockReturnValueOnce({ data: 'JSQR-CODE' });

package/src/components/form/ScanInput/useCodeScanner.ts

@@ -25,6 +25,7 @@ type UseCodeScannerOptions = {
   onScannerSizeChanged?: (size: ScannerSize) => void;
   onScanSuccess: (text: string) => void;
   onScanFailure?: () => void;
+  onCameraStartFailure?: (error: unknown) => void;
 };
 
 type ImageDataVariant = {
@@ -70,6 +71,13 @@ export function getCodeScanBoxSize(width: number, height: number) {
   };
 }
 
+function clampCodeScanBoxSize(scanBoxSize: ScannerSize, width: number, height: number) {
+  return {
+    width: Math.min(scanBoxSize.width, width),
+    height: Math.min(scanBoxSize.height, height),
+  };
+}
+
 async function stopScanner(scanner?: Html5Qrcode, options: { clear?: boolean } = {}) {
   if (!scanner) {
     return;
@@ -212,6 +220,7 @@ export function useCodeScanner({
   onScannerSizeChanged,
   onScanSuccess,
   onScanFailure,
+  onCameraStartFailure,
 }: UseCodeScannerOptions) {
   const [scanner, setScanner] = useState<Html5Qrcode>();
 
@@ -223,7 +232,7 @@ export function useCodeScanner({
           fps: 10,
           qrbox(width, height) {
             onScannerSizeChanged?.({ width, height });
-            return scanBoxSize ?? getCodeScanBoxSize(width, height);
+            return clampCodeScanBoxSize(scanBoxSize ?? getCodeScanBoxSize(width, height), width, height);
           },
         },
         (decodedText) => {
@@ -273,14 +282,18 @@ export function useCodeScanner({
       verbose: false,
     });
     setScanner(scannerInstance);
-    startScanCamera(scannerInstance).catch(() => {
+    startScanCamera(scannerInstance).catch((error: unknown) => {
+      if (onCameraStartFailure) {
+        onCameraStartFailure(error);
+        return;
+      }
       onScanFailure?.();
     });
 
     return () => {
       stopScanner(scannerInstance, { clear: true }).catch(() => undefined);
     };
-  }, [elementId, enabled, formatsToSupport, onScanFailure, startScanCamera]);
+  }, [elementId, enabled, formatsToSupport, onCameraStartFailure, onScanFailure, startScanCamera]);
 
   return {
     startScanFile,