[Snyk] Fix for 1 vulnerabilities

README.md

@@ -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

example-pusher-chatkit/.snyk

@@ -0,0 +1,8 @@
+# Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities.
+version: v1.13.5
+ignore: {}
+# patches apply the minimum changes required to fix a vulnerability
+patch:
+  'npm:lodash:20180130':
+    - react-native > plist > xmlbuilder > lodash:
+        patched: '2019-10-16T14:03:49.763Z'

example-pusher-chatkit/package.json

@@ -4,13 +4,16 @@
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
-    "test": "jest"
+    "test": "jest",
+    "snyk-protect": "snyk protect",
+    "prepare": "npm run snyk-protect"
   },
   "dependencies": {
     "@pusher/chatkit": "^0.7.12",
     "react": "16.3.1",
-    "react-native": "0.55.4",
-    "react-native-gifted-chat": "^0.4.3"
+    "react-native": "0.60.0",
+    "react-native-gifted-chat": "^0.4.3",
+    "snyk": "^1.290.1"
   },
   "devDependencies": {
     "babel-jest": "22.4.3",
@@ -20,5 +23,6 @@
   },
   "jest": {
     "preset": "react-native"
-  }
+  },
+  "snyk": true
 }

package.json

@@ -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": "*",

src/Bubble.js

@@ -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) {
@@ -146,6 +158,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.renderTime()}
@@ -222,6 +235,7 @@ Bubble.defaultProps = {
   touchableProps: {},
   onLongPress: null,
   renderMessageImage: null,
+  renderMessageVideo: null,
   renderMessageText: null,
   renderCustomView: null,
   renderTicks: null,
@@ -247,6 +261,7 @@ Bubble.propTypes = {
   touchableProps: PropTypes.object,
   onLongPress: PropTypes.func,
   renderMessageImage: PropTypes.func,
+  renderMessageVideo: PropTypes.func,
   renderMessageText: PropTypes.func,
   renderCustomView: PropTypes.func,
   renderTime: PropTypes.func,

src/GiftedChat.js

@@ -533,6 +533,7 @@ GiftedChat.defaultProps = {
   renderMessageText: null,
   renderMessageImage: null,
   imageProps: {},
+  videoProps: {},
   lightboxProps: {},
   textInputProps: {},
   listViewProps: {},
@@ -586,6 +587,7 @@ GiftedChat.propTypes = {
   renderMessageText: PropTypes.func,
   renderMessageImage: PropTypes.func,
   imageProps: PropTypes.object,
+  videoProps: PropTypes.object,
   lightboxProps: PropTypes.object,
   renderCustomView: PropTypes.func,
   renderDay: PropTypes.func,

src/MessageVideo.js

@@ -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,
+};