@smart-link/rn-im 1.0.1

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

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const useTranslation_1 = __importDefault(require("../../../../hooks/useTranslation"));
+const im_base_1 = require("@smart-link/im-base");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const DetailChange = ({ payload }) => {
+    const { t } = (0, useTranslation_1.default)();
+    const changeKeys = {
+        noticeChange: 'chatGroupNoticeChange',
+        nameChange: 'chatGroupNameChange',
+    };
+    return <react_native_1.Text style={styles.text}>{t(changeKeys[payload.changeKey], payload)}</react_native_1.Text>;
+};
+const MemberInvite = ({ payload }) => {
+    const { t } = (0, useTranslation_1.default)();
+    return (<react_native_1.Text style={styles.text}>
+            {t('chatGroupInviteMember', { userName: payload.inviterName, content: payload.inviteesName.join('、') })}
+        </react_native_1.Text>);
+};
+const MemberRemove = ({ payload }) => {
+    const { t } = (0, useTranslation_1.default)();
+    return <react_native_1.Text style={styles.text}>{t('chatGroupRemoveMember', { content: payload.names.join('、') })}</react_native_1.Text>;
+};
+const MemberLeave = ({ payload }) => {
+    const { t } = (0, useTranslation_1.default)();
+    return <react_native_1.Text style={styles.text}>{t('chatGroupMemberLeave', { userName: payload.userName })}</react_native_1.Text>;
+};
+const GroupInviteSwitch = ({ payload }) => {
+    const { t } = (0, useTranslation_1.default)();
+    console.log('GroupInviteSwitch:');
+    return (<react_native_1.Text style={styles.text}>
+            {t(payload.switchCode === 'on' ? 'groupInviteValidateEnable' : 'groupInviteValidateDisable')}
+        </react_native_1.Text>);
+};
+const PayloadNotify = ({ payload, payloadType }) => {
+    console.log('PayloadNotify: ', payload, payloadType);
+    const { content: text } = payload;
+    let content;
+    switch (payloadType) {
+        case im_base_1.PayloadType.GROUP_DETAIL_CHANGE:
+            content = <DetailChange payload={payload}/>;
+            break;
+        case im_base_1.PayloadType.GROUP_MEMBER_INVITE:
+            content = <MemberInvite payload={payload}/>;
+            break;
+        case im_base_1.PayloadType.GROUP_MEMBER_REMOVE_NOTICE:
+            content = <MemberRemove payload={payload}/>;
+            break;
+        case im_base_1.PayloadType.GROUP_INVITE_VALIDATE_SWITCH:
+            content = <GroupInviteSwitch payload={payload}/>;
+            break;
+        case im_base_1.PayloadType.GROUP_MEMBER_LEAVE:
+            content = <MemberLeave payload={payload}/>;
+            break;
+        default:
+            content = <react_native_1.Text style={styles.text}>{text}</react_native_1.Text>;
+            break;
+    }
+    return <react_native_1.View style={styles.content}>{content}</react_native_1.View>;
+};
+const styles = react_native_1.StyleSheet.create({
+    content: { marginHorizontal: '10%', paddingVertical: 10, alignItems: 'center' },
+    text: { color: '#999', textAlign: 'center' },
+});
+exports.default = (0, react_1.memo)(PayloadNotify);

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

