105 lines
2.4 KiB
JavaScript
105 lines
2.4 KiB
JavaScript
/**
|
|
* Sample React Native App
|
|
* https://github.com/facebook/react-native
|
|
* @flow
|
|
*/
|
|
|
|
import React, { Component } from "react";
|
|
import { Alert, StyleSheet, Text, View, Dimensions, TouchableOpacity } from "react-native";
|
|
import Video from "react-native-video";
|
|
|
|
const { height, width } = Dimensions.get("screen");
|
|
|
|
type Props = {};
|
|
|
|
type State = {
|
|
showLocal: boolean
|
|
};
|
|
|
|
function Button({ text, onPress }: { text: string, onPress: () => void }) {
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
style={styles.button}
|
|
>
|
|
<Text style={{color: 'white'}}>{text}</Text>
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
export default class App extends Component<Props, State> {
|
|
state = {
|
|
showLocal: false
|
|
}
|
|
render() {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Video
|
|
source={
|
|
this.state.showLocal ?
|
|
require('../basic/broadchurch.mp4') :
|
|
{
|
|
uri: "https://rawgit.com/mediaelement/mediaelement-files/master/big_buck_bunny.mp4"
|
|
}
|
|
}
|
|
ref={player => {
|
|
this.player = player;
|
|
}}
|
|
onEnd={() => {
|
|
this.player.seek(0);
|
|
}}
|
|
onError={(err) => {
|
|
Alert.alert(JSON.stringify(err))
|
|
}}
|
|
style={{ flex: 1, height, width }}
|
|
/>
|
|
<View style={styles.absoluteOverlay}>
|
|
<Button
|
|
onPress={async () => {
|
|
let response = await this.player.save();
|
|
let uri = response.uri;
|
|
console.warn("Download URI", uri);
|
|
}}
|
|
text="Save"
|
|
/>
|
|
<Button
|
|
onPress={() => {
|
|
this.setState(state => ({ showLocal: !state.showLocal }))
|
|
}}
|
|
text={this.state.showLocal ? "Show Remote" : "Show Local"}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: "#F5FCFF"
|
|
},
|
|
absoluteOverlay: {
|
|
flexDirection: 'row',
|
|
position: 'absolute',
|
|
top: 0,
|
|
width: '100%',
|
|
marginTop: 50,
|
|
},
|
|
button: {
|
|
padding: 10,
|
|
backgroundColor: '#9B2FAE',
|
|
borderRadius: 8,
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
marginHorizontal: 5,
|
|
},
|
|
welcome: {
|
|
fontSize: 20,
|
|
textAlign: "center",
|
|
margin: 10
|
|
}
|
|
});
|