@unif/react-native-camera 2.6.1 → 2.7.0

package/lib/typescript/src/camera/setup/SideRail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideRail.d.ts","sourceRoot":"","sources":["../../../../../src/camera/setup/SideRail.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;AAC9C,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,MAAM,CAAC;AAEzC,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,mBAAmB,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAcF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,KAAK,EACL,IAAI,EACJ,aAAa,EACb,mBAAmB,EACnB,aAAa,EACb,YAAY,GACb,EAAE,KAAK,2CAmFP"}

package/lib/typescript/src/camera/setup/SideRail.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SideRail.test.d.ts.map

package/lib/typescript/src/camera/setup/SideRail.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideRail.test.d.ts","sourceRoot":"","sources":["../../../../../src/camera/setup/SideRail.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/src/camera/setup/index.d.ts

@@ -1,2 +1,3 @@
-export { SetUp, type FlashMode, type AspectRatio } from './SetUp';
+export { SideRail } from './SideRail';
+export type { FlashMode, AspectRatio } from './SideRail';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/camera/setup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/camera/setup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/camera/setup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC"}

package/lib/typescript/src/components/Carousel/SlideItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlideItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Carousel/SlideItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnD,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,2CAU5D"}
+{"version":3,"file":"SlideItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Carousel/SlideItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,2CAc5D"}

package/lib/typescript/src/components/Carousel/SlideItem.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SlideItem.test.d.ts.map

package/lib/typescript/src/components/Carousel/SlideItem.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideItem.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/Carousel/SlideItem.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/src/components/VideoPlayer.d.ts

