@smart-link/rn-im 1.1.2 → 1.1.3

package/dist/components/Camera/Camera.js

@@ -44,8 +44,7 @@ const Camera = memo(props => {
             }
         }
     });
-    return (<Modal animationType="slide" transparent={false} visible={true} onRequestClose={() => {
-        }}>
+    return (<Modal animationType="slide" visible={true} transparent statusBarTranslucent onRequestClose={cancelCamera}>
             {Platform.OS === 'android' &&
             <StatusBar backgroundColor={'#000'}/>}
             {resultSource &&

package/dist/components/Camera/CameraCapture.js

@@ -33,7 +33,12 @@ const CameraCapture = memo(props => {
     const microphone = useMicrophonePermission();
     const device = useCameraDevice(CameraTypeValue[cameraTypeIndex]);
     const format = useCameraFormat(device, [
-        { videoAspectRatio: SCREEN_HEIGHT / SCREEN_WIDTH, fps: 60, photoResolution: 'max' },
+        {
+            videoAspectRatio: SCREEN_HEIGHT / SCREEN_WIDTH,
+            fps: 30,
+            photoResolution: 'max',
+            videoHdr: false
+        },
         {
             photoAspectRatio: SCREEN_HEIGHT / SCREEN_WIDTH,
             photoResolution: 'max',
@@ -148,7 +153,7 @@ const CameraCapture = memo(props => {
         };
     }, []);
     return (<View style={styles.camera}>
-            {device ? (<Camera ref={camera} device={device} format={format} isActive={true} style={styles.preview} photo={true} video={true} audio={microphone.hasPermission} outputOrientation="portrait" onInitialized={() => {
+            {device ? (<Camera ref={camera} device={device} format={format} isActive={true} style={styles.preview} photo={true} video={true} pixelFormat={'yuv'} audio={microphone.hasPermission} outputOrientation="portrait" onInitialized={() => {
                 console.log('Camera initialized!');
             }} onError={error => {
                 console.log(error);

package/dist/components/ChatAvatar/ChatAvatarLocal.js

@@ -99,6 +99,10 @@ const ChatAvatarLocal = ({ fileId, size, name, defaultAvatar }) => {
         return (<LocalImage localPath={avatar} style={size ? { width: size, height: size, borderRadius: size / 2 } : { width: 40, height: 40, borderRadius: 20 }}/>);
     }
     else {
+        // console.log(
+        //     '[ChatAvatarLocal] defaultAvatar:',
+        //     defaultAvatar
+        // );
         return (<Avatar icon={<Image style={{ width: size, height: size }} source={defaultAvatar}/>} style={size ? { width: size, height: size } : {}}>
                 {name === null || name === void 0 ? void 0 : name[0]}
             </Avatar>);

package/dist/components/Highlighter.d.ts

@@ -4,6 +4,7 @@ type HighlighterProps = {
     style?: TextStyle;
     searchWord: string;
     textToHighlight: string;
+    numberOfLines?: number;
 };
-declare const _default: React.MemoExoticComponent<({ style, searchWord, textToHighlight }: HighlighterProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, searchWord, textToHighlight, numberOfLines }: HighlighterProps) => React.JSX.Element>;
 export default _default;

package/dist/components/Highlighter.js

@@ -1,10 +1,10 @@
 import { useTheme } from '@smart-link/rn-ui';
 import React, { memo } from 'react';
 import { Text } from 'react-native';
-const Highlighter = ({ style, searchWord, textToHighlight }) => {
+const Highlighter = ({ style, searchWord, textToHighlight, numberOfLines }) => {
     const theme = useTheme();
     // 高亮显示搜索关键字
-    return (<Text style={style}>
+    return (<Text style={style} numberOfLines={numberOfLines}>
             {textToHighlight.split(new RegExp(`(${searchWord})`, 'gi')).map((part, index) => {
             return part.toLowerCase() === searchWord.toLowerCase() ? (<Text key={index} style={{
                     color: theme.primaryColor,

package/dist/components/LocalImage.js

@@ -7,6 +7,7 @@ const LocalImage = memo(props => {
     if (Object.prototype.toString.call(localPath) === '[object String]') {
         source = { uri: toAbsolutePath(localPath) };
     }
+    // console.log('LocalImage: ', source);
     return <Image style={style} resizeMode={resizeMode} source={source} onError={(e) => {
             console.log('local image error: ', localPath);
         }}/>;

package/dist/pages/conversation/{List.d.ts → ConversationList.d.ts}

@@ -2,5 +2,5 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack/lib/types
 import React from 'react';
 import { IMPageParamList } from '../../pages';
 type ConversationListProps = NativeStackScreenProps<IMPageParamList, 'ConversationList'>;
-declare const List: ({ navigation }: ConversationListProps) => React.JSX.Element;
-export default List;
+declare const ConversationList: ({ navigation }: ConversationListProps) => React.JSX.Element;
+export default ConversationList;

package/dist/pages/conversation/{List.js → ConversationList.js}

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { ConnectStatus, ConversationActions } from '@smart-link/im-base';
 import { CaihIcon, dp, Popover, SearchBar } from '@smart-link/rn-ui';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { memo, useEffect, useRef, useState } from 'react';
 import { StyleSheet, View, FlatList, TouchableOpacity, Vibration, DevSettings, } from 'react-native';
 import IndicatorText from '../../components/IndicatorText';
 import NetworkUnconnected from '../../components/NetworkUnconnected';
@@ -20,7 +20,13 @@ import ConversationCard from './components/ConversationCard';
 import ConversationOption from './components/ConversationOption';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import { startCreateGroup } from '../../slice/contact/contact.slice';
-const List = ({ navigation }) => {
+import AntDesign from "react-native-vector-icons/AntDesign";
+const BackButton = memo(({ onBack }) => {
+    return (<TouchableOpacity style={styles.backButton} onPress={onBack}>
+            <AntDesign name='up' size={dp(20)} color={'#999'}/>
+        </TouchableOpacity>);
+});
+const ConversationList = ({ navigation }) => {
     const { t } = useTranslation();
     const { connectStatus, conversations } = useConversation();
     const [nativeEvent, setNativeEvent] = useState();
@@ -29,6 +35,7 @@ const List = ({ navigation }) => {
     const lastPressTime = useRef(0);
     const lastIndex = useRef(0);
     const flatListRef = useRef(null);
+    const [scrollY, setScrollY] = useState(0);
     useEffect(() => {
         let headerTitle = t('message');
         switch (connectStatus) {
@@ -173,11 +180,23 @@ const List = ({ navigation }) => {
         index,
     });
     return (<View style={{ flex: 1 }}>
-            <FlatList ref={flatListRef} contentContainerStyle={styles.contentContainerStyle} keyboardShouldPersistTaps={'handled'} data={conversations} ListHeaderComponent={listHeaderComponent} ListFooterComponent={listFooterComponent} ItemSeparatorComponent={itemSeparatorComponent} getItemLayout={getItemLayout} renderItem={renderItem} numColumns={1} keyExtractor={keyExtractor}/>
+            <FlatList ref={flatListRef} contentContainerStyle={styles.contentContainerStyle} keyboardShouldPersistTaps={'handled'} data={conversations} ListHeaderComponent={listHeaderComponent} ListFooterComponent={listFooterComponent} ItemSeparatorComponent={itemSeparatorComponent} getItemLayout={getItemLayout} renderItem={renderItem} numColumns={1} keyExtractor={keyExtractor} onScroll={(e) => {
+            setScrollY(e.nativeEvent.contentOffset.y);
+        }}/>
             <ConversationOption conversation={conversation} nativeEvent={nativeEvent} visible={popoverVisible} onClose={() => {
             setPopoverVisible(false);
             setConversation(undefined);
         }}/>
+
+            {scrollY > dp(50) && (<BackButton onBack={() => {
+                var _a;
+                (_a = flatListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToOffset({
+                    offset: 0,
+                    animated: true,
+                });
+            }}/>)}
+
+
         </View>);
 };
 const styles = StyleSheet.create({
@@ -213,4 +232,4 @@ const styles = StyleSheet.create({
         right: dp(15),
     },
 });
-export default List;
+export default ConversationList;

package/dist/pages/conversation/conversation.routes.js

@@ -1,4 +1,4 @@
-import List from './List';
+import ConversationList from './ConversationList';
 import Setting from './setting/Setting';
 import SettingChatBg from './setting/SettingChatBg';
 import ForwardToConversation from './ForwardToConversation';
@@ -9,7 +9,7 @@ import OptionGroupMoreMember from "./setting/OptionGroupMoreMember";
 export const conversationRoutes = [
     {
         name: 'ConversationList',
-        component: List,
+        component: ConversationList,
         options: {
             title: '',
         }

package/dist/pages/message/FileSelector.js

@@ -70,10 +70,10 @@ const FileSelector = ({ navigation }) => {
             };
             navigation.goBack();
             if (isImage(file.localPath)) {
-                imManager.sendPictureMessage(currentConversation, file);
+                imManager.sendPictureMessage(Object.assign({}, currentConversation), file);
             }
             else {
-                imManager.sendFileMessage(currentConversation, file);
+                imManager.sendFileMessage(Object.assign({}, currentConversation), file);
             }
             return;
         }
@@ -99,7 +99,7 @@ const FileSelector = ({ navigation }) => {
                 // ios 中文名称编码了，需要解码
                 fileInfo.uri = decodeURI(fileInfo.uri);
                 const localPath = yield copyFile(fileInfo.uri, fileInfo.name, 'file');
-                imManager.sendFileMessage(currentConversation, {
+                imManager.sendFileMessage(Object.assign({}, currentConversation), {
                     localPath: localPath,
                     filename: fileInfo.name,
                     size: fileInfo.size,

package/dist/pages/message/MessageList.js

@@ -1,7 +1,7 @@
 import { ConversationType, MessageActions, MessagePanelActions, PayloadType, TipsType, showTimeLine, } from '@smart-link/im-base';
 import { dp, HeaderBackButton, Input, NavigationPage } from '@smart-link/rn-ui';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { View, Text, FlatList, TouchableOpacity, Keyboard, InteractionManager, StyleSheet, ActivityIndicator, TouchableWithoutFeedback } from 'react-native';
+import { View, Text, FlatList, TouchableOpacity, Keyboard, StyleSheet, ActivityIndicator, TouchableWithoutFeedback } from 'react-native';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import { useAuth, useConversation, useMessage } from '../../hooks/useImSelector';
 import useTranslation from '../../hooks/useTranslation';
@@ -71,7 +71,7 @@ const MessageList = ({ navigation }) => {
                 imManager.store.dispatch(MessagePanelActions.cancelMultipleSelect());
             }
             else {
-                InteractionManager.runAfterInteractions(() => {
+                requestIdleCallback(() => {
                     imManager.store.dispatch(MessagePanelActions.saveDraftText(imManager));
                     imManager.leaveConversation();
                     imManager.store.dispatch(MessageActions.resetState());

package/dist/pages/message/components/MessagePayload.js

@@ -24,12 +24,13 @@ import PayloadMultiple from './Payload/PayloadMultiple';
 import PayloadWrapper from './Payload/PayloadWrapper';
 import PayloadShare from "../../../pages/message/components/Payload/PayloadShare";
 const MessagePayload = props => {
-    const { style: outStyle } = props, retProps = __rest(props, ["style"]);
+    const { style: outStyle, isRecord } = props, retProps = __rest(props, ["style", "isRecord"]);
     const { t } = useTranslation();
     const payloadType = props.payloadType;
     const noStylePayloadType = [PayloadType.PICTURE, PayloadType.VIDEO];
     const style = !noStylePayloadType.includes(payloadType) ? outStyle : [];
-    const mergeProps = Object.assign(Object.assign({}, retProps), { style });
+    const mergeProps = Object.assign(Object.assign({}, retProps), { isRecord,
+        style });
     let content;
     switch (payloadType) {
         case PayloadType.TEXT:
@@ -58,7 +59,7 @@ const MessagePayload = props => {
             break;
         default:
             console.log('暂不支持的消息类型：', payloadType);
-            content = (<PayloadWrapper style={style} direction={mergeProps.direction}>
+            content = (<PayloadWrapper style={style} direction={mergeProps.direction} isRecord={isRecord}>
                     <Text style={plain}>[{t('msgTypeNotSupported')}]</Text>
                 </PayloadWrapper>);
             break;

package/dist/pages/message/components/Payload/PayloadText.js

@@ -84,7 +84,7 @@ const PayloadText = ({ payload, onLongPress, onPress, isRecord, showArrow = true
         const imManager = getImManager();
         imManager.store.dispatch(MessagePanelActions.onPressQuote(imManager, quoteMessageSeq));
     };
-    return (<PayloadWrapper direction={direction} showArrow={showArrow} onLongPress={onLongPress} style={[style, plain]}>
+    return (<PayloadWrapper isRecord={isRecord} direction={direction} showArrow={showArrow} onLongPress={onLongPress} style={[style, plain]}>
             <TextMixQuoteMessage text={text} quote={quote} textStyle={[styles.text]} quoteStyle={styles.quote} quoteBgColor='#fff' onLongPressPhone={onLongPressPhone} onLongPressURL={onLongPressURL} onPressQuote={onPressQuote} atList={atList}/>
         </PayloadWrapper>);
 };

package/dist/pages/message/components/Payload/PayloadWrapper.d.ts

@@ -3,6 +3,7 @@ import { GestureResponderEvent } from 'react-native';
 import { NativeEventLayout } from "../../../types";
 export interface PayloadWrapperProps {
     showArrow?: boolean;
+    isRecord?: boolean;
     direction?: 'left' | 'right';
     children: React.ReactNode;
     style?: any;

package/dist/pages/message/components/Payload/PayloadWrapper.js

@@ -29,13 +29,16 @@ const SvgFromUri = ({ direction, focus }) => {
         </Svg>);
 };
 const PayloadWrapper = memo((_a) => {
-    var { children, direction, showArrow, onLongPress, style } = _a, retProps = __rest(_a, ["children", "direction", "showArrow", "onLongPress", "style"]);
+    var { children, direction, isRecord, showArrow, onLongPress, style } = _a, retProps = __rest(_a, ["children", "direction", "isRecord", "showArrow", "onLongPress", "style"]);
     const [layout, setLayout] = useState();
     const [focus, setFocus] = useState(false);
     let backgroundColor = direction === 'right' ? '#cde6f9' : '#fff';
     if (focus) {
         backgroundColor = Color(backgroundColor).darken(0.08).hex();
     }
+    if (isRecord) {
+        backgroundColor = 'transparent';
+    }
     return (<TouchableOpacity {...retProps} style={[
             style,
             {

package/dist/pages/search/components/SearchUser.js

@@ -16,9 +16,14 @@ import Highlighter from '../../../components/Highlighter';
 import useTranslation from '../../../hooks/useTranslation';
 import { getImManager } from '../../../init';
 const RenderUserItem = (props) => {
+    const { keyword, data } = props;
     return (<View style={{ flexDirection: 'row', alignItems: 'center' }}>
-            <ChatAvatar needUpdate id={props.data.userId} url={props.data.avatars} name={props.data.userName}/>
-            <Highlighter style={{ marginLeft: dp(10), flex: 1 }} searchWord={props.keyword} textToHighlight={props.data.userName}/>
+            <ChatAvatar needUpdate id={data.userId} url={data.avatars} name={data.userName}/>
+            <View style={{ marginLeft: dp(10), flex: 1 }}>
+                <Highlighter searchWord={keyword} textToHighlight={data.userName} numberOfLines={1}/>
+                <Text numberOfLines={1} style={{ fontSize: dp(12), color: '#999' }}>{data.groupNamePaths}</Text>
+            </View>
+
         </View>);
 };
 const SearchUser = ({ keyword }) => {

package/dist/utils/file.d.ts

@@ -7,6 +7,7 @@ declare const resourceDirBase: {
     readonly video: "/video";
     readonly file: "/file";
     readonly background: "/background";
+    readonly cache: "/cache";
 };
 type ResourceDir = keyof typeof resourceDirBase;
 export declare function initDir(user: IUser): Promise<void>;
@@ -39,4 +40,5 @@ export declare function getSafeFilename(filename: string): string;
  */
 export declare function truncateFilenameMiddle(filename: string, maxLength?: number): string;
 export declare function getFileSize(filePath: string): Promise<number>;
+export declare function sliceFile(filePath: string, start: number, end: number): Promise<string>;
 export {};

package/dist/utils/file.js

@@ -19,6 +19,7 @@ const resourceDirBase = {
     video: '/video',
     file: '/file',
     background: '/background',
+    cache: '/cache',
 };
 const resourceDir = {};
 let userPath = '';
@@ -112,7 +113,7 @@ export const download = ({ fileId, resourceType, filename, onProgress, onStart }
         progressDivider: 5,
         begin: (e) => {
             // 这个方法不能注释，否则 ios 不响应进度
-            // console.log('download begin: ', e);
+            console.log('download begin: ', e.jobId);
         },
         progress: (e) => {
             // console.log('download progress: ', e);
@@ -127,7 +128,7 @@ export const download = ({ fileId, resourceType, filename, onProgress, onStart }
         return relativePath;
     }
     catch (error) {
-        console.error('下载失败:', error);
+        console.warn('下载失败:', error);
         throw error;
     }
 });
@@ -412,3 +413,12 @@ export function getFileSize(filePath) {
         return stat.size;
     });
 }
+export function sliceFile(filePath, start, end) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // const destPath = `${userPath}/cache/${uuidv4()}.tmp`;
+        // 分片读取文件写入缓存文件
+        const base64 = yield RNFS.read(toAbsolutePath(filePath), end - start, start, 'base64');
+        // await RNFS.writeFile(destPath, base64, 'base64');
+        return base64;
+    });
+}

package/dist/utils/request.d.ts

@@ -29,7 +29,8 @@ interface IRequest {
     postForm<R, Q = any>(url: string, data?: Q, config?: AxiosRequestConfig): Promise<IResponse<R>>;
     postFile<R, Q = any>(url: string, data?: Q, config?: AxiosRequestConfig): Promise<IResponse<R>>;
 }
+export declare const getStorage: () => Storage;
 export declare const getBaseURL: () => string;
-export declare const createRequest: (base: string, storage: Storage) => AxiosInstance;
+export declare const createRequest: (base: string, _storage: Storage) => AxiosInstance;
 declare const request: IRequest;
 export default request;

package/dist/utils/request.js

@@ -21,9 +21,12 @@ export const Headers = {
 };
 let instance = null;
 let baseURL = '';
+let storage;
+export const getStorage = () => storage;
 export const getBaseURL = () => baseURL;
-export const createRequest = (base, storage) => {
+export const createRequest = (base, _storage) => {
     baseURL = base;
+    storage = _storage;
     instance = axios.create({
         baseURL: base,
         timeout: 10000,

package/dist/utils/upload.js

@@ -7,18 +7,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import request, { getBaseURL } from './request';
-import { toAbsolutePath } from './file';
+import request, { getBaseURL, getStorage } from './request';
+import { toAbsolutePath, toFullPath } from './file';
+import { uploadFile as chunkUpload } from '@smart-link/chunk-upload';
+const CHUNK_SIZE = 1024 * 1024 * 2;
 const uploadFile = (filePath, type, onProgress) => __awaiter(void 0, void 0, void 0, function* () {
-    const url = getBaseURL();
-    const uploadUrl = `${url}/api-file/file/uploadFile`;
+    const uploadUrl = `/api-file/file/uploadFile`;
+    const local = yield fetch(toAbsolutePath(filePath));
+    const file = yield local.blob();
+    const fileName = filePath.split('/').pop();
+    //
+    if (file.size > CHUNK_SIZE) {
+        return uploadBigFile(toFullPath(filePath), fileName, onProgress);
+    }
     const formData = new FormData();
-    // @ts-ignore
     formData.append('file', {
         // @ts-ignore
         uri: toAbsolutePath(filePath),
-        name: filePath.split('/').pop(),
-        type: type,
+        name: fileName,
+        type,
     });
     const resp = yield request.postFile(uploadUrl, formData, {
         onUploadProgress: onProgress,
@@ -26,4 +33,27 @@ const uploadFile = (filePath, type, onProgress) => __awaiter(void 0, void 0, voi
     console.log('uploadFile: ', resp);
     return resp.data;
 });
+const uploadBigFile = (filePath, fileName, onProgress) => __awaiter(void 0, void 0, void 0, function* () {
+    const uploadBigFileURL = `/api-file/file/uploadBigFile`;
+    const cookie = yield getStorage().getItem('cookies');
+    const resp = yield chunkUpload({
+        filePath,
+        fileName,
+        chunkSize: CHUNK_SIZE,
+        uploadUrl: getBaseURL() + uploadBigFileURL,
+        headers: {
+            'Cookie': cookie,
+        },
+        onProgress: (o) => {
+            console.log('uploadBigFile: ', o);
+            onProgress && onProgress({
+                loaded: o.loaded,
+                total: o.total,
+                lengthComputable: true,
+                bytes: o.loaded,
+            });
+        },
+    });
+    return resp.data;
+});
 export default uploadFile;

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@smart-link/rn-im",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "",
+  "type": "module",
   "main": "./dist/index.js",
+  "module": "./src/index.ts",
   "dependencies": {
     "color": "^5.0.0",
     "lodash-es": "^4.17.21",
@@ -34,6 +36,7 @@
     "@react-navigation/native": "6.1.7",
     "@react-navigation/native-stack": "6.9.13",
     "@reduxjs/toolkit": "^1.5.0",
+    "@smart-link/chunk-upload": "^1.0.0",
     "ahooks": "^3.8.0",
     "axios": "^0.30.0",
     "dayjs": "^1.11.9",