@unif/react-native-camera 1.2.6 → 2.0.0

package/src/camera/watermark/Render.tsx

@@ -1,128 +0,0 @@
-import { Dimensions, Image, StyleSheet, View } from 'react-native';
-import React, { useState } from 'react';
-import {
-  getContentMeasure,
-  getMeasure,
-  lastPx,
-  type WatermarkType,
-} from '../../utils';
-import Canvas, { Image as CanvasImage } from 'react-native-canvas';
-
-const Render: React.FC<{
-  data: WatermarkType;
-  zIndex?: number;
-}> = ({ data, zIndex }) => {
-  const [waterBase64, setWaterBase64] = useState<string>();
-
-  const getMarkSize = async (width: number, height: number) => {
-    let defaultWidth = lastPx(120);
-    let defaultHeight = lastPx(64);
-    if (!data?.image) {
-      defaultWidth = width;
-      defaultHeight = height;
-    }
-    return [data?.width ?? defaultWidth, data?.height ?? defaultHeight];
-  };
-
-  const handleImageRect = async (canvas: Canvas) => {
-    const ctx = canvas.getContext('2d');
-    const {
-      image,
-      content = [],
-      rotate = data.image ? 0 : -22,
-      gap = [100, 100],
-    } = data;
-
-    const measure = await getContentMeasure(ctx, content);
-
-    const [markWidth, markHeight] = await getMarkSize(
-      measure.width,
-      measure.height
-    );
-    const x = lastPx(gap[0] as number);
-    const y = lastPx(gap[1] as number);
-
-    const width = lastPx(markWidth as number);
-    const height = lastPx(markHeight as number);
-    canvas.width = width + x;
-    canvas.height = height + y;
-
-    const angle = (Math.PI * rotate) / 180;
-    ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
-    const setDataURL = async () => {
-      const imgBase64 = await canvas.toDataURL();
-      const base = imgBase64.replace(/^"|"$/g, '');
-      setWaterBase64(base.split(',')[1]);
-    };
-    if (image) {
-      const canvasImage = new CanvasImage(canvas);
-      canvasImage.crossOrigin = 'anonymous';
-      canvasImage.src = image;
-      canvasImage.width = width;
-      canvasImage.height = height;
-
-      ctx.rotate(angle);
-
-      canvasImage.addEventListener('load', async () => {
-        ctx.drawImage(
-          canvasImage,
-          -canvas.height / 2,
-          -canvas.width / 2,
-          width,
-          height
-        );
-        setDataURL();
-      });
-    } else {
-      if (content.length > 0) {
-        ctx.font = `${lastPx(22)}px Arial`;
-        ctx.textAlign = 'center';
-        ctx.rotate(angle);
-        for (let index = 0; index < content.length; index++) {
-          const element = content[index];
-          const metrics = await getMeasure(ctx, element as string);
-          ctx.fillText(element as string, 0, metrics.height * (index + 1));
-        }
-        setDataURL();
-      }
-    }
-  };
-  return (
-    <View style={[styles.container, { zIndex }]}>
-      <View style={styles.watermark}>
-        {waterBase64 ? (
-          <Image
-            resizeMode="repeat"
-            source={{ uri: `data:image/png;base64,${waterBase64}` }}
-            style={{
-              width: Dimensions.get('window').width,
-              height: Dimensions.get('window').height,
-            }}
-          />
-        ) : (
-          <Canvas
-            ref={(canvas: Canvas) => canvas && handleImageRect(canvas)}
-            style={styles.canvas}
-          />
-        )}
-      </View>
-    </View>
-  );
-};
-
-export default Render;
-
-export const styles = StyleSheet.create({
-  container: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  watermark: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    flex: 1,
-    flexDirection: 'row',
-  },
-  canvas: {
-    display: 'none',
-  },
-});

package/src/camera/watermark/ViewShotWatermark.tsx