@@ -0,0 +1,7 @@
+import { IPayload } from '@smart-link/im-base';
+import React from 'react';
+type PayloadPictureProps = {
+    payload: IPayload;
+};
+declare const _default: React.MemoExoticComponent<({ payload, ...retProps }: PayloadPictureProps) => React.JSX.Element>;
+export default _default;

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

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = require("react-native-svg");
+const file_1 = require("../../../../api/file");
+const golden_rectangle_1 = require("../../../../utils/golden-rectangle");
+const styles_1 = require("../../../../components/styles");
+const rn_ui_1 = require("@smart-link/rn-ui");
+const PayloadWrapper_1 = __importDefault(require("./PayloadWrapper"));
+const react_native_fast_image_1 = __importDefault(require("react-native-fast-image"));
+const { width: screenWidth } = react_native_1.Dimensions.get('window');
+const PayloadPicture = (_a) => {
+    var { payload } = _a, retProps = __rest(_a, ["payload"]);
+    const ext = payload.filename.split('.').pop();
+    const src = payload.localPath ? { uri: 'file://' + payload.localPath } : payload.fileId ? { uri: (0, file_1.getDownloadUrl)(payload.fileId) } : { uri: '' };
+    const size = (0, golden_rectangle_1.calculate)(payload.height || (0, rn_ui_1.dp)(163), payload.width || (0, rn_ui_1.dp)(100), 200);
+    if (!payload.localPath && !payload.fileId) {
+        return <react_native_1.View style={[styles_1.borderStyle, size, { alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0, 0.8)' }]}/>;
+    }
+    let content;
+    if (/svg/i.test(ext)) {
+        content = <react_native_svg_1.SvgFromUri style={[styles_1.borderStyle]} uri={src.uri} viewBox={'0 0 1024 1024'} width={screenWidth * 0.4} height={screenWidth * 0.4}/>;
+    }
+    else {
+        content = <react_native_fast_image_1.default resizeMode="cover" style={[styles_1.borderStyle, size]} source={src}/>;
+    }
+    return <PayloadWrapper_1.default style={styles_1.shadowStyle} {...retProps}>
+        {content}
+    </PayloadWrapper_1.default>;
+};
+exports.default = (0, react_1.memo)(PayloadPicture);

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PayloadProps } from "./type";
+declare const _default: React.MemoExoticComponent<({ payload, direction, showArrow, style, onLongPress }: PayloadProps) => React.JSX.Element>;
+export default _default;

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

@@ -0,0 +1,100 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const useTranslation_1 = __importDefault(require("../../../../hooks/useTranslation"));
+const rn_ui_1 = require("@smart-link/rn-ui");
+const react_native_1 = require("react-native");
+const PayloadWrapper_1 = __importDefault(require("./PayloadWrapper"));
+const styles_1 = require("../../../../components/styles");
+const Favicon_1 = __importDefault(require("../../../../components/Favicon"));
+const size = (0, rn_ui_1.dp)(45);
+// const backgroundColor = '#fff';
+const borderColor = '#eee';
+const PayloadShare = ({ payload, direction, showArrow = true, style, onLongPress }) => {
+    const { t } = (0, useTranslation_1.default)();
+    const { title, url, description } = payload;
+    return (<PayloadWrapper_1.default direction={direction} showArrow={showArrow} style={[style, styles.share]} onPress={() => {
+            if (url === null || url === void 0 ? void 0 : url.startsWith('http')) {
+                react_native_1.Linking.openURL(url);
+            }
+        }} onLongPress={onLongPress}>
+            <react_native_1.View style={styles.card}>
+                <react_native_1.Text style={styles.title} numberOfLines={2}>{title}</react_native_1.Text>
+                <react_native_1.View style={styles.h5}/>
+                <react_native_1.View style={styles.info}>
+                    <react_native_1.Text style={styles.description} numberOfLines={3}>{description}</react_native_1.Text>
+                    <react_native_1.View style={styles.w10}/>
+                    {/* favicon */}
+                    <Favicon_1.default url={url} size={size}/>
+                </react_native_1.View>
+            </react_native_1.View>
+            <react_native_1.View style={styles.line}/>
+            <react_native_1.Text style={styles.shareName}>{t('shareLink')}</react_native_1.Text>
+        </PayloadWrapper_1.default>);
+};
+const styles = react_native_1.StyleSheet.create({
+    share: Object.assign(Object.assign(Object.assign({ 
+        // backgroundColor,
+        paddingHorizontal: (0, rn_ui_1.dp)(10), paddingTop: (0, rn_ui_1.dp)(10), paddingBottom: (0, rn_ui_1.dp)(5) }, styles_1.shadowStyle), styles_1.borderStyle), { borderColor }),
+    card: {},
+    title: {
+        width: (0, rn_ui_1.dp)(230),
+        color: '#333',
+        lineHeight: (0, rn_ui_1.dp)(20),
+        fontSize: (0, rn_ui_1.dp)(14),
+    },
+    description: {
+        width: (0, rn_ui_1.dp)(180),
+        color: '#999',
+        lineHeight: (0, rn_ui_1.dp)(18),
+        fontSize: (0, rn_ui_1.dp)(12),
+    },
+    info: {
+        flexDirection: 'row',
+    },
+    h5: {
+        height: (0, rn_ui_1.dp)(5),
+    },
+    w10: {
+        width: (0, rn_ui_1.dp)(10),
+    },
+    line: {
+        marginTop: (0, rn_ui_1.dp)(10),
+        marginBottom: (0, rn_ui_1.dp)(5),
+        backgroundColor: '#eee',
+        width: '100%',
+        height: (0, rn_ui_1.dp)(1),
+    },
+    shareName: {
+        color: '#777',
+        paddingLeft: (0, rn_ui_1.dp)(3),
+        fontSize: (0, rn_ui_1.dp)(13),
+    }
+});
+exports.default = (0, react_1.memo)(PayloadShare);

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PayloadProps } from './type';
+declare const _default: React.MemoExoticComponent<({ payload, onLongPress, showArrow, direction, style }: PayloadProps) => React.JSX.Element>;
+export default _default;

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

