80 lines
2.1 KiB
TypeScript
80 lines
2.1 KiB
TypeScript
import {useState} from 'react'
|
|
import {Button, Dimensions, Pressable, Text, View} from 'react-native'
|
|
import DocumentPicker, {
|
|
DocumentPickerResponse,
|
|
types,
|
|
} from 'react-native-document-picker'
|
|
import {backgroundColor} from './constants'
|
|
import Item from './Item'
|
|
|
|
const buttonWidth = '45%'
|
|
|
|
export default function App() {
|
|
const [files, setFiles] = useState<DocumentPickerResponse[]>([])
|
|
const [selected, setSelected] = useState(0)
|
|
const [paused, setPaused] = useState(false)
|
|
|
|
const pick = async () => {
|
|
const picked = await DocumentPicker.pickMultiple({
|
|
type: [types.video, types.images],
|
|
})
|
|
setSelected(0)
|
|
console.log(`Picked ${picked.length} files.`)
|
|
setFiles(picked)
|
|
}
|
|
|
|
const prev = () => {
|
|
if (selected <= 0) return
|
|
setSelected(selected - 1)
|
|
setPaused(false)
|
|
}
|
|
|
|
const next = () => {
|
|
if (selected >= files.length - 1) return
|
|
setSelected(selected + 1)
|
|
setPaused(false)
|
|
}
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
backgroundColor,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
flexGrow: 1,
|
|
padding: 10,
|
|
}}>
|
|
{files.length > 0 ? (
|
|
<>
|
|
<Item
|
|
paused={paused}
|
|
setPaused={setPaused}
|
|
onLongPress={pick}
|
|
selected={selected}
|
|
files={files}
|
|
/>
|
|
<View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
|
|
<View style={{width: buttonWidth, marginRight: 10}}>
|
|
<Button title="Prev" disabled={selected <= 0} onPress={prev} />
|
|
</View>
|
|
<View style={{width: buttonWidth}}>
|
|
<Button
|
|
title="Next"
|
|
disabled={selected >= files.length - 1}
|
|
onPress={next}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</>
|
|
) : (
|
|
<Pressable
|
|
onPress={pick}
|
|
style={{height: '100%', justifyContent: 'center'}}>
|
|
<Text style={{color: 'white', fontSize: 24}}>Select video(s)...</Text>
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|