@authme/identity-verification 2.8.32 → 2.8.33

package/index.cjs

@@ -30707,7 +30707,7 @@ function makeStyleTag(styleSetting) {
     `;
   return newStyle;
 }
-function renderCardRotateAnimate(container) {
+function renderCardRotateAnimate(container, directionTextPanel = null, setAnimationFrameState) {
   let animateStop = true;
   let stopTimeout = null;
   let currentDirection = null;
@@ -30727,6 +30727,10 @@ function renderCardRotateAnimate(container) {
   frontArrowSvg.style.zIndex = `var(--authme-layers-2-z-index)`;
   cardSvg.appendChild(cardMainGroup);
   div.appendChild(cardSvg);
+  // Append directionTextPanel to div.arrow if provided
+  if (directionTextPanel) {
+    div.appendChild(directionTextPanel);
+  }
   cardSvg.style.display = 'none';
   frontArrowSvg.style.display = 'none';
   backArrowSvg.style.display = 'none';
@@ -31063,9 +31067,8 @@ function renderCardRotateAnimate(container) {
       }, roundAnimateDuration);
     });
   }
-  function fadeAnimate(inOrOut, directionTextPanel = null) {
+  function fadeAnimate(inOrOut) {
     div.style.opacity = inOrOut === 'in' ? '0.8' : '0';
-    if (directionTextPanel) directionTextPanel.style.display = inOrOut === 'in' ? 'flex' : 'none';
     return new Promise(resolve => {
       setTimeout(() => {
         resolve(true);
@@ -31074,15 +31077,23 @@ function renderCardRotateAnimate(container) {
   }
   function rotateCard(direction, beforeAnimate = () => {
     return;
-  }, directionTextPanel = null, stopOn = -1) {
+  }, stopOn = -1) {
     return __awaiter(this, void 0, void 0, function* () {
       // console.log('rotateCard', direction);
       animateStop = false;
+      // 停止送圖（動畫開始）
+      if (setAnimationFrameState) {
+        setAnimationFrameState(true);
+      }
       stopTimeout = setTimeout(() => __awaiter(this, void 0, void 0, function* () {
         if (animateStop) return;
-        yield fadeAnimate('out', directionTextPanel);
+        yield fadeAnimate('out');
         setTimeout(() => {
           resetAnimateStatus();
+          // 恢復送圖（動畫結束）
+          if (setAnimationFrameState) {
+            setAnimationFrameState(false);
+          }
         }, fadeDuration);
         beforeAnimate();
       }), stopOn === -1 ? roundAnimateDuration * 2 : stopOn);
@@ -31091,7 +31102,7 @@ function renderCardRotateAnimate(container) {
       cardSvg.style.display = 'block';
       frontArrowSvg.style.display = 'block';
       backArrowSvg.style.display = 'block';
-      yield fadeAnimate('in', directionTextPanel);
+      yield fadeAnimate('in');
       function _rotateCard(direction) {
         return __awaiter(this, void 0, void 0, function* () {
           switch (direction) {
@@ -32617,7 +32628,7 @@ function startOCR(config) {
       if (type !== idRecognition.EAuthMeCardClass.TWN_IDCard_Front || !config.ocrConfig.needAntiFraud) {
         return rxjs.of(true);
       }
-      const applyTextByResult = result => {
+      const applyTextByResult = result => __awaiter(this, void 0, void 0, function* () {
         if (!uiComponentOCRMask.setCardBorderColor) return;
         uiComponentOCR.statusText.classList.add('non-empty');
         switch (result.eStatus) {
@@ -32705,13 +32716,11 @@ function startOCR(config) {
             break;
           case idRecognition.EAuthMeIDCardAntiFraudStatus.StagePass:
             uiComponentOCR.statusText.textContent = translateService.translate('sdk.general.verify.error.stagePass');
-            stopAnimate();
             previosAntiFraudAnimateTime = Date.now();
             uiComponentOCRMask.setCardBorderColor('pass');
-            // Add 2 second delay before moving to next stage
-            setTimeout(() => {
-              console.log('Stage pass delay completed, ready for next direction');
-            }, 2000);
+            // Block execution for 2 seconds to show StagePass state
+            yield new Promise(resolve => setTimeout(resolve, 2000));
+            stopAnimate();
             break;
           case idRecognition.EAuthMeIDCardAntiFraudStatus.Pass:
             uiComponentOCRMask.setCardBorderColor('pass');
@@ -32739,8 +32748,12 @@ function startOCR(config) {
           uiComponentOCR.statusText.textContent = '';
           uiComponentOCR.statusText.classList.remove('non-empty');
         }
-      };
-      const antiFraudStart$ = rxjs.of(true).pipe(rxjs.switchMap(() => util.checkOnlineStatus(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'))), rxjs.switchMap(() => canvasSizeInfo$), rxjs.switchMap(canvasSizeInfo => rxjs.from(config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe(rxjs.switchMap(() => config.antiFraudStart(getCardBorderPoint(), uiComponentOCRMask.setBorderType, uiComponentOCRMask.setCardBorderColor, uiComponentOCRMask.setBorderSuccess, uiComponentOCR.scanAnimationContainer, uiComponentOCR.successContainer, uiComponentOCRMask.frameImage, uiComponentOCRMask.frameText, facingMode)), rxjs.tap(() => __awaiter(this, void 0, void 0, function* () {
+      });
+      const antiFraudStart$ = rxjs.of(true).pipe(rxjs.switchMap(() => util.checkOnlineStatus(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'))), rxjs.switchMap(() => canvasSizeInfo$), rxjs.switchMap(canvasSizeInfo => rxjs.from(config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe(rxjs.switchMap(() => {
+        // 動畫開始時停止送圖
+        ocrSendFrameAnimation = true;
+        return config.antiFraudStart(getCardBorderPoint(), uiComponentOCRMask.setBorderType, uiComponentOCRMask.setCardBorderColor, uiComponentOCRMask.setBorderSuccess, uiComponentOCR.scanAnimationContainer, uiComponentOCR.successContainer, uiComponentOCRMask.frameImage, uiComponentOCRMask.frameText, facingMode);
+      }), rxjs.tap(() => __awaiter(this, void 0, void 0, function* () {
         setStatusView(core.StatusView.Aligning);
         if (buttonDisable$) {
           const cardMatchROI = config.getCardMatchROI ? yield config.getCardMatchROI() : undefined;
@@ -32750,8 +32763,18 @@ function startOCR(config) {
           countDownTime = new Date().getTime() + ocrEngineConfig.expiredIn * util.TIME_UNIT.SECOND;
           sdkFlowTimeout = makeSDKFlowTimeout(ocrEngineConfig.expiredIn);
         }
-      })), sendFrame(canvasSizeInfo, uiComponentOCR.image, uiComponentBasic.video, config.onAntiFraudFrame, ocrEngineConfig.fraudMaxFps, false, 'jpg', undefined), rxjs.map(x => x.result), rxjs.tap(x => {
-        applyTextByResult(x);
+      })),
+      // 反欺詐完成後恢復送圖
+      rxjs.tap(() => {
+        ocrSendFrameAnimation = false;
+      }), sendFrame(canvasSizeInfo, uiComponentOCR.image, uiComponentBasic.video, config.onAntiFraudFrame, ocrEngineConfig.fraudMaxFps, false, 'jpg', undefined,
+      // 使用 sendFrame 內建的 flags 機制來控制動畫時的送圖
+      {
+        get animating() {
+          return ocrSendFrameAnimation;
+        }
+      }), rxjs.map(x => x.result), rxjs.concatMap(x => __awaiter(this, void 0, void 0, function* () {
+        yield applyTextByResult(x);
         cardRotateByStage(x.eStage);
         if (isTutorialFinish) {
           cardRotateTextProcess(x.eStage, eStage != x.eStage);
@@ -32765,7 +32788,8 @@ function startOCR(config) {
           // if (config.ocrConfig.disableTutorial) {
           util.stopSpinner();
         }
-      }),
+        return x;
+      })),
       // ocrEngineConfig.expiredIn
       //   ? timeout(ocrEngineConfig.expiredIn * TIME_UNIT.SECOND)
       //   : tap(),
@@ -32988,7 +33012,6 @@ function startOCR(config) {
         }));
       };
       uiComponentOCRMask.setCardBorderColor(null);
-      let ocrSendFrameAnimation = false;
       const handleOcrSendFrame = (canvasSizeInfo, canvas, video, frameCallback, fps, bas64Format, imageType, cardType, type) => source$ => {
         let received = true;
         const ctx = canvas.getContext('2d', {
@@ -33086,6 +33109,7 @@ function startOCR(config) {
       };
       return recognition(false);
     }
+    let ocrSendFrameAnimation = false;
     function createFlowByType(type, cardType, cardTypeConfig) {
       return rxjs.of(true).pipe(rxjs.tap(() => {
         currentType('set', {
@@ -33213,7 +33237,10 @@ function startOCR(config) {
           })),
           container: uiComponentBasic.videoContainer
         });
-        const rotateUI = renderCardRotateAnimate(uiComponentOCR.arrowAnimationContainer);
+        const rotateUI = renderCardRotateAnimate(uiComponentOCR.arrowAnimationContainer, uiComponentOCR.directionTextPanel, isAnimating => {
+          // 動畫開始時停止送圖，動畫結束時恢復送圖
+          ocrSendFrameAnimation = isAnimating;
+        });
         rotateCard = rotateUI.rotateCard;
         getIsRotateCardAnimating = rotateUI.getIsRotateCardAnimating;
         stopAnimate = rotateUI.stopAnimate;
@@ -33766,22 +33793,22 @@ function startOCR(config) {
         case idRecognition.EAuthMeIDCardAntiFraudStage.Left:
           rotateCard(facingMode === 'front' ? 'right' : 'left', () => {
             previosAntiFraudAnimateTime = Date.now();
-          }, uiComponentOCR.directionTextPanel);
+          });
           break;
         case idRecognition.EAuthMeIDCardAntiFraudStage.Right:
           rotateCard(facingMode === 'front' ? 'left' : 'right', () => {
             previosAntiFraudAnimateTime = Date.now();
-          }, uiComponentOCR.directionTextPanel);
+          });
           break;
         case idRecognition.EAuthMeIDCardAntiFraudStage.Up:
           rotateCard('up', () => {
             previosAntiFraudAnimateTime = Date.now();
-          }, uiComponentOCR.directionTextPanel);
+          });
           break;
         case idRecognition.EAuthMeIDCardAntiFraudStage.Down:
           rotateCard('down', () => {
             previosAntiFraudAnimateTime = Date.now();
-          }, uiComponentOCR.directionTextPanel);
+          });
           break;
       }
     }
@@ -37247,8 +37274,8 @@ class AuthmeIdentityVerification extends engine.AuthmeFunctionModule {
 }
 
 var name = "authme/sdk";
-var version$1 = "2.8.32";
-var date = "2025-11-07T03:04:15+0000";
+var version$1 = "2.8.33";
+var date = "2025-11-21T09:00:22+0000";
 var packageInfo = {
 	name: name,
 	version: version$1,

package/index.js

@@ -30699,7 +30699,7 @@ function makeStyleTag(styleSetting) {
     `;
   return newStyle;
 }