@@ -0,0 +1,128 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const styles_1 = require("../../../../components/styles");
+const rn_ui_1 = require("@smart-link/rn-ui");
+const TextMixQuoteMessage_1 = __importDefault(require("../TextMixQuoteMessage"));
+const useTranslation_1 = __importDefault(require("../../../../hooks/useTranslation"));
+const phone_1 = require("../../../../utils/phone");
+const PayloadWrapper_1 = __importDefault(require("./PayloadWrapper"));
+const init_1 = require("../../../../init");
+const im_base_1 = require("@smart-link/im-base");
+const clipboard_1 = __importDefault(require("@react-native-clipboard/clipboard"));
+const PayloadText = ({ payload, onLongPress, showArrow = true, direction, style }) => {
+    const { t } = (0, useTranslation_1.default)();
+    const navigation = (0, rn_ui_1.useNavigation)();
+    const { text, quote } = payload;
+    const onLongPressPhone = (phone) => {
+        // TODO
+        rn_ui_1.ActionSheet.open({
+            title: phone + " " + t('mayPhone'),
+            onClose: () => {
+                rn_ui_1.ActionSheet.destroy();
+            },
+            options: [
+                {
+                    text: t('copy'),
+                    onPress: () => {
+                        (0, phone_1.copyPhone)(phone);
+                        rn_ui_1.ActionSheet.destroy();
+                        rn_ui_1.Toast.info(t('copied'));
+                    }
+                },
+                {
+                    text: t('callPhone'),
+                    onPress: () => {
+                        (0, phone_1.callPhone)(phone);
+                        rn_ui_1.ActionSheet.destroy();
+                    },
+                },
+                {
+                    text: t('addToContacts'),
+                    onPress: () => {
+                        // addPhoneContracts(phoneNum)
+                    }
+                }
+            ],
+            cancelButton: {
+                text: t('cancel'),
+            },
+        });
+    };
+    const onLongPressURL = (url) => {
+        rn_ui_1.ActionSheet.open({
+            title: url,
+            onClose: () => {
+                rn_ui_1.ActionSheet.destroy();
+            },
+            options: [
+                {
+                    text: t('openURL'),
+                    onPress: () => {
+                        react_native_1.Linking.openURL(url);
+                        rn_ui_1.ActionSheet.destroy();
+                        rn_ui_1.Toast.info(t('copied'));
+                    }
+                },
+                {
+                    text: t('copyURL'),
+                    onPress: () => {
+                        clipboard_1.default.setString(url);
+                        rn_ui_1.ActionSheet.destroy();
+                    },
+                },
+            ],
+            cancelButton: {
+                text: t('cancel'),
+            },
+        });
+    };
+    const onPressQuote = (quoteMessageSeq) => {
+        const imManager = (0, init_1.getImManager)();
+        imManager.store.dispatch(im_base_1.MessagePanelActions.onPressQuote(imManager, quoteMessageSeq));
+    };
+    return (<PayloadWrapper_1.default direction={direction} showArrow={showArrow} onLongPress={onLongPress} style={[style, styles_1.plain]}>
+            <TextMixQuoteMessage_1.default text={text} quote={quote} textStyle={[styles.text]} quoteStyle={styles.quote} quoteBgColor='#fff' onLongPressPhone={onLongPressPhone} onLongPressURL={onLongPressURL} onPressQuote={onPressQuote}/>
+        </PayloadWrapper_1.default>);
+};
+const styles = react_native_1.StyleSheet.create({
+    popoverTextMix: Object.assign(Object.assign({ alignSelf: 'flex-start', maxWidth: react_native_1.Dimensions.get('window').width - 120, padding: (0, rn_ui_1.dp)(8) }, styles_1.borderStyle), styles_1.shadowStyle),
+    h5: {
+        height: (0, rn_ui_1.dp)(5),
+    },
+    text: {
+        color: '#222',
+        fontSize: (0, rn_ui_1.dp)(14),
+    },
+    quote: {
+        padding: (0, rn_ui_1.dp)(6)
+    },
+});
+exports.default = (0, react_1.memo)(PayloadText);

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PayloadProps } from './type';
+declare const _default: React.MemoExoticComponent<({ messageStatus, messageSeq, payload, sendSize, onLongPress }: PayloadProps) => React.JSX.Element>;
+export default _default;

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

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const im_base_1 = require("@smart-link/im-base");
+const rn_ui_1 = require("@smart-link/rn-ui");
+const react_native_1 = require("react-native");
+const file_1 = require("../../../../api/file");
+const golden_rectangle_1 = require("../../../../utils/golden-rectangle");
+const MaterialIcons_1 = __importDefault(require("react-native-vector-icons/MaterialIcons"));
+const video_action_1 = require("../../../../slice/video/video.action");
+const styles_1 = require("../../../../components/styles");
+const UploadProgress_1 = __importDefault(require("../../../../pages/message/components/UploadProgress"));
+const PayloadWrapper_1 = __importDefault(require("./PayloadWrapper"));
+const init_1 = require("../../../../init");
+const react_native_fast_image_1 = __importDefault(require("react-native-fast-image"));
+const PayloadVideo = ({ messageStatus, messageSeq, payload, sendSize = 0, onLongPress }) => {
+    const { width = (0, rn_ui_1.dp)(100), height = (0, rn_ui_1.dp)(163) } = payload;
+    const size = (0, golden_rectangle_1.calculate)(height, width);
+    const thumbnail = payload.imagePath ? { uri: 'file://' + payload.imagePath }
+        : { uri: (0, file_1.getDownloadUrl)(payload.imageFileId) };
+    console.log('payload', payload);
+    return (<PayloadWrapper_1.default style={[styles.root, styles_1.shadowStyle, styles_1.borderStyle, size]} onPress={() => {
+            (0, init_1.getImManager)().store.dispatch((0, video_action_1.loadVideoPlayer)({
+                messageSeq,
+                payload
+            }));
+        }} onLongPress={onLongPress}>
+            <react_native_fast_image_1.default style={[size, styles_1.borderStyle]} resizeMode='cover' source={thumbnail}/>
+            <UploadProgress_1.default show={messageStatus === im_base_1.MessageStatus.EMITTING && !payload.fileId && payload.size > 0} width={size.width} sendSize={sendSize} totalSize={payload.size}/>
+            <react_native_1.View style={styles.playView}>
+                <MaterialIcons_1.default size={30} name='play-circle-outline' color='#fff'/>
+            </react_native_1.View>
+            <react_native_1.View style={{ position: 'absolute', bottom: (0, rn_ui_1.dp)(5), right: (0, rn_ui_1.dp)(5) }}>
+                <react_native_1.Text style={{ fontSize: (0, rn_ui_1.dp)(12), color: '#fff' }}>{(0, im_base_1.numberToTime)(payload.duration)}</react_native_1.Text>
+            </react_native_1.View>
+        </PayloadWrapper_1.default>);
+};
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        backgroundColor: 'rgba(0,0,0, 0.8)',
+    },
+    playView: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+exports.default = (0, react_1.memo)(PayloadVideo);

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { PayloadProps } from './type';
+interface VoiceProps extends PayloadProps {
+}
+declare const _default: React.MemoExoticComponent<({ payload, direction, style, messageSeq, showArrow, onLongPress }: VoiceProps) => React.JSX.Element>;
+export default _default;

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

