@unif/react-native-camera 2.6.1 → 2.7.0

package/src/camera/Container.tsx

@@ -5,16 +5,21 @@ import {
   useCameraPermission,
 } from 'react-native-vision-camera';
 import { useSharedValue } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { r } from '@unif/react-native-design';
 import type { CameraResult, CustomPhotoFile, OpenConfig } from '../utils';
 import { NoCamera } from './NoCamera';
 import { NoPermission } from './NoPermission';
 import { Loading } from '../components/Loading';
 import { Camera, type CameraHandle } from './Camera';
-import { PreViewContainer } from './preview';
-import { Footer } from './footer';
-import { SetUp, type AspectRatio, type FlashMode } from './setup';
-
-const NEUTRAL_ZOOM = 1;
+import { PreviewOverlay } from './preview';
+import { CaptureFlash } from './CaptureFlash';
+import { SideRail, type AspectRatio, type FlashMode } from './setup';
+import { ZoomChips } from './footer/ZoomChips';
+import { ModeSwitcherPill, type ModeItem } from './footer/ModeSwitcherPill';
+import { ActionRow } from './footer/ActionRow';
+import { RecordingTimer } from './footer/RecordingTimer';
+import { DARK } from './colors/dark';
 
 type Props = {
   config: OpenConfig;
@@ -27,10 +32,10 @@ export function Container({ config, onSettle }: Props) {
   const settledRef = useRef(false);
 
   const settle = useCallback(
-    (r: CameraResult) => {
+    (result: CameraResult) => {
       if (settledRef.current) return;
       settledRef.current = true;
-      onSettle(r);
+      onSettle(result);
     },
     [onSettle]
   );
@@ -72,25 +77,47 @@ export function Container({ config, onSettle }: Props) {
     };
   }, [hasPermission, requestPermission]);
 
+  const insets = useSafeAreaInsets();
   // 初始前/后摄由 config 首个 mode 的 type 决定(H5 传入),缺省 back。
-  // 运行时前后摄翻转是独立功能,不在本次范围。
-  // 5.x：physicalDevices 字符串不带 -camera；单 'wide-angle' 规避 iOS #3773
+  // 运行时翻转(S7):position state + flipNonce 触发 rotateY 动画。
+  // 5.x：physicalDevices 字符串不带 -camera;单 'wide-angle' 规避 iOS #3773
   const initialPosition = config.cameraMode[0]?.type ?? 'back';
-  const device = useCameraDevice(initialPosition, {
+  const [position, setPosition] = useState<'back' | 'front'>(initialPosition);
+  const [flipNonce, setFlipNonce] = useState(0);
+  const device = useCameraDevice(position, {
     physicalDevices: ['wide-angle'],
   });
 
   const cameraRef = useRef<CameraHandle>(null);
   const [photos, setPhotos] = useState<CustomPhotoFile[]>([]);
   const [previewing, setPreviewing] = useState(false);
+  const [previewVariant, setPreviewVariant] = useState<'confirm' | 'gallery'>(
+    'gallery'
+  );
   const [recording, setRecording] = useState(false);
   const [modeIndex, setModeIndex] = useState(0);
   const currentMode = config.cameraMode[modeIndex];
 
-  const [flash, setFlash] = useState<FlashMode>('off');
+  // 初始闪光从 config 首个 mode 接线(API 兼容),缺省 off。
+  const [flash, setFlash] = useState<FlashMode>(
+    config.cameraMode[0]?.flashMode ?? 'off'
+  );
+  const [sound, setSound] = useState(true);
+  const [grid, setGrid] = useState(false);
   const [aspectRatio, setAspectRatio] = useState<AspectRatio>('4:3');
-  const zoomShared = useSharedValue(NEUTRAL_ZOOM);
-  const [lensLabel, setLensLabel] = useState(`${NEUTRAL_ZOOM.toFixed(1)}x`);
+  const [flashNonce, setFlashNonce] = useState(0);
+  const [recSeconds, setRecSeconds] = useState(0);
+  const [zoom, setZoom] = useState(1);
+  const zoomShared = useSharedValue(1);
+
+  useEffect(() => {
+    if (!recording) {
+      setRecSeconds(0);
+      return;
+    }
+    const id = setInterval(() => setRecSeconds((s) => s + 1), 1000);
+    return () => clearInterval(id);
+  }, [recording]);
 
   const onShutter = async () => {
     if (currentMode?.mode === 'video') {
@@ -100,12 +127,8 @@ export function Container({ config, onSettle }: Props) {
       } else {
         const f = await cameraRef.current?.stopVideo();
         setRecording(false);
-        if (f) {
-          setPhotos([f]);
-          setPreviewing(true);
-        } else {
-          settle({ code: 503, data: [], message: 'video_failed' });
-        }
+        if (f) setPhotos((prev) => [...prev, f]);
+        else settle({ code: 503, data: [], message: 'video_failed' });
       }
       return;
     }
@@ -114,12 +137,25 @@ export function Container({ config, onSettle }: Props) {
       settle({ code: 500, data: photos, message: 'capture_failed' });
       return;
     }
+    setFlashNonce((n) => n + 1);
     setPhotos((prev) => [...prev, f]);
-    if (currentMode?.mode !== 'continuous') {
+    // 自动预览规则:仅「非保留(clear) + 单拍」拍完进预览;其余累积
+    if (currentMode?.mode === 'single' && config.dataRetainedMode === 'clear') {
+      setPreviewVariant('confirm');
       setPreviewing(true);
     }
   };
 
+  const onFlip = () => {
+    setPosition((p) => (p === 'back' ? 'front' : 'back'));
+    setFlipNonce((n) => n + 1);
+  };
+
+  const onSelectMode = (i: number) => {
+    if (config.dataRetainedMode === 'clear' && i !== modeIndex) setPhotos([]);
+    setModeIndex(i);
+  };
+
   if (state === 'denied') {
     return (
       <NoPermission
@@ -141,13 +177,20 @@ export function Container({ config, onSettle }: Props) {
 
   if (previewing) {
     return (
-      <PreViewContainer
+      <PreviewOverlay
         files={photos}
+        variant={previewVariant}
         onRetake={() => {
           setPhotos([]);
           setPreviewing(false);
         }}
-        onConfirm={() => settle({ code: 200, data: photos, message: 'ok' })}
+        onSave={() => settle({ code: 200, data: photos, message: 'ok' })}
+        onBack={() => setPreviewing(false)}
+        onDelete={(f) => {
+          const next = photos.filter((x) => x !== f);
+          setPhotos(next);
+          if (next.length === 0) setPreviewing(false);
+        }}
       />
     );
   }
@@ -170,15 +213,11 @@ export function Container({ config, onSettle }: Props) {
     );
   }
 
-  const onToggleLens = () => {
-    if (lensLabel.startsWith(device.minZoom.toFixed(1))) {
-      zoomShared.value = NEUTRAL_ZOOM;
-      setLensLabel(`${NEUTRAL_ZOOM.toFixed(1)}x`);
-    } else {
-      zoomShared.value = device.minZoom;
-      setLensLabel(`${device.minZoom.toFixed(1)}x`);
-    }
-  };
+  const modeItems: ModeItem[] = config.cameraMode.map((m, i) => ({
+    key: `${m.mode}-${i}`,
+    label:
+      m.mode === 'single' ? '单拍' : m.mode === 'continuous' ? '连拍' : '视频',
+  }));
 
   return (
     <View style={styles.root} testID="device-ready">
@@ -189,49 +228,104 @@ export function Container({ config, onSettle }: Props) {
         flash={flash}
         aspectRatio={aspectRatio}
         zoomShared={zoomShared}
+        sound={sound}
+        grid={grid}
+        flipNonce={flipNonce}
       />
-      {!previewing && (
-        <SetUp
-          flash={flash}
-          aspectRatio={aspectRatio}
-          onChangeFlash={setFlash}
-          onChangeAspectRatio={setAspectRatio}
-          onToggleLens={onToggleLens}
-          lensLabel={lensLabel}
-        />
+
+      {!recording && (
+        <View style={[styles.sideRail, { bottom: insets.bottom + r(172) }]}>
+          <SideRail
+            flash={flash}
+            aspectRatio={aspectRatio}
+            sound={sound}
+            grid={grid}
+            onChangeFlash={setFlash}
+            onChangeAspectRatio={setAspectRatio}
+            onToggleSound={() => setSound((v) => !v)}
+            onToggleGrid={() => setGrid((v) => !v)}
+          />
+        </View>
       )}
-      <Footer
-        modes={config.cameraMode}
-        currentIndex={modeIndex}
-        recording={recording}
-        onShutter={onShutter}
-        onSelectMode={(i) => {
-          if (config.dataRetainedMode === 'clear' && i !== modeIndex) {
-            setPhotos([]);
-          }
-          setModeIndex(i);
-        }}
-        onCancel={() => settle({ code: 0, data: [], message: 'cancelled' })}
-        onFinishBurst={
-          currentMode?.mode === 'continuous'
-            ? () => setPreviewing(true)
-            : undefined
-        }
-        burstCount={
-          currentMode?.mode === 'continuous' ? photos.length : undefined
-        }
-      />
+      {!recording && (
+        <View style={[styles.zoomChips, { bottom: insets.bottom + r(184) }]}>
+          <ZoomChips
+            zoom={zoom}
+            onSelect={(z) => {
+              // clamp 到设备变焦范围:无超广角设备 minZoom===1,点 0.5x 不应越界
+              const clamped = Math.min(
+                Math.max(z, device.minZoom),
+                device.maxZoom
+              );
+              setZoom(clamped);
+              zoomShared.value = clamped;
+            }}
+          />
+        </View>
+      )}
+
+      <View style={[styles.bottom, { paddingBottom: insets.bottom + r(20) }]}>
+        {recording ? (
+          <View style={styles.center}>
+            <RecordingTimer seconds={recSeconds} />
+          </View>
+        ) : (
+          <View style={styles.center}>
+            <ModeSwitcherPill
+              items={modeItems}
+              currentIndex={modeIndex}
+              onSelect={onSelectMode}
+            />
+          </View>
+        )}
+        <ActionRow
+          mode={currentMode.mode}
+          recording={recording}
+          latestUri={photos.at(-1)?.uri}
+          count={photos.length}
+          onShutter={onShutter}
+          onBack={() => settle({ code: 0, data: [], message: 'cancelled' })}
+          onSave={() => settle({ code: 200, data: photos, message: 'ok' })}
+          onFlip={onFlip}
+          onOpenPreview={() => {
+            if (photos.length > 0) {
+              setPreviewVariant('gallery');
+              setPreviewing(true);
+            }
+          }}
+        />
+      </View>
+
+      <CaptureFlash trigger={flashNonce} />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  // 相机主容器固定黑底:相机 UX 惯例(预览 / 拍照取景需要黑底凸显),
+  // 不走 c.background token。
   root: {
     flex: 1,
-    // 相机主容器固定黑底:相机 UX 惯例(预览 / 拍照取景需要黑底凸显),
-    // 不走 c.background token.
-    backgroundColor: '#000',
+    backgroundColor: DARK.black,
     justifyContent: 'center',
     alignItems: 'center',
   },
+  sideRail: { position: 'absolute', left: r(12), zIndex: 9 },
+  zoomChips: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: 7,
+  },
+  bottom: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    paddingTop: r(14),
+    zIndex: 8,
+    gap: r(16),
+  },
+  center: { alignItems: 'center' },
 });

package/src/camera/FocusIndicator.test.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react-native';
+import { FocusIndicator } from './FocusIndicator';
+
+it('renders focus brackets without crashing', () => {
+  expect(() =>
+    render(
+      <FocusIndicator point={{ x: 100, y: 200 }} onAnimationEnd={() => {}} />
+    )
+  ).not.toThrow();
+});
+
+it('exposes the focus-indicator testID', () => {
+  const { getByTestId } = render(
+    <FocusIndicator point={{ x: 100, y: 200 }} onAnimationEnd={() => {}} />
+  );
+  expect(getByTestId('focus-indicator')).toBeTruthy();
+});

package/src/camera/FocusIndicator.tsx

@@ -1,60 +1,144 @@
 import { useEffect, useRef } from 'react';
 import { Animated, StyleSheet } from 'react-native';
+import Svg, { Circle, Line, Path } from 'react-native-svg';
 import { r } from '@unif/react-native-design';
+import { DARK } from './colors/dark';
 import type { Point } from '../utils';
 
 type Props = { point: Point; onAnimationEnd: () => void };
 
-const SIZE = r(80);
+// 聚焦指示器(取景态固定深色,品牌橙):四角括号 + 中心点 + 右侧曝光小太阳。
+// 设计稿 viewBox 390×844 视口下盒子 110×88,transformOrigin 居中(44,44)。
+// 多段动画:淡入放大 1.35 → 回弹 0.94 → 1 → 定格(opacity 0.72),约 1.3s 后 onAnimationEnd()。
+const VB_W = 110;
+const VB_H = 88;
+const W = r(VB_W);
+const H = r(VB_H);
+
+// 曝光小太阳中心(右侧)与半径,8 道短射线绕一圈。
+const SUN_CX = 97;
+const SUN_CY = 44;
+const SUN_R = 4.5;
+const RAY_INNER = SUN_R + 2.5;
+const RAY_OUTER = SUN_R + 6;
+const RAY_ANGLES = [0, 45, 90, 135, 180, 225, 270, 315];
+
+const AnimatedSvg = Animated.createAnimatedComponent(Svg);
 
 export function FocusIndicator({ point, onAnimationEnd }: Props) {
-  const scale = useRef(new Animated.Value(1.6)).current;
-  const opacity = useRef(new Animated.Value(1)).current;
+  const scale = useRef(new Animated.Value(1.35)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
-    Animated.parallel([
-      Animated.timing(scale, {
-        toValue: 1,
-        duration: 200,
-        useNativeDriver: true,
-      }),
-      Animated.sequence([
-        Animated.delay(600),
+    const anim = Animated.sequence([
+      Animated.parallel([
         Animated.timing(opacity, {
-          toValue: 0,
-          duration: 200,
+          toValue: 1,
+          duration: 120,
+          useNativeDriver: true,
+        }),
+        Animated.spring(scale, {
+          toValue: 0.94,
           useNativeDriver: true,
         }),
       ]),
-    ]).start(() => onAnimationEnd());
+      Animated.spring(scale, {
+        toValue: 1,
+        useNativeDriver: true,
+      }),
+      Animated.delay(800),
+      Animated.timing(opacity, {
+        toValue: 0.72,
+        duration: 180,
+        useNativeDriver: true,
+      }),
+    ]);
+    anim.start(() => onAnimationEnd());
+    return () => anim.stop();
   }, [scale, opacity, onAnimationEnd]);
 
   return (
     <Animated.View
+      pointerEvents="none"
+      testID="focus-indicator"
       style={[
         styles.box,
         {
-          left: point.x - SIZE / 2,
-          top: point.y - SIZE / 2,
-          transform: [{ scale }],
+          left: point.x - W / 2,
+          top: point.y - H / 2,
           opacity,
+          transform: [{ scale }],
         },
       ]}
-      pointerEvents="none"
-      testID="focus-indicator"
-    />
+    >
+      <AnimatedSvg width={W} height={H} viewBox={`0 0 ${VB_W} ${VB_H}`}>
+        {/* 四角括号(约 64×64 居中,中心 55,44) */}
+        <Path
+          d="M23 31v-8h8 M79 23h8v8 M87 57v8h-8 M31 65h-8v-8"
+          stroke={DARK.orange}
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        />
+        {/* 中心点 */}
+        <Circle cx={55} cy={44} r={2.4} fill={DARK.orange} />
+        {/* 曝光小太阳:圆 + 8 道短射线 + 上下引导线 */}
+        <Circle
+          cx={SUN_CX}
+          cy={SUN_CY}
+          r={SUN_R}
+          stroke={DARK.orange}
+          strokeWidth={1.6}
+          fill="rgba(235,110,0,0.2)"
+        />
+        {RAY_ANGLES.map((deg) => {
+          const rad = (deg * Math.PI) / 180;
+          const cos = Math.cos(rad);
+          const sin = Math.sin(rad);
+          return (
+            <Line
+              key={deg}
+              x1={SUN_CX + cos * RAY_INNER}
+              y1={SUN_CY + sin * RAY_INNER}
+              x2={SUN_CX + cos * RAY_OUTER}
+              y2={SUN_CY + sin * RAY_OUTER}
+              stroke={DARK.orange}
+              strokeWidth={1.4}
+              strokeLinecap="round"
+            />
+          );
+        })}
+        {/* 拖动调曝光的引导线(上下各一条,半透明) */}
+        <Line
+          x1={SUN_CX}
+          y1={20}
+          x2={SUN_CX}
+          y2={34}
+          stroke={DARK.orange}
+          strokeWidth={1.6}
+          opacity={0.45}
+          strokeLinecap="round"
+        />
+        <Line
+          x1={SUN_CX}
+          y1={54}
+          x2={SUN_CX}
+          y2={68}
+          stroke={DARK.orange}
+          strokeWidth={1.6}
+          opacity={0.45}
+          strokeLinecap="round"
+        />
+      </AnimatedSvg>
+    </Animated.View>
   );
 }
 
 const styles = StyleSheet.create({
   box: {
     position: 'absolute',
-    width: SIZE,
-    height: SIZE,
-    borderWidth: 1.5,
-    // 对焦黄框:相机 UX 惯例(iOS / Android 系统相机统一用饱和黄高对比度),
-    // 不走主题 token —— 任何主题下都需要在镜头预览(黑底为主)上一眼可见.
-    borderColor: 'yellow',
-    borderRadius: r(6),
+    width: W,
+    height: H,
   },
 });

package/src/camera/colors/dark.test.ts

@@ -0,0 +1,8 @@
+import { DARK } from './dark';
+
+it('exposes brand orange and core dark tokens', () => {
+  expect(DARK.orange).toBe('#EB6E00');
+  expect(DARK.white).toBe('#fff');
+  expect(DARK.recRed).toBe('#ff3b30');
+  expect(DARK.orange16).toBe('rgba(235,110,0,0.16)');
+});

package/src/camera/colors/dark.ts

@@ -0,0 +1,19 @@
+// 取景态固定深色常量。取景器是相机画面,永远深色,不跟随 light/dark 主题;
+// 只有预览/弹窗/Toast(2b)走 useColors()。品牌橙两主题都不变。
+export const DARK = {
+  white: '#fff',
+  white95: 'rgba(255,255,255,0.95)',
+  white65: 'rgba(255,255,255,0.65)',
+  white40: 'rgba(255,255,255,0.4)',
+  white25: 'rgba(255,255,255,0.25)',
+  white12: 'rgba(255,255,255,0.12)',
+  white08: 'rgba(255,255,255,0.08)',
+  black: '#000',
+  black42: 'rgba(0,0,0,0.42)',
+  black45: 'rgba(0,0,0,0.45)',
+  orange: '#EB6E00',
+  orange16: 'rgba(235,110,0,0.16)',
+  orange18: 'rgba(235,110,0,0.18)',
+  orange95: 'rgba(235,110,0,0.95)',
+  recRed: '#ff3b30',
+} as const;

package/src/camera/footer/ActionRow.test.tsx

@@ -0,0 +1,44 @@
+import { render, fireEvent } from '@testing-library/react-native';
+import { ActionRow } from './ActionRow';
+
+const base = {
+  mode: 'single' as const,
+  recording: false,
+  latestUri: undefined,
+  count: 0,
+  onShutter: jest.fn(),
+  onBack: jest.fn(),
+  onSave: jest.fn(),
+  onFlip: jest.fn(),
+  onOpenPreview: jest.fn(),
+};
+
+it('wires shutter/back/save/flip', () => {
+  const p = {
+    ...base,
+    onShutter: jest.fn(),
+    onBack: jest.fn(),
+    onSave: jest.fn(),
+    onFlip: jest.fn(),
+  };
+  const { getByTestId } = render(<ActionRow {...p} />);
+  fireEvent.press(getByTestId('shutter-btn'));
+  expect(p.onShutter).toHaveBeenCalled();
+  fireEvent.press(getByTestId('back-btn'));
+  expect(p.onBack).toHaveBeenCalled();
+  fireEvent.press(getByTestId('save-btn'));
+  expect(p.onSave).toHaveBeenCalled();
+  fireEvent.press(getByTestId('flip-btn'));
+  expect(p.onFlip).toHaveBeenCalled();
+});
+
+it('recording hides back/save/flip/thumb', () => {
+  const { queryByTestId, getByTestId } = render(
+    <ActionRow {...base} recording />
+  );
+  expect(getByTestId('shutter-btn')).toBeTruthy();
+  expect(queryByTestId('back-btn')).toBeNull();
+  expect(queryByTestId('save-btn')).toBeNull();
+  expect(queryByTestId('flip-btn')).toBeNull();
+  expect(queryByTestId('thumbnail-stack')).toBeNull();
+});

package/src/camera/footer/ActionRow.tsx

@@ -0,0 +1,80 @@
+import { StyleSheet, View } from 'react-native';
+import { Button, r } from '@unif/react-native-design';
+import { Shutter } from './Shutter';
+import { ThumbnailStack } from './ThumbnailStack';
+import { FlipButton } from './FlipButton';
+
+type Props = {
+  mode: 'single' | 'continuous' | 'video';
+  recording: boolean;
+  latestUri?: string;
+  count: number;
+  onShutter: () => void;
+  onBack: () => void;
+  onSave: () => void;
+  onFlip: () => void;
+  onOpenPreview: () => void;
+};
+
+export function ActionRow({
+  mode,
+  recording,
+  latestUri,
+  count,
+  onShutter,
+  onBack,
+  onSave,
+  onFlip,
+  onOpenPreview,
+}: Props) {
+  return (
+    <View style={styles.row}>
+      {!recording ? (
+        <ThumbnailStack
+          latestUri={latestUri}
+          count={count}
+          onPress={onOpenPreview}
+        />
+      ) : (
+        <View style={styles.slot} />
+      )}
+      {!recording ? (
+        <Button
+          variant="ghost"
+          label="返回"
+          onPress={onBack}
+          testID="back-btn"
+        />
+      ) : (
+        <View style={styles.slot} />
+      )}
+      <Shutter mode={mode} recording={recording} onPress={onShutter} />
+      {!recording ? (
+        <Button
+          variant="primary"
+          label="保存"
+          onPress={onSave}
+          testID="save-btn"
+        />
+      ) : (
+        <View style={styles.slot} />
+      )}
+      {!recording ? (
+        <FlipButton onFlip={onFlip} />
+      ) : (
+        <View style={styles.slot} />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    paddingHorizontal: r(20),
+  },
+  slot: { width: r(44) },
+});

package/src/camera/footer/FlipButton.test.tsx

@@ -0,0 +1,9 @@
+import { render, fireEvent } from '@testing-library/react-native';
+import { FlipButton } from './FlipButton';
+
+it('fires onFlip', () => {
+  const onFlip = jest.fn();
+  const { getByTestId } = render(<FlipButton onFlip={onFlip} />);
+  fireEvent.press(getByTestId('flip-btn'));
+  expect(onFlip).toHaveBeenCalled();
+});