From 0289e799ebc6d3accd47cf2c34e35b710866f08e Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Mon, 27 Nov 2017 18:50:30 -0200 Subject: [PATCH] tmp react-native-video-controls --- android/app/build.gradle | 4 +- .../com/rocketchatrn/MainApplication.java | 4 +- android/settings.gradle | 4 + app/actions/login.js | 3 +- app/containers/message/Audio.js | 57 +++++++++- app/containers/message/Card.js | 1 + app/containers/message/Video.js | 60 ++++++++++ app/containers/message/VideoModal.js | 83 ++++++++++++++ app/containers/message/index.js | 9 +- app/lib/rocketchat.js | 10 ++ app/views/RoomView.js | 2 +- ios/RocketChatRN.xcodeproj/project.pbxproj | 103 ++++++++++++++++++ package-lock.json | 27 +++++ package.json | 7 +- 14 files changed, 359 insertions(+), 15 deletions(-) create mode 100644 app/containers/message/Video.js create mode 100644 app/containers/message/VideoModal.js diff --git a/android/app/build.gradle b/android/app/build.gradle index 808336bbd..5a6490d8e 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -144,13 +144,15 @@ android { } dependencies { + compile project(':react-native-sound') + compile project(':react-native-video') compile project(':react-native-svg') compile project(':react-native-image-picker') compile project(':react-native-vector-icons') compile project(':react-native-fetch-blob') compile project(':react-native-zeroconf') compile project(':realm') - compile project(':react-native-push-notification') + compile project(':react-native-push-notification') compile fileTree(dir: "libs", include: ["*.jar"]) compile "com.android.support:appcompat-v7:23.0.1" compile "com.facebook.react:react-native:+" // From node_modules diff --git a/android/app/src/main/java/com/rocketchatrn/MainApplication.java b/android/app/src/main/java/com/rocketchatrn/MainApplication.java index e81c036ec..d4ef8c951 100644 --- a/android/app/src/main/java/com/rocketchatrn/MainApplication.java +++ b/android/app/src/main/java/com/rocketchatrn/MainApplication.java @@ -14,6 +14,7 @@ import com.facebook.react.ReactPackage; import com.facebook.react.shell.MainReactPackage; import com.facebook.soloader.SoLoader; import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage; +import com.brentvatne.react.ReactVideoPackage; import java.util.Arrays; import java.util.List; @@ -35,7 +36,8 @@ public class MainApplication extends Application implements ReactApplication { new RNFetchBlobPackage(), new ZeroconfReactPackage(), new RealmReactPackage(), - new ReactNativePushNotificationPackage() + new ReactNativePushNotificationPackage(), + new ReactVideoPackage() ); } }; diff --git a/android/settings.gradle b/android/settings.gradle index 610815138..dc59a27ec 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -1,4 +1,8 @@ rootProject.name = 'RocketChatRN' +include ':react-native-sound' +project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android') +include ':react-native-video' +project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android') include ':react-native-svg' project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android') include ':react-native-image-picker' diff --git a/app/actions/login.js b/app/actions/login.js index c603f42bd..4c53c301e 100644 --- a/app/actions/login.js +++ b/app/actions/login.js @@ -76,8 +76,7 @@ export function loginFailure(err) { export function setToken(user = {}) { return { type: types.LOGIN.SET_TOKEN, - token: user.token, - user + ...user }; } diff --git a/app/containers/message/Audio.js b/app/containers/message/Audio.js index 5912ae767..8f2e19cd2 100644 --- a/app/containers/message/Audio.js +++ b/app/containers/message/Audio.js @@ -1,7 +1,15 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { View, Text, StyleSheet } from 'react-native'; +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 @@ -12,11 +20,54 @@ export default class Audio extends React.PureComponent { server: PropTypes.string.isRequired } - render() { + 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 Loading...; + } + // this.getCurrentTime(); return ( - alert('aisudhasiudh')}>{`${ server }${ JSON.parse(JSON.stringify(file.audio_url)) }`} + this.onPress()} + > + {this.state.paused ? 'Play' : 'Pause'} + ); } } diff --git a/app/containers/message/Card.js b/app/containers/message/Card.js index cef86b8ed..7ffaa1b24 100644 --- a/app/containers/message/Card.js +++ b/app/containers/message/Card.js @@ -32,6 +32,7 @@ export default class Cards extends React.PureComponent { this.state = { modalVisible: false }; + // TODO RocketChat.getUserToken().then((token) => { this.setState({ img: `${ this.props.base }${ this.props.data.image_url }?rc_uid=${ user._id }&rc_token=${ token }` }); }); diff --git a/app/containers/message/Video.js b/app/containers/message/Video.js new file mode 100644 index 000000000..6eb3a8deb --- /dev/null +++ b/app/containers/message/Video.js @@ -0,0 +1,60 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; +import { connect } from 'react-redux'; + +import VideoModal from './VideoModal'; + +const styles = StyleSheet.create({ + container: { + flex: 1 + } +}); + +@connect(state => ({ + server: state.server.server, + user: state.login.user +})) +export default class Video extends React.PureComponent { + static propTypes = { + file: PropTypes.object.isRequired, + server: PropTypes.string.isRequired, + user: PropTypes.object.isRequired + } + + constructor(props) { + super(props); + const { server, file, user } = this.props; + this.state = { + modalVisible: false, + uri: `${ server }${ file.video_url }?rc_uid=${ user.id }&rc_token=${ user.token }` + }; + // this.setState({ img: `${ this.props.base }${ this.props.data.image_url }?rc_uid=${ user._id }&rc_token=${ token }` }); + console.warn(this.state.uri) + } + + toggleModal() { + this.setState({ + modalVisible: !this.state.modalVisible + }); + } + + render() { + const { modalVisible, uri } = this.state; + return ( + + this.toggleModal()} + > + Open + + this.toggleModal()} + /> + + ); + } +} diff --git a/app/containers/message/VideoModal.js b/app/containers/message/VideoModal.js new file mode 100644 index 000000000..54c6fd16b --- /dev/null +++ b/app/containers/message/VideoModal.js @@ -0,0 +1,83 @@ +import React from 'react'; +import { Text } from 'react-native'; +import PropTypes from 'prop-types'; +import Modal from 'react-native-modal'; +import VideoPlayer from 'react-native-video-controls'; +import Video from 'react-native-video'; +import RocketChat from '../../lib/rocketchat'; + +import { connect } from 'react-redux'; +import { setToken } from '../../actions/login'; + + +const styles = { + modal: { + margin: 0, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#000' + }, backgroundVideo: { + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + }, +}; + +@connect(state => ({ + server: state.server.server, + user: state.login.user +}), dispatch => ({ + setToken: token => dispatch(setToken(token)) +})) +export default class extends React.PureComponent { + static propTypes = { + uri: PropTypes.string.isRequired, + isVisible: PropTypes.bool, + onClose: PropTypes.func.isRequired + } + + constructor(props) { + super(props); + this.state = { + uri: '', + loading: true + }; + } + + async componentWillMount() { + const newUri = await RocketChat.resolveFile(this.props.uri); + console.warn(newUri); + this.setState({ uri: newUri, loading: false }); + // this.props.setToken({token: newUri}); + } + + renderVideo() { + if (this.state.loading) { + return Loading...; + } + + return ( +