@@ -1,134 +0,0 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-25 16:56:42
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-30 13:07:33
- * @Description:
- * @PageName:
- */
-import {
-  Image,
-  StyleSheet,
-  Text,
-  Dimensions,
-  View,
-  type ImageResizeMode,
-} from 'react-native';
-import React, { useRef, useState } from 'react';
-import ViewShot from 'react-native-view-shot';
-import WaterMarkRender from './Render';
-import {
-  formatUri,
-  MAX_ZINDEX,
-  pxToDpWidth,
-  type WatermarkType,
-  type CustomPhotoFile,
-} from '../../utils';
-const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
-
-const ViewShotWatermark: React.FC<{
-  data?: CustomPhotoFile;
-  resizeMode?: ImageResizeMode;
-  watermark?: WatermarkType;
-  onChange: (photo: CustomPhotoFile) => void;
-}> = ({ data, resizeMode, watermark, onChange }) => {
-  const viewShotRef = useRef<ViewShot>(null);
-  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
-
-  if (!data || !watermark) {
-    return null;
-  }
-
-  const autoSaveWatermark = async () => {
-    const img = await viewShotRef.current?.capture?.();
-    onChange({ ...data, path: img || data.path });
-  };
-
-  const handleImageLoad = (event: {
-    nativeEvent: { source: { width: any; height: any } };
-  }) => {
-    if (resizeMode === 'cover') {
-      return;
-    }
-    const { width, height } = event.nativeEvent.source;
-    const aspectRatio = width / height;
-    const containerWidth = screenWidth;
-    const containerHeight = screenHeight;
-    let displayWidth = containerWidth;
-    let displayHeight = containerWidth / aspectRatio;
-
-    if (displayHeight > containerHeight) {
-      displayHeight = containerHeight;
-      displayWidth = containerHeight * aspectRatio;
-    }
-    setImageSize({ width: displayWidth, height: displayHeight });
-  };
-  const getWidth = () => {
-    if (resizeMode === 'contain') {
-      return imageSize.width || screenWidth;
-    }
-    return '100%';
-  };
-  const getHeight = () => {
-    if (resizeMode === 'contain') {
-      return imageSize.height || screenHeight;
-    }
-    return '100%';
-  };
-  return (
-    <View style={styles.container}>
-      <ViewShot
-        ref={viewShotRef}
-        style={{ width: getWidth(), height: getHeight() }}
-      >
-        <Image
-          source={{ uri: formatUri(data.path) }}
-          style={styles.image}
-          onLoad={handleImageLoad}
-          onLoadEnd={() => {
-            setTimeout(() => {
-              autoSaveWatermark();
-            }, 800);
-          }}
-        />
-        <WaterMarkRender data={watermark} zIndex={MAX_ZINDEX + 1} />
-      </ViewShot>
-      <View style={styles.footer}>
-        <Text style={styles.text}>生成中...</Text>
-      </View>
-    </View>
-  );
-};
-
-export default ViewShotWatermark;
-
-export const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    backgroundColor: '#000',
-    zIndex: MAX_ZINDEX,
-    alignContent: 'center',
-    justifyContent: 'center',
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-  },
-  footer: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 24,
-    zIndex: MAX_ZINDEX + 2,
-  },
-  text: {
-    color: '#fff',
-    textAlign: 'center',
-    fontSize: pxToDpWidth(32),
-  },
-});

package/src/camera/watermark/index.tsx

@@ -1,12 +0,0 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-25 11:01:20
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-30 13:08:49
- * @Description:
- * @PageName:
- */
-
-import WaterMarkRender from './Render';
-import ViewShotWatermark from './ViewShotWatermark';
-export { WaterMarkRender, ViewShotWatermark };

package/src/components/Back.tsx

@@ -1,37 +0,0 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-16 17:50:24
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-16 10:21:17
- * @Description:
- * @PageName:
- */
-import { Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
-import React from 'react';
-
-import { type RotateProps } from './Rotate';
-const Back: React.FC<RotateProps & { text?: string }> = ({
-  onPress,
-  style,
-  text,
-}) => {
-  return (
-    <TouchableOpacity style={styles.container} onPress={onPress}>
-      <Image
-        source={require('../assets/preview/back.png')}
-        style={[styles.image, style]}
-      />
-      {text && <Text style={styles.text}>{text}</Text>}
-    </TouchableOpacity>
-  );
-};
-
-export default Back;
-
-export const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-  },
-  image: { width: 34, height: 34, marginBottom: 4 },
-  text: { color: '#fff' },
-});

package/src/components/Delete.tsx

@@ -1,30 +0,0 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-16 17:50:24
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-16 10:21:11
- * @Description:
- * @PageName:
- */
-import { Image, Text, TouchableOpacity } from 'react-native';
-import React from 'react';
-
-import { type RotateProps } from './Rotate';
-import { styles } from './Back';
-const Delete: React.FC<RotateProps & { text?: string }> = ({
-  onPress,
-  style,
-  text,
-}) => {
-  return (
-    <TouchableOpacity style={styles.container} onPress={onPress}>
-      <Image
-        source={require('../assets/preview/del.png')}
-        style={[styles.image, style]}
-      />
-      {text && <Text style={styles.text}>{text}</Text>}
-    </TouchableOpacity>
-  );
-};
-
-export default Delete;

