Swiper/Item.tsx

68 lines
1.6 KiB
TypeScript
Raw Normal View History

2022-12-18 23:15:36 +13:00
import {useMemo, useState} from 'react'
import {Dimensions, Image, Pressable, Text, View} from 'react-native'
import {DocumentPickerResponse, types} from 'react-native-document-picker'
2022-12-18 18:32:44 +13:00
import Video from 'react-native-video'
export default function Item({
2022-12-18 23:15:36 +13:00
files,
onLongPress,
2022-12-18 23:15:36 +13:00
selected,
paused,
setPaused,
}: {
2022-12-18 23:15:36 +13:00
files: DocumentPickerResponse[]
onLongPress: () => void
2022-12-18 23:15:36 +13:00
selected: number
paused: boolean
setPaused: (value: boolean) => void
}) {
2022-12-18 18:32:44 +13:00
const [width, setWidth] = useState(0)
2022-12-18 23:15:36 +13:00
const screenHeight = Dimensions.get('screen').height
const file = useMemo(() => files[selected], [files, selected])
2022-12-18 23:15:36 +13:00
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 (
2022-12-18 18:32:44 +13:00
<View style={{alignItems: 'center'}}>
2022-12-18 23:15:36 +13:00
{file.type?.includes('video') ? video : image}
<Text
2022-12-18 18:32:44 +13:00
style={{
color: 'white',
2022-12-18 23:15:36 +13:00
margin: 10,
}}>
2022-12-18 23:15:36 +13:00
{file.name} ({selected + 1}/ {files.length})
</Text>
</View>
2022-12-18 18:32:44 +13:00
)
}