tmp
This commit is contained in:
Diego Mello
parent
133559ff7a
commit
b35672960d
|
|
@ -1,73 +1,150 @@
|
||||||
|
// import React from 'react';
|
||||||
|
// import PropTypes from 'prop-types';
|
||||||
|
// import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
||||||
|
// import { connect } from 'react-redux';
|
||||||
|
// import Sound from 'react-native-sound';
|
||||||
|
|
||||||
|
// const styles = StyleSheet.create({
|
||||||
|
// container: {
|
||||||
|
// flex: 1,
|
||||||
|
// justifyContent: 'center'
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// @connect(state => ({
|
||||||
|
// server: state.server.server
|
||||||
|
// }))
|
||||||
|
// export default class Audio extends React.PureComponent {
|
||||||
|
// static propTypes = {
|
||||||
|
// file: PropTypes.object.isRequired,
|
||||||
|
// server: PropTypes.string.isRequired
|
||||||
|
// }
|
||||||
|
|
||||||
|
// constructor(props) {
|
||||||
|
// super(props);
|
||||||
|
// this.state = {
|
||||||
|
// paused: true,
|
||||||
|
// loading: true
|
||||||
|
// };
|
||||||
|
// const { file, server } = this.props;
|
||||||
|
// const tmp = 'https://s3.amazonaws.com/hanselminutes/hanselminutes_0001.mp3';
|
||||||
|
// const uri = tmp;
|
||||||
|
// this.sound = new Sound(uri, undefined, (error) => {
|
||||||
|
// if (error) {
|
||||||
|
// console.warn(error);
|
||||||
|
// } else {
|
||||||
|
// this.setState({ loading: false });
|
||||||
|
// // console.log('Playing sound');
|
||||||
|
// // sound.play(() => {
|
||||||
|
// // // Release when it's done so we're not using up resources
|
||||||
|
// // sound.release();
|
||||||
|
// // });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// onPress() {
|
||||||
|
// if (this.state.paused) {
|
||||||
|
// this.sound.play();
|
||||||
|
// } else {
|
||||||
|
// this.sound.pause();
|
||||||
|
// }
|
||||||
|
// this.setState({ paused: !this.state.paused });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // getCurrentTime() {
|
||||||
|
// // this.sound.getCurrentTime(seconds => console.warn(seconds));
|
||||||
|
// // }
|
||||||
|
|
||||||
|
// render() {
|
||||||
|
// if (this.state.loading) {
|
||||||
|
// return <Text>Loading...</Text>;
|
||||||
|
// }
|
||||||
|
// // this.getCurrentTime();
|
||||||
|
// return (
|
||||||
|
// <TouchableOpacity
|
||||||
|
// style={styles.container}
|
||||||
|
// onPress={() => this.onPress()}
|
||||||
|
// >
|
||||||
|
// <Text>{this.state.paused ? 'Play' : 'Pause'}</Text>
|
||||||
|
// </TouchableOpacity>
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
import { View, StyleSheet, TouchableOpacity, Image, Text } from 'react-native';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import Sound from 'react-native-sound';
|
import Modal from 'react-native-modal';
|
||||||
|
import VideoPlayer from 'react-native-video-controls';
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
justifyContent: 'center'
|
height: 100,
|
||||||
|
margin: 5
|
||||||
|
},
|
||||||
|
modal: {
|
||||||
|
margin: 0,
|
||||||
|
backgroundColor: '#000'
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
flex: 1,
|
||||||
|
width: null,
|
||||||
|
height: null,
|
||||||
|
resizeMode: 'contain'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@connect(state => ({
|
@connect(state => ({
|
||||||
server: state.server.server
|
server: state.server.server,
|
||||||
|
user: state.login.user
|
||||||
}))
|
}))
|
||||||
export default class Audio extends React.PureComponent {
|
export default class Audio extends React.PureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
file: PropTypes.object.isRequired,
|
file: PropTypes.object.isRequired,
|
||||||
server: PropTypes.string.isRequired
|
server: PropTypes.string.isRequired,
|
||||||
|
user: PropTypes.object.isRequired
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
const { server, file, user } = this.props;
|
||||||
this.state = {
|
this.state = {
|
||||||
paused: true,
|
isVisible: false,
|
||||||
loading: true
|
uri: `${ server }${ file.audio_url }?rc_uid=${ user.id }&rc_token=${ user.token }`
|
||||||
};
|
};
|
||||||
const { file, server } = this.props;
|
}
|
||||||
const tmp = 'https://s3.amazonaws.com/hanselminutes/hanselminutes_0001.mp3';
|
|
||||||
const uri = tmp;
|
toggleModal() {
|
||||||
this.sound = new Sound(uri, undefined, (error) => {
|
this.setState({
|
||||||
if (error) {
|
isVisible: !this.state.isVisible
|
||||||
console.warn(error);
|
|
||||||
} else {
|
|
||||||
this.setState({ loading: false });
|
|
||||||
// console.log('Playing sound');
|
|
||||||
// sound.play(() => {
|
|
||||||
// // Release when it's done so we're not using up resources
|
|
||||||
// sound.release();
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
onPress() {
|
|
||||||
if (this.state.paused) {
|
|
||||||
this.sound.play();
|
|
||||||
} else {
|
|
||||||
this.sound.pause();
|
|
||||||
}
|
|
||||||
this.setState({ paused: !this.state.paused });
|
|
||||||
}
|
|
||||||
|
|
||||||
// getCurrentTime() {
|
|
||||||
// this.sound.getCurrentTime(seconds => console.warn(seconds));
|
|
||||||
// }
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (this.state.loading) {
|
const { isVisible, uri } = this.state;
|
||||||
return <Text>Loading...</Text>;
|
|
||||||
}
|
|
||||||
// this.getCurrentTime();
|
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity
|
<View>
|
||||||
style={styles.container}
|
<TouchableOpacity
|
||||||
onPress={() => this.onPress()}
|
style={styles.container}
|
||||||
>
|
onPress={() => this.toggleModal()}
|
||||||
<Text>{this.state.paused ? 'Play' : 'Pause'}</Text>
|
>
|
||||||
</TouchableOpacity>
|
<Text>AUDIO</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Modal
|
||||||
|
isVisible={isVisible}
|
||||||
|
style={styles.modal}
|
||||||
|
supportedOrientations={['portrait', 'landscape']}
|
||||||
|
>
|
||||||
|
<VideoPlayer
|
||||||
|
source={{ uri }}
|
||||||
|
onBack={() => this.toggleModal()}
|
||||||
|
disableVolume
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue