@authme/util 2.8.25 → 2.8.27

package/index.cjs

@@ -999,12 +999,14 @@ function getCanvasSize(video) {
       result.startX = 0;
       result.startY = Math.floor((videoHeight - result.height) / 2);
     }
-    const maxHeight = videoHeight > videoWidth ? 1280 : 720;
-    const maxWidth = videoHeight > videoWidth ? 720 : 1280;
-    const resizeRatioH = maxHeight / Math.max(result.height, maxHeight);
-    const resizeRatioW = maxWidth / Math.max(result.width, maxWidth);
-    const resizeRatio = Math.max(resizeRatioH, resizeRatioW);
-    // const resizeRatio = 1;
+    // const maxHeight = videoHeight > videoWidth ? 1280 : 720;
+    // const maxWidth = videoHeight > videoWidth ? 720 : 1280;
+    // const resizeRatioH = maxHeight / Math.max(result.height, maxHeight);
+    // const resizeRatioW = maxWidth / Math.max(result.width, maxWidth);
+    // const resizeRatio = Math.max(resizeRatioH, resizeRatioW);
+    // 暫時降低解析度測試
+    const maxDimension = 1920; // 限制最大尺寸
+    const resizeRatio = Math.min(1, maxDimension / Math.max(result.width, result.height));
     result.canvasWidth = Math.floor(result.width * resizeRatio);
     result.canvasHeight = Math.floor(result.height * resizeRatio);
     return result;