-function renderCardRotateAnimate(container) {
+function renderCardRotateAnimate(container, directionTextPanel = null, setAnimationFrameState) {
   let animateStop = true;
   let stopTimeout = null;
   let currentDirection = null;
@@ -30719,6 +30719,10 @@ function renderCardRotateAnimate(container) {
   frontArrowSvg.style.zIndex = `var(--authme-layers-2-z-index)`;
   cardSvg.appendChild(cardMainGroup);
   div.appendChild(cardSvg);
+  // Append directionTextPanel to div.arrow if provided
+  if (directionTextPanel) {
+    div.appendChild(directionTextPanel);
+  }
   cardSvg.style.display = 'none';
   frontArrowSvg.style.display = 'none';
   backArrowSvg.style.display = 'none';
@@ -31055,9 +31059,8 @@ function renderCardRotateAnimate(container) {
       }, roundAnimateDuration);
     });
   }
-  function fadeAnimate(inOrOut, directionTextPanel = null) {
+  function fadeAnimate(inOrOut) {
     div.style.opacity = inOrOut === 'in' ? '0.8' : '0';
-    if (directionTextPanel) directionTextPanel.style.display = inOrOut === 'in' ? 'flex' : 'none';
     return new Promise(resolve => {
       setTimeout(() => {
         resolve(true);
@@ -31066,15 +31069,23 @@ function renderCardRotateAnimate(container) {
   }
   function rotateCard(direction, beforeAnimate = () => {
     return;
-  }, directionTextPanel = null, stopOn = -1) {
+  }, stopOn = -1) {
     return __awaiter(this, void 0, void 0, function* () {
       // console.log('rotateCard', direction);
       animateStop = false;
+      // 停止送圖（動畫開始）
+      if (setAnimationFrameState) {
+        setAnimationFrameState(true);
+      }
       stopTimeout = setTimeout(() => __awaiter(this, void 0, void 0, function* () {
         if (animateStop) return;
-        yield fadeAnimate('out', directionTextPanel);
+        yield fadeAnimate('out');
         setTimeout(() => {
           resetAnimateStatus();
+          // 恢復送圖（動畫結束）
+          if (setAnimationFrameState) {
+            setAnimationFrameState(false);
+          }
         }, fadeDuration);
         beforeAnimate();
       }), stopOn === -1 ? roundAnimateDuration * 2 : stopOn);
@@ -31083,7 +31094,7 @@ function renderCardRotateAnimate(container) {
       cardSvg.style.display = 'block';
       frontArrowSvg.style.display = 'block';
       backArrowSvg.style.display = 'block';
-      yield fadeAnimate('in', directionTextPanel);
+      yield fadeAnimate('in');
       function _rotateCard(direction) {
         return __awaiter(this, void 0, void 0, function* () {
           switch (direction) {
@@ -32609,7 +32620,7 @@ function startOCR(config) {
       if (type !== EAuthMeCardClass.TWN_IDCard_Front || !config.ocrConfig.needAntiFraud) {
         return of(true);
       }
-      const applyTextByResult = result => {
+      const applyTextByResult = result => __awaiter(this, void 0, void 0, function* () {
         if (!uiComponentOCRMask.setCardBorderColor) return;
         uiComponentOCR.statusText.classList.add('non-empty');
         switch (result.eStatus) {
@@ -32697,13 +32708,11 @@ function startOCR(config) {
             break;
           case EAuthMeIDCardAntiFraudStatus.StagePass:
             uiComponentOCR.statusText.textContent = translateService.translate('sdk.general.verify.error.stagePass');
-            stopAnimate();
             previosAntiFraudAnimateTime = Date.now();
             uiComponentOCRMask.setCardBorderColor('pass');
-            // Add 2 second delay before moving to next stage
-            setTimeout(() => {
-              console.log('Stage pass delay completed, ready for next direction');
-            }, 2000);
+            // Block execution for 2 seconds to show StagePass state
+            yield new Promise(resolve => setTimeout(resolve, 2000));
+            stopAnimate();
             break;
           case EAuthMeIDCardAntiFraudStatus.Pass:
             uiComponentOCRMask.setCardBorderColor('pass');
@@ -32731,8 +32740,12 @@ function startOCR(config) {
           uiComponentOCR.statusText.textContent = '';
           uiComponentOCR.statusText.classList.remove('non-empty');
         }
-      };
-      const antiFraudStart$ = of(true).pipe(switchMap(() => checkOnlineStatus(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'))), switchMap(() => canvasSizeInfo$), switchMap(canvasSizeInfo => from(config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe(switchMap(() => config.antiFraudStart(getCardBorderPoint(), uiComponentOCRMask.setBorderType, uiComponentOCRMask.setCardBorderColor, uiComponentOCRMask.setBorderSuccess, uiComponentOCR.scanAnimationContainer, uiComponentOCR.successContainer, uiComponentOCRMask.frameImage, uiComponentOCRMask.frameText, facingMode)), tap(() => __awaiter(this, void 0, void 0, function* () {
+      });
+      const antiFraudStart$ = of(true).pipe(switchMap(() => checkOnlineStatus(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'))), switchMap(() => canvasSizeInfo$), switchMap(canvasSizeInfo => from(config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight)).pipe(switchMap(() => {
+        // 動畫開始時停止送圖
+        ocrSendFrameAnimation = true;
+        return config.antiFraudStart(getCardBorderPoint(), uiComponentOCRMask.setBorderType, uiComponentOCRMask.setCardBorderColor, uiComponentOCRMask.setBorderSuccess, uiComponentOCR.scanAnimationContainer, uiComponentOCR.successContainer, uiComponentOCRMask.frameImage, uiComponentOCRMask.frameText, facingMode);
+      }), tap(() => __awaiter(this, void 0, void 0, function* () {
         setStatusView(StatusView.Aligning);
         if (buttonDisable$) {
           const cardMatchROI = config.getCardMatchROI ? yield config.getCardMatchROI() : undefined;
@@ -32742,8 +32755,18 @@ function startOCR(config) {
           countDownTime = new Date().getTime() + ocrEngineConfig.expiredIn * TIME_UNIT.SECOND;
           sdkFlowTimeout = makeSDKFlowTimeout(ocrEngineConfig.expiredIn);
         }
-      })), sendFrame(canvasSizeInfo, uiComponentOCR.image, uiComponentBasic.video, config.onAntiFraudFrame, ocrEngineConfig.fraudMaxFps, false, 'jpg', undefined), map(x => x.result), tap(x => {
-        applyTextByResult(x);
+      })),
+      // 反欺詐完成後恢復送圖
+      tap(() => {
+        ocrSendFrameAnimation = false;
+      }), sendFrame(canvasSizeInfo, uiComponentOCR.image, uiComponentBasic.video, config.onAntiFraudFrame, ocrEngineConfig.fraudMaxFps, false, 'jpg', undefined,
+      // 使用 sendFrame 內建的 flags 機制來控制動畫時的送圖
+      {
+        get animating() {
+          return ocrSendFrameAnimation;
+        }
+      }), map(x => x.result), concatMap(x => __awaiter(this, void 0, void 0, function* () {
+        yield applyTextByResult(x);
         cardRotateByStage(x.eStage);
         if (isTutorialFinish) {
           cardRotateTextProcess(x.eStage, eStage != x.eStage);
@@ -32757,7 +32780,8 @@ function startOCR(config) {
           // if (config.ocrConfig.disableTutorial) {
           stopSpinner();
         }
-      }),
+        return x;
+      })),
       // ocrEngineConfig.expiredIn
       //   ? timeout(ocrEngineConfig.expiredIn * TIME_UNIT.SECOND)
       //   : tap(),
@@ -32980,7 +33004,6 @@ function startOCR(config) {
         }));
       };
       uiComponentOCRMask.setCardBorderColor(null);
-      let ocrSendFrameAnimation = false;
       const handleOcrSendFrame = (canvasSizeInfo, canvas, video, frameCallback, fps, bas64Format, imageType, cardType, type) => source$ => {
         let received = true;
         const ctx = canvas.getContext('2d', {
@@ -33078,6 +33101,7 @@ function startOCR(config) {
       };
       return recognition(false);
     }
+    let ocrSendFrameAnimation = false;
     function createFlowByType(type, cardType, cardTypeConfig) {
       return of(true).pipe(tap(() => {
         currentType('set', {
@@ -33205,7 +33229,10 @@ function startOCR(config) {
           })),
           container: uiComponentBasic.videoContainer
         });
-        const rotateUI = renderCardRotateAnimate(uiComponentOCR.arrowAnimationContainer);
+        const rotateUI = renderCardRotateAnimate(uiComponentOCR.arrowAnimationContainer, uiComponentOCR.directionTextPanel, isAnimating => {
+          // 動畫開始時停止送圖，動畫結束時恢復送圖
+          ocrSendFrameAnimation = isAnimating;
+        });
         rotateCard = rotateUI.rotateCard;
         getIsRotateCardAnimating = rotateUI.getIsRotateCardAnimating;
         stopAnimate = rotateUI.stopAnimate;
@@ -33758,22 +33785,22 @@ function startOCR(config) {
         case EAuthMeIDCardAntiFraudStage.Left:
           rotateCard(facingMode === 'front' ? 'right' : 'left', () => {
             previosAntiFraudAnimateTime = Date.now();
-          }, uiComponentOCR.directionTextPanel);
+          });
           break;
         case EAuthMeIDCardAntiFraudStage.Right:
           rotateCard(facingMode === 'front' ? 'left' : 'right', () => {
             previosAntiFraudAnimateTime = Date.now();
-          }, uiComponentOCR.directionTextPanel);
+          });
           break;
         case EAuthMeIDCardAntiFraudStage.Up:
           rotateCard('up', () => {
             previosAntiFraudAnimateTime = Date.now();
-          }, uiComponentOCR.directionTextPanel);
+          });
           break;
         case EAuthMeIDCardAntiFraudStage.Down:
           rotateCard('down', () => {
             previosAntiFraudAnimateTime = Date.now();
-          }, uiComponentOCR.directionTextPanel);
+          });
           break;
       }
     }
@@ -37239,8 +37266,8 @@ class AuthmeIdentityVerification extends AuthmeFunctionModule {
 }
 
 var name = "authme/sdk";
-var version$1 = "2.8.32";
-var date = "2025-11-07T03:04:15+0000";
+var version$1 = "2.8.33";
+var date = "2025-11-21T09:00:22+0000";
 var packageInfo = {
 	name: name,
 	version: version$1,

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@authme/identity-verification",
-  "version": "2.8.32",
+  "version": "2.8.33",
   "peerDependencies": {
     "core-js": "^3.6.0",
     "lottie-web": "^5.9.2",
     "rxjs": "^7.4.0",
-    "@authme/core": "2.8.32",
-    "@authme/engine": "2.8.32",
-    "@authme/id-recognition": "2.8.32",
-    "@authme/liveness": "2.8.32",
-    "@authme/util": "2.8.32"
+    "@authme/core": "2.8.33",
+    "@authme/engine": "2.8.33",
+    "@authme/id-recognition": "2.8.33",
+    "@authme/liveness": "2.8.33",
+    "@authme/util": "2.8.33"
   },
   "module": "./index.js",
   "main": "./index.cjs",

package/src/lib/ui/ocr.animate.d.ts

@@ -1,7 +1,7 @@
 declare type direction = 'left' | 'right' | 'up' | 'down';
-export declare function renderCardRotateAnimate(container: HTMLElement): {
+export declare function renderCardRotateAnimate(container: HTMLElement, directionTextPanel?: HTMLElement | null, setAnimationFrameState?: (isAnimating: boolean) => void): {
     stopAnimate: () => Promise<unknown>;
-    rotateCard: (direction: direction, beforeAnimate?: () => void, directionTextPanel?: HTMLElement | null, stopOn?: number) => Promise<void>;
+    rotateCard: (direction: direction, beforeAnimate?: () => void, stopOn?: number) => Promise<void>;
     getIsRotateCardAnimating: () => boolean;
 };
 export {};