ipanel-rnapp-ajb-base 1.0.0

package/app/components/common/CustomTabBar_bak/index.js

@@ -0,0 +1,832 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  TouchableHighlight,
+  KeyboardAvoidingView,
+  Platform,
+  Dimensions,
+  Modal,
+} from "react-native";
+import { Icon, Image } from "@rneui/themed";
+import { AudioRecorder, AudioUtils } from "react-native-audio";
+import RNFS from "react-native-fs";
+
+import TabBarInput from "./TabBarInput";
+import { launchImageLibrary, launchCamera } from "react-native-image-picker";
+
+import { baiduAsr } from "../../api";
+import { MSG_TYPES, genMsg } from "../../utils/common";
+
+const { eventBus, EVENTS, storage } = global.base;
+
+const INPUT_TYPE = {
+  TEXT: "text",
+  VOICE: "voice",
+};
+
+let isChatTabActivedBeforeTouchStart = false;
+
+let touchTimer;
+
+let speakingStartTime = 0;
+
+let isRecordTouching = false;
+let isRecording = false;
+
+// let isTouchingBottomArc = false;
+
+let audioPath = AudioUtils.DocumentDirectoryPath + "/test.aac";
+
+function CustomTabBar({
+  state,
+  descriptors,
+  navigation,
+  onInputSubmit,
+  onMediaSelect,
+}) {
+  const inputRef = useRef();
+  const [showMoreArea, setShowMoreArea] = useState(false);
+  const [inputType, setInputType] = useState(INPUT_TYPE.VOICE);
+
+  const [speakingMaskVisible, setSpeakingMaskVisible] = useState(false);
+  const [touchPosition, setTouchPosition] = useState({});
+  const [speakingText, setSpeakingText] = useState("");
+  // 底部圆弧圆心距离屏幕左边的距离
+  const [arcCenterX, setArcCenterX] = useState(0);
+  // 底部圆弧圆心距离屏幕顶边的距离
+  const [arcCenterY, setArcCenterY] = useState(0);
+
+  const [isTouchingBottomArc, setIsTouchingBottomArc] = useState(true);
+
+  const getDistanceToArcCenter = useCallback(
+    (x, y) => {
+      return Math.sqrt(
+        Math.pow(Math.abs(arcCenterX - x), 2) +
+          Math.pow(Math.abs(arcCenterY - y), 2)
+      );
+    },
+    [arcCenterX, arcCenterY]
+  );
+
+  useEffect(() => {
+    setIsTouchingBottomArc(
+      typeof touchPosition.pageX !== "undefined"
+        ? getDistanceToArcCenter(touchPosition.pageX, touchPosition.pageY) <
+            bottomArvRadius
+        : true
+    );
+  }, [touchPosition]);
+
+  const handleBottomArcCenterCalc = useCallback(({ centerX, centerY }) => {
+    setArcCenterX(centerX);
+    setArcCenterY(centerY);
+  }, []);
+
+  const requestAudioPermission = useCallback(() => {
+    AudioRecorder.requestAuthorization().then((isAuthor) => {
+      // console.log('是否授权: ' + isAuthor);
+      if (!isAuthor) {
+        return global.toast.showToast(
+          "APP需要使用录音，请打开录音权限允许APP使用"
+        );
+      }
+      prepareRecordingPath(audioPath);
+      // 录音进展
+      AudioRecorder.onProgress = async (data) => {
+        // console.log('onProgress', data);
+      };
+      // 完成录音
+      // AudioRecorder.onFinished = async data => {
+      //   // data 录音数据，可以在此存储需要传给接口的路径数据
+      //   // console.log('onFinished', data);
+      // };
+    });
+  }, []);
+
+  const handleTouchMove = useCallback((touchPositon) => {
+    setTouchPosition(touchPositon);
+  }, []);
+
+  const onTouchChange = async (touchStatus) => {
+    isRecordTouching = touchStatus === true;
+
+    if (touchStatus) {
+      touchTimer = setTimeout(async () => {
+        setIsTouchingBottomArc(true);
+        setSpeakingText("");
+        isRecording = true;
+        // console.log("录音开始todo");
+
+        // 开始录音
+        prepareRecordingPath(audioPath);
+        try {
+          await AudioRecorder.startRecording();
+        } catch (err) {
+          console.log("start err", err);
+        }
+        setSpeakingMaskVisible(touchStatus);
+
+        console.log("开始录音", new Date().getTime());
+        speakingStartTime = new Date().getTime();
+
+        console.log("isRecordTouching", isRecordTouching);
+
+        if (!isRecordTouching) {
+          // 注意! startRecording是异步的，有可能在touchend后才触发！！会导致之后一直录音！！这种情况需要取消录音！
+          // 通过判断isRecordTouching的状态来判断当前是否正在录音触摸状态，如果没有在触摸，则即使录音onStart触发也需要立即停止
+          setSpeakingMaskVisible(false);
+          speakingStartTime = 0;
+          if (isChatTabActivedBeforeTouchStart) {
+            inputRef.current?.toggleInputType();
+          }
+          try {
+            AudioRecorder.stopRecording();
+          } catch (error) {
+            console.log("stop err", error);
+          }
+        }
+      }, 100);
+    } else {
+      clearTimeout(touchTimer);
+      if (isRecording) {
+        isRecording = false;
+        console.log("结束录音", new Date().getTime());
+
+        AudioRecorder.onFinished = async (data) => {
+          // data 录音数据，可以在此存储需要传给接口的路径数据
+          // console.log('onFinished', data);
+          if (new Date() - speakingStartTime >= 300) {
+            // 重置
+            speakingStartTime = 0;
+            // 发送录音结果
+            console.log("录制结束", isTouchingBottomArc ? "发送" : "取消");
+            if (isTouchingBottomArc) {
+              // 已录到语音
+              setTimeout(async () => {
+                let text = await transAudioToText(audioPath);
+                if (text) {
+                  // 显示识别到的文本，用户确认后发送
+                  setSpeakingText(text);
+                } else {
+                  setSpeakingMaskVisible(false);
+                  global.toast.showToast("未识别到语音内容，请再说一次吧");
+                }
+              });
+            } else {
+              // 取消
+              setSpeakingMaskVisible(false);
+            }
+          } else {
+            // 说话太短了
+            // 重置
+            speakingStartTime = 0;
+            setSpeakingMaskVisible(false);
+          }
+        };
+
+        if (speakingStartTime !== 0) {
+          try {
+            await AudioRecorder.stopRecording();
+          } catch (error) {
+            console.log("stop err", error);
+          }
+        }
+      } else {
+        if (isChatTabActivedBeforeTouchStart) {
+          inputRef.current?.toggleInputType();
+        }
+      }
+    }
+  };
+
+  const handleHideMoreArea = () => {
+    setShowMoreArea(false);
+  };
+
+  useEffect(() => {
+    requestAudioPermission();
+
+    eventBus.on(EVENTS.CUSTOM_TAB_BAR.HIDE_MORE_AREA, handleHideMoreArea);
+    return () => {
+      eventBus.off(EVENTS.CUSTOM_TAB_BAR.HIDE_MORE_AREA, handleHideMoreArea);
+    };
+  }, []);
+
+  const handleOpenAlbum = async () => {
+    const result = await launchImageLibrary({
+      mediaType: "mixed",
+    });
+    if (result.didCancel) {
+      console.log("cancel");
+    } else if (result.errorCode) {
+      console.log("error", result);
+    } else {
+      onMediaSelect && onMediaSelect(result.assets[0]);
+    }
+    setShowMoreArea(false);
+  };
+  const handleOpenCamara = async (mediaType) => {
+    const result = await launchCamera({
+      mediaType: mediaType,
+    });
+    if (result.didCancel) {
+      console.log("cancel");
+    } else if (result.errorCode) {
+      console.log("error", result);
+    } else {
+      console.log(result);
+      onMediaSelect && onMediaSelect(result.assets[0]);
+    }
+    setShowMoreArea(false);
+  };
+
+  const render = () => {
+    return (
+      <View style={styles.container}>
+        <View style={styles.innerContainer}>
+          {state.routes.map((route, index) => {
+            const { options } = descriptors[route.key];
+            const label =
+              options.tabBarLabel !== undefined
+                ? options.tabBarLabel
+                : options.title !== undefined
+                  ? options.title
+                  : route.name;
+
+            const isFocused = state.index === index;
+
+            const emitTabNavigate = () => {
+              const event = navigation.emit({
+                type: "tabPress",
+                target: route.key,
+                canPreventDefault: true,
+              });
+
+              if (route.name === "MainScreen") {
+                navigation.navigate("MainScreen", {
+                  viewId: "MyChat",
+                });
+              } else if (!isFocused && !event.defaultPrevented) {
+                // The `merge: true` option makes sure that the params inside the tab screen are preserved
+                navigation.navigate({ name: route.name, merge: true });
+              }
+            };
+
+            const onLongPress = () => {
+              navigation.emit({
+                type: "tabLongPress",
+                target: route.key,
+              });
+            };
+
+            const onMenuPress = (e) => {
+              if (route.name === "ShopIndexScreen") {
+                global.dialog.confirm({
+                  title: "升级中，敬请期待",
+                  confirmButtonText: "确定",
+                  confirmCallback: async () => {},
+                });
+              } else {
+                emitTabNavigate(e);
+                inputRef.current?.blur();
+              }
+            };
+
+            if (index === global.base.smartHomeTabIndex) {
+              const onResponderGrant = () => {
+                // console.log("开始触摸");
+                isChatTabActivedBeforeTouchStart =
+                  state.index === global.base.smartHomeTabIndex;
+                emitTabNavigate();
+                onTouchChange(true);
+              };
+              const onResponderMove = (event) => {
+                // console.log(
+                //   '触摸移动',
+                //   event.nativeEvent.pageX,
+                //   event.nativeEvent.pageY,
+                // );
+                handleTouchMove({
+                  pageX: event.nativeEvent.pageX,
+                  pageY: event.nativeEvent.pageY,
+                });
+              };
+              const onResponderRelease = () => {
+                // console.log("触摸结束");
+                onTouchChange(false);
+                // 重置touchPosition
+                handleTouchMove({});
+              };
+              const onInputTypeChange = (type) => {
+                if (type === "voice") {
+                  emitTabNavigate();
+                }
+                setInputType(type);
+              };
+              const onInputFocus = () => {
+                if (!showMoreArea) {
+                  emitTabNavigate();
+                }
+              };
+              const onInputBlur = () => {
+                inputRef.current?.toggleInputType();
+              };
+              const onMoreBtnPress = () => {
+                if (!showMoreArea) {
+                  emitTabNavigate();
+                  setTimeout(() => {
+                    setShowMoreArea(true);
+                  }, 100);
+                } else {
+                  setShowMoreArea(false);
+                }
+              };
+
+              const focusInputBarStyle = {};
+              if (inputType === INPUT_TYPE.TEXT) {
+                focusInputBarStyle.width = "100%";
+              } else {
+                focusInputBarStyle.flex = 1;
+              }
+
+              return (
+                <TabBarInput
+                  style={[focusInputBarStyle]}
+                  showMoreArea={showMoreArea}
+                  key={index}
+                  ref={inputRef}
+                  onResponderGrant={onResponderGrant}
+                  onResponderMove={onResponderMove}
+                  onResponderRelease={onResponderRelease}
+                  onInputTypeChange={onInputTypeChange}
+                  onInputFocus={onInputFocus}
+                  onInputBlur={onInputBlur}
+                  onInputSubmit={onInputSubmit}
+                  onMoreBtnPress={onMoreBtnPress}
+                />
+              );
+            }
+
+            const focusNavBtnTextStyle = {
+              color: isFocused ? "#EA6000" : "#333",
+              fontSize: inputType === INPUT_TYPE.TEXT ? 0 : 18,
+            };
+
+            return (
+              <TouchableOpacity
+                accessibilityRole="button"
+                accessibilityState={isFocused ? { selected: true } : {}}
+                onPress={onMenuPress}
+                onLongPress={onLongPress}
+                activeOpacity={0.8}
+                style={styles.navBtn}
+                key={index}
+              >
+                <Text style={[styles.navBtnText, focusNavBtnTextStyle]}>
+                  {label}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+
+        {showMoreArea && (
+          <View style={styles.moreArea}>
+            <View style={styles.featureItem}>
+              <TouchableHighlight
+                onPress={handleOpenAlbum}
+                activeOpacity={0.9}
+                underlayColor="#fcfcfc"
+              >
+                <View style={styles.featureItemInner}>
+                  <View style={styles.featureIcon}>
+                    <Image
+                      source={require("../../../assets/img/album.png")}
+                      style={styles.featureIconImg}
+                    />
+                  </View>
+                  <Text style={styles.featureName}>相册</Text>
+                </View>
+              </TouchableHighlight>
+            </View>
+
+            <View style={styles.featureItem}>
+              <TouchableHighlight
+                onPress={() => handleOpenCamara("photo")}
+                activeOpacity={0.9}
+                underlayColor="#fcfcfc"
+              >
+                <View style={styles.featureItemInner}>
+                  <View style={styles.featureIcon}>
+                    <Image
+                      source={require("../../../assets/img/photo.png")}
+                      style={styles.featureIconImg}
+                    />
+                  </View>
+                  <Text style={styles.featureName}>拍照</Text>
+                </View>
+              </TouchableHighlight>
+            </View>
+
+            <View style={styles.featureItem}>
+              <TouchableHighlight
+                onPress={() => handleOpenCamara("video")}
+                activeOpacity={0.9}
+                underlayColor="#fcfcfc"
+              >
+                <View style={styles.featureItemInner}>
+                  <View style={styles.featureIcon}>
+                    <Image
+                      source={require("../../assets/img/video.png")}
+                      style={styles.featureIconImg}
+                    />
+                  </View>
+                  <Text style={styles.featureName}>短视频</Text>
+                </View>
+              </TouchableHighlight>
+            </View>
+          </View>
+        )}
+
+        <SpeakingMask
+          speakingMaskVisible={speakingMaskVisible}
+          isTouchingBottomArc={isTouchingBottomArc}
+          speakingText={speakingText}
+          onBottomArcCenterCalc={handleBottomArcCenterCalc}
+          onSubmitCancel={() => setSpeakingMaskVisible(false)}
+          onSubmitVoice={() => {
+            setSpeakingMaskVisible(false);
+            // 发送原语音--待开发
+            console.log(audioPath);
+          }}
+          onSubmitText={(text) => {
+            setSpeakingMaskVisible(false);
+            // 发送文本
+            onInputSubmit(text);
+          }}
+          onEditText={(text) => {
+            setSpeakingMaskVisible(false);
+            global.dialog.prompt({
+              title: "修改文字并发送",
+              input: text,
+              confirmButtonText: "确定",
+              confirmCallback: (val) => {
+                // 发送文本
+                onInputSubmit(val);
+              },
+              cancelButtonText: "取消",
+              cancelCallback: () => {},
+            });
+          }}
+        />
+      </View>
+    );
+  };
+
+  return Platform.OS === "ios" ? (
+    <KeyboardAvoidingView behavior="position" style={styles.container}>
+      {render()}
+    </KeyboardAvoidingView>
+  ) : (
+    render()
+  );
+}
+
+function prepareRecordingPath(path) {
+  const option = {
+    SampleRate: 16000, //采样率
+    Channels: 1, //通道
+    AudioQuality: "High", //音质
+    AudioEncoding: "aac", //音频编码
+    // OutputFormat: 'mpeg_4', //输出格式
+    MeteringEnabled: false, //是否计量
+    MeasurementMode: false, //测量模式
+    AudioEncodingBitRate: 96000, //音频编码比特率
+    IncludeBase64: true, //是否是base64格式
+    AudioSource: 0, //音频源
+  };
+  AudioRecorder.prepareRecordingAtPath(path, option);
+}
+
+function SpeakingMask({
+  speakingMaskVisible,
+  isTouchingBottomArc,
+  speakingText,
+  onBottomArcCenterCalc,
+  onSubmitCancel,
+  onSubmitVoice,
+  onSubmitText,
+  onEditText,
+}) {
+  const handleBottomArcLayout = useCallback(({ nativeEvent: { layout } }) => {
+    let centerX = Dimensions.get("window").width / 2;
+    let centerY = layout.y + bottomArvRadius;
+
+    onBottomArcCenterCalc({
+      centerX,
+      centerY,
+    });
+  }, []);
+
+  return (
+    <Modal
+      transparent={true}
+      statusBarTranslucent={true}
+      visible={speakingMaskVisible}
+    >
+      <View style={styles.speakingMask}>
+        <View style={styles.audio2textContent}>
+          <Text style={styles.audioText}>{speakingText}</Text>
+          {!!speakingText && (
+            <Icon
+              style={styles.audioTextEditBtn}
+              name="mode-edit"
+              type="material"
+              size={30}
+              color="#ccc"
+              onPress={() => onEditText(speakingText)}
+            />
+          )}
+        </View>
+
+        {speakingText ? (
+          <View style={styles.recordButtons}>
+            <View style={styles.recordConfirmButton}>
+              <TouchableOpacity activeOpacity={0.8} onPress={onSubmitCancel}>
+                <View style={styles.recorConfirmBtn}>
+                  <Icon
+                    name="return-down-back-outline"
+                    type="ionicon"
+                    size={40}
+                    color="#fff"
+                  />
+                  <Text style={styles.recorConfirmBtnText}>取消</Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+            <View style={styles.recordConfirmButton}>
+              {/* <TouchableOpacity activeOpacity={0.8} onPress={onSubmitVoice}>
+                <View style={styles.recorConfirmBtn}>
+                  <Icon
+                    name="keyboard-voice"
+                    type="material"
+                    size={40}
+                    color="#fff"
+                  />
+                  <Text style={styles.recorConfirmBtnText}>发送原语音</Text>
+                </View>
+              </TouchableOpacity> */}
+            </View>
+            <View style={styles.recordConfirmButton}>
+              <TouchableOpacity
+                activeOpacity={0.8}
+                onPress={() => onSubmitText(speakingText)}
+              >
+                <View style={styles.recorConfirmBtn}>
+                  <Icon
+                    name="md-send-sharp"
+                    type="ionicon"
+                    size={44}
+                    color="#fff"
+                  />
+                </View>
+              </TouchableOpacity>
+            </View>
+          </View>
+        ) : (
+          <View style={styles.recordButtons}>
+            <View style={styles.recordButtonLeft}>
+              <View style={styles.leftBtn}>
+                {!isTouchingBottomArc && (
+                  <Text style={styles.cancelRecordLabel}>松开 取消</Text>
+                )}
+                <Icon
+                  style={styles.cancelRecordBtn}
+                  name="cancel"
+                  type="material"
+                  size={60}
+                  color={isTouchingBottomArc ? "#313131" : "#ededed"}
+                />
+              </View>
+            </View>
+          </View>
+        )}
+
+        {!speakingText && (
+          <View
+            style={[
+              styles.bottomArc,
+              isTouchingBottomArc && styles.activeBottomArc,
+            ]}
+            onLayout={handleBottomArcLayout}
+          >
+            {/* {isTouchingBottomArc && <Text style={styles.asrLabel}>实时转文字</Text>} */}
+            <View style={styles.iconSaying}>
+              <Icon
+                name="keyboard-voice"
+                type="material"
+                size={40}
+                color="#111"
+              />
+            </View>
+          </View>
+        )}
+      </View>
+    </Modal>
+  );
+}
+
+// 录音界面底部圆弧半径
+const bottomArvRadius = 500;
+
+async function transAudioToText(audioPath) {
+  const activeAddr = await storage.get("activeAddr");
+  const fileStat = await RNFS.stat(audioPath);
+  const base64 = await RNFS.readFile(audioPath, "base64");
+  // console.log(fileStat);
+  const result = await baiduAsr(activeAddr.user_id, fileStat.size, base64);
+  let text = "";
+  if (result.err_no === 0) {
+    text = result.result[0];
+  } else {
+    console.log("audio trans err", result);
+  }
+
+  // 去掉末尾句号
+  if (text.endsWith("。")) {
+    text = text.slice(0, -1);
+  }
+
+  // 去掉其它字符，只保留汉字
+  // const matchChinese = text.match(/[\u4e00-\u9fa5]+/g);
+  // text = matchChinese ? matchChinese.join('') : '';
+
+  console.log("text", text);
+
+  return text;
+}
+
+const MORE_AREA_HEIGHT = 120;
+
+const styles = StyleSheet.create({
+  container: {
+    position: "relative",
+    // borderTopWidth: 1,
+    // borderTopColor: "#efefef",
+    backgroundColor: "#fff",
+    maxHeight: 300,
+  },
+  innerContainer: {
+    flexDirection: "row",
+    // borderTopWidth: 1,
+    // borderTopColor: "#efefef",
+    backgroundColor: "#fff",
+    maxHeight: 300,
+    paddingVertical: 5,
+  },
+  navBtn: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 50,
+  },
+  navBtnText: {
+    color: "#333",
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  moreArea: {
+    height: MORE_AREA_HEIGHT,
+    flexDirection: "row",
+  },
+  featureItem: {
+    width: "20%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  featureItemInner: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  featureIcon: {
+    backgroundColor: "#fff",
+    width: 50,
+    height: 50,
+    marginBottom: 5,
+    borderRadius: 5,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 0.5,
+    borderStyle: "dashed",
+    borderColor: "#aaa",
+  },
+  featureIconImg: {
+    width: 49,
+    height: 49,
+  },
+  featureName: {
+    textAlign: "center",
+  },
+  // speakMask
+  speakingMask: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.6)",
+  },
+  audio2textContent: {
+    position: "absolute",
+    bottom: 330,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 60,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  audioText: {
+    flex: 1,
+    color: "#e5f752",
+    fontSize: 24,
+  },
+  audioTextEditBtn: {
+    marginLeft: 10,
+  },
+  recordButtons: {
+    position: "absolute",
+    bottom: 200,
+    left: 0,
+    right: 0,
+    flexDirection: "row",
+  },
+  recordButtonLeft: {
+    width: "50%",
+    alignItems: "flex-start",
+  },
+  leftBtn: {
+    paddingLeft: "30%",
+  },
+  recordConfirmButton: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  recorConfirmBtnText: {
+    fontSize: 14,
+    color: "#fff",
+    textAlign: "center",
+  },
+  cancelRecordLabel: {
+    fontSize: 16,
+    color: "#fff",
+  },
+  cancelRecordBtn: {
+    transform: [
+      {
+        rotate: "-30deg",
+      },
+    ],
+  },
+  bottomArc: {
+    width: bottomArvRadius * 2,
+    height: bottomArvRadius * 2,
+    borderRadius: bottomArvRadius,
+    backgroundColor: "#313131",
+    position: "absolute",
+    top: "100%",
+    left: "50%",
+    transform: [
+      {
+        translateX: -bottomArvRadius,
+      },
+    ],
+    marginTop: -150,
+  },
+  activeBottomArc: {
+    backgroundColor: "#e9e9e9",
+  },
+  asrLabel: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    textAlign: "center",
+    color: "#fff",
+    fontSize: 18,
+    transform: [
+      {
+        translateY: -30,
+      },
+    ],
+  },
+  iconSaying: {
+    position: "absolute",
+    top: 55,
+    left: 0,
+    width: "100%",
+    textAlign: "center",
+  },
+});
+
+export default CustomTabBar;