- Video modal removed

- Temp thumb
This commit is contained in:
Diego Mello 2017-11-28 11:09:14 -02:00
parent a1800a602b
commit 133559ff7a
2 changed files with 34 additions and 57 deletions

View File

@ -1,13 +1,25 @@
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 } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Modal from 'react-native-modal';
import VideoModal from './VideoModal'; import VideoPlayer from 'react-native-video-controls';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1 flex: 1,
height: 100,
margin: 5
},
modal: {
margin: 0,
backgroundColor: '#000'
},
image: {
flex: 1,
width: null,
height: null,
resizeMode: 'contain'
} }
}); });
@ -26,32 +38,41 @@ export default class Video extends React.PureComponent {
super(props); super(props);
const { server, file, user } = this.props; const { server, file, user } = this.props;
this.state = { this.state = {
modalVisible: false, isVisible: false,
uri: `${ server }${ file.video_url }?rc_uid=${ user.id }&rc_token=${ user.token }` uri: `${ server }${ file.video_url }?rc_uid=${ user.id }&rc_token=${ user.token }`
}; };
} }
toggleModal() { toggleModal() {
this.setState({ this.setState({
modalVisible: !this.state.modalVisible isVisible: !this.state.isVisible
}); });
} }
render() { render() {
const { modalVisible, uri } = this.state; const { isVisible, uri } = this.state;
return ( return (
<View> <View>
<TouchableOpacity <TouchableOpacity
style={styles.container} style={styles.container}
onPress={() => this.toggleModal()} onPress={() => this.toggleModal()}
> >
<Text>Open</Text> <Image
source={require('../../images/logo.png')}
style={styles.image}
/>
</TouchableOpacity> </TouchableOpacity>
<VideoModal <Modal
uri={uri} isVisible={isVisible}
isVisible={modalVisible} style={styles.modal}
onClose={() => this.toggleModal()} supportedOrientations={['portrait', 'landscape']}
/> >
<VideoPlayer
source={{ uri }}
onBack={() => this.toggleModal()}
disableVolume
/>
</Modal>
</View> </View>
); );
} }

View File

@ -1,44 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import Modal from 'react-native-modal';
import VideoPlayer from 'react-native-video-controls';
const styles = {
modal: {
margin: 0,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000'
}
};
export default class extends React.PureComponent {
static propTypes = {
uri: PropTypes.string.isRequired,
isVisible: PropTypes.bool,
onClose: PropTypes.func.isRequired
}
renderVideo() {
return (
<VideoPlayer
source={{ uri: this.props.uri }}
onBack={this.props.onClose}
disableVolume
/>
);
}
render() {
const { isVisible } = this.props;
return (
<Modal
isVisible={isVisible}
style={styles.modal}
supportedOrientations={['portrait', 'landscape']}
>
{this.renderVideo()}
</Modal>
);
}
}