@@ -0,0 +1,155 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const rn_ui_1 = require("@smart-link/rn-ui");
+const react_native_audio_recorder_player_1 = __importDefault(require("react-native-audio-recorder-player"));
+const PayloadWrapper_1 = __importDefault(require("./PayloadWrapper"));
+const variables_1 = __importDefault(require("@smart-link/rn-ui/dist/components/styles/variables"));
+const init_1 = require("../../../../init");
+const im_base_1 = require("@smart-link/im-base");
+const file_1 = require("../../../../utils/file");
+const react_native_fast_image_1 = __importDefault(require("react-native-fast-image"));
+const voiceLeft = require('../../../../../assets/voice-left.png');
+const voiceLeftPlaying = require('../../../../../assets/voice-left-playing.gif');
+const audioRecorderPlayer = new react_native_audio_recorder_player_1.default();
+const PayloadVoice = ({ payload, direction, style, messageSeq, showArrow = true, onLongPress }) => {
+    console.log('PayloadVoice: messageSeq:', messageSeq);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            audioRecorderPlayer.removePlayBackListener();
+        };
+    }, []);
+    const second = Math.round(payload.duration);
+    const voiceWidth = Math.min(120, 40 + (80 * (isNaN(second) ? 15 : second)) / 60);
+    const [playing, setPlaying] = (0, react_1.useState)(false);
+    const downloading = (0, react_1.useRef)(false);
+    const startPlayer = (path) => __awaiter(void 0, void 0, void 0, function* () {
+        audioRecorderPlayer.addPlayBackListener((e) => {
+            setPlaying(!e.isFinished);
+            if (e.isFinished) {
+                audioRecorderPlayer.removePlayBackListener();
+            }
+        });
+        try {
+            console.log('startPlayer: ', path);
+            yield audioRecorderPlayer.startPlayer((0, file_1.toAbsolutePath)(path));
+        }
+        catch (err) {
+            console.log(err);
+        }
+    });
+    const handlePlay = () => __awaiter(void 0, void 0, void 0, function* () {
+        const imManager = (0, init_1.getImManager)();
+        if (!payload.localPath && payload.fileId && !downloading.current) {
+            // 下载文件
+            downloading.current = true;
+            const destPath = yield imManager.download({
+                fileId: payload.fileId,
+                resourceType: 'voice',
+                filename: payload.filename,
+            });
+            imManager.db.updateMessage({
+                messageSeq: messageSeq,
+                payload: Object.assign(Object.assign({}, payload), { localPath: destPath, read: true }),
+            });
+            imManager.store.dispatch(im_base_1.MessageActions.updateMessage(messageSeq, {
+                payload: Object.assign(Object.assign({}, payload), { localPath: destPath, read: true }),
+            }));
+            yield startPlayer(destPath);
+            return;
+        }
+        if (!payload.localPath || playing) {
+            return;
+        }
+        else {
+            // 更新已读状态
+            imManager.db.updateMessage({
+                messageSeq: messageSeq,
+                payload: Object.assign(Object.assign({}, payload), { read: true }),
+            });
+            imManager.store.dispatch(im_base_1.MessageActions.updateMessage(messageSeq, {
+                payload: Object.assign(Object.assign({}, payload), { read: true }),
+            }));
+            yield startPlayer(payload.localPath);
+        }
+    });
+    return (<react_native_1.View style={[styles.root, { flexDirection: direction === 'left' ? 'row' : 'row-reverse' }]}>
+        <PayloadWrapper_1.default showArrow={showArrow} direction={direction} onPress={handlePlay} onLongPress={onLongPress} style={[style, styles.popoverVoice, { width: voiceWidth + 15 }]}>
+            <react_native_1.Text style={styles.duration}>{second}''</react_native_1.Text>
+            <react_native_fast_image_1.default style={[
+            styles.voiceImage,
+            {
+                transform: [
+                    {
+                        rotateY: direction === 'left' ? '0deg' : '180deg',
+                    },
+                ],
+            },
+        ]} source={playing ? voiceLeftPlaying : voiceLeft}></react_native_fast_image_1.default>
+        </PayloadWrapper_1.default>
+        {!payload.read && direction === 'left' && <react_native_1.View style={styles.dot}/>}
+    </react_native_1.View>);
+};
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    popoverVoice: {
+        flexDirection: 'row',
+        padding: (0, rn_ui_1.dp)(9),
+    },
+    voiceImage: {
+        width: (0, rn_ui_1.dp)(24),
+        height: (0, rn_ui_1.dp)(18),
+    },
+    duration: {
+        fontSize: (0, rn_ui_1.dp)(13),
+        color: '#666',
+        alignSelf: 'center',
+    },
+    dot: {
+        width: (0, rn_ui_1.dp)(6),
+        height: (0, rn_ui_1.dp)(6),
+        borderRadius: (0, rn_ui_1.dp)(3),
+        backgroundColor: variables_1.default.red6,
+    }
+});
+exports.default = (0, react_1.memo)(PayloadVoice);