92 lines
2.4 KiB
JavaScript
92 lines
2.4 KiB
JavaScript
import { useContext } from 'reactn'
|
|
import { Pressable, View, Image, Text } from 'react-native'
|
|
import { Video, ResizeMode } from 'expo-video'
|
|
import { Fonts, gutters, Palette } from '../styles'
|
|
import Style, { mainBorderRadius } from '../styles/Style'
|
|
import { icons } from '../assets'
|
|
import { substringTextLength } from '../helpers'
|
|
import { WebViewContext } from '../providers/WebViewProvider.js'
|
|
|
|
const thumbnailStyle = {
|
|
width: 200,
|
|
height: 200,
|
|
borderRadius: mainBorderRadius / 2,
|
|
overflow: 'hidden',
|
|
}
|
|
|
|
const RenderChatFile = ({ uri, type = 'image', name = '', containerStyle = {} }, index) => {
|
|
const { setWebViewUrl } = useContext(WebViewContext)
|
|
|
|
return (
|
|
<View
|
|
key={index}
|
|
style={{
|
|
...Style.containerRow,
|
|
...containerStyle,
|
|
}}
|
|
>
|
|
{type === 'IMAGE' ? (
|
|
<Pressable>
|
|
<Image
|
|
alt={name}
|
|
source={{
|
|
uri,
|
|
}}
|
|
style={thumbnailStyle}
|
|
/>
|
|
</Pressable>
|
|
) : type === 'FILE' ? (
|
|
<Pressable
|
|
onPress={() => {
|
|
setWebViewUrl(uri)
|
|
}}
|
|
style={{
|
|
...Style.containerRow,
|
|
...Style.containerCenter,
|
|
backgroundColor: Palette.transparentPrimary,
|
|
padding: gutters / 2,
|
|
borderRadius: mainBorderRadius / 2,
|
|
}}
|
|
>
|
|
<Image
|
|
resizeMode="contain"
|
|
source={icons.attachment}
|
|
style={{
|
|
...Style.iconSmall,
|
|
marginRight: 5,
|
|
}}
|
|
/>
|
|
<Text
|
|
style={Fonts({
|
|
type: 'default',
|
|
style: {
|
|
color: Palette.white,
|
|
textDecorationLine: 'underline',
|
|
},
|
|
})}
|
|
>
|
|
{substringTextLength({ text: name, maxLength: 40 })}
|
|
</Text>
|
|
</Pressable>
|
|
) : type === 'VIDEO' ? (
|
|
<Video
|
|
style={{ ...thumbnailStyle }}
|
|
source={{
|
|
uri,
|
|
}}
|
|
// posterSource={{
|
|
// uri: thumbnailURI,
|
|
// }}
|
|
// usePoster={thumbnailURI ? true : false}
|
|
useNativeControls
|
|
resizeMode={ResizeMode.CONTAIN}
|
|
isLooping
|
|
// onPlaybackStatusUpdate={status => setStatus(() => status)}
|
|
/>
|
|
) : null}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default RenderChatFile
|