@@ -0,0 +1,4 @@
+export declare function VideoPlayer({ uri }: {
+    uri: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VideoPlayer.d.ts.map

package/lib/typescript/src/components/VideoPlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../../src/components/VideoPlayer.tsx"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,2CAyBnD"}

package/lib/typescript/src/components/VideoPlayer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=VideoPlayer.test.d.ts.map

package/lib/typescript/src/components/VideoPlayer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.test.d.ts","sourceRoot":"","sources":["../../../../src/components/VideoPlayer.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/src/components/index.d.ts

@@ -1,4 +1,3 @@
 export { Loading } from './Loading';
-export { PreviewThumbnail } from './PreviewThumbnail';
 export * from './Carousel';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,YAAY,CAAC"}

package/lib/typescript/src/hooks/index.d.ts

@@ -1,4 +1,3 @@
 export { useCreation } from './useCreation';
-export { useConfirm } from './useConfirm';
 export { useCamera } from './useCamera';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-camera",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "基于 react-native-vision-camera 5.x 的相机库（单拍/连拍/视频录制）",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -97,12 +97,13 @@
     "react-native": "0.85.0",
     "react-native-builder-bob": "^0.41.0",
     "react-native-gesture-handler": "^2.21.0",
-    "react-native-nitro-image": "^0.14.0",
+    "react-native-nitro-image": "^0.15.0",
     "react-native-nitro-modules": "^0.35.0",
     "react-native-reanimated": "^4.0.0",
     "react-native-reanimated-carousel": "^5.0.0-beta.5",
     "react-native-safe-area-context": "^5.0.0",
     "react-native-svg": "^15.15.5",
+    "react-native-video": "7.0.0-beta.9",
     "react-native-vision-camera": "^5.0.0",
     "react-native-vision-camera-worklets": "^5.0.0",
     "react-native-webview": "*",
@@ -125,6 +126,7 @@
     "react-native-reanimated-carousel": ">=5.0.0-beta.0",
     "react-native-safe-area-context": ">=5.0.0",
     "react-native-svg": ">=15",
+    "react-native-video": ">=7.0.0-beta.0",
     "react-native-vision-camera": "^5.0.0",
     "react-native-vision-camera-worklets": "^5.0.0",
     "react-native-webview": "*",

package/src/camera/Camera.tsx

@@ -1,11 +1,13 @@
 import {
   forwardRef,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useRef,
   useState,
 } from 'react';
-import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import { Animated, StyleSheet, useWindowDimensions, View } from 'react-native';
+import Svg, { Line } from 'react-native-svg';
 import {
   Camera as VisionCamera,
   useMicrophonePermission,
@@ -24,6 +26,7 @@ import type { CameraMode, CustomPhotoFile, Point } from '../utils';
 import { buildPhotoFile } from '../utils';
 import { capturePhotoToFile } from './capturePhotoHelper';
 import { FocusIndicator } from './FocusIndicator';
+import { DARK } from './colors/dark';
 import type { AspectRatio, FlashMode } from './setup';
 
 const NEUTRAL_ZOOM = 1;
@@ -41,10 +44,23 @@ type Props = {
   flash?: FlashMode;
   aspectRatio?: AspectRatio;
   zoomShared?: SharedValue<number>;
+  sound?: boolean;
+  grid?: boolean;
+  flipNonce?: number;
 };
 
 export const Camera = forwardRef<CameraHandle, Props>(function Camera(
-  { device, currentMode, isActive = true, flash, aspectRatio, zoomShared },
+  {
+    device,
+    currentMode,
+    isActive = true,
+    flash,
+    aspectRatio,
+    zoomShared,
+    sound,
+    grid,
+    flipNonce,
+  },
   ref
 ) {
   const cameraRef = useRef<CameraRef>(null);
@@ -95,6 +111,25 @@ export const Camera = forwardRef<CameraHandle, Props>(function Camera(
       zoom.value = Math.min(Math.max(z, device.minZoom), device.maxZoom);
     });
 
+  // 翻转动画:flipNonce 变化时播一次 rotateY 0→180→0(前后摄切换的 3D 翻转视觉)。
+  const flipAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (!flipNonce) return;
+    Animated.sequence([
+      Animated.timing(flipAnim, {
+        toValue: 1,
+        duration: 180,
+        useNativeDriver: true,
+      }),
+      Animated.timing(flipAnim, {
+        toValue: 0,
+        duration: 180,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [flipNonce, flipAnim]);
+
   const [focusPoint, setFocusPoint] = useState<Point | null>(null);
 
   const handleFocus = useCallback(
@@ -128,7 +163,7 @@ export const Camera = forwardRef<CameraHandle, Props>(function Camera(
         try {
           const raw = await capturePhotoToFile(photoOutput, {
             flashMode: flash ?? 'off',
-            enableShutterSound: true,
+            enableShutterSound: sound ?? true,
           });
           return buildPhotoFile(
             { path: raw.path, width: raw.width, height: raw.height },
@@ -216,6 +251,7 @@ export const Camera = forwardRef<CameraHandle, Props>(function Camera(
       requestMic,
       flash,
       cameraType,
+      sound,
     ]
   );
 
@@ -224,35 +260,90 @@ export const Camera = forwardRef<CameraHandle, Props>(function Camera(
   return (
     <View style={styles.root}>
       <GestureDetector gesture={composed}>
-        <View style={[styles.frame, { width: frameW, height: frameH }]}>
-          <VisionCamera
-            ref={cameraRef}
-            style={StyleSheet.absoluteFill}
-            resizeMode="cover"
-            device={device}
-            isActive={isActive}
-            outputs={outputs as CameraProps['outputs']}
-            constraints={[{ photoHDR: false }]}
-            zoom={zoom}
-            torchMode={
-              currentMode.mode === 'video' && flash === 'on' ? 'on' : 'off'
-            }
-            onSubjectAreaChanged={() => cameraRef.current?.resetFocus()}
-            nativeID="vision-camera"
-          />
-          {focusPoint && (
-            <FocusIndicator
-              key={`${focusPoint.x}-${focusPoint.y}`}
-              point={focusPoint}
-              onAnimationEnd={() => setFocusPoint(null)}
+        <Animated.View
+          style={{
+            transform: [
+              { perspective: 1000 },
+              {
+                rotateY: flipAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: ['0deg', '180deg'],
+                }),
+              },
+            ],
+          }}
+        >
+          <View style={[styles.frame, { width: frameW, height: frameH }]}>
+            <VisionCamera
+              ref={cameraRef}
+              style={StyleSheet.absoluteFill}
+              resizeMode="cover"
+              device={device}
+              isActive={isActive}
+              outputs={outputs as CameraProps['outputs']}
+              constraints={[{ photoHDR: false }]}
+              zoom={zoom}
+              torchMode={
+                currentMode.mode === 'video' && flash === 'on' ? 'on' : 'off'
+              }
+              onSubjectAreaChanged={() => cameraRef.current?.resetFocus()}
+              nativeID="vision-camera"
             />
-          )}
-        </View>
+            {grid && <GridOverlay />}
+            {focusPoint && (
+              <FocusIndicator
+                key={`${focusPoint.x}-${focusPoint.y}`}
+                point={focusPoint}
+                onAnimationEnd={() => setFocusPoint(null)}
+              />
+            )}
+          </View>
+        </Animated.View>
       </GestureDetector>
     </View>
   );
 });
 
+// 网格叠加:2 竖 2 横线把取景框 3 等分(rule-of-thirds 九宫格)。pointerEvents=none 不挡手势。
+function GridOverlay() {
+  return (
+    <Svg style={StyleSheet.absoluteFill} pointerEvents="none">
+      <Line
+        x1="33.33%"
+        y1="0%"
+        x2="33.33%"
+        y2="100%"
+        stroke={DARK.white25}
+        strokeWidth={0.5}
+      />
+      <Line
+        x1="66.66%"
+        y1="0%"
+        x2="66.66%"
+        y2="100%"
+        stroke={DARK.white25}
+        strokeWidth={0.5}
+      />
+      <Line
+        x1="0%"
+        y1="33.33%"
+        x2="100%"
+        y2="33.33%"
+        stroke={DARK.white25}
+        strokeWidth={0.5}
+      />
+      <Line
+        x1="0%"
+        y1="66.66%"
+        x2="100%"
+        y2="66.66%"
+        stroke={DARK.white25}
+        strokeWidth={0.5}
+      />
+    </Svg>
+  );
+}
+
 const styles = StyleSheet.create({
   // 全屏黑底,把取景框居中 → 框外区域是黑边(letterbox)。
   root: {

package/src/camera/CaptureFlash.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react-native';
+import { CaptureFlash } from './CaptureFlash';
+
+it('renders overlay', () => {
+  const { getByTestId } = render(<CaptureFlash trigger={1} />);
+  expect(getByTestId('capture-flash')).toBeTruthy();
+});
+
+it('does not crash when trigger is 0', () => {
+  expect(() => render(<CaptureFlash trigger={0} />)).not.toThrow();
+});

package/src/camera/CaptureFlash.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { DARK } from './colors/dark';
+
+type Props = { trigger: number };
+
+// 拍照闪光:全屏白 overlay。`trigger`(nonce)变化时闪一下 —— opacity 0→0.85(60ms 进)→0(180ms 出)。
+// trigger===0 视为初始态,不播(避免挂载即闪)。
+export function CaptureFlash({ trigger }: Props) {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (trigger === 0) {
+      return;
+    }
+    const anim = Animated.sequence([
+      Animated.timing(opacity, {
+        toValue: 0.85,
+        duration: 60,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 180,
+        useNativeDriver: true,
+      }),
+    ]);
+    anim.start();
+    return () => anim.stop();
+  }, [trigger, opacity]);
+
+  return (
+    <Animated.View
+      testID="capture-flash"
+      pointerEvents="none"
+      style={[
+        StyleSheet.absoluteFill,
+        { backgroundColor: DARK.white, opacity },
+      ]}
+    />
+  );
+}