Merge pull request #1439 from GetStream/khushal87-issue-1236

feat: replace static video thumbnails with actual thumbnails

Author: vanGalilea

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

@@ -3,4 +3,14 @@ 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.
+`VideoThumbnail` is a default UI component for rendering video thumbnail for video attachments within `MessageList`.
+
+## Props
+
+### thumb_url
+
+The thumbnail URL to be displayed for the video.
+
+| Type   |
+| ------ |
+| string |

examples/ExpoMessaging/yarn.lock

@@ -1682,6 +1682,27 @@
     xcode "^3.0.1"
     xml2js "0.4.23"
 
+"@expo/config-plugins@^4.0.14":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-4.1.5.tgz#9d357d2cda9c095e511b51583ede8a3b76174068"
+  integrity sha512-RVvU40RtZt12HavuDAe+LDIq9lHj7sheOfMEHdmpJ/uTA8pgvkbc56XF6JHQD+yRr6+uhhb+JnAasGq49dsQbw==
+  dependencies:
+    "@expo/config-types" "^45.0.0"
+    "@expo/json-file" "8.2.36"
+    "@expo/plist" "0.0.18"
+    "@expo/sdk-runtime-versions" "^1.0.0"
+    "@react-native/normalize-color" "^2.0.0"
+    chalk "^4.1.2"
+    debug "^4.3.1"
+    find-up "~5.0.0"
+    getenv "^1.0.0"
+    glob "7.1.6"
+    resolve-from "^5.0.0"
+    semver "^7.3.5"
+    slash "^3.0.0"
+    xcode "^3.0.1"
+    xml2js "0.4.23"
+
 "@expo/config-types@^43.0.1":
   version "43.0.1"
   resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-43.0.1.tgz#3e047dccb371741a540980eaff26fb0c95039c30"
@@ -1692,6 +1713,11 @@
   resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-44.0.0.tgz#d3480fe2c99f9e895dae4ebba58b74ed72d03e26"
   integrity sha512-d+gpdKOAhqaD5RmcMzGgKzNtvE1w+GCqpFQNSXLliYlXjj+Tv0eL8EPeAdPtvke0vowpPFwd5McXLA90dgY6Jg==
 
+"@expo/config-types@^45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-45.0.0.tgz#963c2fdce8fbcbd003758b92ed8a25375f437ef6"
+  integrity sha512-/QGhhLWyaGautgEyU50UJr5YqKJix5t77ePTwreOVAhmZH+ff3nrrtYTTnccx+qF08ZNQmfAyYMCD3rQfzpiJA==
+
 "@expo/[email protected]", "@expo/config@^6.0.6":
   version "6.0.19"
   resolved "https://registry.yarnpkg.com/@expo/config/-/config-6.0.19.tgz#26a7f7ffb6419cc6e6d4205b3c7764aa9ecb551a"
@@ -1775,6 +1801,15 @@
     json5 "^1.0.1"
     write-file-atomic "^2.3.0"
 
+"@expo/[email protected]":
+  version "8.2.36"
+  resolved "https://registry.yarnpkg.com/@expo/json-file/-/json-file-8.2.36.tgz#62a505cb7f30a34d097386476794680a3f7385ff"
+  integrity sha512-tOZfTiIFA5KmMpdW9KF7bc6CFiGjb0xnbieJhTGlHrLL+ps2G0OkqmuZ3pFEXBOMnJYUVpnSy++52LFxvpa5ZQ==
+  dependencies:
+    "@babel/code-frame" "~7.10.4"
+    json5 "^1.0.1"
+    write-file-atomic "^2.3.0"
+
 "@expo/metro-config@~0.2.6":
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/@expo/metro-config/-/metro-config-0.2.8.tgz#c0fd56723e2fb9bb352e788e8f8fe0e218aaf663"
@@ -1804,6 +1839,15 @@
     base64-js "^1.2.3"
     xmlbuilder "^14.0.0"
 
+"@expo/[email protected]":
+  version "0.0.18"
+  resolved "https://registry.yarnpkg.com/@expo/plist/-/plist-0.0.18.tgz#9abcde78df703a88f6d9fa1a557ee2f045d178b0"
+  integrity sha512-+48gRqUiz65R21CZ/IXa7RNBXgAI/uPSdvJqoN9x1hfL44DNbUoWHgHiEXTx7XelcATpDwNTz6sHLfy0iNqf+w==
+  dependencies:
+    "@xmldom/xmldom" "~0.7.0"
+    base64-js "^1.2.3"
+    xmlbuilder "^14.0.0"
+
 "@expo/prebuild-config@^3.0.15":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@expo/prebuild-config/-/prebuild-config-3.1.0.tgz#9fa10f12745ecaa6d3d4957ba97142edb8747a85"
@@ -3478,6 +3522,13 @@ expo-asset@~8.4.6:
     path-browserify "^1.0.0"
     url-parse "^1.4.4"
 
+expo-av@~10.2.0:
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/expo-av/-/expo-av-10.2.1.tgz#c08bce464d673d0e90c68cac082bfb75a9437f25"
+  integrity sha512-thrkHVg4HVn8L+jHKVnXYd4TLkJQblFE8QXd3d1hwrYG63gehQT2nK4DM0Frl50EcdV8YN9XjhwHobtK5oMc9A==
+  dependencies:
+    "@expo/config-plugins" "^4.0.2"
+
 expo-blur@~11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/expo-blur/-/expo-blur-11.0.0.tgz#3542afed5c0037554657d98c31a5933dd78098dd"
@@ -6660,6 +6711,21 @@ [email protected]:
     jsonwebtoken "^8.5.1"
     ws "^7.4.4"
 
+[email protected]:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-6.7.0.tgz#1add1e612f0009f9e7a69d35f2a2fae1296d85ef"
+  integrity sha512-usH/kh0ZjbjOP8TTlsbXS53UZRUmwP0r1dOYf0jrQg3HPfwG51iTkrXGNlzPF9ueNXkPB8ObSm7bcdVRoo+4bg==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@types/jsonwebtoken" "^8.5.6"
+    "@types/ws" "^7.4.0"
+    axios "^0.22.0"
+    base64-js "^1.5.1"
+    form-data "^4.0.0"
+    isomorphic-ws "^4.0.1"
+    jsonwebtoken "^8.5.1"
+    ws "^7.4.4"
+
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"

examples/SampleApp/yarn.lock

@@ -7433,10 +7433,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
   integrity sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ=
 
-stream-chat-react-native-core@4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-4.3.1.tgz#bc53a044c45b60f6bd3feb425e70100d077cc064"
-  integrity sha512-2DZO89EyDtXtmc5MhivD1kOOU6aklK/rgZVvo4RZ15419VlpVFqMjswvFAcF41z2ZJujP86cSSKg5YMhNy7uZw==
+stream-chat-react-native-core@4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-4.7.0.tgz#2ac5fe04f8b57e70b5832feca7e5843554aa9944"
+  integrity sha512-6dIHzmoIxNaA9BTxV6mjjfSSUkivVe8Rv8BkNAsyh0u6fhQP5K7aBw+bdhDZ+w/bDjQp/Col0j1UPjNVkh2TWw==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.1.5"
@@ -7475,6 +7475,21 @@ [email protected]:
     jsonwebtoken "^8.5.1"
     ws "^7.4.4"
 
+[email protected]:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-6.7.0.tgz#1add1e612f0009f9e7a69d35f2a2fae1296d85ef"
+  integrity sha512-usH/kh0ZjbjOP8TTlsbXS53UZRUmwP0r1dOYf0jrQg3HPfwG51iTkrXGNlzPF9ueNXkPB8ObSm7bcdVRoo+4bg==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@types/jsonwebtoken" "^8.5.6"
+    "@types/ws" "^7.4.0"
+    axios "^0.22.0"
+    base64-js "^1.5.1"
+    form-data "^4.0.0"
+    isomorphic-ws "^4.0.1"
+    jsonwebtoken "^8.5.1"
+    ws "^7.4.4"
+
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"

examples/TypeScriptMessaging/yarn.lock

@@ -6944,6 +6944,21 @@ [email protected]:
     jsonwebtoken "^8.5.1"
     ws "^7.4.4"
 
+[email protected]:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-6.7.0.tgz#1add1e612f0009f9e7a69d35f2a2fae1296d85ef"
+  integrity sha512-usH/kh0ZjbjOP8TTlsbXS53UZRUmwP0r1dOYf0jrQg3HPfwG51iTkrXGNlzPF9ueNXkPB8ObSm7bcdVRoo+4bg==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@types/jsonwebtoken" "^8.5.6"
+    "@types/ws" "^7.4.0"
+    axios "^0.22.0"
+    base64-js "^1.5.1"
+    form-data "^4.0.0"
+    isomorphic-ws "^4.0.1"
+    jsonwebtoken "^8.5.1"
+    ws "^7.4.4"
+
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"

package/package.json

@@ -80,33 +80,34 @@
     "react-art": "^17.0.2",
     "react-native-markdown-package": "1.8.1",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "6.2.0"
