Permalink
Browse files

add send video support (#1010)

* add send video message support using react-native-video

* update README

* Update MessageVideo.js

disabling eslint no-use-before-define for styles variable
  • Loading branch information...
maherzaidoune authored and sibelius committed Dec 3, 2018
1 parent 6377796 commit ae53c055600f26a4763828e5c603cdc79f89cb1e
Showing with 76 additions and 1 deletion.
  1. +1 −0 README.md
  2. +2 −1 package.json
  3. +15 −0 src/Bubble.js
  4. +2 −0 src/GiftedChat.js
  5. +56 −0 src/MessageVideo.js
@@ -187,6 +187,7 @@ e.g. System Message
* **`renderMessageText`** _(Function)_ - Custom message text
* **`renderMessageImage`** _(Function)_ - Custom message image
* **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://facebook.github.io/react-native/docs/image.html) component created by the default `renderMessageImage`
* **`videoProps`** _(Object)_ - Extra props to be passed to the [`<Video>`](https://github.com/react-native-community/react-native-video) component created by the default `renderMessageVideo`
* **`lightboxProps`** _(Object)_ - Extra props to be passed to the `MessageImage`'s [Lightbox](https://github.com/oblador/react-native-lightbox)
* **`renderCustomView`** _(Function)_ - Custom view inside the bubble
* **`renderDay`** _(Function)_ - Custom day above a message
@@ -70,7 +70,8 @@
"react-native-communications": "2.2.1",
"react-native-lightbox": "^0.7.0",
"react-native-parsed-text": "^0.0.20",
"uuid": "3.3.0"
"uuid": "3.3.0",
"react-native-video": "^3.2.1"
},
"peerDependencies": {
"prop-types": "*",
@@ -10,6 +10,7 @@ import Time from './Time';
import Color from './Color';
import { isSameUser, isSameDay } from './utils';
import MessageVideo from './MessageVideo';
export default class Bubble extends React.PureComponent {
@@ -90,6 +91,17 @@ export default class Bubble extends React.PureComponent {
return null;
}
renderMessageVideo() {
if (this.props.currentMessage.video) {
const { containerStyle, wrapperStyle, ...messageVideoProps } = this.props;
if (this.props.renderMessageVideo) {
return this.props.renderMessageVideo(messageVideoProps);
}
return <MessageVideo {...messageVideoProps} />;
}
return null;
}
renderTicks() {
const { currentMessage } = this.props;
if (this.props.renderTicks) {
@@ -163,6 +175,7 @@ export default class Bubble extends React.PureComponent {
<View>
{this.renderCustomView()}
{this.renderMessageImage()}
{this.renderMessageVideo()}
{this.renderMessageText()}
<View style={[styles.bottom, this.props.bottomContainerStyle[this.props.position]]}>
{this.renderUsername()}
@@ -251,6 +264,7 @@ Bubble.defaultProps = {
touchableProps: {},
onLongPress: null,
renderMessageImage: null,
renderMessageVideo: null,
renderMessageText: null,
renderCustomView: null,
renderUsername: null,
@@ -278,6 +292,7 @@ Bubble.propTypes = {
touchableProps: PropTypes.object,
onLongPress: PropTypes.func,
renderMessageImage: PropTypes.func,
renderMessageVideo: PropTypes.func,
renderMessageText: PropTypes.func,
renderCustomView: PropTypes.func,
renderUsernameOnMessage: PropTypes.bool,
@@ -534,6 +534,7 @@ GiftedChat.defaultProps = {
renderMessageText: null,
renderMessageImage: null,
imageProps: {},
videoProps: {},
lightboxProps: {},
textInputProps: {},
listViewProps: {},
@@ -588,6 +589,7 @@ GiftedChat.propTypes = {
renderMessageText: PropTypes.func,
renderMessageImage: PropTypes.func,
imageProps: PropTypes.object,
videoProps: PropTypes.object,
lightboxProps: PropTypes.object,
renderCustomView: PropTypes.func,
renderDay: PropTypes.func,
@@ -0,0 +1,56 @@
import PropTypes from 'prop-types';
import React from 'react';
import { StyleSheet, View, ViewPropTypes } from 'react-native';
import Video from 'react-native-video';
export default function MessageVideo({
containerStyle,
videoProps,
videoStyle,
currentMessage,
}) {
return (
// eslint-disable-next-line no-use-before-define
<View style={[styles.container, containerStyle]}>
<Video
{...videoProps}
ref={(r) => { this.player = r; }}
source={{ uri: currentMessage.video }}
style={videoStyle}
resizeMode="cover"
onBuffer={this.onBuffer}
onLoadStart={this.onLoadStart}
onLoad={this.onLoad}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
},
});
MessageVideo.defaultProps = {
currentMessage: {
// video: null,
},
containerStyle: {},
videoStyle: {
width: 150,
height: 100,
borderRadius: 13,
margin: 3,
resizeMode: 'cover',
},
videoProps: {},
};
MessageVideo.propTypes = {
currentMessage: PropTypes.object,
containerStyle: ViewPropTypes.style,
videoStyle: ViewPropTypes.style,
videoProps: PropTypes.object,
};

0 comments on commit ae53c05

Please sign in to comment.