@smart-link/rn-im 1.0.22 → 1.0.24

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

@@ -1,27 +1,3 @@
-"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)
@@ -33,45 +9,41 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 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 useDownloadSource_1 = __importDefault(require("../../../../hooks/useDownloadSource"));
-const file_1 = require("../../../../utils/file");
-const { width: screenWidth } = react_native_1.Dimensions.get('window');
+import React, { memo, useEffect } from 'react';
+import { Dimensions, View } from 'react-native';
+import { SvgFromUri } from 'react-native-svg';
+import { calculate } from '../../../../utils/golden-rectangle';
+import { borderStyle, shadowStyle } from '../../../../components/styles';
+import { dp } from '@smart-link/rn-ui';
+import PayloadWrapper from './PayloadWrapper';
+import Image from 'react-native-fast-image';
+import useDownloadSource from "../../../../hooks/useDownloadSource";
+import { toAbsolutePath } from "../../../../utils/file";
+const { width: screenWidth } = Dimensions.get('window');
 const PayloadPicture = (_a) => {
     var { payload, onLoad } = _a, retProps = __rest(_a, ["payload", "onLoad"]);
     const ext = payload.filename.split('.').pop();
-    const localPath = (0, useDownloadSource_1.default)(payload);
-    (0, react_1.useEffect)(() => {
+    const localPath = useDownloadSource(payload);
+    useEffect(() => {
         if (localPath) {
             onLoad === null || onLoad === void 0 ? void 0 : onLoad(localPath);
         }
     }, [onLoad, localPath]);
-    const size = (0, golden_rectangle_1.calculate)(payload.height || (0, rn_ui_1.dp)(163), payload.width || (0, rn_ui_1.dp)(100), 200);
+    const size = calculate(payload.height || dp(163), payload.width || dp(100), 200);
     if (!localPath) {
-        return <react_native_1.View style={[styles_1.borderStyle, size, { alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0, 0.8)' }]}/>;
+        return <View style={[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={localPath} viewBox={'0 0 1024 1024'} width={screenWidth * 0.4} height={screenWidth * 0.4}/>;
+        content = <SvgFromUri style={[borderStyle]} uri={localPath} 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={{
-                uri: (0, file_1.toAbsolutePath)(localPath),
+        content = <Image resizeMode="cover" style={[borderStyle, size]} source={{
+                uri: toAbsolutePath(localPath),
             }}/>;
     }
-    return <PayloadWrapper_1.default style={styles_1.shadowStyle} {...retProps}>
+    return <PayloadWrapper style={shadowStyle} {...retProps}>
         {content}
-    </PayloadWrapper_1.default>;
+    </PayloadWrapper>;
 };
-exports.default = (0, react_1.memo)(PayloadPicture);
+export default memo(PayloadPicture);

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

@@ -1,100 +1,72 @@
-"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);
+import React, { memo } from 'react';
+import useTranslation from "../../../../hooks/useTranslation";
+import { dp } from "@smart-link/rn-ui";
+import { Linking, StyleSheet, Text, View } from "react-native";
+import PayloadWrapper from "./PayloadWrapper";
+import { borderStyle, shadowStyle } from "../../../../components/styles";
+import Favicon from "../../../../components/Favicon";
+const size = dp(45);
 // const backgroundColor = '#fff';
 const borderColor = '#eee';
 const PayloadShare = ({ payload, direction, showArrow = true, style, onLongPress }) => {
-    const { t } = (0, useTranslation_1.default)();
+    const { t } = useTranslation();
     const { title, url, description } = payload;
-    return (<PayloadWrapper_1.default direction={direction} showArrow={showArrow} style={[style, styles.share]} onPress={() => {
+    return (<PayloadWrapper 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);
+                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}/>
+            <View style={styles.card}>
+                <Text style={styles.title} numberOfLines={2}>{title}</Text>
+                <View style={styles.h5}/>
+                <View style={styles.info}>
+                    <Text style={styles.description} numberOfLines={3}>{description}</Text>
+                    <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>);
+                    <Favicon url={url} size={size}/>
+                </View>
+            </View>
+            <View style={styles.line}/>
+            <Text style={styles.shareName}>{t('shareLink')}</Text>
+        </PayloadWrapper>);
 };
-const styles = react_native_1.StyleSheet.create({
+const styles = 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 }),
+        paddingHorizontal: dp(10), paddingTop: dp(10), paddingBottom: dp(5) }, shadowStyle), borderStyle), { borderColor }),
     card: {},
     title: {
-        width: (0, rn_ui_1.dp)(230),
+        width: dp(230),
         color: '#333',
-        lineHeight: (0, rn_ui_1.dp)(20),
-        fontSize: (0, rn_ui_1.dp)(14),
+        lineHeight: dp(20),
+        fontSize: dp(14),
     },
     description: {
-        width: (0, rn_ui_1.dp)(180),
+        width: dp(180),
         color: '#999',
-        lineHeight: (0, rn_ui_1.dp)(18),
-        fontSize: (0, rn_ui_1.dp)(12),
+        lineHeight: dp(18),
+        fontSize: dp(12),
     },
     info: {
         flexDirection: 'row',
     },
     h5: {
-        height: (0, rn_ui_1.dp)(5),
+        height: dp(5),
     },
     w10: {
-        width: (0, rn_ui_1.dp)(10),
+        width: dp(10),
     },
     line: {
-        marginTop: (0, rn_ui_1.dp)(10),
-        marginBottom: (0, rn_ui_1.dp)(5),
+        marginTop: dp(10),
+        marginBottom: dp(5),
         backgroundColor: '#eee',
         width: '100%',
-        height: (0, rn_ui_1.dp)(1),
+        height: dp(1),
     },
     shareName: {
         color: '#777',
-        paddingLeft: (0, rn_ui_1.dp)(3),
-        fontSize: (0, rn_ui_1.dp)(13),
+        paddingLeft: dp(3),
+        fontSize: dp(13),
     }
 });
-exports.default = (0, react_1.memo)(PayloadShare);
+export default memo(PayloadShare);

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

@@ -1,72 +1,44 @@
-"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"));
+import React, { memo } from 'react';
+import { Dimensions, StyleSheet, Linking } from 'react-native';
+import { borderStyle, plain, shadowStyle } from '../../../../components/styles';
+import { ActionSheet, dp, Toast } from '@smart-link/rn-ui';
+import TextMixQuoteMessage from '../TextMixQuoteMessage';
+import useTranslation from '../../../../hooks/useTranslation';
+import { addContacts, callPhone, copyPhone } from '../../../../utils/phone';
+import PayloadWrapper from './PayloadWrapper';
+import { getImManager } from '../../../../init';
+import { MessagePanelActions } from '@smart-link/im-base';
+import Clipboard from '@react-native-clipboard/clipboard';
 const PayloadText = ({ payload, onLongPress, onPress, isRecord, showArrow = true, direction, style }) => {
-    const { t } = (0, useTranslation_1.default)();
+    const { t } = useTranslation();
     const { text, quote } = payload;
     const onLongPressPhone = (phone) => {
-        rn_ui_1.ActionSheet.open({
+        ActionSheet.open({
             title: phone + " " + t('mayPhone'),
             onClose: () => {
-                rn_ui_1.ActionSheet.destroy();
+                ActionSheet.destroy();
             },
             options: [
                 {
                     text: t('copy'),
                     onPress: () => {
-                        (0, phone_1.copyPhone)(phone);
-                        rn_ui_1.ActionSheet.destroy();
-                        rn_ui_1.Toast.info(t('copied'));
+                        copyPhone(phone);
+                        ActionSheet.destroy();
+                        Toast.info(t('copied'));
                     }
                 },
                 {
                     text: t('callPhone'),
                     onPress: () => {
-                        (0, phone_1.callPhone)(phone);
-                        rn_ui_1.ActionSheet.destroy();
+                        callPhone(phone);
+                        ActionSheet.destroy();
                     },
                 },
                 {
                     text: t('addToContacts'),
                     onPress: () => {
-                        (0, phone_1.addContacts)(phone);
-                        rn_ui_1.ActionSheet.destroy();
+                        addContacts(phone);
+                        ActionSheet.destroy();
                     }
                 }
             ],
@@ -76,25 +48,25 @@ const PayloadText = ({ payload, onLongPress, onPress, isRecord, showArrow = true
         });
     };
     const onLongPressURL = (url) => {
-        rn_ui_1.ActionSheet.open({
+        ActionSheet.open({
             title: url,
             onClose: () => {
-                rn_ui_1.ActionSheet.destroy();
+                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'));
+                        Linking.openURL(url);
+                        ActionSheet.destroy();
+                        Toast.info(t('copied'));
                     }
                 },
                 {
                     text: t('copyURL'),
                     onPress: () => {
-                        clipboard_1.default.setString(url);
-                        rn_ui_1.ActionSheet.destroy();
+                        Clipboard.setString(url);
+                        ActionSheet.destroy();
                     },
                 },
             ],
@@ -109,24 +81,24 @@ const PayloadText = ({ payload, onLongPress, onPress, isRecord, showArrow = true
             onPress === null || onPress === void 0 ? void 0 : onPress();
             return;
         }
-        const imManager = (0, init_1.getImManager)();
-        imManager.store.dispatch(im_base_1.MessagePanelActions.onPressQuote(imManager, quoteMessageSeq));
+        const imManager = getImManager();
+        imManager.store.dispatch(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>);
+    return (<PayloadWrapper 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}/>
+        </PayloadWrapper>);
 };
-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),
+const styles = StyleSheet.create({
+    popoverTextMix: Object.assign(Object.assign({ alignSelf: 'flex-start', maxWidth: Dimensions.get('window').width - 120, padding: dp(8) }, borderStyle), shadowStyle),
     h5: {
-        height: (0, rn_ui_1.dp)(5),
+        height: dp(5),
     },
     text: {
         color: '#222',
-        fontSize: (0, rn_ui_1.dp)(14),
+        fontSize: dp(14),
     },
     quote: {
-        padding: (0, rn_ui_1.dp)(6)
+        padding: dp(6)
     },
 });
-exports.default = (0, react_1.memo)(PayloadText);
+export default memo(PayloadText);

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

@@ -1,67 +1,39 @@
-"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("../UploadProgress"));
-const PayloadWrapper_1 = __importDefault(require("./PayloadWrapper"));
-const init_1 = require("../../../../init");
-const react_native_fast_image_1 = __importDefault(require("react-native-fast-image"));
+import React, { memo } from 'react';
+import { MessageStatus, numberToTime } from '@smart-link/im-base';
+import { dp } from '@smart-link/rn-ui';
+import { StyleSheet, View, Text } from 'react-native';
+import { getDownloadUrl } from '../../../../api/file';
+import { calculate } from '../../../../utils/golden-rectangle';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { loadVideoPlayer } from '../../../../slice/video/video.action';
+import { borderStyle, shadowStyle } from '../../../../components/styles';
+import UploadProgress from '../UploadProgress';
+import PayloadWrapper from './PayloadWrapper';
+import { getImManager } from '../../../../init';
+import Image from 'react-native-fast-image';
 const PayloadVideo = ({ messageStatus, messageSeq, payload, sendSize = 0, isRecord, onLongPress }) => {
     const { width, height } = payload;
-    const size = (0, golden_rectangle_1.calculate)(height || (0, rn_ui_1.dp)(163), width || (0, rn_ui_1.dp)(100));
+    const size = calculate(height || dp(163), width || dp(100));
     const thumbnail = payload.imagePath ? { uri: 'file://' + payload.imagePath }
-        : { uri: (0, file_1.getDownloadUrl)(payload.imageFileId) };
-    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)({
+        : { uri: getDownloadUrl(payload.imageFileId) };
+    return (<PayloadWrapper style={[styles.root, shadowStyle, borderStyle, size]} onPress={() => {
+            getImManager().store.dispatch(loadVideoPlayer({
                 messageSeq,
                 payload,
                 isRecord
             }));
         }} onLongPress={onLongPress}>
-            {payload.imagePath || payload.imageFileId ? <react_native_fast_image_1.default style={[size, styles_1.borderStyle]} resizeMode='cover' source={thumbnail}/> : <react_native_1.View style={[size, styles_1.borderStyle, { backgroundColor: '#000' }]}/>}
-            <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>);
+            {payload.imagePath || payload.imageFileId ? <Image style={[size, borderStyle]} resizeMode='cover' source={thumbnail}/> : <View style={[size, borderStyle, { backgroundColor: '#000' }]}/>}
+            <UploadProgress show={messageStatus === MessageStatus.EMITTING && !payload.fileId && payload.size > 0} width={size.width} sendSize={sendSize} totalSize={payload.size}/>
+            <View style={styles.playView}>
+                <Icon size={30} name='play-circle-outline' color='#fff'/>
+            </View>
+            <View style={{ position: 'absolute', bottom: dp(5), right: dp(5) }}>
+                <Text style={{ fontSize: dp(12), color: '#fff' }}>{numberToTime(payload.duration)}</Text>
+            </View>
+        </PayloadWrapper>);
 };
-const styles = react_native_1.StyleSheet.create({
+const styles = StyleSheet.create({
     root: {
         backgroundColor: 'rgba(0,0,0, 0.8)',
     },
@@ -75,4 +47,4 @@ const styles = react_native_1.StyleSheet.create({
         alignItems: 'center',
     },
 });
-exports.default = (0, react_1.memo)(PayloadVideo);
+export default memo(PayloadVideo);