Merge pull request #1426 from GetStream/develop

Next release

Author: vanGalilea

.github/workflows/check-pr.yml

@@ -1,4 +1,4 @@
-name: Lint & Unit Tests
+name: Lint, Unit Tests, and Code Analysis
 
 on:
   pull_request:
@@ -13,6 +13,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+        with:
+            # Disabling shallow clone is recommended for improving relevancy of reporting
+            fetch-depth: 0
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
@@ -25,3 +28,16 @@ jobs:
         run: yarn lerna-workspaces run lint && cd docusaurus && npx prettier --check '**/*.mdx'
       - name: Test
         run: yarn test:unit
+      - name: SonarCloud Scan
+        uses: sonarsource/sonarcloud-github-action@master
+        with:
+          args: >
+            -Dsonar.organization=getstream
+            -Dsonar.projectKey=GetStream_stream-chat-react-native
+            -Dsonar.javascript.lcov.reportPaths=./package/coverage/lcov.info
+            -Dsonar.sources=package/src/
+            -Dsonar.test.exclusions=**/__tests__/**
+            -Dsonar.verbose=true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

README.md

@@ -11,6 +11,7 @@
 [![NPM](https://img.shields.io/npm/v/stream-chat-react-native.svg)](https://www.npmjs.com/package/stream-chat-react-native)
 [![Build Status](https://github.com/GetStream/stream-chat-react-native/workflows/test/badge.svg?branch=main)](https://github.com/GetStream/stream-chat-react-native/actions)
 [![Component Reference](https://img.shields.io/badge/docs-component%20reference-blue.svg)](https://getstream.io/chat/docs/sdk/reactnative)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=GetStream_stream-chat-react-native&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=GetStream_stream-chat-react-native)
 
 <img align="right" src="https://getstream.imgix.net/images/ios-chat-tutorial/[email protected]?auto=format,enhance" width="50%" />
 

docusaurus/docs/reactnative/basics/getting_started.mdx

@@ -16,7 +16,7 @@ This should be considered a primer before delving into the UI and Core Component
 
 Your [environment should be setup](https://reactnative.dev/docs/environment-setup) and a project created prior to beginning the installation.
 
-### Add dependencies
+### Add Required dependencies
 
 Install the required packages in your React Native project.
 
@@ -60,6 +60,7 @@ Most if not all of the required packages now support auto-linking so setup shoul
 - [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context)
 - [`react-native-share`](https://github.com/react-native-share/react-native-share)
 - [`react-native-svg`](https://github.com/react-native-svg/react-native-svg)
+- [`react-native-video`](https://github.com/react-native-video/react-native-video)
 
 <Tabs
   defaultValue='yarn'
@@ -71,14 +72,14 @@ Most if not all of the required packages now support auto-linking so setup shoul
 <TabItem value='yarn'>
 
 ```bash
-yarn add @react-native-community/cameraroll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-safe-area-context react-native-share react-native-svg
+yarn add @react-native-community/cameraroll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-safe-area-context react-native-share react-native-svg react-native-video
 ```
 
 </TabItem>
 <TabItem value='npm'>
 
 ```bash
-npm install @react-native-community/cameraroll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-safe-area-context react-native-share react-native-svg
+npm install @react-native-community/cameraroll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated react-native-safe-area-context react-native-share react-native-svg react-native-video
 ```
 
 </TabItem>
@@ -157,6 +158,15 @@ If you are planning to use file picker functionality, make sure you enable iClou
 
 :::
 
+### Add Optional Dependencies
+
+- `react-native-video` - [additional installation steps](https://github.com/react-native-video/react-native-video/blob/master/API.md#installation)
+
+  > Available in stream-chat-react-native >= v4.7.0
+
+  Installing this package allows you to play the video files/attachments in the chat. Otherwise by default, video files will be opened in default
+  browser of the device.
+
 ### AndroidX Support
 
 > AndroidX is a major step forward in the Android ecosystem, and the old support library artifacts are being deprecated.
@@ -170,9 +180,67 @@ But an awesome tool named [jetifier](https://github.com/mikehardy/jetifier) is q
 
 ## Expo Installation
 
-Stream Chat for React Native is set up for parity on Expo, expo requires a different set of dependencies than bare React Native, in your project directory run:
+Stream Chat for React Native is set up for parity on Expo, expo requires a different set of dependencies than bare React Native, in your project directory run.
+
+### Add Required Dependencies
 
 ```bash
 expo install stream-chat-expo
-expo install @react-native-community/netinfo expo-document-picker expo-file-system expo-haptics expo-image-manipulator expo-image-picker expo-media-library expo-sharing react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg
+expo install @react-native-community/netinfo expo-document-picker expo-file-system expo-haptics expo-image-manipulator expo-image-picker expo-media-library expo-sharing react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg expo-av
 ```
+
+### Additional Steps
+
+For some of the packages listed below, there are additional steps required to setup the package:
+
+- `react-native-reanimated` - [additional installation steps](https://docs.expo.dev/versions/latest/sdk/reanimated/#installation)
+
+  Add Reanimated's babel plugin to your babel.config.js:
+
+  ```js
+    module.exports = {
+        ...
+        plugins: [
+            ...
+            'react-native-reanimated/plugin',
+        ],
+    };
+  ```
+
+- `react-native-gesture-handler` - [additional installation steps](https://docs.expo.dev/versions/latest/sdk/gesture-handler/#api)
+
+  RNGH requires the package to be imported at the **top of the entry file** before anything else, this is usually your `App.js` or `index.js` file.
+
+  ```tsx
+  import 'react-native-gesture-handler';
+  import { AppRegistry } from 'react-native';
+
+  import App from './App';
+  import { name as appName } from './app.json';
+
+  AppRegistry.registerComponent(appName, () => App);
+  ```
+
+  Also wrap your entry point with `<GestureHandlerRootView>` or `gestureHandlerRootHO`
+
+  ```jsx
+  import { GestureHandlerRootView } from 'react-native-gesture-handler';
+  import { OverlayProvider } from 'stream-chat-react-native';
+
+  export default function App() {
+    return (
+      <GestureHandlerRootView>
+        <OverlayProvider>{/* Your app code goes here */}</OverlayProvider>
+      </GestureHandlerRootView>
+    );
+  }
+  ```
+
+### Add Optional Dependencies
+
+- `expo-av` - [additional installation steps](https://docs.expo.dev/versions/v45.0.0/sdk/video/)
+
+  > Available in stream-chat-expo >= v4.7.0
+
+  Installing this package allows you to play the video files/attachments in the chat. Otherwise by default, video files will be opened in default
+  browser of the device.

docusaurus/docs/reactnative/common-content/contexts/message-context/videos.mdx

@@ -0,0 +1,9 @@
+Array of `video` file attachments.
+
+```tsx
+const videos = message.attachments.filter(a => a.type === 'video' && !a.og_scrape_url);
+```
+
+| Type  |
+| ----- |
+| array |

docusaurus/docs/reactnative/common-content/core-components/channel/props/on_press_message.mdx

@@ -22,13 +22,20 @@ For example:
 
 ```tsx
     <Channel
