68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
import {useMemo, useState} from 'react'
|
|
import {Dimensions, Image, Pressable, Text, View} from 'react-native'
|
|
import {DocumentPickerResponse} from 'react-native-document-picker'
|
|
import Video from 'react-native-video'
|
|
|
|
export default function Item({
|
|
files,
|
|
onLongPress,
|
|
selected,
|
|
paused,
|
|
setPaused,
|
|
}: {
|
|
files: DocumentPickerResponse[]
|
|
onLongPress: () => void
|
|
selected: number
|
|
paused: boolean
|
|
setPaused: (value: boolean) => void
|
|
}) {
|
|
const [width, setWidth] = useState(0)
|
|
const screenHeight = Dimensions.get('screen').height
|
|
const file = useMemo(() => files[selected], [files, selected])
|
|
|
|
const video = (
|
|
<Pressable onLongPress={onLongPress} onPress={() => setPaused(!paused)}>
|
|
<Video
|
|
paused={paused}
|
|
style={{
|
|
height: screenHeight - screenHeight * 0.25,
|
|
width,
|
|
alignItems: 'center',
|
|
}}
|
|
source={{uri: file.uri}}
|
|
resizeMode="contain"
|
|
onLoad={response => {
|
|
setWidth(response.naturalSize.width)
|
|
}}
|
|
/>
|
|
</Pressable>
|
|
)
|
|
|
|
const image = (
|
|
<Pressable onLongPress={onLongPress}>
|
|
<Image
|
|
source={{
|
|
uri: file.uri,
|
|
width: 300,
|
|
height: screenHeight - screenHeight * 0.25,
|
|
}}
|
|
resizeMode="contain"
|
|
onLoad={({nativeEvent}) => setWidth(nativeEvent.source.width)}
|
|
/>
|
|
</Pressable>
|
|
)
|
|
|
|
return (
|
|
<View style={{alignItems: 'center'}}>
|
|
{file.type?.includes('video') ? video : image}
|
|
<Text
|
|
style={{
|
|
color: 'white',
|
|
margin: 10,
|
|
}}>
|
|
{file.name} ({selected + 1}/ {files.length})
|
|
</Text>
|
|
</View>
|
|
)
|
|
}
|