package/src/components/Modal/Confirm.tsx

@@ -1,116 +0,0 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-12-18 13:55:41
- * @LastEditors: 刘利军
- * @LastEditTime: 2025-01-16 16:42:44
- * @Description:
- * @PageName:
- */
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import React, { useState } from 'react';
-import { pxToDpWidth } from '../../utils';
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
-import LoadingDots from '../Loading';
-
-const Confirm: React.FC<{
-  onCancel: () => Promise<void> | void;
-  onConfirm: () => Promise<void> | void;
-  text?: string;
-  title?: string;
-}> = ({ onCancel, onConfirm, text, title }) => {
-  const [loading, setLoading] = useState(false);
-  const click = async (reset = false) => {
-    if (loading) {
-      return;
-    }
-    setLoading(true);
-    if (reset) {
-      await onConfirm();
-    } else {
-      await onCancel();
-    }
-    setLoading(false);
-  };
-  return (
-    <Animated.View style={styles.modal} entering={FadeIn} exiting={FadeOut}>
-      <View style={styles.container}>
-        <Text style={[styles.text, styles.title]}>{title || '确认提醒'}</Text>
-        <Text style={[styles.text, styles.des]}>{text}</Text>
-        <View style={styles.footer}>
-          {loading ? (
-            <LoadingDots />
-          ) : (
-            <>
-              <TouchableOpacity
-                style={styles.btn}
-                onPress={async () => await click(false)}
-              >
-                <Text style={styles.btnText}>取消</Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={styles.btn}
-                onPress={async () => await click(true)}
-              >
-                <Text style={[styles.btnText, styles.btnTextConfirm]}>
-                  确定
-                </Text>
-              </TouchableOpacity>
-            </>
-          )}
-        </View>
-      </View>
-    </Animated.View>
-  );
-};
-
-export default Confirm;
-
-const styles = StyleSheet.create({
-  modal: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    bottom: 0,
-    backgroundColor: 'rgba(0,0,0,0.3)',
-    zIndex: 99999,
-  },
-  container: {
-    backgroundColor: '#fff',
-    width: '80%',
-    borderRadius: 10,
-    paddingVertical: 12,
-  },
-  text: {
-    textAlign: 'center',
-    paddingHorizontal: pxToDpWidth(12),
-    color: '#010101',
-  },
-  title: {
-    fontSize: pxToDpWidth(30),
-    fontWeight: '500',
-  },
-  des: {
-    fontWeight: '400',
-    fontSize: pxToDpWidth(26),
-    marginTop: pxToDpWidth(24),
-    marginBottom: pxToDpWidth(36),
-  },
-  footer: {
-    paddingTop: pxToDpWidth(24),
-    borderTopWidth: 0.5,
-    borderTopColor: '#D4D4D4',
-    flexDirection: 'row',
-  },
-  btn: { flex: 1, justifyContent: 'center', alignItems: 'center' },
-  btnText: {
-    fontSize: pxToDpWidth(30),
-    fontWeight: '400',
-    color: '#666',
-  },
-  btnTextConfirm: {
-    color: '#FF7600',
-  },
-});

package/src/components/Modal/index.tsx

@@ -1,3 +0,0 @@
-import Confirm from './Confirm';
-
-export { Confirm };

package/src/components/Rotate.tsx

@@ -1,32 +0,0 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-16 17:51:36
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-16 09:45:43
- * @Description:
- * @PageName:
- */
-import {
-  Image,
-  TouchableOpacity,
-  type ImageStyle,
-  type GestureResponderEvent,
-} from 'react-native';
-import React from 'react';
-import { styles } from './Back';
-export type RotateProps = {
-  onPress?: (event: GestureResponderEvent) => void;
-  style?: ImageStyle;
-};
-const Rotate: React.FC<RotateProps> = ({ onPress, style }) => {
-  return (
-    <TouchableOpacity onPress={onPress}>
-      <Image
-        source={require('../assets/preview/rotate.png')}
-        style={[styles.image, style]}
-      />
-    </TouchableOpacity>
-  );
-};
-
-export default Rotate;

package/src/components/Save.tsx