@@ -1045,18 +1047,82 @@ const hexToRgba = (hex, alpha = 1) => {
   const b = parseInt(hex.substring(4, 6), 16);
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
-const uiThemeText = (dom, textStyle) => {
+const uiThemeText = (dom, textStyle, distance) => {
   dom.style.color = textStyle.textColor;
   dom.style.fontWeight = fontWeight[textStyle.textWeight];
   dom.style.fontSize = `${textStyle.fontSize}px`;
+  // Position parent element at the bottom by default
+  if (dom.parentElement) {
+    const parent = dom.parentElement;
+    parent.style.position = 'absolute';
+    parent.style.display = 'block';
+    // Adjust based on direction if provided
+    if (textStyle.direction === 'top') {
+      parent.style.top = distance || '7vh';
+      parent.style.bottom = 'unset';
+    } else if (textStyle.direction === 'bottom') {
+      parent.style.top = 'unset';
+      parent.style.bottom = distance || '7vh';
+    }
+  }
 };
-const uiThemeHint = (dom, hintStyle) => {
+const uiThemeHint = (dom, hintStyle, distance) => {
   dom.style.borderRadius = `${hintStyle.cornerRadius}px`;
   dom.style.backgroundColor = hintStyle.backgroundColor;
   dom.style.opacity = hintStyle.opacity;
   dom.style.color = hintStyle.textColor;
   dom.style.fontWeight = fontWeight[hintStyle.textWeight];
   dom.style.fontSize = `${hintStyle.fontSize}px`;
+  // Position parent element at the top by default
+  if (dom.parentElement) {
+    const parent = dom.parentElement;
+    parent.style.display = 'block';
+    parent.style.position = 'absolute';
+    // Adjust based on direction if provided
+    if (hintStyle.direction === 'top') {
+      parent.style.top = distance || '7vh';
+      parent.style.bottom = 'unset';
+    } else {
+      parent.style.top = 'unset';
+      parent.style.bottom = distance || '7vh';
+    }
+  }
+};
+const uiThemeDirection = (panel, hintStyle) => {
+  // Apply background styles to the panel (directionTextPanel)
+  panel.style.borderRadius = `${hintStyle.cornerRadius || 20}px`;
+  panel.style.backgroundColor = hintStyle.backgroundColor;
+  panel.style.opacity = hintStyle.backgroundOpacity;
+  panel.style.display = 'none';
+  panel.style.flexDirection = 'row';
+  panel.style.alignItems = 'center';
+  panel.style.justifyContent = 'center';
+  panel.style.gap = '12px';
+  panel.style.padding = '16px 24px';
+  panel.style.boxSizing = 'border-box';
+  panel.style.minWidth = hintStyle.width;
+  panel.style.width = hintStyle.width;
+  panel.style.height = `${hintStyle.height || 'auto'}`;
+  // Style the text child
+  const directionText = panel.querySelector('.status-text');
+  if (directionText) {
+    directionText.style.color = hintStyle.textColor;
+    directionText.style.fontSize = `${hintStyle.fontSize}px`;
+    directionText.style.fontWeight = fontWeight[hintStyle.textWeight];
+    directionText.style.whiteSpace = 'nowrap';
+    directionText.style.display = 'inline-block';
+    directionText.style.verticalAlign = 'middle';
+  }
+  // Style the icon child
+  const directionIcon = panel.querySelector('.direction-icon');
+  if (directionIcon) {
+    directionIcon.style.display = 'flex';
+    directionIcon.style.alignItems = 'center';
+    directionIcon.style.justifyContent = 'center';
+    directionIcon.style.flexShrink = '0';
+    directionIcon.style.width = '72px';
+    directionIcon.style.height = '72px';
+  }
 };
 const uiThemeButton = (dom, buttonStyle, disabled) => {
   dom.style.opacity = buttonStyle.backgroundOpacity;
@@ -1077,8 +1143,7 @@ const uiThemeButton = (dom, buttonStyle, disabled) => {
   dom.style.borderStyle = 'solid';
   // dom.style.height = `${buttonStyle.cornerRadius * 2}px`;
   dom.style.height = `48px`;
-  dom.style.width = `calc(100% - ${buttonStyle.cornerRadius * 2}px)`;
-  dom.style.maxWidth = `327px`;
+  dom.style.width = `774px`;
 };
 const uiThemeSmallButton = (dom, buttonStyle) => {
   dom.style.borderRadius = `${buttonStyle.cornerRadius}px`;
@@ -1360,13 +1425,11 @@ const videoConstraintsFactory = (isPC, facingMode) => {
     video: {
       width: {
         min: 1280,
-        ideal: 1920,
-        max: 1920
+        ideal: 1920
       },
       height: {
         min: 720,
-        ideal: 1080,
-        max: 1080
+        ideal: 1080
       },
       facingMode
     }
@@ -1441,23 +1504,36 @@ function switchCamera(deviceId, video) {
       if (stream) {
         stream.getTracks().forEach(track => track.stop());
       }
-      const constraints = {
+      // 第一階段：使用基本約束獲取流，確保相機能工作
+      const basicConstraints = {
         video: {
-          width: {},
-          height: {},
-          focusMode: 'auto',
-          deviceId: deviceId
+          deviceId: deviceId,
+          focusMode: 'auto'
         }
       };
       const constraint = localStorage.getItem('camera_constraint');
-      if (!constraint) {
-        // 推測依然需要使用 width & height 的限制條件，
-        // 否則即使是高解析度相機，也有可能拿到低解析度的圖片。(待驗證)
-        // 發現部分 camera 會無法套用這個設定導致不會有畫面出現
-        // constraints.video.width = { min: 1280, ideal: 1280, max: 1920 };
-        // constraints.video.height = { min: 720, ideal: 720, max: 1080 };
+      stream = yield navigator.mediaDevices.getUserMedia(basicConstraints);
+      // 第二階段：如果沒有設定跳過約束，嘗試使用 applyConstraints 提升解析度
+      if (!constraint && stream) {
+        const videoTrack = stream.getVideoTracks()[0];
+        if (videoTrack && videoTrack.applyConstraints) {
+          try {
+            // 嘗試應用更高解析度（使用 ideal 而非 min/max）
+            yield videoTrack.applyConstraints({
+              width: {
+                ideal: 1920,
+                max: 3840
+              },
+              height: {
+                ideal: 1080,
+                max: 2160
+              }
+            });
+          } catch (error) {
+            // 失敗時保持原有流，不會中斷相機
+          }
+        }
       }
-      stream = yield navigator.mediaDevices.getUserMedia(constraints);
       // try {
       //   stream = await navigator.mediaDevices.getUserMedia(constraints);
       //   console.log("獲取媒體流成功:", stream);
@@ -1465,19 +1541,16 @@ function switchCamera(deviceId, video) {
       //   console.error("獲取媒體流失敗:", error);
       // }
       if (stream.getVideoTracks().length === 0) {
-        console.error('沒有 video track');
         throw new Error('沒有 video track');
       }
       try {
         video.srcObject = stream;
       } catch (error) {
-        // console.error("設置視訊流失敗:", error);
         throw new AuthmeError(exports.ErrorCode.CAMERA_NOT_SUPPORT, error);
       }
       try {
         yield video.play();
       } catch (error) {
-        // console.error("播放視訊失敗:", error);
         throw new AuthmeError(exports.ErrorCode.CAMERA_NOT_SUPPORT, error);
       }
       // console.log('stream', stream.getVideoTracks()[0].getSettings());
@@ -3092,7 +3165,24 @@ const themeConfigDefault = {
     // Figma標示dark_title 1
     textColor: '#ffffff',
     textWeight: 'medium',
-    fontSize: 20
+    fontSize: 20,
+    direction: 'bottom' //文字方向 bottom / top / center,
+  },
+
+  fraudScanHintText: {
+    // D.F.SC.2
+    backgroundColor: '#000000',
+    backgroundOpacity: 0.7,
+    cornerRadius: 28,
+    width: '153px',
+    height: '56px',
+    textColor: '#FFFFFF',
+    textWeight: 'medium',
+    fontSize: 18,
+    leftText: '向左翻轉',
+    rightText: '向右翻轉',
+    upText: '向上翻轉',
+    downText: '向下翻轉'
   },
   titleTwoDarkMode: {
     // G.T.D.2
@@ -3151,8 +3241,8 @@ const themeConfigDefault = {
 };
 
 var name = "authme/sdk";
-var version$1 = "2.8.25";
-var date = "2025-08-20T02:53:44+0000";
+var version$1 = "2.8.27";
+var date = "2025-10-02T06:50:39+0000";
 var packageInfo = {
 	name: name,
 	version: version$1,
@@ -3213,6 +3303,7 @@ exports.stopSpinner = stopSpinner;
 exports.switchCamera = switchCamera;
 exports.themeConfigDefault = themeConfigDefault;
 exports.uiThemeButton = uiThemeButton;
+exports.uiThemeDirection = uiThemeDirection;
 exports.uiThemeHint = uiThemeHint;
 exports.uiThemeSmallButton = uiThemeSmallButton;
 exports.uiThemeText = uiThemeText;

package/index.js

@@ -989,12 +989,14 @@ function getCanvasSize(video) {
       result.startX = 0;
       result.startY = Math.floor((videoHeight - result.height) / 2);
     }
-    const maxHeight = videoHeight > videoWidth ? 1280 : 720;
-    const maxWidth = videoHeight > videoWidth ? 720 : 1280;
-    const resizeRatioH = maxHeight / Math.max(result.height, maxHeight);
-    const resizeRatioW = maxWidth / Math.max(result.width, maxWidth);
-    const resizeRatio = Math.max(resizeRatioH, resizeRatioW);
-    // const resizeRatio = 1;
+    // const maxHeight = videoHeight > videoWidth ? 1280 : 720;
+    // const maxWidth = videoHeight > videoWidth ? 720 : 1280;
+    // const resizeRatioH = maxHeight / Math.max(result.height, maxHeight);
+    // const resizeRatioW = maxWidth / Math.max(result.width, maxWidth);
+    // const resizeRatio = Math.max(resizeRatioH, resizeRatioW);
+    // 暫時降低解析度測試
+    const maxDimension = 1920; // 限制最大尺寸
+    const resizeRatio = Math.min(1, maxDimension / Math.max(result.width, result.height));
     result.canvasWidth = Math.floor(result.width * resizeRatio);
     result.canvasHeight = Math.floor(result.height * resizeRatio);
     return result;
@@ -1035,18 +1037,82 @@ const hexToRgba = (hex, alpha = 1) => {
   const b = parseInt(hex.substring(4, 6), 16);
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
-const uiThemeText = (dom, textStyle) => {
+const uiThemeText = (dom, textStyle, distance) => {
   dom.style.color = textStyle.textColor;
   dom.style.fontWeight = fontWeight[textStyle.textWeight];
   dom.style.fontSize = `${textStyle.fontSize}px`;
+  // Position parent element at the bottom by default
+  if (dom.parentElement) {
+    const parent = dom.parentElement;
+    parent.style.position = 'absolute';
+    parent.style.display = 'block';
+    // Adjust based on direction if provided
+    if (textStyle.direction === 'top') {
+      parent.style.top = distance || '7vh';
+      parent.style.bottom = 'unset';
+    } else if (textStyle.direction === 'bottom') {
+      parent.style.top = 'unset';
+      parent.style.bottom = distance || '7vh';
+    }
+  }
 };
-const uiThemeHint = (dom, hintStyle) => {
+const uiThemeHint = (dom, hintStyle, distance) => {
   dom.style.borderRadius = `${hintStyle.cornerRadius}px`;
   dom.style.backgroundColor = hintStyle.backgroundColor;
   dom.style.opacity = hintStyle.opacity;
   dom.style.color = hintStyle.textColor;
   dom.style.fontWeight = fontWeight[hintStyle.textWeight];
   dom.style.fontSize = `${hintStyle.fontSize}px`;
+  // Position parent element at the top by default
+  if (dom.parentElement) {
+    const parent = dom.parentElement;
+    parent.style.display = 'block';
+    parent.style.position = 'absolute';
+    // Adjust based on direction if provided
+    if (hintStyle.direction === 'top') {
+      parent.style.top = distance || '7vh';
+      parent.style.bottom = 'unset';
+    } else {
+      parent.style.top = 'unset';
+      parent.style.bottom = distance || '7vh';
+    }
+  }
+};
+const uiThemeDirection = (panel, hintStyle) => {
+  // Apply background styles to the panel (directionTextPanel)
+  panel.style.borderRadius = `${hintStyle.cornerRadius || 20}px`;
+  panel.style.backgroundColor = hintStyle.backgroundColor;
+  panel.style.opacity = hintStyle.backgroundOpacity;
+  panel.style.display = 'none';
+  panel.style.flexDirection = 'row';
+  panel.style.alignItems = 'center';
+  panel.style.justifyContent = 'center';
+  panel.style.gap = '12px';
+  panel.style.padding = '16px 24px';
+  panel.style.boxSizing = 'border-box';
+  panel.style.minWidth = hintStyle.width;
+  panel.style.width = hintStyle.width;
+  panel.style.height = `${hintStyle.height || 'auto'}`;
+  // Style the text child
+  const directionText = panel.querySelector('.status-text');
+  if (directionText) {
+    directionText.style.color = hintStyle.textColor;
+    directionText.style.fontSize = `${hintStyle.fontSize}px`;
+    directionText.style.fontWeight = fontWeight[hintStyle.textWeight];
+    directionText.style.whiteSpace = 'nowrap';
+    directionText.style.display = 'inline-block';
+    directionText.style.verticalAlign = 'middle';
+  }
+  // Style the icon child
+  const directionIcon = panel.querySelector('.direction-icon');
+  if (directionIcon) {
+    directionIcon.style.display = 'flex';
+    directionIcon.style.alignItems = 'center';
+    directionIcon.style.justifyContent = 'center';
+    directionIcon.style.flexShrink = '0';
+    directionIcon.style.width = '72px';
+    directionIcon.style.height = '72px';
+  }
 };
 const uiThemeButton = (dom, buttonStyle, disabled) => {
   dom.style.opacity = buttonStyle.backgroundOpacity;
@@ -1067,8 +1133,7 @@ const uiThemeButton = (dom, buttonStyle, disabled) => {
   dom.style.borderStyle = 'solid';
   // dom.style.height = `${buttonStyle.cornerRadius * 2}px`;
   dom.style.height = `48px`;
-  dom.style.width = `calc(100% - ${buttonStyle.cornerRadius * 2}px)`;
-  dom.style.maxWidth = `327px`;
+  dom.style.width = `774px`;
 };
 const uiThemeSmallButton = (dom, buttonStyle) => {
   dom.style.borderRadius = `${buttonStyle.cornerRadius}px`;
@@ -1350,13 +1415,11 @@ const videoConstraintsFactory = (isPC, facingMode) => {
     video: {
       width: {
         min: 1280,
-        ideal: 1920,
-        max: 1920
+        ideal: 1920
       },
       height: {
         min: 720,
-        ideal: 1080,
-        max: 1080
+        ideal: 1080
       },
       facingMode
     }
@@ -1431,23 +1494,36 @@ function switchCamera(deviceId, video) {
       if (stream) {
         stream.getTracks().forEach(track => track.stop());
       }
-      const constraints = {
+      // 第一階段：使用基本約束獲取流，確保相機能工作
+      const basicConstraints = {
         video: {
-          width: {},
-          height: {},
-          focusMode: 'auto',
-          deviceId: deviceId
+          deviceId: deviceId,
+          focusMode: 'auto'
         }
       };
       const constraint = localStorage.getItem('camera_constraint');
-      if (!constraint) {
-        // 推測依然需要使用 width & height 的限制條件，
-        // 否則即使是高解析度相機，也有可能拿到低解析度的圖片。(待驗證)
-        // 發現部分 camera 會無法套用這個設定導致不會有畫面出現
-        // constraints.video.width = { min: 1280, ideal: 1280, max: 1920 };
-        // constraints.video.height = { min: 720, ideal: 720, max: 1080 };
+      stream = yield navigator.mediaDevices.getUserMedia(basicConstraints);
+      // 第二階段：如果沒有設定跳過約束，嘗試使用 applyConstraints 提升解析度
+      if (!constraint && stream) {
+        const videoTrack = stream.getVideoTracks()[0];
+        if (videoTrack && videoTrack.applyConstraints) {
+          try {
+            // 嘗試應用更高解析度（使用 ideal 而非 min/max）
+            yield videoTrack.applyConstraints({
+              width: {
+                ideal: 1920,
+                max: 3840
+              },
+              height: {
+                ideal: 1080,
+                max: 2160
+              }
+            });
+          } catch (error) {
+            // 失敗時保持原有流，不會中斷相機
+          }
+        }
       }
-      stream = yield navigator.mediaDevices.getUserMedia(constraints);
       // try {
       //   stream = await navigator.mediaDevices.getUserMedia(constraints);
       //   console.log("獲取媒體流成功:", stream);
@@ -1455,19 +1531,16 @@ function switchCamera(deviceId, video) {
       //   console.error("獲取媒體流失敗:", error);
       // }
       if (stream.getVideoTracks().length === 0) {
-        console.error('沒有 video track');
         throw new Error('沒有 video track');
       }
       try {
         video.srcObject = stream;
       } catch (error) {
-        // console.error("設置視訊流失敗:", error);
         throw new AuthmeError(ErrorCode.CAMERA_NOT_SUPPORT, error);
       }
       try {
         yield video.play();
       } catch (error) {
-        // console.error("播放視訊失敗:", error);
         throw new AuthmeError(ErrorCode.CAMERA_NOT_SUPPORT, error);
       }
       // console.log('stream', stream.getVideoTracks()[0].getSettings());
@@ -3082,7 +3155,24 @@ const themeConfigDefault = {
     // Figma標示dark_title 1
     textColor: '#ffffff',
     textWeight: 'medium',
-    fontSize: 20
+    fontSize: 20,
+    direction: 'bottom' //文字方向 bottom / top / center,
+  },
+
+  fraudScanHintText: {
+    // D.F.SC.2
+    backgroundColor: '#000000',
+    backgroundOpacity: 0.7,
+    cornerRadius: 28,
+    width: '153px',
+    height: '56px',
+    textColor: '#FFFFFF',
+    textWeight: 'medium',
+    fontSize: 18,
+    leftText: '向左翻轉',
+    rightText: '向右翻轉',
+    upText: '向上翻轉',
+    downText: '向下翻轉'
   },
   titleTwoDarkMode: {
     // G.T.D.2
@@ -3141,8 +3231,8 @@ const themeConfigDefault = {
 };
 
 var name = "authme/sdk";
-var version$1 = "2.8.25";
-var date = "2025-08-20T02:53:44+0000";
+var version$1 = "2.8.27";
+var date = "2025-10-02T06:50:39+0000";
 var packageInfo = {
 	name: name,
 	version: version$1,
@@ -3155,4 +3245,4 @@ const version = packageInfo.version;
 (_a = (_b = window)[_c = Symbol.for('authme-sdk')]) !== null && _a !== void 0 ? _a : _b[_c] = {};
 window[Symbol.for('authme-sdk')][packageInfo.name] = version;
 
-export { AuthmeError, DEVICE_TYPE, ErrorCode, Icon, RGBToLottieColor, RUN_FUNCTION_NAME, STORAGE_KEY, Storage, TIME_UNIT, UintArrayToBlob, asyncOnLineShowErrorMessage, asyncShowErrorMessage, asyncShowPopup, backgroundRequest, checkOnlineStatus, clearCanvas, colorStringToRGB, colorToRGB, combineResult, cropByRatio, dataURItoBlob, debugLog, debugTools, decodeToken, dropMenu, fontWeight, getCanvasSize, getCssVariable, getDeviceInfo, getImageData, getSystemInfo, hexToRGB, hideElement, hideErrorMessage, hidePopup, isIphone14proOrProMax, isMobile, isMobileOrTablet, osVersion, requestCamera, resize, retryPromiseWithCondition, showElement, showErrorMessage, showErrorMessageEventName, showPopup, splitResult, startLoadingSDK, startSpinner, stopLoadingSDK, stopSpinner, switchCamera, themeConfigDefault, uiThemeButton, uiThemeHint, uiThemeSmallButton, uiThemeText, uploadModal, useState, verificationErrorMessages, version, videoConstraintsFactory, waitTime };
+export { AuthmeError, DEVICE_TYPE, ErrorCode, Icon, RGBToLottieColor, RUN_FUNCTION_NAME, STORAGE_KEY, Storage, TIME_UNIT, UintArrayToBlob, asyncOnLineShowErrorMessage, asyncShowErrorMessage, asyncShowPopup, backgroundRequest, checkOnlineStatus, clearCanvas, colorStringToRGB, colorToRGB, combineResult, cropByRatio, dataURItoBlob, debugLog, debugTools, decodeToken, dropMenu, fontWeight, getCanvasSize, getCssVariable, getDeviceInfo, getImageData, getSystemInfo, hexToRGB, hideElement, hideErrorMessage, hidePopup, isIphone14proOrProMax, isMobile, isMobileOrTablet, osVersion, requestCamera, resize, retryPromiseWithCondition, showElement, showErrorMessage, showErrorMessageEventName, showPopup, splitResult, startLoadingSDK, startSpinner, stopLoadingSDK, stopSpinner, switchCamera, themeConfigDefault, uiThemeButton, uiThemeDirection, uiThemeHint, uiThemeSmallButton, uiThemeText, uploadModal, useState, verificationErrorMessages, version, videoConstraintsFactory, waitTime };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authme/util",
-  "version": "2.8.25",
+  "version": "2.8.27",
   "peerDependencies": {
     "core-js": "^3.6.0",
     "file-saver": "2.0.5",

package/src/ui/camera.d.ts

@@ -19,12 +19,10 @@ export declare const videoConstraintsFactory: (isPC: boolean, facingMode: 'user'
         width: {
             min: number;
             ideal: number;
-            max: number;
         };
         height: {
             min: number;
             ideal: number;
-            max: number;
         };
         facingMode: "user" | "environment";
     };
@@ -33,12 +31,10 @@ export declare const videoConstraintsFactory: (isPC: boolean, facingMode: 'user'
         width: {
             ideal: number;
             min?: undefined;
-            max?: undefined;
         };
         height: {
             ideal: number;
             min?: undefined;
-            max?: undefined;
         };
         facingMode: "user" | "environment";
     };

package/src/ui/uiThemeStyle.d.ts

@@ -1,5 +1,6 @@
 export declare const fontWeight: any;
-export declare const uiThemeText: (dom: any, textStyle: any) => void;
-export declare const uiThemeHint: (dom: any, hintStyle: any) => void;
+export declare const uiThemeText: (dom: any, textStyle: any, distance?: string) => void;
+export declare const uiThemeHint: (dom: any, hintStyle: any, distance?: string) => void;
+export declare const uiThemeDirection: (panel: any, hintStyle: any) => void;
 export declare const uiThemeButton: (dom: any, buttonStyle: any, disabled?: boolean) => void;
 export declare const uiThemeSmallButton: (dom: any, buttonStyle: any) => void;