+    "stream-chat": "6.7.0"
   },
   "peerDependencies": {
     "react-native-svg": "^12.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.17",
     "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5",
     "@babel/plugin-proposal-object-rest-spread": "7.13.8",
     "@babel/plugin-transform-runtime": "7.13.10",
     "@babel/polyfill": "7.12.1",
     "@babel/preset-env": "7.13.12",
     "@babel/preset-typescript": "7.13.0",
+    "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "2.0.0",
     "@react-native-community/eslint-plugin": "1.1.0",
     "@react-native-community/netinfo": "6.0.0",
     "@testing-library/jest-native": "4.0.4",
-    "@testing-library/react-native": "9.0.0",
     "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/react-native": "9.0.0",
     "@types/eslint": "7.2.10",
     "@types/jest": "26.0.23",
     "@types/lodash": "4.14.169",
     "@types/mime-types": "2.1.0",
     "@types/react": "17.0.5",
     "@types/react-native": "0.67.3",
     "@types/react-test-renderer": "17.0.1",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "babel-eslint": "10.1.0",

package/src/components/Attachment/Gallery.tsx

@@ -212,7 +212,7 @@ const GalleryWithContext = <
             ]}
             testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}`}
           >
-            {rows.map(({ height, resizeMode, type, url, width }, rowIndex) => {
+            {rows.map(({ height, resizeMode, thumb_url, type, url, width }, rowIndex) => {
               const openImageViewer = () => {
                 if (!legacyImageViewerSwipeBehaviour && message) {
                   // Added if-else to keep the logic readable, instead of DRY.
@@ -307,6 +307,7 @@ const GalleryWithContext = <
                           width: width - 1,
                         },
                       ]}
+                      thumb_url={thumb_url}
                     />
                   ) : (
                     <View style={styles.imageContainerStyle}>

package/src/components/Attachment/VideoThumbnail.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View, ViewProps } from 'react-native';
+import { ImageBackground, StyleSheet, View, ViewProps } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Play } from '../../icons';
@@ -24,7 +24,9 @@ const styles = StyleSheet.create({
   },
 });
 
-export type VideoThumbnailProps = ViewProps;
+export type VideoThumbnailProps = ViewProps & {
+  thumb_url?: string;
+};
 
 export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
   const {
@@ -34,12 +36,17 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
       },
     },
   } = useTheme();
-  const { style, ...rest } = props;
+  const { style, thumb_url, ...rest } = props;
   return (
-    <View {...rest} style={[styles.container, container, style]}>
+    <ImageBackground
+      accessibilityLabel='video-thumbnail'
+      source={{ uri: thumb_url }}
+      {...rest}
+      style={[styles.container, container, style]}
+    >
       <View style={[styles.roundedView, roundedView]}>
         <Play height={24} pathFill={'#000'} width={24} />
       </View>
-    </View>
+    </ImageBackground>
   );
 };

package/src/components/Attachment/__tests__/Attachment.test.js

@@ -11,8 +11,10 @@ import {
   generateAudioAttachment,
   generateFileAttachment,
   generateImageAttachment,
+  generateVideoAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
+import * as NativeUtils from '../../../native';
 
 import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
@@ -47,6 +49,16 @@ describe('Attachment', () => {
     });
   });
 
+  it('should render File component for "video" type attachment', async () => {
+    jest.spyOn(NativeUtils, 'isVideoPackageAvailable').mockImplementation(jest.fn(() => false));
+    const attachment = generateVideoAttachment();
+    const { getByTestId } = render(getAttachmentComponent({ attachment }));
+
+    await waitFor(() => {
+      expect(getByTestId('file-attachment')).toBeTruthy();
+    });
+  });
+
   it('should render File component for "file" type attachment', async () => {
     const attachment = generateFileAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));

package/src/components/Attachment/__tests__/Gallery.test.js

@@ -11,12 +11,16 @@ import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvide
 
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import { generateImageAttachment } from '../../../mock-builders/generator/attachment';
+import {
+  generateImageAttachment,
+  generateVideoAttachment,
+} from '../../../mock-builders/generator/attachment';
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import * as NativeUtils from '../../../native';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageList } from '../../MessageList/MessageList';
@@ -75,6 +79,24 @@ describe('Gallery', () => {
     });
   });
 
+  it('should render one image and one video attachment', async () => {
+    jest.spyOn(NativeUtils, 'isVideoPackageAvailable').mockImplementation(jest.fn(() => true));
+    const attachment1 = generateImageAttachment({
+      original_height: 600,
+      original_width: 400,
+    });
+    const attachment2 = generateVideoAttachment();
+    const component = await getComponent([attachment1, attachment2]);
+    const { getAllByA11yLabel, queryAllByTestId } = render(component);
+
+    await waitFor(() => {
+      expect(queryAllByTestId('gallery-row-0').length).toBe(1);
+
+      expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
+      expect(getAllByA11yLabel('video-thumbnail').length).toBe(1);
+    });
+  });
+
   it('should render portrait and landscape image in two rows', async () => {
     const attachment1 = generateImageAttachment({
       original_height: 600,

package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts

@@ -36,6 +36,7 @@ export function buildThumbnail<
     resizeMode: resizeMode
       ? resizeMode
       : ((image.original_height && image.original_width ? 'contain' : 'cover') as ImageResizeMode),
+    thumb_url: image.thumb_url,
     type: image.type,
     url: shouldResize
       ? getResizedImageUrl({