-    onPressMessage={({ additionalInfo, defaultHandler, emitter }) => {
-        if (emitter === 'textMention') {
-          console.log(additionalInfo?.user);
-          return;
-        }
-        defaultHandler?.();
-    }}
+      onPressMessage={({ additionalInfo, defaultHandler, emitter }) => {
+
+          if (emitter === 'textMention') {
+            console.log(additionalInfo?.user);
+            return;
+          }
+
+          if (emitter === 'card' || emitter === 'textLink') {
+            console.log(additionalInfo?.url);
+            return;
+          }
+
+          defaultHandler?.();
+      }}
     >
 ```
 

docusaurus/docs/reactnative/common-content/core-components/channel/props/video_thumbnail.mdx

@@ -0,0 +1,5 @@
+Component to render the video thumbnail for video attachments in MessageList.
+
+| Type      | Default                                                           |
+| --------- | ----------------------------------------------------------------- |
+| component | [`VideoThumbnail`](../../../../ui-components/video_thumbnail.mdx) |

docusaurus/docs/reactnative/contexts/message_context.mdx

@@ -11,6 +11,7 @@ import GroupStyles from '../common-content/contexts/message-context/group_styles
 import HandleAction from '../common-content/contexts/message-context/handle_action.mdx';
 import HasReactions from '../common-content/contexts/message-context/has_reactions.mdx';
 import Images from '../common-content/contexts/message-context/images.mdx';
+import Videos from '../common-content/contexts/message-context/videos.mdx';
 import IsMyMessage from '../common-content/contexts/message-context/is_my_message.mdx';
 import LastGroupMessage from '../common-content/contexts/message-context/last_group_message.mdx';
 import MessageContentOrder from '../common-content/contexts/message-context/message_content_order.mdx';
@@ -223,6 +224,10 @@ Most recent message id in the message list.
 
 <ThreadList />
 
+### videos
+
+<Videos />
+
 <!-- ### goToMessage -->
 
 <!-- ### preventPress -->

docusaurus/docs/reactnative/contexts/messages_context.mdx

@@ -66,6 +66,7 @@ import SupportedReactions from '../common-content/core-components/channel/props/
 import TypingIndicator from '../common-content/core-components/channel/props/typing_indicator.mdx';
 import TypingIndicatorContainer from '../common-content/core-components/channel/props/typing_indicator_container.mdx';
 import UrlPreview from '../common-content/core-components/channel/props/url_preview.mdx';
+import VideoThumbnail from '../common-content/core-components/channel/props/video_thumbnail.mdx';
 
 ## Value
 
@@ -384,3 +385,7 @@ Upserts a given message in local channel state. Please note that this function d
 ### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#urlpreview)_ props</div> UrlPreview {#urlpreview}
 
 <UrlPreview />
+
+### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#videothumbnail)_ props</div> VideoThumbnail {#videoThumbnail}
+
+<VideoThumbnail />

docusaurus/docs/reactnative/ui-components/gallery.mdx

@@ -20,11 +20,13 @@ import OnPressIn from '../common-content/contexts/message-context/on_press_in.md
 import OnlyEmojis from '../common-content/contexts/message-context/only_emojis.mdx';
 import OtherAttachments from '../common-content/contexts/message-context/other_attachments.mdx';
 import ThreadList from '../common-content/contexts/message-context/thread_list.mdx';
+import Videos from '../common-content/contexts/message-context/videos.mdx';
 
 import SetOverlay from '../common-content/contexts/overlay-context/set_overlay.mdx';
 
 import AdditionalTouchableProps from '../common-content/core-components/channel/props/additional_touchable_props.mdx';
 import LegacyImageViewerSwipeBehaviour from '../common-content/core-components/channel/props/legacy_image_viewer_swipe_behaviour.mdx';
+import VideoThumbnail from '../common-content/core-components/channel/props/video_thumbnail.mdx';
 
 Component to render image attachments within the [`MessageList`](./message_list.mdx).
 
@@ -119,3 +121,11 @@ If true, onPress handler will be disabled.
 ### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#threadlist)_</div> threadList {#threadlist}
 
 <ThreadList />
+
+### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#videos)_</div> videos {#videos}
+
+<Videos />
+
+### <div class="label description">_overrides the value from [MessageContext](../contexts/messages_context.mdx#videothumbnail)_</div> VideoThumbnail {#videoThumbnail}
+
+<VideoThumbnail />

docusaurus/docs/reactnative/ui-components/video_thumbnail.mdx

@@ -0,0 +1,6 @@
+---
+id: video-thumbnail
+title: Video Thumbnail
+---
+
+`VideoThumbnail` is a default UI component for rendering video thumbnail for video attachments within `MessageList`. This component doesn't accept any props.