94 lines
2.6 KiB
TypeScript
94 lines
2.6 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 Video from 'react-native-video'
|
|
import {backgroundColor} from './constants'
|
|
|
|
const buttonWidth = '45%'
|
|
|
|
export default function App() {
|
|
const [files, setFiles] = useState<DocumentPickerResponse[]>([])
|
|
const [selected, setSelected] = useState(0)
|
|
const [paused, setPaused] = useState(false)
|
|
const [width, setWidth] = useState(0)
|
|
|
|
const height = Dimensions.get('screen').height
|
|
|
|
const pick = async () => {
|
|
const picked = await DocumentPicker.pickMultiple({type: types.video})
|
|
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 ? (
|
|
<View style={{alignItems: 'center'}}>
|
|
<Pressable onLongPress={pick} onPress={() => setPaused(!paused)}>
|
|
<Video
|
|
paused={paused}
|
|
style={{
|
|
height: height - height * 0.25,
|
|
width,
|
|
alignItems: 'center',
|
|
}}
|
|
source={{uri: files[selected].uri}}
|
|
resizeMode="contain"
|
|
onLoad={response => {
|
|
setWidth(response.naturalSize.width)
|
|
}}
|
|
/>
|
|
</Pressable>
|
|
<Text
|
|
style={{
|
|
color: 'white',
|
|
margin: 10,
|
|
}}>
|
|
{files[selected].name} ({selected + 1}/ {files.length})
|
|
</Text>
|
|
<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>
|
|
</View>
|
|
) : (
|
|
<Pressable onPress={pick}>
|
|
<Text style={{color: 'white', fontSize: 24}}>Select video(s)...</Text>
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|