@@ -1,37 +0,0 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-16 17:50:24
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-16 10:24:18
- * @Description:
- * @PageName:
- */
-import { Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
-import React from 'react';
-
-import { type RotateProps } from './Rotate';
-const Save: React.FC<RotateProps & { text?: string }> = ({
-  onPress,
-  style,
-  text,
-}) => {
-  return (
-    <TouchableOpacity style={styles.container} onPress={onPress}>
-      <Image
-        source={require('../assets/preview/save.png')}
-        style={[styles.image, style]}
-      />
-      {text && <Text style={styles.text}>{text}</Text>}
-    </TouchableOpacity>
-  );
-};
-
-export default Save;
-
-export const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-  },
-  image: { width: 34, height: 34, marginBottom: 4 },
-  text: { color: '#fff' },
-});

package/src/hooks/useCamera.tsx/index.tsx

@@ -1,95 +0,0 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-17 16:31:19
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-12-20 14:58:46
- * @Description:
- * @PageName:
- */
-
-import React, { useRef, useState } from 'react';
-import { Camera, NoPermission, NoCamera, ModalView } from '../../camera';
-import type { CameraBack, CameraProps, CameraRef } from '../../utils';
-import {
-  useCameraDevice,
-  useCameraPermission,
-  useMicrophonePermission,
-} from 'react-native-vision-camera';
-import { DefaultData } from '../../utils';
-import Container from '../../camera/Container';
-
-const useCamera = (): [CameraRef, React.ReactElement] => {
-  const [cameraConfig, setCameraConfig] = useState<CameraProps>(DefaultData);
-  const [visible, setVisible] = useState(false);
-
-  const close = (
-    data: CameraBack = { code: 200, data: [], message: '返回' }
-  ) => {
-    setVisible(false);
-    ref.current.resolvePromise(data);
-  };
-  const ref = useRef<{
-    resolvePromise: (data: CameraBack) => void;
-  }>({
-    resolvePromise: () => {},
-  });
-  const api = React.useMemo<CameraRef>(() => {
-    return {
-      open: async (config) => {
-        setVisible(true);
-        setCameraConfig((val) => ({
-          ...val,
-          ...config,
-        }));
-        return new Promise<CameraBack>((resolve) => {
-          ref.current.resolvePromise = resolve;
-        });
-      },
-      close: () => close(),
-    };
-  }, []);
-
-  const isVideo = (cameraConfig?.cameraMode || []).some(
-    (item) => item.mode === 'video'
-  );
-
-  const device = useCameraDevice('front');
-  // 相机权限请求
-  const { hasPermission, requestPermission } = useCameraPermission();
-  // 麦克风权限
-  const {
-    hasPermission: hasMicroPermission,
-    requestPermission: hasRequestMicroPermission,
-  } = useMicrophonePermission();
-
-  let Holder = (
-    <Camera
-      data={cameraConfig}
-      back={() => close()}
-      onChange={(val) => close(val)}
-    />
-  );
-  if (visible) {
-    if (!hasPermission) {
-      requestPermission();
-      Holder = (
-        <Container onCancel={() => close()}>
-          <NoPermission />
-        </Container>
-      );
-    } else if (isVideo && !hasMicroPermission) {
-      hasRequestMicroPermission();
-      Holder = (
-        <Container onCancel={() => close()}>
-          <NoPermission />
-        </Container>
-      );
-    } else if (device == null) {
-      Holder = <NoCamera />;
-    }
-  }
-
-  return [api, <ModalView visible={visible}>{Holder}</ModalView>];
-};
-
-export default useCamera;

package/src/hooks/useCreation/index.ts

@@ -1,25 +0,0 @@
-/*
- * @Author: 刘利军
- * @Date: 2024-01-17 16:28:56
- * @LastEditors: 刘利军
- * @LastEditTime: 2024-01-17 16:29:26
- * @Description:
- * @PageName:
- */
-import type { DependencyList } from 'react';
-import { useRef } from 'react';
-import depsAreSame from '../../utils/depsAreSame';
-
-export default function useCreation<T>(factory: () => T, deps: DependencyList) {
-  const { current } = useRef({
-    deps,
-    obj: undefined as undefined | T,
-    initialized: false,
-  });
-  if (current.initialized === false || !depsAreSame(current.deps, deps)) {
-    current.deps = deps;
-    current.obj = factory();
-    current.initialized = true;
-  }
-  return current.obj as T;
-}